vue框架:

路飞项目
1.vue框架:
    前台html+css+js框架,是不同于js与jq的数据框架
    指令| 实例成员| vue项目

2.drf框架:
    django的插件,完成前后台分离项目后台接口编写的框架
    序列化组件| 三大认证组件|
    分页,筛选,过滤,排序|请求,解析,响应

3.路飞项目:
    前台vue完成,后台由drf框架完成前后台分离项目
    git| 短信认证| celery异步任务| 项目上线
-----------------------------------------------------------------------------------
js对象(字典)补充:
let b = 20;
let dic = {
    a:10,   //字典本身就是对象,key都是字符串形式可以省略引号
    b(b:b)        // 值为变量时,且与key同名,可以简写
    };
console.log(dic)

vue:
    1.what是:用于构建用户界面的渐进式JavaScript框架(选择性控制)

    2.why.学:
        1.是三大主流框架之一: Angular  React  Vue
        2.有先进的前端设计模式: MVVM
        3.可以完全脱离服务器端,以前端代码复用的方式渲染整个页面,组件化开发
        4.结合了其他框架的优点,轻量级,中文API,数据驱动,双向绑定,单页面应用
        5.虚拟DOM ***
         缺点:没其他两个框架完善,在趋于完善中
    3.vue环境: 本地导入,cdn导入

        注: 渐进式框架:根据需求,可以决定vue框架控制项目的具体方位,可以为一个标签,也可以为一个页面,甚至可以为一个项目
            new Vue({el:'.xxx'})

    4.挂载点:
        1.html页面:html与body不能作为挂载点,css3选择器语法
        2.一个vue对象挂载点之后只索引一个匹配结果,所以通常用id标识

    实例成员:
        1.实例成员,data为vue环境提供数据,数据采用字典{}形式;
        2.fiters: 过滤器函数fn(a,b)-----> {{a | fn(b)}} | {{a,b | fn}}
        3.method:事件方法
        ------------------------------------
        computed: 设置 方法属性,该方法属性在页面渲染后,绑定的方法中任意变量发生改变(都被监听),都会回调绑定的方法,
            eg: 一个变量依赖多个变量


        watch: 设置已有属性的监听事件,监听的变量改变就会回调绑定的方法啊
            eg:多个变量依赖一个变量

        props:声明组件的自定义属性
        emit: 为组建自定义事件发送数据



    指令:
        文本: {{}}  | v-text | v-html
        事件: v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)"
        属性: v-bind:stylt="myStyle" | :class="[c1,c2]" | :class="{active: isActive}"
        表单指令: v-model="变量"
        -----------------------------
        v-once:
        v-cloak: 防止页面加载 抖动
        v-show: 绑定的页面为布尔类型,隐藏时,在页面中以 display:none 渲染
        v-if|v-else-if|v-else: 前分支成立会屏蔽后分支,else分支不需要条件
        v-for: 遍历
            字符串:  v-for="(ch,index) in str"
            数组:    v-for="(ele,index) in arr"
            对象:    v-for="(value,key,index) in obj"

组件：
    1.定义：一个包含html，css，js独立的集合体，可以完成页面解析的代码复用
    2.组件分为根组件，全局组件，局部组件
        根组件：
        全局组件:
            vue.component("组件名",{实例成员萌})
        局部组件:必须在使用该组件的父组件中注册
            let 组件名 = {实例抽根烟}
    3.组件都有自己template(根组件可以省略采用挂在点),
      子组件可以复用,所以数据要做局部化处理data(){ return{} }:
      在哪个组件模板中出现的变量,就由当前组件提供变量对应 的值

    4.组件信息交互
        父传子:提供绑定自定义属性
        子传父:提供自定义事件携带




Vue 项目搭建:
    1.安装 node
        官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/
    2.换源安装cnpm
        npm install -g cnpm --registry=https://registry.npm.taobao.org
    3.安装脚手架
        cnpm install -g @vue/cli
    4.如果2或3安装出错   清除缓存处理
        npm cache clean  --force


Vue 项目创建:
    vue create 项目名;
    在pycharm中配置npm项目

项目目录


main.js:程序的入口文件
    加载vue环境
    加载插件环境: 路由,仓库,ajax,cookie,element-ui...
    加载自定义环境:全局样式(global.css),全局配置(settings.js)
    渲染根组件

.vue文件形式组件
    template标签:内部有且只有一个跟标签
    script标签: export default{},导出该局部内容
    style标签: scope属性,实现样式的组件化


项目运行生命周期:
    main.js => router.js => 链接 => 页面组件 =>替换根组件中的router-view
    标签完成页面渲染 => 通过 router-link | this.$router.push()切换路由
    (链接) => 完成渲染组件的替换 => 页面的跳转


