11. vue-router路由

使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。

官网：https://router.vuejs.org/zh-cn/

使用npm安装

npm install vue-router --save

需求：如下页面，点击登录或注册链接，动态加载对应组件，实现组件切换

1、创建登录组件Login.vue

<template>
  <div>
    <h1>登录</h1>
    <p>用户名:<input type="text" /></p>
    <p>密码:<input type="text" /></p>
  </div>
</template>
<script>
export default {
  name: "Login"
};
</script>

2、创建注册组件Reg.vue

<template>
  <div>
    <h1>注册</h1>
    <p>用户名:<input type="text" /></p>
    <p>密码:<input type="text" /></p>
    <p>确认密码:<input type="text" /></p>
  </div>
</template>
<script>
export default {
  name: "reg"
};
</script>

3. 创建主页组件Home.vue

<template>
  <div>
    <router-link to="/login">登录</router-link>
    <router-link to="/reg">注册</router-link>
    <router-view></router-view>
  </div>
</template>

4. 在router/index.js中配置路由信息

12. axios

官网：http://www.axios-js.com

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js 中，具有以下特征：

• 从浏览器中创建 XMLHttpRequests

• 从 node.js 创建 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求数据和响应数据

• 取消请求

• 自动转换 JSON 数据

• 客户端支持防御 XSRF

_1. 安装

npm install axios
# npm install vue-axios --save
# npm install qs.js --save     // 作用是能把json格式的直接转成data所需的格式

_2. 全局注册

在main.js页面引用

import axios from "axios"
Vue.prototype.$axios = axios   // 全局注册，使用方法为:this.$axios
# import qs from 'qs'
# Vue.prototype.qs = qs           // 全局注册，使用方法为:this.qs

_3. hello world

<template>
  <div class="demo1">
    <button type="button" @click="getEmp">员工列表</button>
    <table>
      <tr>
        <th>员工编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>工资</th>
        <th>生日</th>
      </tr>
      <tr v-for="(emp,index) in emps" :key="index">
        <td>{{emp.id}}</td>
        <td>{{emp.name}}</td>
        <td>{{emp.sex}}</td>
        <td>{{emp.sal}}</td>
        <td>{{emp.birthday}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: "demo1",
  data() {
    return {
      emps: []
   };
 },
  methods: {
    getEmp() {
      this.$axios
       .get(" https://www.easymock.com/mock/5cb1dfa1e1383c29e74b5fbe/emp")
       .then(response => {
          this.emps = response.data.data;
       });
   }
 }
};
</script>

13. 项目打包部署

_0 打包

1. 修改/config/index.js中的assetsPublicPath（有两处），从 / 修改为 ./

2. 执行命令npm run build

_1. tomcat部署

1. dist目录下的文件拷贝到Tomcat服务器下

2. 启动tomcat

_2. nginx部署

1. 将dist目录下的文件拷贝到nginx根目录的html文件夹下

2. 修改nginx的conf目录下文件nginx.conf，编辑server节点

server {
    listen       8081; # 监听端口
    server_name localhost; # 监听域名
    location / {
        root   html; # 根目录
        index  index.html index.htm; # 首页
        try_files $uri $uri/ @router;
   }
    location @router {
        rewrite ^.*$ /index.html last;
   }
}