devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaWeb—vue（具体使用包含案例）_vue+java

作者：weixin_40725706 | 2024-02-28 02:11:16

赞

踩

vue+java

目录

1.Vue组件库Element

1.1Element介绍

1.2 Element组件

1.2.1 Table表格

1.2.2 Pagination分页

1.2.3 Dialog对话框

1.2.4 Form表单

1.3案例

1.3.1案例分析

1.3.2代码实现

2.Vue路由

2.1 路由介绍

2.2 路由入门

1.Vue组件库Element

1.1Element介绍

ElementUI就是一款侧重于V开发的前端框架，主要用于开发美观的页面的。

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。

官网：组件 | Element

1.2 Element组件

1.2.1 Table表格

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

首先我们需要来到ElementUI的组件库中，找到表格组件

然后复制代码到我们之前的ElementVue.vue组件中，需要注意的是，我们组件包括了3个部分，如果官方有除了template部分之外的style和script都需要复制

 

ElementView.vue组件文件整体代码如下：

  1. <template>
  2.     <div>
  3.     <!-- Button按钮 -->
  4.         <el-row>
  5.             <el-button>默认按钮</el-button>
  6.             <el-button type="primary">主要按钮</el-button>
  7.             <el-button type="success">成功按钮</el-button>
  8.             <el-button type="info">信息按钮</el-button>
  9.             <el-button type="warning">警告按钮</el-button>
  10.             <el-button type="danger">危险按钮</el-button>
  11.         </el-row>
  12.  
  13.         <!-- Table表格 -->
  14.         <el-table
  15.         :data="tableData"
  16.         style="width: 100%">
  17.             <el-table-column
  18.                 prop="date"
  19.                 label="日期"
  20.                 width="180">
  21.             </el-table-column>
  22.             <el-table-column
  23.                 prop="name"
  24.                 label="姓名"
  25.                 width="180">
  26.             </el-table-column>
  27.             <el-table-column
  28.                 prop="address"
  29.                 label="地址">
  30.             </el-table-column>
  31.         </el-table>
  32.     </div>
  33. </template>
  34.  
  35. <script>
  36. export default {
  37.      data() {
  38.         return {
  39.           tableData: [{
  40.             date: '2016-05-02',
  41.             name: '王小虎',
  42.             address: '上海市普陀区金沙江路 1518 弄'
  43.           }, {
  44.             date: '2016-05-04',
  45.             name: '王小虎',
  46.             address: '上海市普陀区金沙江路 1517 弄'
  47.           }, {
  48.             date: '2016-05-01',
  49.             name: '王小虎',
  50.             address: '上海市普陀区金沙江路 1519 弄'
  51.           }, {
  52.             date: '2016-05-03',
  53.             name: '王小虎',
  54.             address: '上海市普陀区金沙江路 1516 弄'
  55.           }]
  56.         }
  57.       }
  58. }
  59. </script>
  60.  
  61. <style>
  62.  
  63. </style>

组件属性详解

那么我们的ElementUI是如何将数据模型绑定到视图的呢？主要通过如下几个属性：

  • data: 主要定义table组件的数据模型

  • prop: 定义列的数据应该绑定data中定义的具体的数据模型

  • label: 定义列的标题

  • width: 定义列的宽度

1.2.2 Pagination分页

Pagination: 分页组件，主要提供分页工具条相关功能

首先在官网找到分页组件，我们选择带背景色分页组件

然后复制代码到我们的ElementView.vue组件文件的template中

  1. <el-pagination
  2.     background
  3.     layout="prev, pager, next"
  4.     :total="1000">
  5. </el-pagination>

组件属性详解

对于分页组件我们需要关注的是如下几个重要属性（可以通过查阅官网组件中最下面的组件属性详细说明得到）：

  • background: 添加北京颜色，也就是上图蓝色背景色效果。

  • layout: 分页工具条的布局，其具体值包含sizes, prev, pager, next, jumper, ->, total, slot 这些值

  • total: 数据的总数量

组件事件详解