新建页面的三步骤:
    1.创建页面组件
    2.设置组件路由
    3.设置路由跳转


组件的生命周期钩子:组件从生成到销毁整个过程的一些特殊时间节点回调的函数

this.$router:路由跳转
this.$route:路由数据(this.$route.path)



vue-router插件:****

路由跳转:
    this.$router.push('/course');
    this.$router.puth({name:course});
    this.$router.go(-1);
    this.$router.go(1);
    <router-link :to="/course">课程页</router-link>
    <router-link :to='{name:'course'}">课程页</router-link>


路由传参

    第一种:
        配置:path:'/path/:pk' =>请求: '/path/${pk} =>取值:this.$route.params.pk
    第二种:
        配置:path:'/path',name='path' =>请求:{name:'path',query={pk:值}} =>取值 this.$route.query.pk


完成跨组件传参的方式:
    1. localStarage:            永久存储数据
    2. sessionStorage:          临时存储数据(刷新页面数据不重置)
    3. cookie:                  临时或永久数据(由过期时间决定)
    4. vuex的仓库(store.js):    临时存储数据(刷新页面数据重置)

vuex仓库插件***

store.js配置文件
    export default new Vuex.Store({
        state: {
            title: '默认值'
        },
        mutations: {
            // mutations 为 state 中的属性提供setter方法
            // setter方法名随意，但是参数列表固定两个：state, newValue
            setTitle(state, newValue) {
                state.title = newValue;
            }
        },
        actions: {}
    })

在任意组件中给仓库变量赋值
    this.$store.state.title = 'newTitle'
    this.$store.commit('setTitle','newTitle')

在任意组件中取仓库变量的值
    console.log(this.$store.state.title)


vue-cookie插件:***
    安装:
        >:cnpm install vue-cookies

    main.js配置:
        第一种:
        import cookies from 'vue-cookies'      // 导入插件
        Vue.use(cookies);                    // 加载插件
        new Vue({
            // ...
            cookies,                        // 配置使用插件原型 $cookies
        }).$mount('#app');

        第二种*****
        import cookies from 'vue-cookies'    // 导入插件
        Vue.prototype.$cookies = cookies;    // 直接配置插件原型 $cookies

    使用:
        增(改): key,value,exp(过期时间)
            时间:  1s | 1m | 1h | 1y
            this.$cookies.set('token',token,'1y');

        查:key
            this.$cookies.get('token');

        删: key
            this.$cookies.remove('token')

    注: cookie一般是用来存储token的
        1.token: 安全认证的随机字符串
        2.有后台产生,存储于后台的(session表中,文件,内存缓存),存储于前台的(cookie中)
        3.服务器先生成反馈给前台(登录认证过程),
          前台提交给后台完成认证(需要登录后的请求)

        4.前后台分离项目:后台生成token,返回给前台 ==>前台自己存储,
          发送携带token请求 ==> 后台完成token校验 ==>后台得到登录用户


axios插件:****
    安装:
        cnmp install axios
    main.js配置:
        import axios from 'axios' //导入插件
        Vue.prototype.$axios = axios; 直接配置插件原型
    使用:
        this.axios({
            url:'请求接口',
            method:'get|post',
            data:{post提交的数据},
            params:{get提交的数据},
            header:{请求头}
            }).then(function(response){
                请求成功的回调函数}).catch(function(error){
                请求失败的回调函数})

    案例:
        // get请求
        this.$axios({
            url: 'http://127.0.0.1:8000/test/ajax/',
            method: 'get',
            params: {
                username: this.username
            }
        }).then(function (response) {
            console.log(response)
        }).catch(function (error) {
            console.log(error)
        });

        // post请求
        this.$axios({
            url: 'http://127.0.0.1:8000/test/ajax/',
            method: 'post',
            data: {
                username: this.username
            }
        }).then(function (response) {
            console.log(response)
        }).catch(function (error) {
            console.log(error)
        });

跨越问题(同源策略):
    后台接收到前台的请求，可以接收前台数据与请求信息，发现请求的信息不是自身服务器发来的请求，拒绝响应数据，这种情况称之为 - 跨域问题（同源策略 CORS）

    导致跨域情况有三种
     1) 端口不一致
     2) IP不一致
     3) 协议不一致

    Django如何解决 - django-cors-headers模块
     1) 安装：pip3 install django-cors-headers
     2) 注册：
    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
     3) 设置中间件：
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]
     4) 设置跨域：
    CORS_ORIGIN_ALLOW_ALL = True


element-ui插件:
    下载=>配置=>使用
    下载:
        cnpm install element-ui

    配置main.js:
        import ElementUI from 'element-ui'
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);

    使用:
        依照官网 https://element.eleme.cn/#/zh-CN/component/installation api

View Code