四、vue-router 组件跳转以及 axios 前后对接

vue-router 组件跳转

  上篇已完成基本的登录功能，现在采用 ElementUI 组件库完善 Main.vue 主页以及表单组件，并通过 axios 完成前后对接。

1 Container 布局容器

  打开 Element UI 官网，找到 Container 布局容器，然后将代码黏贴进 Main.vue 的 div 标签内。
.
  然后根据需要我们可以去除一部分，去除后的代码如下：

<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1','2','3','4']">
          <el-menu-item>
            <template slot="title"><i class="el-icon-s-home" ></i>主页
              <router-link to="/"  style="text-decoration-line: none"> </router-link>
            </template>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-tickets"></i>违章信息</template>
              <el-menu-item index="1-1">
                <router-link to="#"  style="text-decoration-line: none">违章记录</router-link>
              </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-shopping-bag-2"></i>订单管理</template>
            <el-menu-item index="2-1">订单列表</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-user"></i>用户管理</template>
              <el-menu-item index="3-1">用户列表</el-menu-item>
              <el-menu-item index="3-2">新增用户</el-menu-item>
              <el-menu-item index="3-3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
              <template slot="title"><i class="el-icon-setting"></i>系统设置</template>
              <el-menu-item index="4-1">数据源设置</el-menu-item>
              <el-menu-item index="4-2">邮件设置</el-menu-item>
              <el-menu-item index="4-3">选项3</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/login" style="text-decoration-line: none">退出</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>PkyShare</span>
        </el-header>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
      name : "Main",
  }
</script>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

</style>

router-link to="/login" 为路由跳转，这里跳回登录页。

  效果如下：

2 卡片和表格等组件

  在 components 文件夹下新增 QueryRecord.vue 组件，并加入卡片与表格，详细请查看 tablel

<template>
  <div>
  	查询记录
  </div>
</template>

<script>
    export default {
        name: "records"
    }
</script>

<style>

</style>

  修改 index.js 路由

import Vue from 'vue'
import Router from 'vue-router'
//异步加载组件
const Login =() => import('../views/login') // 登录
const Main =() => import('../views/main') // 主页导航
const Records =() => import('../components/QueryRecord') // 违章记录

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/login',
      name:'login',
      component:Login
    },
    {
      path:'/',
      name:'main',
      component:Main,
      children: [
        {
          path: '/records',
          name:'records',
          component:Records
        }
      ]
    },
  ]
})

注：const 为异步加载，这样提高用户体验。children 为嵌套路由，使用它可以在当前父组件下路由到子组件，若不使用，则会跳转到全新的组件页面。

   修改 Main.vue，在违章记录选项中绑定路由，并在第二个 el-container 标签内添加路由的展示位置。

• 路由绑定

<router-link to="/records" style="text-decoration-line: none">违章记录</router-link>

• 子路由的展示位置

 <!--   各组件展示  -->
 <el-main>
 <!--<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方，会被匹配到的组件替换掉-->
   <router-view></router-view>
 </el-main>

• 在组件库里找到对应的卡片与表格等组件，通过自己需要把相应组件放入 QueryRecord.vue 的 div 标签内，以下是完整的 QueryRecord.vue 示例代码：