对于分页组件，除了上述几个属性，还有2个非常重要的事件我们需要去学习：

  • size-change ： pageSize 改变时会触发

  • current-change ：currentPage 改变时会触发

对于这2个事件的参考代码，我们同样可以通过官方提供的完整案例中找到

此时Panigation组件的template完整代码如下：

  1. <!-- Pagination分页 -->
  2. <el-pagination
  3.                @size-change="handleSizeChange"
  4.                @current-change="handleCurrentChange"
  5.                background
  6.                layout="sizes,prev, pager, next,jumper,total"
  7.                :total="1000">
  8. </el-pagination>

紧接着需要复制事件需要的2个函数，需要注意methods属性和data同级

  1. methods: {
  2.       handleSizeChange(val) {
  3.         console.log(`每页 ${val} 条`);
  4.       },
  5.       handleCurrentChange(val) {
  6.         console.log(`当前页: ${val}`);
  7.       }
  8.     },

此时Panigation组件的script部分完整代码如下

  1. <script>
  2. export default {
  3.     methods: {
  4.       handleSizeChange(val) {
  5.         console.log(`每页 ${val} 条`);
  6.       },
  7.       handleCurrentChange(val) {
  8.         console.log(`当前页: ${val}`);
  9.       }
  10.     },
  11.      data() {
  12.         return {
  13.           tableData: [{
  14.             date: '2016-05-02',
  15.             name: '王小虎',
  16.             address: '上海市普陀区金沙江路 1518 弄'
  17.           }, {
  18.             date: '2016-05-04',
  19.             name: '王小虎',
  20.             address: '上海市普陀区金沙江路 1517 弄'
  21.           }, {
  22.             date: '2016-05-01',
  23.             name: '王小虎',
  24.             address: '上海市普陀区金沙江路 1519 弄'
  25.           }, {
  26.             date: '2016-05-03',
  27.             name: '王小虎',
  28.             address: '上海市普陀区金沙江路 1516 弄'
  29.           }]
  30.         }
  31.       }
  32. }
  33. </script>

1.2.3 Dialog对话框

Dialog: 在保留当前页面状态的情况下，告知用户并承载相关操作。

首先我们需要在ElementUI官方找到Dialog组件

然后复制如下代码到我们的组件文件的template模块中

  1. <br><br>
  2. <!--Dialog 对话框 -->
  3. <!-- Table -->
  4. <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
  5.  
  6. <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
  7.     <el-table :data="gridData">
  8.         <el-table-column property="date" label="日期" width="150"></el-table-column>
  9.         <el-table-column property="name" label="姓名" width="200"></el-table-column>
  10.         <el-table-column property="address" label="地址"></el-table-column>
  11.     </el-table>
  12. </el-dialog>

并且复制数据模型script模块中：

  1.  gridData: [{
  2.           date: '2016-05-02',
  3.           name: '王小虎',
  4.           address: '上海市普陀区金沙江路 1518 弄'
  5.         }, {
  6.           date: '2016-05-04',
  7.           name: '王小虎',
  8.           address: '上海市普陀区金沙江路 1518 弄'
  9.         }, {
  10.           date: '2016-05-01',
  11.           name: '王小虎',
  12.           address: '上海市普陀区金沙江路 1518 弄'
  13.         }, {
  14.           date: '2016-05-03',
  15.           name: '王小虎',
  16.           address: '上海市普陀区金沙江路 1518 弄'
  17.         }],
  18.         dialogTableVisible: false,

