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": "请求超时或失败"
}
]
}
- 效果
至此,查询记录列表以基本完成,接下来会进一步完善登陆、拦截等相关功能,尽请期待!