<template>
  <div>
    <el-card class="box-card" style="width: 100%" v-show="isShow">
      <div slot="header" class="clearfix">
        <span>高级搜索</span>
      </div>
      <div>
        <el-input style="width: 200px; margin: 3px"
                  placeholder="请输入查询记录ID..."
                  v-model="recordId"
                  clearable>
        </el-input >
        <el-input style="width: 200px; margin: 3px"
                  placeholder="请输入车牌号..."
                  v-model="carNum"
                  clearable>
        </el-input>
        <el-date-picker
          v-model="timeFrame"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="请选择开始时间..."
          end-placeholder="请选择结束时间..."
          :default-time="['12:00:00']">
        </el-date-picker>
        <el-date-picker
          v-model="queryMonth"
          format="yyyy-MM"
          value-format="yyyyMM"
          type="month"
          placeholder="请选择查询月份...">
        </el-date-picker>
        <el-input style="width: 200px; margin: 3px"
                  placeholder="请输入查询结果信息..."
                  v-model="queryResultInfo"
                  clearable>
        </el-input>
        <el-input style="width: 200px; margin: 3px"
                  placeholder="请输入查询地区..."
                  v-model="area"
                  clearable>
        </el-input>
        <el-input style="width: 200px; margin: 3px"
                  placeholder="请输入用户名..."
                  v-model="username"
                  clearable>
        </el-input>
        <el-button type="primary" @click="search()" icon="el-icon-search">搜索</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="width: 100%">
      <div slot="header" class="clearfix">
        <span>违章记录</span>
      </div>
      <div>
        <el-input style="width: 200px; margin: 3px"
          placeholder="请输入车牌号..."
          v-model="carNum"
          clearable>
        </el-input>
        <el-input style="width: 200px; margin: 3px"
          placeholder="请输入查询地区..."
          v-model="area"
          clearable>
        </el-input>
        <el-input style="width: 200px; margin: 3px"
          placeholder="请输入用户名..."
          v-model="username"
          clearable>
        </el-input>
        <el-button type="primary" @click="search()" icon="el-icon-search">搜索</el-button>
        <el-button type="primary" @click="advancedSearch()" icon="el-icon-search">高级搜索</el-button>
      </div>
      <div style="margin-top: 10px">
        <el-table
          :data="tableData"
          height="650"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="recordId"
            sortable
            label="查询记录ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="carNum"
            width="100"
            label="车牌号">
          </el-table-column>
          <el-table-column
            prop="eng"
            width="120"
            label="发动机号">
          </el-table-column>
          <el-table-column
            prop="vin"
            width="120"
            label="车架号">
          </el-table-column>
          <el-table-column
            prop="carType"
            label="车型">
          </el-table-column>
          <el-table-column
            prop="queryDate"
            width="170"
            label="查询时间">
          </el-table-column>
          <el-table-column
            prop="queryMonth"
            label="查询月份">
          </el-table-column>
          <el-table-column
            prop="queryType"
            label="查询类型">
          </el-table-column>
          <el-table-column
            prop="queryResult"
            label="查询结果">
          </el-table-column>
          <el-table-column
            prop="queryResultInfo"
            width="290"
            label="结果信息">
          </el-table-column>
          <el-table-column
            prop="queryTime"
            label="耗时">
          </el-table-column>
          <el-table-column
            prop="ipAddress"
            width="150"
            label="IP">
          </el-table-column>
          <el-table-column
            prop="area"
            label="地区">
          </el-table-column>
          <el-table-column
            prop="datasource"
            label="数据源">
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名">
          </el-table-column>
          <el-table-column
            prop="remark"
            width="250"
            label="说明">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        style="text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 150, 200]"
        :page-size="pagesize"
        layout="sizes, prev, pager, next">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "records",
        data() {
            return {
                isShow: false, // 是否展示
                currentPage:1, //初始页
                pagesize:100,    //    每页的数据
                recordId:'', // 查询记录ID
                carNum: '', // 车牌号
                timeFrame: '', // 查询时间范围
                queryMonth: '', // 查询月份
                queryResultInfo: '', // 查询结果信息
                area: '', // 查询地区
                username: '', // 用户名
                tableData: [{
                    recordId: '406120545357135871',
                    carNum: '粤123456',
                    eng: '123456',
                    vin: '123456',
                    carType: '02',
                    queryDate: '2019-10-10 15:25:35',
                    queryMonth: '201910',
                    queryType: 0,
                    queryResult: 0,
                    queryResultInfo: 'totalScore:18,totalMoney:2060,count:17',
                    queryTime: '2243',
                    ipAddress: '255.255.255.255',
                    datasource: 'YUE_6',
                    area: '粤',
                    username: '王小虎',
                    remark: '查询成功'
                },{
                    recordId: '406120545357135872',
                    carNum: '粤123456',
                    eng: '123456',
                    vin: '123456',
                    carType: '02',
                    queryDate: '2019-10-10 15:25:35',
                    queryMonth: '201910',
                    queryType: 0,
                    queryResult: 0,
                    queryResultInfo: 'totalScore:18,totalMoney:2060,count:17',
                    queryTime: '2243',
                    ipAddress: '255.255.255.255',
                    datasource: 'YUE_6',
                    area: '粤',
                    username: '王小虎',
                    remark: '查询成功'
                },{
                    recordId: '406120545357135873',
                    carNum: '粤123456',
                    eng: '123456',
                    vin: '123456',
                    carType: '02',
                    queryDate: '2019-10-10 15:25:35',
                    queryMonth: '201910',
                    queryType: 0,
                    queryResult: 0,
                    queryResultInfo: 'totalScore:18,totalMoney:2060,count:17',
                    queryTime: '2243',
                    ipAddress: '255.255.255.255',
                    datasource: 'YUE_6',
                    area: '粤',
                    username: '王小虎',
                    remark: '查询成功'
                },{
                    recordId: '406120545357135874',
                    carNum: '粤123456',
                    eng: '123456',
                    vin: '123456',
                    carType: '02',
                    queryDate: '2019-10-10 15:25:35',
                    queryMonth: '201910',
                    queryType: 0,
                    queryResult: 0,
                    queryResultInfo: 'totalScore:18,totalMoney:2060,count:17',
                    queryTime: '2243',
                    ipAddress: '255.255.255.255',
                    datasource: 'YUE_6',
                    area: '粤',
                    username: '王小虎',
                    remark: '查询成功'
                },{
                    recordId: '406120545357135875',
                    carNum: '粤123456',
                    eng: '123456',
                    vin: '123456',
                    carType: '02',
                    queryDate: '2019-10-10 15:25:35',
                    queryMonth: '201910',
                    queryType: 0,
                    queryResult: 0,
                    queryResultInfo: 'totalScore:18,totalMoney:2060,count:17',
                    queryTime: '2243',
                    ipAddress: '255.255.255.255',
                    datasource: 'YUE_6',
                    area: '粤',
                    username: '王小虎',
                    remark: '查询成功'
                }]
            }
        },
        methods: {
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                this.handleList()
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                this.handleList()
            },
            handleList() {
                //发送请求
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 普通搜索
            search: function() {
                this.isShow = false
                console.log('timeFrame:' + this.timeFrame)
                console.log('queryMonth:' + this.queryMonth)
                console.log('currentPage:' + this.currentPage)
                console.log('pageSize:' + this.pagesize)
            },
            // 高级搜索
            advancedSearch: function () {
                if(this.isShow == true) {
                    this.isShow = false
                }
                else {
                    this.isShow = true
                }
                console.log("isShow:" + this.isShow)
            }
        }
    }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>

