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.vuexTestelement-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.在组件中，需要传动态参数时，可以如上例子
: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中，传递该参数：
:id="id" :order-info="orderInfo"> 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>