其完整的script部分代码

  1. <script>
  2. export default {
  3.     methods: {
  4.       handleSizeChange(val) {
  5.         console.log(`每页 ${val} 条`);
  6.       },
  7.       handleCurrentChange(val) {
  8.         console.log(`当前页: ${val}`);
  9.       }
  10.     },
  11.      data() {
  12.         return {
  13.         gridData: [{
  14.           date: '2016-05-02',
  15.           name: '王小虎',
  16.           address: '上海市普陀区金沙江路 1518 弄'
  17.         }, {
  18.           date: '2016-05-04',
  19.           name: '王小虎',
  20.           address: '上海市普陀区金沙江路 1518 弄'
  21.         }, {
  22.           date: '2016-05-01',
  23.           name: '王小虎',
  24.           address: '上海市普陀区金沙江路 1518 弄'
  25.         }, {
  26.           date: '2016-05-03',
  27.           name: '王小虎',
  28.           address: '上海市普陀区金沙江路 1518 弄'
  29.         }],
  30.         dialogTableVisible: false,
  31.         tableData: [{
  32.             date: '2016-05-02',
  33.             name: '王小虎',
  34.             address: '上海市普陀区金沙江路 1518 弄'
  35.           }, {
  36.             date: '2016-05-04',
  37.             name: '王小虎',
  38.             address: '上海市普陀区金沙江路 1517 弄'
  39.           }, {
  40.             date: '2016-05-01',
  41.             name: '王小虎',
  42.             address: '上海市普陀区金沙江路 1519 弄'
  43.           }, {
  44.             date: '2016-05-03',
  45.             name: '王小虎',
  46.             address: '上海市普陀区金沙江路 1516 弄'
  47.           }]
  48.         }
  49.       }
  50. }
  51. </script>

组件属性详解

那么ElementUI是如何做到对话框的显示与隐藏的呢？是通过如下的属性：

  • visible.sync ：是否显示 Dialog

visible属性绑定的dialogTableVisble属性一开始默认是false，所以对话框隐藏；然后我们点击按钮，触发事件，修改属性值为true，

然后对话框visible属性值为true，所以对话框呈现出来

1.2.4 Form表单

Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

首先我们先要根据上一小结所学习的内容，制作一个新的对话框，

  1. <br><br>
  2. <!-- Dialog对话框-Form表单 -->
  3. <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>
  4.  
  5. <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
  6.  
  7. </el-dialog>

还需要注意的是，针对这个新的对话框，我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示，代码如下：

 dialogFormVisible: false,

复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中

  1. <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
  2.             
  3.             <el-form ref="form" :model="form" label-width="80px">
  4.                 <el-form-item label="活动名称">
  5.                     <el-input v-model="form.name"></el-input>
  6.                 </el-form-item>
  7.                 <el-form-item label="活动区域">
  8.                     <el-select v-model="form.region" placeholder="请选择活动区域">
  9.                     <el-option label="区域一" value="shanghai"></el-option>
  10.                     <el-option label="区域二" value="beijing"></el-option>
  11.                     </el-select>
  12.                 </el-form-item>
  13.                 <el-form-item label="活动时间">
  14.                     <el-col :span="11">
  15.                     <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  16.                     </el-col>
  17.                     <el-col class="line" :span="2">-</el-col>
  18.                     <el-col :span="11">
  19.                     <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
  20.                     </el-col>
  21.                 </el-form-item>
  22.             
  23.                 <el-form-item>
  24.                     <el-button type="primary" @click="onSubmit">立即创建</el-button>
  25.                     <el-button>取消</el-button>
  26.                 </el-form-item>
  27.             </el-form>
  28.         </el-dialog>

