Vue

目录复制

Vue操作

1 端口号修改

在根目录下的package.json文件下的 "vue-cli-service serve文件后面添加--port 80
端口号修改为80后访问就不用输入端口号了。
修改前访问方式：

http://localhost:8080/index

修改后访问方式：

http://localhost/index

2 封装axios请求

1 配置baseURL

截取公共部分就行

baseURL: 'http://localhost:8081'

2 axios请求封装

用下面黑框中代码直接替换plugins中的axios.js中的内容即可
1.封装后直接用this.get(url,params,callback)或this.post(url,params,callback)调用即可，括号参数有：
url:请求地址
params:需要传递的参数
callback：回调函数
2.在请求完成后的回调函数中加了一句向控制台打印输出返回值，这句话可按需保留或删除

	// axios  发送axios请求
	_axios.request(request_config).then(response => {
		
// 控制台输出每次请求的返回值，这样就不用每次都手动敲控制台输出返回值的命令了
		console.log(response)

"use strict";

import Vue from 'vue';
import axios from "axios";
import router from '@/router/index.js'
import store from '@/store/index'

// 引入element-ui的组件
import {
	Loading,
	Message
}
from 'element-ui'

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
	baseURL: 'http://localhost:8090'
	// baseURL: process.env.baseURL || process.env.apiUrl || ""
	// timeout: 60 * 1000, // Timeout
	// withCredentials: true, // Check cross-site Access-Control
};



const _axios = axios.create(config);



_axios.interceptors.request.use(
	function(config) {
		// Do something before request is sent
		if(store.getters.GET_TOKEN){			
			config.headers['token'] = store.getters.GET_TOKEN
			
		}
		return config;
	},
	function(error) {
		// Do something with request error
		return Promise.reject(error);
	}
);

// Add a response interceptor
_axios.interceptors.response.use(
	function(response) {
		// Do something with response data
		return response;
	},
	function(error) {
		// Do something with response error
		return Promise.reject(error);
	}
);


const request = (url, method, params, callback) => {

	// 控制加载状态
	const loading = Loading.service({
		lock: true,
		text: '加载中....',
		background: 'rgba(255,255,255,0.7)'
	})


	// request_config 包括请求地址，请求方式，请求传递的参数
	// 请求传递的参数根据请求方式的不同发生改变

	const request_config = {
		url: url,
		method: method
	}
	if (method !== 'post') {
		request_config.params = params
	} else {
		const formData = new FormData()
//  如果params是数组
		for (let key in params) {
			if (params[key] instanceof Array) {
				for (let i = 0; i < params[key].length; i++) {
					formData.append(key, params[key][i])
				}
// //  如果params不是数组
			} else {
				formData.append(key, params[key])
			}
		}
		request_config.data = formData
	}



	// axios  发送axios请求
	_axios.request(request_config).then(response => {
		
// 控制台输出每次请求的返回值，这样就不用每次都手动敲控制台输出返回值的命令了
		console.log(response)
		
		if (response.data.code === 200) {
			callback(response.data)
		}else if(response.data.code === 401){
// 如果请求超时，跳转到登入界面
			Message.error(response.data.message)
			router.push('/login')
		}else{
//  500和403直接抛出异常
			Message.error(response.data.message)
		}
	}).catch(error => {
		Message.error(error.message)
	}).finally(() => {
		loading.close()
	})
}

// get请求直接回调函数
const get = (url, params, callback) => {
	request(url, 'get', params, response => {
		callback(response.obj)
	})
}


// post请求先返回消息，再回调函数
const post = (url, params, callback) => {
	request(url, 'post', params, response => {
		Message.success(response.message)
		callback(response.obj)
	})
}


// 把request放入到Vue中，这样以后用的话不用引包，直接用 this.request(url, method, params, callback)就可以调用了
Vue.prototype.request = request
Vue.prototype.get = get
Vue.prototype.post = post

3 父组件传值给子组件

1 父组件操作

:show.sync="dialog.show" 传递给子组件的值 .sync表示可以把子组件的变量的变化同步到父组件上来。
@getTableData="getTableData" 表示为传递给子组件的方法
1.<template>中的代码

<template>
		<el-dialog 
		width="450px" 
		:visible.sync="dialog.show" 
		:title="dialog.title" 
		:close-on-click-modal="false">
		
			<UserEdit 
				v-if="dialog.show" 
				:show.sync="dialog.show" 
				:id="dialog.id"
				 @getTableData="getTableData">
			</UserEdit>
			
		</el-dialog>
</template>		

2.<script>中的代码

<script>
	export default{
		data() {
			return {			
				dialog: {
					title: '添加用户',
					show: false,
					id: null
				}
			}
		},
	}	
</script>

2 子组件操作

1.props接收父组件传递的变量值
2.属性的更新this.$emit('update:show',false) 其中show表示被更新的变量 false表示show改变后的值
3.方法的调用this.$emit('getTableData')

<script>
	export default{
		
		props:{
			show:{
				type: Boolean,
				default: null
			},
			id:{
				type: Number,
				default: null
			}，
			created() {
				this.$emit('update:show',false)
				this.$emit('getTableData')
			},	
		}
	}
</script>	

4 消息确认弹框

<script>
	export default{
		methods: {
			del(id, active) {
				
// 判断弹窗的标题 ：是恢复数据还是删除数据 
				const text = active === 0 ? '确定整的要删除吗？' : '确定整的要恢复数据吗？'

// 括号中包括 ：消息确认弹框 和弹框的类型
					this.$confirm(text, {
						type: 'warning',
// 确认弹框后的动作
					}).then(() => {
// axios发送get请求 包括请求地址，参数，回调函数
						this.get('/ums-user/del', {
							id: id,
							active: active,
						}, Response => {
							this.getTableData()
						})
					})

			}

		}
		
	}
</script>		

5 绑定

1.v-bind:src 单向绑定 可用 ：代替 如:src

单项绑定值不会因为输入框输入的改变而改变

2 v-model="searchName"

当向双向绑定输入框输入值时searchName变量对应的值也会改变，当searchName的值变化时，输入框中的值也随之变化。

Vue报错

1 calc()命令无效

减号两边一定要有空格

height: calc(100% - @su-height)

2 TypeError: Cannot set property 'tableData' of undefined

		data() {
			return {
				tableData: []
			}
		},

	created() {
			this.$axios.request({
				url: '/ums-user/page',
				method: 'get',
			}).then(function(response) {
				
				console.log(response)
				this.tableData = response.data.records
			})
		}

1.原因
this.tableData = response.data.records中的this指向function(response){}函数本身，但是变量tableData没有定义在function(response){}中，所以不能用this指代。
2.解决方案
引入其它变量来代替this此处用（that），表示不是本函数内部的变量
或者用(response =>{})代替function函数

created() {

//第一处修改
			const that=this;
			this.$axios.request({
				url: '/ums-user/page',
				method: 'get',
			}).then(function(response) {
				
				console.log(response)
//第二处修改
				that.tableData = response.data.records
			})
		}