VUE文档记录
1、vue生成工程
// 安装node.js,内含npm,Node.js官网:https://nodejs.org/en/ 。
// 设置npm镜像cnpm命令行工具
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 全局安装 vue-cli
cnpm install -g vue-cli
// 先创建并进入vue项目目录
cd W:\Workspaces\git_repositories\javalsj-blog-vue
// 创建一个基于 webpack 模板的新项目
vue init webpack javalsj-blog-vue
// 先进入vue项目目录下再安装该项目的依赖
cd W:\Workspaces\git_repositories\javalsj-blog-vue\javalsj-blog-vue
// 初始化安装项目
npm install
// 运行项目
npm run dev
2、vue模拟数据Mock
a、创建模拟数据
工程/src/mock/data/user.js
const Users = [];
for (let i = 0; i < 5; i++) {
Users.push(Mock.mock({
id: Mock.Random.guid(),
name: Mock.Random.cname(),
addr: Mock.mock('@county(true)'),
'age|18-60': 1,
birth: Mock.Random.date(),
sex: Mock.Random.integer(0, 1)
}));
}
export { Users };
b、对外暴露mock
工程/src/mock/index.js
import mock from './mock';
export default mock;
c、模拟http请求
工程/src/mock/mock.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { Users } from './data/user';
let _Users = Users;
export default {
/**
* mock bootstrap
*/
bootstrap() {
let mock = new MockAdapter(axios);
// mock success request
mock.onGet('/success').reply(200, {
msg: 'success'
});
// mock error request
mock.onGet('/error').reply(500, {
msg: 'failure'
});
//获取用户列表
mock.onGet('/user/list').reply(config => {
let {name} = config.params;
let mockUsers = _Users.filter(user => {
if (name && user.name.indexOf(name) == -1) return false;
return true;
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
users: mockUsers
}]);
}, 1000);
});
});
//获取用户列表(分页)
mock.onGet('/user/listpage').reply(config => {
let {page, name} = config.params;
let mockUsers = _Users.filter(user => {
if (name && user.name.indexOf(name) == -1) return false;
return true;
});
let total = mockUsers.length;
mockUsers = mockUsers.filter((u, index) => index < 20 * page && index >= 20 * (page - 1));
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
total: total,
users: mockUsers
}]);
}, 1000);
});
});
}
};
d、在main中引用mock
//引入mock
import Mock from './mock'
//启动mock
Mock.bootstrap();
3、vue连接本地服务器调试
工程/config/index.js内dev模块内配置:proxyTable
proxyTable: {
'/hr': {
target: 'http://localhost:8080', // 接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {
'^/hr': '/hr' //本地服务器的applicationName为hr
}
}
},
4、vue生产打包
工程/config/index.js内build 模块内配置assetsPublicPath修改为:
assetsPublicPath: './',
(取相对路径,放到springboot工程/resouces/static目录下)
默认是assetsPublicPath: '/',
(绝对路径)
5、引用本地图片
//引入图片
data() {
return {
imgUrl: require('../assets/user.png'),
}
},
//使用图片
<img :src="imgUrl" />
6、使用axios 的post方法时,参数不能传递到后台
a、方法一URLSearchParams
1、在main.js里 设置配置,修改Content-Type
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = axios;
2、在组件vue里
const url ='http://****你的接口****';
var params = new URLSearchParams();
params.append('key1', 'value1'); //你要传给后台的参数值 key/value
params.append('key2', 'value2');
params.append('key3', 'value3');
this.$axios({
method: 'post',
url:url,
data:params
}).then((res)=>{
});
这样后台就收到数据了 请求成功;不过这个方法兼容性非常不好,ie浏览器完全不兼容。
b、方法二使用qs
安装qs,在 main.js里引入
import axios from 'axios';
import qs from 'qs';
Vue.prototype.$qs = qs;
在vue组件里面请求方法
let postData = this.$qs.stringify({
key1:value1,
key2:value2,
key3:value3,
});
this.$axios({
method: 'post',
url:'url',
data:postData
}).then((res)=>{
});