VUE文档记录

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)=>{
    
});