最终vue组件完整代码如下，同学们可以针对form表单案例，参考该案例对应的template部分和script部分代码

  1. <template>
  2.     <div>
  3.     <!-- Button按钮 -->
  4.         <el-row>
  5.             <el-button>默认按钮</el-button>
  6.             <el-button type="primary">主要按钮</el-button>
  7.             <el-button type="success">成功按钮</el-button>
  8.             <el-button type="info">信息按钮</el-button>
  9.             <el-button type="warning">警告按钮</el-button>
  10.             <el-button type="danger">危险按钮</el-button>
  11.         </el-row>
  12.  
  13.         <!-- Table表格 -->
  14.         <el-table
  15.         :data="tableData"
  16.         style="width: 100%">
  17.             <el-table-column
  18.                 prop="date"
  19.                 label="日期"
  20.                 width="180">
  21.             </el-table-column>
  22.             <el-table-column
  23.                 prop="name"
  24.                 label="姓名"
  25.                 width="180">
  26.             </el-table-column>
  27.             <el-table-column
  28.                 prop="address"
  29.                 label="地址">
  30.             </el-table-column>
  31.         </el-table>
  32.  
  33.         <br>
  34.         <!-- Pagination分页 -->
  35.         <el-pagination
  36.             @size-change="handleSizeChange"
  37.             @current-change="handleCurrentChange"
  38.             background
  39.             layout="sizes,prev, pager, next,jumper,total"
  40.             :total="1000">
  41.         </el-pagination>
  42.  
  43.         <br><br>
  44.         <!--Dialog 对话框 -->
  45.         <!-- Table -->
  46.         <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
  47.  
  48.         <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
  49.         <el-table :data="gridData">
  50.             <el-table-column property="date" label="日期" width="150"></el-table-column>
  51.             <el-table-column property="name" label="姓名" width="200"></el-table-column>
  52.             <el-table-column property="address" label="地址"></el-table-column>
  53.         </el-table>
  54.         </el-dialog>
  55.  
  56.         <br><br>
  57.         <!-- Dialog对话框-Form表单 -->
  58.         <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>
  59.  
  60.         <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
  61.             
  62.             <el-form ref="form" :model="form" label-width="80px">
  63.                 <el-form-item label="活动名称">
  64.                     <el-input v-model="form.name"></el-input>
  65.                 </el-form-item>
  66.                 <el-form-item label="活动区域">
  67.                     <el-select v-model="form.region" placeholder="请选择活动区域">
  68.                     <el-option label="区域一" value="shanghai"></el-option>
  69.                     <el-option label="区域二" value="beijing"></el-option>
  70.                     </el-select>
  71.                 </el-form-item>
  72.                 <el-form-item label="活动时间">
  73.                     <el-col :span="11">
  74.                     <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  75.                     </el-col>
  76.                     <el-col class="line" :span="2">-</el-col>
  77.                     <el-col :span="11">
  78.                     <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
  79.                     </el-col>
  80.                 </el-form-item>
  81.             
  82.                 <el-form-item>
  83.                     <el-button type="primary" @click="onSubmit">立即创建</el-button>
  84.                     <el-button>取消</el-button>
  85.                 </el-form-item>
  86.             </el-form>
  87.         </el-dialog>
  88.     </div>
  89. </template>
  90.  
  91. <script>
  92. export default {
  93.     methods: {
  94.       handleSizeChange(val) {
  95.         console.log(`每页 ${val} 条`);
  96.       },
  97.       handleCurrentChange(val) {
  98.         console.log(`当前页: ${val}`);
  99.       },
  100.       //表单案例的提交事件
  101.       onSubmit() {
  102.         console.log(this.form); //输出表单内容到控制台
  103.         this.dialogFormVisible=false; //关闭表案例的对话框
  104.       }
  105.     },
  106.      data() {
  107.         return {
  108.         //表单案例的数据双向绑定
  109.         form: {
  110.           name: '',
  111.           region: '',
  112.           date1: '',
  113.           date2:''
  114.         },
  115.         gridData: [{
  116.           date: '2016-05-02',
  117.           name: '王小虎',
  118.           address: '上海市普陀区金沙江路 1518 弄'
  119.         }, {
  120.           date: '2016-05-04',
  121.           name: '王小虎',
  122.           address: '上海市普陀区金沙江路 1518 弄'
  123.         }, {
  124.           date: '2016-05-01',
  125.           name: '王小虎',
  126.           address: '上海市普陀区金沙江路 1518 弄'
  127.         }, {
  128.           date: '2016-05-03',
  129.           name: '王小虎',
  130.           address: '上海市普陀区金沙江路 1518 弄'
  131.         }],
  132.         dialogTableVisible: false,
  133.         dialogFormVisible: false, //控制form表单案例的对话框
  134.         tableData: [{
  135.             date: '2016-05-02',
  136.             name: '王小虎',
  137.             address: '上海市普陀区金沙江路 1518 弄'
  138.           }, {
  139.             date: '2016-05-04',
  140.             name: '王小虎',
  141.             address: '上海市普陀区金沙江路 1517 弄'
  142.           }, {
  143.             date: '2016-05-01',
  144.             name: '王小虎',
  145.             address: '上海市普陀区金沙江路 1519 弄'
  146.           }, {
  147.             date: '2016-05-03',
  148.             name: '王小虎',
  149.             address: '上海市普陀区金沙江路 1516 弄'
  150.           }]
  151.         }
  152.       }
  153. }
  154. </script>
  155.  
  156. <style>
  157.  
  158. </style>

