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: , pageSize:  }).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[].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: , pageSize:  }).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.在元件中，需要傳動态參數時，可以如上例子

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: ‘‘ //城會玩明細id
        }
      }
    })
           

5.定義data中的id，然後子元件中用props傳遞參數

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

6.router-view中，傳遞該參數：

element ui的el-input如何監聽Enter鍵

• @keyup.enter.native

<el-form-item label="租戶名稱：">
   <el-input v-model="Name" placeholder="請輸入名稱" @keyup.enter.native="search()"></el-input>
</el-form-item>