Table of contents
1. Vue component library Element
2.2 Getting Started with Routing
1. Vue component library Element
1.1Element introduction
ElementUI is a front-end framework focusing on V development, mainly used to develop beautiful pages.
Element: It is a set of Vue-based website component library provided by the front-end development team of Ele.me, which is used to quickly build web pages.
Element provides many components (parts that make up web pages) for us to use. Such as hyperlinks, buttons, pictures, tables and so on.
Official Website : Component | Element
1.2 Element components
1.2.1 Table form
Table table: used to display multiple pieces of data with similar structure, which can be sorted, filtered, compared or other custom operations on the data.
First of all, we need to come to the component library of ElementUI and find the table component
Then copy the code to our previous ElementVue.vue component. It should be noted that our component includes 3 parts. If there are official styles and scripts other than the template part, they need to be copied.
The overall code of the ElementView.vue component file is as follows:
<template> <div> <!-- Button按钮 --> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <!-- Table表格 --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script> <style> </style>Detailed explanation of component properties
So how does our ElementUI bind the data model to the view? Mainly through the following attributes:
data: mainly defines the data model of the table component
prop: The data defining the column should be bound to the specific data model defined in data
label: defines the title of the column
width: defines the width of the column
1.2.2 Pagination
Pagination: pagination component, which mainly provides functions related to paging toolbar
First find the paging component on the official website, we choose the paging component with background color
Then copy the code to the template of our ElementView.vue component file
<el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>Detailed explanation of component properties
For the paging component, we need to pay attention to the following important properties (you can get the detailed description of the component properties at the bottom of the official website component):
background: Add Beijing color, which is the blue background color effect in the picture above.
layout: the layout of the paging toolbar, its specific values include
sizes,prev,pager,next,jumper,->,total,slotthese valuestotal: the total amount of data
Detailed explanation of component events
For paging components, in addition to the above properties, there are two very important events that we need to learn:
size-change : Triggered when pageSize changes
current-change : Triggered when the currentPage changes
For the reference codes of these two events, we can also find them in the complete case provided by the official
At this time, the complete template code of the Panigation component is as follows:
<!-- Pagination分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background layout="sizes,prev, pager, next,jumper,total" :total="1000"> </el-pagination>Next, you need to copy the two functions required by the event, and you need to pay attention to the methods attribute and data at the same level
methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } },At this time, the complete code of the script part of the Panigation component is as follows
<script> export default { methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } }, data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script>
1.2.3 Dialog dialog box
Dialog: Inform the user and host related operations while retaining the current page state.
First of all, we need to find the Dialog component in the official ElementUI
Then copy the following code into the template module of our component file
<br><br> <!--Dialog 对话框 --> <!-- Table --> <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-table :data="gridData"> <el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="address" label="地址"></el-table-column> </el-table> </el-dialog>And copy the data model script module:
gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], dialogTableVisible: false,Its complete script part code
<script> export default { methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } }, data() { return { gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], dialogTableVisible: false, tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script>Detailed explanation of component properties
So how does ElementUI achieve the display and hiding of the dialog box? through the following attributes:
visible.sync : whether to display the Dialog
The dialogTableVisble property bound to the visible property is initially false by default, so the dialog box is hidden; then we click the button, trigger an event, and modify the property value to true.
Then the dialog box's visible property value is true, so the dialog box is rendered
1.2.4 Form form
Form Form: It is composed of controls such as input boxes, selectors, radio boxes, and multi-select boxes, and is used to collect, verify, and submit data.
First of all, we need to create a new dialog box based on what we learned in the previous summary.
<br><br> <!-- Dialog对话框-Form表单 --> <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button> <el-dialog title="Form表单" :visible.sync="dialogFormVisible"> </el-dialog>It should also be noted that for this new dialog box, we need to declare a new variable dialogFormVisible in data to control the hiding and display of the dialog box, the code is as follows:
dialogFormVisible: false,Copy the template part of the code provided by the official website to the Dialog component of our vue component file
<el-dialog title="Form表单" :visible.sync="dialogFormVisible"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间"> <el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> </el-col> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </el-dialog>The complete code of the final Vue component is as follows, students can refer to the template part and script part code corresponding to the form form case
<template> <div> <!-- Button按钮 --> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <!-- Table表格 --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> <br> <!-- Pagination分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background layout="sizes,prev, pager, next,jumper,total" :total="1000"> </el-pagination> <br><br> <!--Dialog 对话框 --> <!-- Table --> <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-table :data="gridData"> <el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="address" label="地址"></el-table-column> </el-table> </el-dialog> <br><br> <!-- Dialog对话框-Form表单 --> <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button> <el-dialog title="Form表单" :visible.sync="dialogFormVisible"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间"> <el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> </el-col> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </el-dialog> </div> </template> <script> export default { methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); }, //表单案例的提交事件 onSubmit() { console.log(this.form); //输出表单内容到控制台 this.dialogFormVisible=false; //关闭表案例的对话框 } }, data() { return { //表单案例的数据双向绑定 form: { name: '', region: '', date1: '', date2:'' }, gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], dialogTableVisible: false, dialogFormVisible: false, //控制form表单案例的对话框 tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script> <style> </style>
1.3 Case
Statement of needs:
Make pages with a similar format
That is, the top is the title, the left column is the navigation, and the right is the data display area
The search form needs to be displayed on the right
The table data on the right is displayed dynamically, and the data comes from the background
The actual example effect is shown in the figure below:
Data Mock address: http://yapi.smart-xwork.cn/mock/169327/emp/list ,
1.3.1 Case Analysis
Create a page and complete the overall layout planning of the page
Then carry out the specific implementation of the respective components for the three parts
For the core content display area on the right, it is necessary to use asynchronous loading of data and render data in tables
1.3.2 Code implementation
Create the vue component tlias/EmpView.vue in the views directory, and write the basic template code of the component
And it should be noted that we access the App.vue component by default, and our App.vue component introduced the element-view component before. At this time, we need to modify it to introduce the emp-view component, and comment it out The previous element-view component, at this time the overall code of App.vue
<template> <div id="app"> <!-- { {message}} --> <!-- <element-view></element-view> --> <emp-view></emp-view> </div> </template> <script> import EmpView './views/tlias/EmpView.vue' // import ElementView './views/Element/ElementView.vue' export default { components: {EmpView }, data(){ return { "message":"hello world" } } } </script> <style> </style>overall arrangement
From the examples provided on the official website, we found that there are ready-made layouts that meet our needs, so we only need to be a code porter. Copy the following code provided by the official and paste it directly into the template module of our EmpView.vue component
<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container>Because we did not copy the official css style, the effect is not the same as the official case, but the layout format we need already exists, and we have our own arrangements for the specific content. First of all, we need to adjust the height of the overall layout, so we need to add some styles on <el-container>, the code is as follows:
<!-- 设置最外层容器高度为700px,在加上一个很细的边框 --> <el-container style="height: 700px; border: 1px solid #eee">At this point, our layout function is complete.
top title
We need to modify the text content at the top and provide the css style of the background color. The specific code is as follows:
<el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>At this point, our top title is done
At this point the overall code is as follows:
<template> <div> <!-- 设置最外层容器高度为700px,在加上一个很细的边框 --> <el-container style="height: 700px; border: 1px solid #eee"> <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> </div> </template> <script> export default { } </script> <style> </style>left navigation bar
<el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-submenu> </el-menu>right core content
<template> <div> <!-- 设置最外层容器高度为700px,在加上一个很细的边框 --> <el-container style="height: 700px; border: 1px solid #eee"> <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header> <el-container> <el-aside width="200px"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>系统信息管理</template> <el-menu-item index="1-1">部门管理</el-menu-item> <el-menu-item index="1-2">员工管理</el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main> <!-- 表单 --> <el-form :inline="true" :model="searchForm" class="demo-form-inline"> <el-form-item label="姓名"> <el-input v-model="searchForm.name" placeholder="姓名"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="searchForm.gender" placeholder="性别"> <el-option label="男" value="1"></el-option> <el-option label="女" value="2"></el-option> </el-select> </el-form-item> <el-form-item label="入职日期"> <el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> <!-- 表格 --> <el-table :data="tableData"> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="image" label="图像" width="180"></el-table-column> <el-table-column prop="gender" label="性别" width="140"></el-table-column> <el-table-column prop="job" label="职位" width="140"></el-table-column> <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column> <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column> <el-table-column label="操作" > <el-button type="primary" size="mini">编辑</el-button> <el-button type="danger" size="mini">删除</el-button> </el-table-column> </el-table> </el-main> </el-container> </el-container> </div> </template> <script> export default { data() { return { tableData: [ ], searchForm:{ name:'', gender:'', entrydate:[] } } }, methods:{ onSubmit:function(){ console.log(this.searchForm); } } } </script> <style> </style>Pagination Toolbar
The template module code is as follows:
<!-- Pagination分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background layout="sizes,prev, pager, next,jumper,total" :total="1000"> </el-pagination>At the same time, two functions need to be declared in methods, the code is as follows:
handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); }Load data asynchronously
In the vue project, the use of axios is divided into the following two steps:
Install axios: npm install axios
When you need to use axios, import axios: import axios 'axios'
So when do we send the axios request? The page is loaded and loaded automatically, so the previous mounted hook function can be used, and we need to display the obtained employee data in a table, so the data needs to be assigned to the data model tableData, so we write the following code:
mounted(){ axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list") .then(resp=>{ this.tableData=resp.data.data; //响应数据赋值给数据模型 }); }Gender content display fixes
<el-table-column prop="gender" label="性别" width="140"> <template slot-scope="scope"> { {scope.row.gender==1?"男":"女"}} </template> </el-table-column>Picture content display repair
<el-table-column prop="image" label="图像" width="180"> <template slot-scope="scope"> <img :src="scope.row.image" width="100px" height="70px"> </template> </el-table-column>At this point, the entire case is complete, and its complete code is as follows:
<template> <div> <!-- 设置最外层容器高度为700px,在加上一个很细的边框 --> <el-container style="height: 700px; border: 1px solid #eee"> <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header> <el-container> <el-aside width="230px" style="border: 1px solid #eee"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>系统信息管理</template> <el-menu-item index="1-1">部门管理</el-menu-item> <el-menu-item index="1-2">员工管理</el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main> <!-- 表单 --> <el-form :inline="true" :model="searchForm" class="demo-form-inline"> <el-form-item label="姓名"> <el-input v-model="searchForm.name" placeholder="姓名"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="searchForm.gender" placeholder="性别"> <el-option label="男" value="1"></el-option> <el-option label="女" value="2"></el-option> </el-select> </el-form-item> <el-form-item label="入职日期"> <el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> <!-- 表格 --> <el-table :data="tableData"> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="image" label="图像" width="180"> <template slot-scope="scope"> <img :src="scope.row.image" width="100px" height="70px"> </template> </el-table-column> <el-table-column prop="gender" label="性别" width="140"> <template slot-scope="scope"> { {scope.row.gender==1?"男":"女"}} </template> </el-table-column> <el-table-column prop="job" label="职位" width="140"></el-table-column> <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column> <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column> <el-table-column label="操作" > <el-button type="primary" size="mini">编辑</el-button> <el-button type="danger" size="mini">删除</el-button> </el-table-column> </el-table> <!-- Pagination分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background layout="sizes,prev, pager, next,jumper,total" :total="1000"> </el-pagination> </el-main> </el-container> </el-container> </div> </template> <script> import axios 'axios' export default { data() { return { tableData: [ ], searchForm:{ name:'', gender:'', entrydate:[] } } }, methods:{ onSubmit:function(){ console.log(this.searchForm); }, handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } }, mounted(){ axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list") .then(resp=>{ this.tableData=resp.data.data; }); } } </script> <style> </style>
2. Vue routing
2.1 Routing Introduction
We hope that based on the functions in the case, click on the department management in the sidebar to display the department management information, and click on the employee management to display the employee management information
This requires the help of our vue routing function.
When we click on the left navigation bar, the address bar of the browser will change, and the routing will automatically update to display the Vue component corresponding to the url.
And our vue officially provides the routing plug-in Vue Router, its main components are as follows:
VueRouter: Router class, which dynamically renders selected components in the routing view according to routing requests
<router-link>: request link component, the browser will parse it into <a>
<router-view>: dynamic view component, used to render and display components corresponding to routing paths
First, VueRouter maintains a routing table according to the hash fragment of the url we configured and the component relationship of routing;
Then our page provides a <router-link> component, the user clicks to send a routing request;
Then our VueRouter finds the corresponding vue component in the routing table according to the routing request;
Finally, VueRouter will switch the components in <router-view> to update the view
2.2 Getting Started with Routing
We need to define the routing table in the src/router/index.js file and modify it according to the template code provided by it. The final code is as follows:
import Vue 'vue' import VueRouter 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/emp', //地址hash name: 'emp', component: () => import('../views/tlias/EmpView.vue') //对应的vue组件 }, { path: '/dept', name: 'dept', component: () => import('../views/tlias/DeptView.vue') } ] const router = new VueRouter({ routes }) export default routerNote that import modules that are not referenced need to be removed.
The basic routing information is configured, and the routing table has been loaded. At this time, we still lack 2 things, namely <router-lin> and <router-view>, so we need to modify 2 pages (EmpView.vue and DeptView.vue ) The two buttons on our left column are router-link, and their codes are as follows:
<el-menu-item index="1-1"> <router-link to="/dept">部门管理</router-link> </el-menu-item> <el-menu-item index="1-2"> <router-link to="/emp">员工管理</router-link> </el-menu-item>Then we also need to define route-view in App.vue, which is the content display area, as a component switch. The complete code of App.vue is as follows:
<template> <div id="app"> <!-- { {message}} --> <!-- <element-view></element-view> --> <!-- <emp-view></emp-view> --> <router-view></router-view> </div> </template> <script> // import EmpView './views/tlias/EmpView.vue' // import ElementView './views/Element/ElementView.vue' export default { components: { }, data(){ return { "message":"hello world" } } } </script> <style> </style>But our browser opened the address: http://localhost:8080/ , and found a blank, because our default routing path is /, but there is no corresponding relationship in the routing configuration,
So we need the corresponding routing component in the routing configuration, the code is as follows:
const routes = [ { path: '/emp', name: 'emp', component: () => import('../views/tlias/EmpView.vue') }, { path: '/dept', name: 'dept', component: () => import('../views/tlias/DeptView.vue') }, { path: '/', redirect:'/emp' //表示重定向到/emp即可 }, ]