1.3案例

 需求说明：

  1. 制作类似格式的页面

    即上面是标题，左侧栏是导航，右侧是数据展示区域

  2. 右侧需要展示搜索表单

  3. 右侧表格数据是动态展示的，数据来自于后台

  4. 实际示例效果如下图所示：

数据Mock地址：http://yapi.smart-xwork.cn/mock/169327/emp/list，

1.3.1案例分析

  1. 创建页面，完成页面的整体布局规划

  2. 然后分别针对3个部分进行各自组件的具体实现

  3. 针对于右侧核心内容展示区域，需要使用异步加载数据，以表格渲染数据

1.3.2代码实现

在views目录下创建 tlias/EmpView.vue这个vue组件，并且编写组件的基本模板代码

并且需要注意的是，我们默认访问的是App.vue这个组件，而我们App.vue这个组件之前是引入了element-view这个组件，此时我们需要修改成引入emp-view这个组件，并且注释掉之前的element-view这个组件，此时App.vue整体代码

  1. <template>
  2.   <div id="app">
  3.     <!-- {{message}} -->
  4.     <!-- <element-view></element-view> -->
  5.     <emp-view></emp-view>
  6.   </div>
  7. </template>
  8.  
  9. <script>
  10. import EmpView  './views/tlias/EmpView.vue'
  11. // import ElementView  './views/Element/ElementView.vue'
  12. export default {
  13.   components: {EmpView },
  14.   data(){
  15.     return {
  16.       "message":"hello world"
  17.     }
  18.   }
  19. }
  20. </script>
  21. <style>
  22.  
  23. </style>

整体布局

从官网提供的示例，我们发现由现成的满足我们需求的布局，所以我们只需要做一位代码搬运工即可。拷贝官方提供的如下代码直接粘贴到我们EmpView.vue组件的template模块中即可

  1. <el-container>
  2.     <el-header>Header</el-header>
  3.     <el-container>
  4.         <el-aside width="200px">Aside</el-aside>
  5.         <el-main>Main</el-main>
  6.     </el-container>
  7. </el-container>

因为我们没有拷贝官方提供的css样式，所以和官方案例的效果不太一样，但是我们需要的布局格式已经有，具体内容我们有自己的安排。首先我们需要调整整体布局的高度，所以我们需要在<el-container>上添加一些样式，代码如下：

  1. <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
  2. <el-container style="height: 700px; border: 1px solid #eee">

到此我们布局功能就完成了

顶部标题

我们需要修改顶部的文本内容，并且提供背景色的css样式，具体代码如下：

<el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>

至此，我们的顶部标题就搞定了

此时整体代码如下：

  1. <template>
  2.     <div>
  3.         <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
  4.         <el-container style="height: 700px; border: 1px solid #eee">
  5.             <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
  6.             <el-container>
  7.                 <el-aside width="200px">Aside</el-aside>
  8.                 <el-main>Main</el-main>
  9.             </el-container>
  10.         </el-container>
  11.     </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.     
  17. }
  18. </script>
  19.  
  20. <style>
  21.  
  22. </style>

左侧导航栏

  1. <el-menu :default-openeds="['1', '3']">
  2.     <el-submenu index="1">
  3.         <template slot="title"><i class="el-icon-message"></i>导航一</template>
  4.  
  5.         <el-menu-item index="1-1">选项1</el-menu-item>
  6.         <el-menu-item index="1-2">选项2</el-menu-item>
  7.  
  8.  
  9.     </el-submenu>
  10. </el-menu>

