vue-day08

vue-day08

1-vue-cli脚手架项目中实现跨域请求

1.1-跨域请求数据解决方案

• jsonp
• 在服务端设置特定的响应头
• 服务器代理

1.2-配置代理服务器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dmRYF5x3-1610335442579)(media\代理跨域原理.png)]

1. 打开/config/index.js配置文件, 做如下修改(13行左右)

   proxyTable: {
         //   /api/brandList    => http://localhost:3333/api/brandList
         '/api':{
             // 指定真实数据接口服务器的地址
             target:'http://localhost:3333',
             // 重写路径
             pathRewrite:{
               '/api':''
             }
         }
       },
   

   ​

2. 重启开发服务器

   npm run dev
   

2-vuex状态管理工具

2.1-vuex的介绍

• vue官方推出的一个vue定制版的集中式状态管理工具

2.2-vuex的安装

npm i vuex -S

2.3-vuex的核心组成部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XJZC7TX8-1610335442581)(media\vuex.png)]

• state: 存储数据

  {
      state:{
          brandList:[]
      }
  }
  

• mutations: 存储操作数据的同步方法

  {
      mutations:{
         // state: 系统自动注, 存储数据的对象state
          brandInit(state,list){
              state.brandList=list;
          },  
      }
  }
  

• actions: 存储的是请求数据的异步方法

  {
      actions:{
          // context:上下文对象, 系统自动注入, 包含commit(),dispatch()方法
          getBrandListAction(context){
              axios.get('/brandList').then(res=>{
                  if(res.code===200){
                      // 调用commit方法, 实现更新数据
                      context.commit('brandInit',res.list);
                  }
              })
          },
      }
  }
  

• getters: 类似于组件中的计算属性

  getters:{
       // state: 数据对象, 系统自动注入
      brandCount(state){
          return state.brandList.length;
      } 
  }
  

• modules: 按功能将数据和数据操作方法分类

2.4-vuex的使用流程

1. 导入

   // 1-导入
   import Vue from 'vue';
   import Vuex from 'vuex'
   

2. 注册

   // 2-注册
   Vue.use(Vuex);
   

3. 创建数据存储对象

   // 3-创建数据存储对象
   const store=new  Vuex.Store({
       // 数据存储对象
       state:{
           brandList:[
               {
                   id:2,
                   name:'奔驰',
                   ctime:Date.now()
               },
               {
                   id:1,
                   name:'奥迪',
                   ctime:Date.now()
               }
           ]
       },
        // 操作数据的同步方法
       mutations:{
           // 品牌列表初始化
           brandInit(state,list){
               state.brandList=list;
           },
           // 品牌添加
           // state: 系统自动注入, 接收到的就是state状态数据对象
           // obj: 额外参数, 品牌对象={name,id}
           brandAdd(state,row){
               // 构造品牌对象
               // const id=state.brandList.length>0?state.brandList[0].id+1:1;
               const obj={
                   id:row.id,
                   name:row.name,
                   ctime:Date.now()
               }
               // 将品牌对象插入品牌数组的开头
               state.brandList.unshift(obj)
           },
           // 品牌删除
           brandDel(state,id){
               // 1-通过id查找索引
               const index=state.brandList.findIndex(item=>item.id===id);
               // 2- 根据索引删除数组元素
               state.brandList.splice(index,1);
           },
           // obj={id,name}
           brandUpdate(state,obj){
               // 1-通过id查找索引
               const index=state.brandList.findIndex(item=>item.id===obj.id);
               // 通过索引修改数组元素
               state.brandList[index].name=obj.name;
               state.brandList[index].ctime=Date.now();
           }
       },
       // 请求数据接口的异步方法
       actions:{
           // 获取品牌列表
           // context:上下文对象, 系统自动注入, 包含commit(),dispatch()方法
           getBrandListAction(context){
               axios.get('/brandList').then(res=>{
                   if(res.code===200){
                       // 调用commit方法, 实现更新数据
                       context.commit('brandInit',res.list);
                        // 不同子模块中action交叉调用
                       // {root:true}: 告诉系统,当前action是其他模块的
                       context.dispatch('news/getNewsListAction',res,{root:true});
                   }
               })
           },
           // 删除品牌
           delBrandAction({commit,dispatch},id){
               axios.get(`/brandDel/${id}`).then(res=>{
                   if(res.code===200){
                       // 通过调用同步方法删除页面中的品牌数据
                       // commit('brandDel',id)
                       dispatch('getBrandListAction')
                   }
               })
           },
           // 品牌添加
           addBrandAction({commit},name){
               axios.post('/brandAdd',{name}).then(res=>{
                   if(res.code===200){
                       // 通过commit调用对应的同步mutation方法
                       commit('brandAdd',{name:name,id:res.id});
                   }
               })
           },
           // 品牌更新
           // row={id,name}
           updateBrandAction({commit},row){
               axios.post(`/brandUpdate/${row.id}`,{name:row.name}).then(res=>{
                   if(res.code===200){
                       // 通过commit调用对应的同步方法
                       commit('brandUpdate',row);
                   }
               })
           }
       },
       // 类似于组件内部计算属性
       getters:{
           // state: 数据对象, 系统自动注入
          brandCount(state){
               return state.brandList.length;
          } 
       }
   });
   export default store;
   