注：最好不要复制我的代码，应该一个组件一个组件地尝试才能更好地理解。

• 效果如下：
  
  

3 axios 请求

  以上表格数据是死数据，并没有实现前后交互，下面通过 axios 进行发送请求。axios 中文文档

  Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

• 安装 axios 插件

npm install axios

• 在 api 文件夹下新增 queryRcords.js 文件

  具体格式根据 api 文档进行书写，我这是 get 请求

import axios from 'axios';

let base = 'http://localhost:9096/api/v1/weizhangurl

// 分页
export const records = (pageNum, pageSize) => {
  return axios.get(`${base}/records/page/${pageNum}/${pageSize}`);
}

• 修改 QueryRecord.vue，以下只修改 js 代码

<script>
    import {records} from "../api/queryRcords"
    export default {
        name: "records",
        data() {
            return {
                isShow: false, // 是否展示
                currentPage:1, //初始页
                pagesize:100,    //    每页的数据
                recordId:'', // 查询记录ID
                carNum: '', // 车牌号
                eng: '', //
                vin: '', //
                carType: '', //
                queryDate: '', //
                timeFrame: '', // 查询时间范围
                queryMonth: '', // 查询月份
                queryType: '',
                queryResult: '',
                queryResultInfo: '', // 查询结果信息
                queryTime: '',
                ipAddress: '',
                datasource: '',
                area: '',
                username: '',
                remark: '',
                tableData: []
            }
        },
        // 页面加载时执行
        created: function() {
            this.handleList()
        },
        methods: {
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                this.handleList()
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                this.handleList()
            },
            handleList() {
                //发送请求
                records(this.currentPage, this.pagesize).then(res => {
                    this.tableData = []
                    for (let data of res.data.data) {
                        this.tableData.push(data)
                    }
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 普通搜索
            search: function() {
                this.isShow = false
                this.handleList()
            },
            // 高级搜索
            advancedSearch: function () {
                if(this.isShow == true) {
                    this.isShow = false
                }
                else {
                    this.isShow = true
                }
                console.log("isShow:" + this.isShow)
            }
        }
    }
</script>

注意：需要根据返回的 json 格式才能放入表格数据，我接收的格式如下：

{
    "code": 20000,
    "count": 1045,
    "title": "请求成功",
    "data": [
        {
            "recordId": 406825828807081984,
            "carNum": "辽ACS900",
            "eng": "******",
            "vin": "*******",
            "carType": "01",
            "queryDate": "2019-11-28 15:00:36",
            "queryMonth": 201911,
            "queryType": 0,
            "queryResult": 1,
            "queryResultInfo": "请求超时",
            "queryTime": 19287,
            "ipAddress": "255.255.255.255",
            "area": "辽",
            "datasource": "LIAO_1",
            "username": "****",
            "remark": "请求超时或失败"
        }
   ]
}

• 效果
  

至此，查询记录列表以基本完成，接下来会进一步完善登陆、拦截等相关功能，尽请期待！