右侧核心内容

  1. <template>
  2.     <div>
  3.         <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
  4.         <el-container style="height: 700px; border: 1px solid #eee">
  5.             <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
  6.             <el-container>
  7.                 <el-aside width="200px">
  8.                      <el-menu :default-openeds="['1', '3']">
  9.                         <el-submenu index="1">
  10.                             <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
  11.                           
  12.                             <el-menu-item index="1-1">部门管理</el-menu-item>
  13.                             <el-menu-item index="1-2">员工管理</el-menu-item>
  14.                           
  15.                      
  16.                         </el-submenu>
  17.                      </el-menu>
  18.                 </el-aside>
  19.                 <el-main>
  20.                     <!-- 表单 -->
  21.                     <el-form :inline="true" :model="searchForm" class="demo-form-inline">
  22.                         <el-form-item label="姓名">
  23.                             <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
  24.                         </el-form-item>
  25.                         <el-form-item label="性别">
  26.                             <el-select v-model="searchForm.gender" placeholder="性别">
  27.                             <el-option label="男" value="1"></el-option>
  28.                             <el-option label="女" value="2"></el-option>
  29.                             </el-select>
  30.                         </el-form-item>
  31.                           <el-form-item label="入职日期">
  32.                              <el-date-picker
  33.                                 v-model="searchForm.entrydate"
  34.                                 type="daterange"
  35.                                 range-separator="至"
  36.                                 start-placeholder="开始日期"
  37.                                 end-placeholder="结束日期">
  38.                             </el-date-picker>
  39.                         </el-form-item>
  40.                         <el-form-item>
  41.                             <el-button type="primary" @click="onSubmit">查询</el-button>
  42.                         </el-form-item>
  43.                     </el-form>
  44.                     <!-- 表格 -->
  45.                     <el-table :data="tableData">
  46.                         <el-table-column prop="name"      label="姓名" width="180"></el-table-column>
  47.                         <el-table-column prop="image"     label="图像" width="180"></el-table-column>
  48.                         <el-table-column prop="gender"    label="性别" width="140"></el-table-column>
  49.                         <el-table-column prop="job"       label="职位" width="140"></el-table-column>
  50.                         <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
  51.                         <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
  52.                         <el-table-column label="操作" >
  53.                             <el-button type="primary" size="mini">编辑</el-button>
  54.                             <el-button type="danger" size="mini">删除</el-button>
  55.                         </el-table-column>
  56.                     </el-table>
  57.  
  58.                 </el-main>
  59.             </el-container>
  60.         </el-container>
  61.     </div>
  62. </template>
  63.  
  64. <script>
  65. export default {
  66.      data() {
  67.       return {
  68.         tableData: [
  69.            
  70.         ],
  71.         searchForm:{
  72.             name:'',
  73.             gender:'',
  74.             entrydate:[]
  75.         }
  76.       }
  77.     },
  78.     methods:{
  79.         onSubmit:function(){
  80.             console.log(this.searchForm);
  81.         }
  82.     }
  83. }
  84. </script>
  85.  
  86. <style>
  87.  
  88. </style>

分页工具栏

其中template模块代码如下：

  1.  <!-- Pagination分页 -->
  2. <el-pagination
  3.                @size-change="handleSizeChange"
  4.                @current-change="handleCurrentChange"
  5.                background
  6.                layout="sizes,prev, pager, next,jumper,total"
  7.                :total="1000">
  8. </el-pagination>

同时methods中需要声明2个函数，代码如下：

  1. handleSizeChange(val) {
  2.             console.log(`每页 ${val} 条`);
  3.         },
  4.         handleCurrentChange(val) {
  5.             console.log(`当前页: ${val}`);
  6.         }

异步加载数据

在vue项目中，对于axios的使用，分为如下2步：

  1. 安装axios: npm install axios

  2. 需要使用axios时，导入axios: import axios 'axios'

那么我们什么时候发送axios请求呢？页面加载完成，自动加载，所以可以使用之前的mounted钩子函数，并且我们需要将得到的员工数据要展示到表格，所以数据需要赋值给数据模型tableData，所以我们编写如下代码：

  1.  mounted(){
  2.         axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
  3.         .then(resp=>{
  4.             this.tableData=resp.data.data; //响应数据赋值给数据模型
  5.         });
  6.     }