4. 挂载数据存储对象

   main.js

   import store from './store'
   new Vue({
     // 指定组件编译之后的挂载节点
     el: '#app',
     // 注册私有组件
     // components: { App },
     // 模板
     template: '<App/>',
     // 挂载数据存储对象
     store
   })
   

2.5-vuex辅助方法

• mapState(): 将vuex中的state数据映射到组件中, 方便调用

  • 启用子模块之前

    import {mapState} from 'vuex';
    export default{
       computed:{
           ...mapState(['brandList'])
       }	 	
    }
    
    

  • 启用子模块之后

    import {mapState} from 'vuex';
    export default{
       computed:{
           // brand是子模块名称
           ...mapState({brandList:state=>state.brand.brandList})
       }	 	
    }
    

• mapGetters(): 将vuex中的getters方法映射到组件中

  • 启用子模块之前

    import {mapGetters} from 'vuex';
    export default{
       computed:{
           ...mapGetters(['brandCount'])
       }	 	
    }
    
    

  • 启用子模块之后

    import {mapGetters} from 'vuex';
    export default{
       computed:{
           // brand是子模块名称
           ...mapGetters('brand',['brandCount'])
       }	 	
    }
    

• mapMutations(): 将vuex中的mutations同步方式映射到组件中

  • 启用子模块之前

    import {mapMutations} from 'vuex';
    export default{
       methods:{
           ...mapMutations(['brandAdd'])
       }	 	
    }
    
    

  • 启用子模块之后

    import {mapMutations} from 'vuex';
    export default{
       methods:{
           // brand是子模块名称
           ...mapMutations('brand',['brandAdd'])
       }	 	
    }
    
    

• mapActions(): 将vuex中的异步actions方法映射到组件中

  • 启用子模块之前

    import {mapActions} from 'vuex';
    export default{
       methods:{
           ...mapActions(['getBrandListAction'])
       }	 	
    }
    

  • 启用子模块之后

    import {mapActions} from 'vuex';
    export default{
       methods:{
           // brand是子模块名称
           ...mapActions('brand',['getBrandListAction'])
       }	 	
    }
    

2.6-模块之间交叉调用action

{
        actions:{
            // 获取品牌列表
            // context:上下文对象, 系统自动注入, 包含commit(),dispatch()方法
            getBrandListAction(context){
                axios.get('/brandList').then(res=>{
                    if(res.code===200){
                        // 调用commit方法, 实现更新数据
                        context.commit('brandInit',res.list);
                         // 不同子模块中action交叉调用
                        // {root:true}: 告诉系统,当前action是其他模块的
                        context.dispatch('news/getNewsListAction',res,{root:true});
                    }
                })
            },
        }
}

3-vue-devtools调试工具

1. 在线安装

2. 离线安装

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-upR8dhPv-1610335442584)(media\vue-devtools-01.jpg)]

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LvDWW57r-1610335442590)(media\vue-devtools-02.jpg)]

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T3OzMind-1610335442596)(media\vee-devtools-03.jpg)]

4-element-ui组件库

4.1-安装

npm i element-ui -S

4.2-导入

1. 全部导入

   /main.js

   import Vue from 'vue';
   // 1-导入element-ui组件库核心文件
   import ElementUI from 'element-ui';
   // 2-导入element-ui组件库的样式表
   import 'element-ui/lib/theme-chalk/index.css';
   import App from './App.vue';
   // 3-注册
   Vue.use(ElementUI);
   
   new Vue({
     el: '#app',
     // 渲染方法: h系统自动注入的一个形参, 编译组件
     render: h => h(App)
   });
   

5-在线文档

• vuex在线文档

• element-ui组件库

‘vue’;
// 1-导入element-ui组件库核心文件
import ElementUI from ‘element-ui’;
// 2-导入element-ui组件库的样式表
import ‘element-ui/lib/theme-chalk/index.css’;
import App from ‘./App.vue’;
// 3-注册
Vue.use(ElementUI);

new Vue({
el: ‘#app’,
// 渲染方法: h系统自动注入的一个形参, 编译组件
render: h => h(App)
});

## 5-在线文档

- [vuex在线文档](https://vuex.vuejs.org/zh/)

- [element-ui组件库](https://element.eleme.cn/)