VueJs2.0入门--之后台管理系统（vue.js +vue-router+vuex+element-ui+axios）

步骤

• vue-cli
  
  • npm i vue-cli -g
• 安装 element-ui
  
  • npm i element-ui -S
• 安装 vuex
  
  • npm install vuex -s
• 安装 axios
  
  • npm install axios
• 安装 scss
  
  • npm install node-sass –save-dev
  • npm install sass-loader –save-dev

知识点 axios

 axios({
    url: 'platform-app/tenant/queryTenants',
    method: 'post',
    data: {
         pageNum:this.pageNum,
         pageSize:this.pageSize
    }
}).then((res)=>{
    console.log(res.data);
}).catch((err)=>{
    console.log(err)
})

axios({
    url:'platform-app/tenant/getTenant/'+this.tentaid,
    method:'get'
}).then((res)=>{
    console.log(res.data);
})

vue-cli 脚手架 中webpack配置反向代理

• config文件夹中index.js文件中
  
  • 找到proxyTable:{}进行如下配置

proxyTable: {
    '/platform-app': {
        target: 'http://10.66.0.49:80',
        changeOrigin: true,
        pathRewrite: {
            '^/platform-app': '/platform-app'
        }
    }

},

• 详细讲解：

这个参数主要是一个地址映射表，你可以通过设置将复杂的url简化，例如我们要请求的地址是api.xxxxxxxx.com/list/1，可以按照如下设置：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

这样我们在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解决跨域问题的呢？其实在上面的’list’的参数里有一个changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。增加的代码如下所示：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

vue-cli的这个设置来自于其使用的插件http-proxy-middleware

vuex具体步骤

• 安装 vuex
  
  • npm install vuex -s
• 组件中component.vue

<template>
    <div>
        {{vuexTest}}
        <el-button @click="changeValue">按钮</el-button>
    </div>
</template>
<script>
    import {mapGetters,mapActions} from 'vuex'

     computed:{
        ...mapGetters([//从store上绑定的getters中载入需要到此组件中
            'vuexTest'//在getters.js中创建一个名为msg的方法
        ])
    },
    methods:{
        ...mapActions([//从store上绑定的action中载入需要的到此组件中
            'changeValue',//在store文件夹中的actions.js中创建一个名为changeValue的方法
      ]),
    }
</script>

• 初始状态值放在rootState.js中

const state = {
    vuexTest: '', //初始值为空
}
export default state;

• actions.js
  
  • 异步逻辑应该封装在action 中
  • 重点在于commit

import axios from 'axios';
import { addTenantForTenantId, initTenant, queryTenants } from '../api/axios-api.js'

export const changeValue = ({ commit }) => {
    queryTenants({ pageNum: 1, pageSize: 10 }).then(res => {
        console.log(res.data);
        commit({
            type: 'getMsg', //vue会自动去找mutations.js中名为getMsg的方法
            vuexTest: res.data, //成功后把得到的数据通过commit传入mutations
        })
    }).catch((err) => {
        console.log(err);
    })
}

• mutations.js
  
  • 改变store中state的状态值

export const getMsg = (state, data) => {
    state.vuexTest = data.vuexTest[0].cloudType
}

• getters.js

export const vuexTest = state => state.vuexTest

element-ui 表单验证

 data(){
    let phoneValidator =(rule,value,callback)=>{
        if(!/^1[3|4|5|8|7][0-9]\d{8}$/.test(value)){
            callback(new Error('请输入正确的手机号'))
        }else{
            callback();
        }
    }
    return{
             ruleForm: {
                diaPhone:'',
            },
            rules:{
                diaPhone:[
                   {required:true,message:'请输入管理员电话',trigger:'blur'},
                    {validator:phoneValidator,trigger:"change"}
                ]
            },

export const changeValue = ({ commit }) => {
    queryTenants({ pageNum: 1, pageSize: 10 }).then(res => {
        console.log(res.data);
        commit({
            type: 'getMsg', //vue会自动去找mutations.js中名为getMsg的方法
            vuexTest: res.data, //成功后把得到的数据通过commit传入mutations
        })
    }).catch((err) => {
        console.log(err);
    })
}

vue-router 2.0 组件之间传参及获取动态参数

1.标签

<li v-for=" el in hotLins" >
    <router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">
        <img :src="el.image_list[0]">
        <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3>
        <p>{{el.address}}</p>
    </router-link>
</li>

2.在组件中，需要传动态参数时，可以如上例子

<router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">

3.query中的参数id就是要传的参数，在组件中获取的方法为：

created: function() {
    var id = this.$route.query.id;
    this.getData(id);
 }，

4.如上述，this.$route.query.id就可以获取该参数，也可以通过，this.$root.id = id;传给父组件，父组件中通过

// 根组件构造器
    var vm = Vue.extend({
      router: router,
      data: function() {
        return {
          id: ‘11484‘ //城会玩明细id
        }
      }
    })

5.定义data中的id，然后子组件中用props传递参数

props: {
        id: {
          type: String,
          required: true
        }
      },

6.router-view中，传递该参数：

<router-view :id="id" :order-info="orderInfo"></router-view>

element ui的el-input如何监听回车键

• @keyup.enter.native

<el-form-item label="租户名称：">
   <el-input v-model="Name" placeholder="请输入名称" @keyup.enter.native="search()"></el-input>
</el-form-item>