性别内容展示修复

  1.  <el-table-column prop="gender"    label="性别" width="140">
  2.      <template slot-scope="scope">
  3.     	 {{scope.row.gender==1?"男":"女"}}
  4.      </template>
  5.  </el-table-column>

图片内容展示修复

  1. <el-table-column prop="image"     label="图像" width="180">
  2.     <template slot-scope="scope">
  3.         <img :src="scope.row.image" width="100px" height="70px">
  4.     </template>
  5. </el-table-column>

此时整个案例完整，其完整代码如下：

  1. <template>
  2.     <div>
  3.         <!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
  4.         <el-container style="height: 700px; border: 1px solid #eee">
  5.             <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
  6.             <el-container>
  7.                 <el-aside width="230px"  style="border: 1px solid #eee">
  8.                      <el-menu :default-openeds="['1', '3']">
  9.                         <el-submenu index="1">
  10.                             <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
  11.                           
  12.                             <el-menu-item index="1-1">部门管理</el-menu-item>
  13.                             <el-menu-item index="1-2">员工管理</el-menu-item>
  14.                           
  15.                      
  16.                         </el-submenu>
  17.                      </el-menu>
  18.                 </el-aside>
  19.                 <el-main>
  20.                     <!-- 表单 -->
  21.                     <el-form :inline="true" :model="searchForm" class="demo-form-inline">
  22.                         <el-form-item label="姓名">
  23.                             <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
  24.                         </el-form-item>
  25.                         <el-form-item label="性别">
  26.                             <el-select v-model="searchForm.gender" placeholder="性别">
  27.                             <el-option label="男" value="1"></el-option>
  28.                             <el-option label="女" value="2"></el-option>
  29.                             </el-select>
  30.                         </el-form-item>
  31.                           <el-form-item label="入职日期">
  32.                              <el-date-picker
  33.                                 v-model="searchForm.entrydate"
  34.                                 type="daterange"
  35.                                 range-separator="至"
  36.                                 start-placeholder="开始日期"
  37.                                 end-placeholder="结束日期">
  38.                             </el-date-picker>
  39.                         </el-form-item>
  40.                         <el-form-item>
  41.                             <el-button type="primary" @click="onSubmit">查询</el-button>
  42.                         </el-form-item>
  43.                     </el-form>
  44.                     <!-- 表格 -->
  45.                     <el-table :data="tableData">
  46.                         <el-table-column prop="name"      label="姓名" width="180"></el-table-column>
  47.                         <el-table-column prop="image"     label="图像" width="180">
  48.                             <template slot-scope="scope">
  49.                                 <img :src="scope.row.image" width="100px" height="70px">
  50.                             </template>
  51.                         </el-table-column>
  52.                         <el-table-column prop="gender"    label="性别" width="140">
  53.                             <template slot-scope="scope">
  54.                                 {{scope.row.gender==1?"男":"女"}}
  55.                             </template>
  56.                         </el-table-column>
  57.                         <el-table-column prop="job"       label="职位" width="140"></el-table-column>
  58.                         <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
  59.                         <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
  60.                         <el-table-column label="操作" >
  61.                             <el-button type="primary" size="mini">编辑</el-button>
  62.                             <el-button type="danger" size="mini">删除</el-button>
  63.                         </el-table-column>
  64.                     </el-table>
  65.  
  66.                     <!-- Pagination分页 -->
  67.                     <el-pagination
  68.                         @size-change="handleSizeChange"
  69.                         @current-change="handleCurrentChange"
  70.                         background
  71.                         layout="sizes,prev, pager, next,jumper,total"
  72.                         :total="1000">
  73.                     </el-pagination>
  74.                 </el-main>
  75.             </el-container>
  76.         </el-container>
  77.     </div>
  78. </template>
  79.  
  80. <script>
  81. import axios  'axios'
  82. export default {
  83.      data() {
  84.       return {
  85.         tableData: [
  86.            
  87.         ],
  88.         searchForm:{
  89.             name:'',
  90.             gender:'',
  91.             entrydate:[]
  92.         }
  93.       }
  94.     },
  95.     methods:{
  96.         onSubmit:function(){
  97.             console.log(this.searchForm);
  98.         },
  99.         handleSizeChange(val) {
  100.             console.log(`每页 ${val} 条`);
  101.         },
  102.         handleCurrentChange(val) {
  103.             console.log(`当前页: ${val}`);
  104.         }
  105.     },
  106.     mounted(){
  107.         axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
  108.         .then(resp=>{
  109.             this.tableData=resp.data.data;
  110.         });
  111.     }
  112. }
  113. </script>
  114.  
  115. <style>
  116.  
  117. </style>

2.Vue路由

2.1 路由介绍

我们希望基于案例中的功能，实现点击侧边栏的部门管理，显示部门管理的信息，点击员工管理，显示员工管理的信息

 这就需要借助我们的vue的路由功能了。

当我们点击左侧导航栏时，浏览器的地址栏会发生变化，路由自动更新显示与url所对应的vue组件。

而我们vue官方提供了路由插件Vue Router,其主要组成如下：

  • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

  • <router-link>：请求链接组件，浏览器会解析成<a>

  • <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

然后我们页面提供一个<router-link>组件,用户点击，发出路由请求;

接着我们的VueRouter根据路由请求，在路由表中找到对应的vue组件；

最后VueRouter会切换<router-view>中的组件，从而进行视图的更新

2.2 路由入门

我们需要在src/router/index.js文件中定义路由表，根据其提供的模板代码进行修改，最终代码如下：

  1. import Vue  'vue'
  2. import VueRouter  'vue-router'
  3.  
  4. Vue.use(VueRouter)
  5.  
  6. const routes = [
  7.   {
  8.     path: '/emp',  //地址hash
  9.     name: 'emp',
  10.     component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  11.   },
  12.   {
  13.     path: '/dept',
  14.     name: 'dept',
  15.     component: () => import('../views/tlias/DeptView.vue')
  16.   }
  17. ]
  18.  
  19. const router = new VueRouter({
  20.   routes
  21. })
  22.  
  23. export default router

注意需要去掉没有引用的import模块。

路由基本信息配置好了，路由表已经被加载，此时我们还缺少2个东西，就是<router-lin>和<router-view>,所以我们需要修改2个页面（EmpView.vue和DeptView.vue）我们左侧栏的2个按钮为router-link,其代码如下：

  1. <el-menu-item index="1-1">
  2.     <router-link to="/dept">部门管理</router-link>
  3. </el-menu-item>
  4. <el-menu-item index="1-2">
  5.     <router-link to="/emp">员工管理</router-link>
  6. </el-menu-item>

然后我们还需要在内容展示区域即App.vue中定义route-view，作为组件的切换，其App.vue的完整代码如下：

  1. <template>
  2.   <div id="app">
  3.     <!-- {{message}} -->
  4.     <!-- <element-view></element-view> -->
  5.     <!-- <emp-view></emp-view> -->
  6.     <router-view></router-view>
  7.   </div>
  8. </template>
  9.  
  10. <script>
  11. // import EmpView  './views/tlias/EmpView.vue'
  12. // import ElementView  './views/Element/ElementView.vue'
  13. export default {
  14.   components: { },
  15.   data(){
  16.     return {
  17.       "message":"hello world"
  18.     }
  19.   }
  20. }
  21. </script>
  22. <style>
  23.  
  24. </style>

但是我们浏览器打开地址： http://localhost:8080/ ，发现一片空白，因为我们默认的路由路径是/,但是路由配置中没有对应的关系，

所以我们需要在路由配置中/对应的路由组件，代码如下：

  1. const routes = [
  2.   {
  3.     path: '/emp',
  4.     name: 'emp',
  5.     component:  () => import('../views/tlias/EmpView.vue')
  6.   },
  7.   {
  8.     path: '/dept',
  9.     name: 'dept',
  10.     component: () => import('../views/tlias/DeptView.vue')
  11.   },
  12.   {
  13.     path: '/',
  14.     redirect:'/emp' //表示重定向到/emp即可
  15.   },
  16. ]
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/157155
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号