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

【6】【vue3+elementplus+springboot+mybatisplus】 管理系统 【前后端实践】_springboot postgresql vue3 源码

作者：盐析白兔 | 2024-03-12 21:06:45

赞

踩

springboot postgresql vue3 源码

第一部分：

elementplus官网：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

1、安装elementplus

 npm install element-plus --save

 查看package.json中存在依赖表示成功安装

2、引入elementplus

  1. import ElementPlus from 'element-plus'
  2. import 'element-plus/dist/index.css'
  3.  
  4.  
  5.  
  6.  
  7.  
  8. const app = createApp(App)
  9. app.use(ElementPlus)

注意：vue3不支持elementUI，所以选择以下搭配其中之一（这里我选的是2）

（1）vue2+elementUI

（2）vue3+elementPlus

3、使用组件设置布局

点击官网上方菜单栏的组件，点击

点击布局容器可以看到示例，我们选择使用最下面的侧边栏的示例代码

 

Container 布局容器 | Element Plus (element-plus.org)

 查看示例的代码，这里选择手动引入（elementplus还支持自动按需引入）

 代码主要分成四部分，第一部分我们需要放在template里面，第二部分是选择按需部分引入的方式，我们可以不管，第三部分是放在script里的data部分里面也就是提供页面的数据，具体填入形式如下

  1. <script >
  2. export default {
  3.   name: "HomeView",
  4.   data(){
  5.     const item = {
  6.       date: '2016-05-02',
  7.       name: 'Tom',
  8.       address: 'No. 189, Grove St, Los Angeles',
  9.     };
  10.     return {
  11.       tableData : (Array.from({ length: 20 }).fill(item)),
  12.     }
  13.   }
  14. }
  15.  
  16. </script>

第四部分是页面的样式，不重要，我们可以不使用

引入完成功编译运行后的结果：

4、在asserts文件夹里面创建一个global.css用来书写全局样式

 //global.css

  1. html,body,div{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. html,body{
  6.     height: 100%;
  7. }

然后再main.js里引入 （不要忘了加 ./ ）

 将所有菜单的高度改成100% 这个时候滚动页面整个页面不会跟随滚动，菜单栏可以单独滚动

自行调整样式后：

第二部分

1、改变e-menu的背景颜色等一些属性

  1.  <el-menu :default-openeds="['1', '3']" style="height: 100%;overflow-x:hidden"
  2.           background-color="rgb(48,65,86)"      //菜单背景设为藏蓝
  3.                    text-color="#fff"            //字体设为白色
  4.                    active-text-color="#ffd04b"  //选中后字体变成黄色
  5.                    :collapse-transition="false"
  6.                    :collapse="isCollapse"  //设置初始被展开的属性为false（初始为折叠）
  7.           >

效果：

 2、添加一些图标

先安装elementPlus图标：

npm install --save @element-plus/icons

到elementPlus官网图标下赋值图标标签代码

Icon 图标 | Element Plus (element-plus.org)

  1. <span>Tom
  2.                 <el-icon style="margin-left: 5px">
  3.                   <ArrowDownBold></ArrowDownBold>
  4.                 </el-icon>
  5.               </span>

 效果：

 

编写收缩的方法

  1.  methods: {
  2.     collapse(){ //点击收缩按钮触发
  3.       this.isCollapse=!this.isCollapse
  4.     }
  5.   }

此时收缩会出现问题，文字没有隐藏，宽度不对 

 所以需要将宽度设为动态的

 然后再将导航的名称都放在span标签里，就会自动收缩进去

然后更改如果收缩了，图标就改变，这里我用v-if和v-else的组合

再结合前面设置的isCollapse状态

使得图标可以切换

 效果：

     ------------------》

3、设置菜单栏标题：

  1.  <div  style="height: 60px;line-height: 60px;text-align: center">
  2.               <img src="../assets/logo.png" alt="" style="width: 20px;position: relative;top:5px;margin-right: 5px">
  3.               <b v-show="!isCollapse" style="color: white">后台管理系统</b>
  4.             </div>

效果：

  ----------------------》

 linehight如果设置和垂直高度一致，就会居中，否则就会在上方或者下面

style="line-height: 60px"

效果： 

 ----------》

4、 阴影特效：

首先去掉e-menu的边框的颜色

border-right-color: transparent

再在e-side里面添加阴影属性

box-shadow: 2px 0 6px rgb(0 21 41 / 35%)

效果：

第三部分

1、设置表格页码数

 进到官网页面，pagination 

Pagination 分页 | Element Plus (element-plus.org)

 copy“完整功能”代码

黏贴在e-mian标签下的e-table下

  1.  <div style="padding: 10px 0">
  2.               <el-pagination
  3.                   v-model:current-page="currentPage4"
  4.                   v-model:page-size="pageSize4"
  5.                   :page-sizes="[100, 200, 300, 400]"
  6.                   :small="small"
  7.                   :disabled="disabled"
  8.                   :background="background"
  9.                   layout="total, sizes, prev, pager, next, jumper"
  10.                   :total="400"
  11.  
  12.               />
  13.             </div>

此时可以看到底部的效果，并且还没有生效

2、设置搜索栏（一定要看script里面是否自动导入了输入框图标）

  1.        <el-input style="width: 300px" type="text"  placeholder="请输入名称">
  2.               <template #prefix>
  3.                 <el-icon class="el-input__icon">
  4.                   <search></search>
  5.                 </el-icon>
  6.               </template>
  7.             </el-input>
  8.  
  9.             <el-button  class="ml-5" type="" style="color: orangered">搜索</el-button>

效果：

 扩展多个输入框：

3、设置表头颜色和边框

 <el-table :data="tableData" border stripe >
  1. <style >
  2. .el-table th{
  3.   background-color: beige !important
  4. }
  5. </style>

效果：

4、添加一些按钮：

增删导入导出

  1.  <div style="margin: 10px 0;text-align: left">
  2.             <el-button type="primary">新增
  3.               <el-icon><CirclePlus></CirclePlus></el-icon>
  4.             </el-button>
  5.             <el-button type="danger">批量删除
  6.               <el-icon><remove></remove></el-icon>
  7.             </el-button>
  8.             <el-button type="primary">导入
  9.               <el-icon><bottom></bottom></el-icon>
  10.             </el-button>
  11.             <el-button type="primary">导出
  12.               <el-icon><top></top></el-icon>
  13.             </el-button>
  14.           </div>

表格里的编辑、删除

  1.   <el-table-column  label="操作" >
  2.                 <el-table-column>
  3.                   <template>slot-scope="scope"</template>
  4.                   <el-button type="success">编辑
  5.                     <el-icon><edit></edit></el-icon>
  6.                   </el-button>
  7.                   <el-button type="danger">删除
  8.                     <el-icon><remove></remove></el-icon>
  9.                   </el-button>
  10.                 </el-table-column>
  11.               </el-table-column>

最后的效果：

5、固定表头优化：

(108条消息) vue项目中table表格固定表头和首尾列_梨城毒妃的博客-CSDN博客_vue固定表头

   <el-table :data="tableData" border stripe height="500px" max-height="400px" >

 至此管理系统的前端雏形已经产生

第四部分

1、加一个页签

在官网的面包屑模块下：

Breadcrumb 面包屑 | Element Plus (element-plus.org)

  1.  <div style="margin-bottom: 30px">
  2.             <el-breadcrumb separator="/">
  3.               <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
  4.               <el-breadcrumb-item :to="{path: '/new'}">用户管理</el-breadcrumb-item>
  5.               <el-breadcrumb-item>promotion list</el-breadcrumb-item>
  6.               <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
  7.             </el-breadcrumb>
  8.           </div>

效果：

2、SpringBoot框架搭建

1、创建项目，引入lombok，mybatisplus，mysql等等依赖

后两个依赖在项目勾选时候可以自动导入，所以只用关注前面的

  1.  
  2.     <dependencies>
  3. <!--        lombok-->
  4.         <dependency>
  5.             <groupId>org.projectlombok</groupId>
  6.             <artifactId>lombok</artifactId>
  7.             <scope>provided</scope>
  8.         </dependency>
  9. <!--            mybatisplus-->
  10.         <dependency>
  11.             <groupId>com.baomidou</groupId>
  12.             <artifactId>mybatis-plus-boot-starter</artifactId>
  13.             <version>3.4.1</version>
  14.         </dependency>
  15.  
  16.         <dependency>
  17.             <groupId>com.alibaba</groupId>
  18.             <artifactId>druid</artifactId>
  19.             <version>1.1.16</version>
  20.         </dependency>
  21.         <dependency>
  22.             <groupId>com.mysql</groupId>
  23.             <artifactId>mysql-connector-j</artifactId>
  24.             <scope>runtime</scope>
  25.             <version>8.0.31</version>
  26.         </dependency>
  27.  
  28.  
  29.         <dependency>
  30.             <groupId>com.baomidou</groupId>
  31.             <artifactId>mybatis-plus-core</artifactId>
  32.             <version>3.4.3.1</version>
  33.         </dependency>
  34.  
  35.         <dependency>
  36.             <groupId>org.springframework.boot</groupId>
  37.             <artifactId>spring-boot-starter-web</artifactId>
  38.         </dependency>
  39.         <dependency>
  40.             <groupId>org.springframework.boot</groupId>
  41.             <artifactId>spring-boot-starter-test</artifactId>
  42.             <scope>test</scope>
  43.         </dependency>
  44.     </dependencies>
  45.

2、编写yml文件

  1. spring:
  2.  
  3.   datasource:
  4.     type: com.alibaba.druid.pool.DruidDataSource
  5.     driver-class-name: com.mysql.cj.jdbc.Driver
  6.     url: jdbc:mysql://localhost:3306/mybatisplus_db?serverTimezone=UTC
  7.     username: root
  8.     password: 123456
  9.  
  10.   main:
  11.     banner-mode: off
  12.  
  13. mybatis-plus:
  14.   global-config:
  15.     banner: false
  16. server:
  17.   port: 8081

效果：

项目结构：

 测试springboot

3、数据库设计

建立表：sys_user

 写入数据：

建立包和实体接口

使接口继承BaseMapper，并注解为Mapper

 在写任何controller时候前面都要加一个注解：RestController

测试连接数据库

用lambdaquery来写查询

  1.    @RequestMapping("/select")   //访问路径
  2.     public List<User> select(){
  3.         LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<User>();
  4. //        lqw.like(User::getUsername,'a');
  5.         List<User> userList = userDao.selectList(lqw);
  6.         return userList;
  7.  
  8.     }

结果：

4、springBoot使用MybastisPlus实现分页查询

先设置拦截器：（一定要把pom里面的所有关于mybatisplus的依赖的版本号改成一致的）

 编写接口：

后来发现要加total，所以改成返回Map

  1. @GetMapping("/page")
  2.     public List<User> fingPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize){
  3.         pageNum = (pageNum-1)*pageSize;
  4.         IPage page = new Page(pageNum,pageSize);
  5.        userDao.selectPage(page, null);
  6.         return page.getRecords();
  7.  
  8.     }

 用postman测试：（查出两条数据）

在vue页面查看要传输的数据：

 编写传数据的方法：

  1.   created() {
  2.     //请求分页查询数据
  3.     fetch("http://localhost:9090/user/page?pageNum=1&pageSize=2").then(res => res.json()).then(
  4.         res =>{
  5.             console.log(res)
  6.         })
  7.   },

查看，出现了跨域问题 （前端端口与后端端口不一致）

选择在后端处理跨域

最简单方法:在controller类名前加@CrossOrigin注解，这是最简单的处理方式

比较完善的方法：加入如下代码

(94条消息) SpringBoot解决跨域问题_程序员青戈的博客-CSDN博客_springboot解决跨域问题 青戈

 这个时候我们再次启动后台：此时控制台显示我们的数据获取成功

返回改成map后：（就分成了两组）

封装渲染时加载数据的代码为load

  1.  load(){
  2.       fetch("http://localhost:8081/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(res => res.json()).then(res => {
  3.         console.log(res)
  4.         this.tableData=res.data
  5.         this.total=res.total
  6.       })
  7.     }

在created函数内调用load

  1.   created() {
  2.     //请求分页查询数据
  3.     this.load()
  4.  
  5.   }

created函数：在页面刷新时，重新加载数据，在vue3中有一个setup（）注意里面不能用method里的方法也不能使用this

 

 编写跟随页数更改跳转和重新渲染页面的两个方法：用于动态更改页码和显示数据数目

handleSizeChange(pageSize)
handleCurrentChange

  ​​​​​​Pagination 分页 | Element Plus (element-plus.org)

  1.   handleSizeChange(pageSize){
  2.       this.pageSize = pageSize
  3.       this.load()
  4.     },
  5.     handleCurrentChange(pageNum){
  6.       this.pageNum=pageNum
  7.       this.load()
  8.     }


效果：

至此页码的所有功能都已激活

第五部分

 绑定搜索框，返回搜索数据

增加查询的名称username关键字

  1. @GetMapping("/page")
  2.     public Map<String,Object> fingPage(@RequestParam Integer pageNum,
  3.                                        @RequestParam Integer pageSize,
  4.                                        @RequestParam String username){
  5.         pageNum = (pageNum-1)*pageSize;
  6.         Page page = new Page(pageNum,pageSize);
  7.         LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<User>();
  8.         lqw.like(User::getUsername,username);
  9.         userDao.selectPage(page, lqw);
  10.         Map<String,Object> hm = new HashMap<>();
  11.         hm.put("data",page.getRecords());
  12.         hm.put("total",page.getTotal());
  13.  
  14.         return hm;
  15. //        return userService.findAll();
  16.     }

 我们可以看到我们写完QuerWrapper后可以直接填写到selectPage函数第二个参数里（原来为null）非常巧妙

 我们用postman输入参数尝试查询结果成功，注意此时我们并没有更改任何前端

我们成功后即可用v-model绑定前端的搜索框

 然后写入data（）（默认为空），然后在fetch函数里添加username字段

 绑定前端搜索按钮事件为重新渲染数据

 第一个搜索框的功能已经激活成功

扩展多条件查询（将其它两个搜索框也激活）

总结上面一个框激活的流程：

1、在接口里增加查询的参数，并且增加querymapper对象的方法

2、用v-model绑定搜索框数据，并且绑定按钮渲染函数

3、在后端data增加参数，并且增加fectch渲染函数的参数

清楚了流程，我们做起来就事半功倍了

 

 

 至此多条件查询已激活所有搜索框

 

第六部分

激活新增，批量删除，导入，导出四个按钮 

驼峰映射是自动的，它会把下划线去掉并把下划线原来后面的字母大写

如：user_name->userName

用postman测试如果觉得复杂，可以用swaggerUI（一个接口测试文档）

(94条消息) SpringBoot集成swagger-ui以及swagger分组显示_程序员青戈的博客-CSDN博客_swagger ui 分组 第一步：

导入swagger依赖：

创建swaggerConfig类：

更改包的地址：

 我觉得还是postman好用

使用axios代替fetch （fetch太繁琐）

(94条消息) Vue项目搭建常用的配置文件，request.js和vue.config.js_程序员青戈的博客-CSDN博客_vue config.headers配置

安装axios

npm i axios -s

 新建utils文件夹，并新建js文件

 黏贴封装的request.js代码：

  1. import axios from 'axios'
  2.  
  3. const request = axios.create({
  4. 	baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
  5.     timeout: 5000
  6. })
  7.  
  8. // request 拦截器
  9. // 可以自请求发送前对请求做一些处理
  10. // 比如统一加token，对请求参数统一加密
  11. request.interceptors.request.use(config => {
  12.     config.headers['Content-Type'] = 'application/json;charset=utf-8';
  13.   
  14.  // config.headers['token'] = user.token;  // 设置请求头
  15.     return config
  16. }, error => {
  17.     return Promise.reject(error)
  18. });
  19.  
  20. // response 拦截器
  21. // 可以在接口响应后统一处理结果
  22. request.interceptors.response.use(
  23.     response => {
  24.         let res = response.data;
  25.         // 如果是返回的文件
  26.         if (response.config.responseType === 'blob') {
  27.             return res
  28.         }
  29.         // 兼容服务端返回的字符串数据
  30.         if (typeof res === 'string') {
  31.             res = res ? JSON.parse(res) : res
  32.         }
  33.         return res;
  34.     },
  35.     error => {
  36.         console.log('err' + error) // for debug
  37.         return Promise.reject(error)
  38.     }
  39. )
  40.  
  41.  
  42. export default request
  43.

设置request为全局变量：

在vue2中用prototype设置，vue3中可以用app.config.globalProperties来代替prototype

(94条消息) vue 3.0 prototype 替代用法_寻ing的博客-CSDN博客_vue3 prototype

 我们使用axios后可以看到前后代码对比

使用前：

  1. fetch("http://localhost:8081/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&username="+this.username
  2.           +"&email="+this.email+"&address="+this.address).then(res => res.json()).then(res => {
  3.         console.log(res)
  4.         this.tableData=res.data
  5.         this.total=res.total
  6.       })

 使用后：

  1.  request.get("http://localhost:8081/page",{
  2.         params:{
  3.           pageNum:this.pageNum,
  4.           pageSize:this.pageSize,
  5.           username:this.username,
  6.           email:this.email,
  7.           address:this.address
  8.         }
  9.       }).then(res => {
  10.         console.log(res)
  11.         this.tableData= res.data
  12.         this.total = res.total
  13.  
  14.       })

变得更加简洁，而且达到相同的功能效果

在查询后为了回复原来的页面，增加一个重置按钮

 编写reset方法，思路就是把表单清空，并重新渲染页面，超级简单

  1.     reset(){
  2.       this.username=""
  3.       this.email=""
  4.       this.address=""
  5.       this.load()
  6.     }

dialog对话框编写：

在elementplus官网黏贴代码

 Dialog 对话框 | Element Plus (element-plus.org)

  1.   <el-dialog
  2.     v-model="dialogVisible"
  3.     title="Tips"
  4.     width="30%"
  5.     :before-close="handleClose"
  6.   >
  7.     <span>This is a message</span>
  8.     <template #footer>
  9.       <span class="dialog-footer">
  10.         <el-button @click="dialogVisible = false">Cancel</el-button>
  11.         <el-button type="primary" @click="dialogVisible = false">
  12.           Confirm
  13.         </el-button>
  14.       </span>
  15.     </template>
  16.   </el-dialog>

选择下面的嵌套表单的代码

  1.   <el-dialog v-model="dialogTableVisible" title="Shipping address">
  2.     <el-table :data="gridData">
  3.       <el-table-column property="date" label="Date" width="150" />
  4.       <el-table-column property="name" label="Name" width="200" />
  5.       <el-table-column property="address" label="Address" />
  6.     </el-table>
  7.   </el-dialog>
  8.  
  9.   <!-- Form -->
  10.   <el-button text @click="dialogFormVisible = true">
  11.     open a Form nested Dialog
  12.   </el-button>
  13.  
  14.   <el-dialog v-model="dialogFormVisible" title="Shipping address">
  15.     <el-form :model="form">
  16.       <el-form-item label="Promotion name" :label-width="formLabelWidth">
  17.         <el-input v-model="form.name" autocomplete="off" />
  18.       </el-form-item>
  19.       <el-form-item label="Zones" :label-width="formLabelWidth">
  20.         <el-select v-model="form.region" placeholder="Please select a zone">
  21.           <el-option label="Zone No.1" value="shanghai" />
  22.           <el-option label="Zone No.2" value="beijing" />
  23.         </el-select>
  24.       </el-form-item>
  25.     </el-form>
  26.     <template #footer>
  27.       <span class="dialog-footer">
  28.         <el-button @click="dialogFormVisible = false">Cancel</el-button>
  29.         <el-button type="primary" @click="dialogFormVisible = false">
  30.           Confirm
  31.         </el-button>
  32.       </span>
  33.     </template>
  34.   </el-dialog>

 绑定新增按钮的事件handleAdd

 编写确认按钮的事件save

在这之前要先把接口写好

这里写一个业务层的save接口，然后放在controller里调用即可

 

然后我们设置id为自增规则，并且表数据为倒叙排序，此时我们新增数据功能就完成了：

注意：若想让数据按id倒叙排序，不能并列式的写LambdaQuery，要单独起一行

 我们输入数据即可在数据库中插入数据（id不是随机且自增）

 接下来我们来实现编辑按钮：

在vue3中不能使用 slot-scope 在vue3中用#相当于vue2中的slot=

(94条消息) vue3的slot插槽用法，`slot-scope` are deprecated_浩星的博客-CSDN博客_`slot-scope` are deprecated

 这个时候我们就可以打开这个数据的el-dialog 点击保存即可完成编辑

删除：

编写业务层接口：

 这里写错了，应该用RemoveById方法

编写控制层的接口：

 绑定删除按钮 注意要加id，血的教训

增加一个气泡弹出窗口用来确定是都真正删除

  1. <!--                        确认组件-->
  2.                   <el-popover :visible="visible" placement="top" :width="160" class="ml-5">
  3.  
  4.                       <p>您确定删除吗？</p>
  5.                       <div style="text-align: right; margin: 0">
  6.                         <el-button size="small" text @click="visible = false">我再想想</el-button>
  7.                         <el-button size="small" type="primary" @click="handleDelete(scope.row.id)"
  8.                         >确认</el-button
  9.                         >
  10.                       </div>
  11.  
  12.                   <template #reference>
  13.                     <el-button type="danger" >删除
  14.                       <el-icon><remove></remove></el-icon>
  15.                     </el-button>
  16.                   </template>
  17.                   </el-popover>

注意不要忘了在templete标签里写#reference 不然按钮会不显示  

多选： 

 

在e-table标签下加入一行代码，并且在e-table标签里写入

@selection-change="handleSelectionChange

 之后编写批量删除的接口

  1.     //批量删除的接口
  2.     @DeleteMapping("/del/batch")
  3.     public boolean deleteBatch(@RequestBody List<Integer> ids){
  4.         return userService.removeByIds(ids);
  5.     }

在vue里编写delBatch方法

  1.  delBatch(){
  2.       let ids = this.multipleSelection.map(v => v.id)
  3.       console.log(ids)//[{}.{}.{}] => [1,2,3]
  4.       request.delete("http://localhost:8081/del/batch",{data:ids}).then(res => {
  5.         if(res){
  6.           this.$message.success("批量删除成功")
  7.  
  8.         }else{
  9.           this.$message.error(("批量删除失败"))
  10.         }
  11.         this.load();
  12.       })
  13.     }

设置批量删除气泡弹窗，并绑定事件

  1.  
  2.             <!--                        确认组件-->
  3.             <el-popover :visible="visible" placement="top" :width="160" class="ml-5">
  4.  
  5.               <p>您确定批量删除数据吗？</p>
  6.               <div style="text-align: right; margin: 0">
  7.                 <el-button size="small" text @click="visible = false">我再想想</el-button>
  8.                 <el-button size="small" type="primary" @click="delBatch"
  9.                 >确认</el-button
  10.                 >
  11.               </div>
  12.  
  13.               <template #reference>
  14.                 <el-button type="danger" >批量删除
  15.                   <el-icon><remove></remove></el-icon>
  16.                 </el-button>
  17.               </template>
  18.             </el-popover>

效果：

优化：

发现：如果不把load（）重新加载数据放在最后一行，在新增操作保存后多选数据气泡窗口可能不显示

新增多选按钮，点击出现多选框，再次点击隐藏

给多选框绑定v-if

            <el-table-column v-if="letapear" type="selection" width="55" />

将letapear初始值默认为false

设置多选按钮 用双括号绑定名称

  1. <!--              多选按钮-->
  2.               <el-button type="info" @click="Apearselection">{{duoxuan}}
  3.                 <el-icon><CirclePlus></CirclePlus></el-icon>
  4.               </el-button>

编写方法：

  1. Apearselection(){
  2.       if(!this.letapear){
  3.         this.letapear=true;
  4.         this.duoxuan="取消多选"
  5.       }else{
  6.         this.letapear=false;
  7.         this.duoxuan="多选"
  8.       }
  9.  
  10.     }

效果：

---------------->

第七部分

 1、封装侧边栏

新建一个Aside.vue将以下代码（e-menu）从menage.vue移动到里面

  1.  <el-menu :default-openeds="['1', '3']" style="height: 100%;overflow-x:hidden;border-right-color: transparent"
  2.                    background-color="rgb(48,65,86)"
  3.                    text-color="#fff"
  4.                    active-text-color="#ffd04b"
  5.                    :collapse-transition="false"
  6.                    :collapse="isCollapse"
  7.           >
  8.             <div  style="height: 60px;line-height: 60px;text-align: center">
  9.               <img src="../assets/logo.png" alt="" style="width: 20px;position: relative;top:5px;margin-right: 5px">
  10.  
  11.               <b v-show="!isCollapse" style="color: white">后台管理系统</b>
  12.             </div>
  13.             <el-sub-menu index="1">
  14.               <template #title>
  15.                 <el-icon>
  16.                   <message></message>
  17.                 </el-icon>
  18.                 <span>导航一</span>
  19.               </template>
  20.               <el-menu-item-group>
  21.                 <template #title>Group 1</template>
  22.                 <el-menu-item index="1-1">Option 1</el-menu-item>
  23.                 <el-menu-item index="1-2">Option 2</el-menu-item>
  24.               </el-menu-item-group>
  25.               <el-menu-item-group title="Group 2">
  26.                 <el-menu-item index="1-3">Option 3</el-menu-item>
  27.               </el-menu-item-group>
  28.               <el-sub-menu index="1-4">
  29.                 <template #title>Option4</template>
  30.                 <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
  31.               </el-sub-menu>
  32.             </el-sub-menu>
  33.             <el-sub-menu index="2">
  34.               <template #title>
  35.                 <el-icon>
  36.                   <Menu></Menu>
  37.  
  38.                 </el-icon>
  39.                 <span>导航二</span>
  40.               </template>
  41.               <el-menu-item-group>
  42.                 <template #title>Group 1</template>
  43.                 <el-menu-item index="2-1">Option 1</el-menu-item>
  44.                 <el-menu-item index="2-2">Option 2</el-menu-item>
  45.               </el-menu-item-group>
  46.               <el-menu-item-group title="Group 2">
  47.                 <el-menu-item index="2-3">Option 3</el-menu-item>
  48.               </el-menu-item-group>
  49.               <el-sub-menu index="2-4">
  50.                 <template #title>Option 4</template>
  51.                 <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
  52.               </el-sub-menu>
  53.             </el-sub-menu>
  54.             <el-sub-menu index="3">
  55.               <template #title>
  56.                 <el-icon>
  57.                   <Setting></Setting>
  58.                 </el-icon>
  59.                 <span>导航三</span>
  60.               </template>
  61.               <el-menu-item-group>
  62.                 <template #title>Group 1</template>
  63.                 <el-menu-item index="3-1">Option 1</el-menu-item>
  64.                 <el-menu-item index="3-2">Option 2</el-menu-item>
  65.               </el-menu-item-group>
  66.               <el-menu-item-group title="Group 2">
  67.                 <el-menu-item index="3-3">Option 3</el-menu-item>
  68.               </el-menu-item-group>
  69.               <el-sub-menu index="3-4">
  70.                 <template #title>Option 4</template>
  71.                 <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
  72.               </el-sub-menu>
  73.             </el-sub-menu>
  74.           </el-menu>

然后再AsideView里面编写props将用到的原来组件的参数传入进来，并且编写components将原来用到的组件传递过来

然后在原来的界面引入AsideView组件，并且使用该组件

 e-side我们就转移完毕了

 然后我们转移e-header

将e-header代码转移到HeaderView里面，然后将style样式做部分迁移，因为转移后，都放在外面不好使。

  1. <div style="text-align: left; font-size: 12px; line-height: 60px;
  2.           display: flex">
  3.  
  4.   <div style="flex:1;font-size: 18px">
  5.     <el-icon style="cursor: pointer" @click="collapse">
  6.       <Fold v-if="isCollapse"></Fold>
  7.       <Expand v-else></Expand>
  8.     </el-icon>
  9.   </div>
  10.   <div class="toolbar">
  11.  
  12.     <el-dropdown style="width: 100px;cursor: pointer" >
  13.               <span style="line-height: 60px">Tom
  14.                 <el-icon style="margin-left: 5px">
  15.                   <ArrowDownBold></ArrowDownBold>
  16.                 </el-icon>
  17.               </span>
  18.       <template #dropdown>
  19.         <el-dropdown-menu>
  20.           <el-dropdown-item>个人信息</el-dropdown-item>
  21.           <el-dropdown-item>退出</el-dropdown-item>
  22.           <el-dropdown-item>Delete</el-dropdown-item>
  23.         </el-dropdown-menu>
  24.       </template>
  25.     </el-dropdown>
  26.  
  27.   </div>
  28. </div>

 然后本来collapse方法在原来的主vue里面，所以我们要定义一个方法，并且通过$emit

将本组件的请求发送过去：

 然后再在主vue引入我们的header，并且在header里面连接方法

 这样header就拆装完毕了

之后我们再把e-main拿出来单独封装

建立一个TableView.vue  

 之后将e-main里面的代码放在里面

  1. <template>
  2.   <div style="margin-bottom: 30px">
  3.     <el-breadcrumb separator="/">
  4.       <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
  5.       <el-breadcrumb-item :to="{path: '/new'}">用户管理</el-breadcrumb-item>
  6.       <el-breadcrumb-item>promotion list</el-breadcrumb-item>
  7.       <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
  8.     </el-breadcrumb>
  9.   </div>
  10.  
  11.   <div style="margin: 10px 0;text-align: left" >
  12.     <!--            名称搜索-->
  13.     <el-input style="width: 200px" type="text"  placeholder="请输入名称" v-model="username">
  14.       <template #prefix>
  15.         <el-icon class="el-input__icon">
  16.           <search></search>
  17.         </el-icon>
  18.       </template>
  19.     </el-input>
  20.     <!--            邮箱输入-->
  21.     <el-input style="width: 200px" type="text"  placeholder="请输入邮箱" class="ml-5"  v-model="email">
  22.       <template #prefix>
  23.         <el-icon class="el-input__icon">
  24.           <message></message>
  25.         </el-icon>
  26.       </template>
  27.     </el-input>
  28.     <!--           地址搜索-->
  29.     <el-input style="width: 200px" type="text"  placeholder="请输入地址" class="ml-5"  v-model="address">
  30.       <template #prefix>
  31.         <el-icon class="el-input__icon">
  32.           <location></location>
  33.         </el-icon>
  34.       </template>
  35.     </el-input>
  36.     <!--            搜索按钮-->
  37.     <el-button  class="ml-5" type="" style="color: orangered" @click="load">搜索</el-button>
  38.     <el-button  class="mr-5" type="warning" style="color: white" @click="reset">重置</el-button>
  39.   </div>
  40.  
  41.   <div style="margin: 10px 0;text-align: left">
  42.     <el-button type="primary" @click="handleAdd">新增
  43.       <el-icon><CirclePlus></CirclePlus></el-icon>
  44.     </el-button>
  45.  
  46.     <!--              多选按钮-->
  47.     <el-button type="info" @click="Apearselection">{{duoxuan}}
  48.       <el-icon><CirclePlus></CirclePlus></el-icon>
  49.     </el-button>
  50.     <!--                        确认组件-->
  51.     <el-popover :visible="visible" placement="top" :width="160" class="ml-5">
  52.  
  53.       <p>您确定批量删除数据吗？</p>
  54.       <div style="text-align: right; margin: 0">
  55.         <el-button size="small" text @click="visible = false">我再想想</el-button>
  56.         <el-button size="small" type="primary" @click="delBatch"
  57.         >确认</el-button
  58.         >
  59.       </div>
  60.  
  61.       <template #reference>
  62.         <el-button type="danger" >批量删除
  63.           <el-icon><remove></remove></el-icon>
  64.         </el-button>
  65.       </template>
  66.     </el-popover>
  67.  
  68.     <el-button type="primary">导入
  69.       <el-icon><bottom></bottom></el-icon>
  70.     </el-button>
  71.     <el-button type="primary">导出
  72.       <el-icon><top></top></el-icon>
  73.     </el-button>
  74.   </div>
  75.   <!--          <el-scrollbar>-->
  76.  
  77.   <el-table :data="tableData" border stripe height="500px" max-height="350px"
  78.             @selection-change="handleSelectionChange">
  79.     <!--            多选框-->
  80.     <el-table-column v-if="letapear" type="selection" width="55" />
  81.  
  82.     <el-table-column prop="id" label="ID" width="50" />
  83.     <el-table-column prop="username" label="用户名" width="140" />
  84.     <el-table-column prop="nickname" label="昵称" width="120" />
  85.     <el-table-column prop="address" label="地址" />
  86.     <el-table-column prop="email" label="邮箱" />
  87.     <el-table-column prop="phone" label="电话" />
  88.  
  89.     <el-table-column  label="操作" >
  90.       <el-table-column>
  91.         <template #default="scope">
  92.           <el-button type="success" @click="handleEdit(scope.row)" >编辑
  93.             <el-icon><edit></edit></el-icon>
  94.           </el-button>
  95.  
  96.           <!--                        确认组件-->
  97.           <el-popover :visible="visible" placement="top" :width="160" class="ml-5">
  98.  
  99.             <p>您确定删除吗？</p>
  100.             <div style="text-align: right; margin: 0">
  101.               <el-button size="small" text @click="visible = false">我再想想</el-button>
  102.               <el-button size="small" type="primary" @click="handleDelete(scope.row.id)"
  103.               >确认</el-button
  104.               >
  105.             </div>
  106.  
  107.             <template #reference>
  108.               <el-button type="danger" >删除
  109.                 <el-icon><remove></remove></el-icon>
  110.               </el-button>
  111.             </template>
  112.           </el-popover>
  113.  
  114.         </template>
  115.       </el-table-column>
  116.     </el-table-column>
  117.  
  118.   </el-table>
  119.   <!--            页尾-->
  120.   <div style="padding: 10px 0">
  121.     <el-pagination
  122.         @size-change="handleSizeChange"
  123.         @current-change="handleCurrentChange"
  124.         :current-page="pageNum"
  125.         :page-size="pageSize"
  126.         :page-sizes="[2, 5, 10, 20]"
  127.         :small="small"
  128.         :disabled="disabled"
  129.         :background="background"
  130.         layout="total, sizes, prev, pager, next, jumper"
  131.         :total="total">
  132.  
  133.     </el-pagination>
  134.   </div>
  135.   <!--          </el-scrollbar>-->
  136.  
  137.  
  138.  
  139.   <el-dialog title="用户信息"  v-model="dialogFormVisible" width="30%">
  140.     <el-form :model="form" label-width="80px" size="small">
  141.       <el-form-item label="用户名" >
  142.         <el-input v-model="form.username" autocomplete="off" />
  143.       </el-form-item>
  144.       <el-form-item label="昵称" >
  145.         <el-input v-model="form.nickname" autocomplete="off" />
  146.       </el-form-item>
  147.       <el-form-item label="邮箱" >
  148.         <el-input v-model="form.email" autocomplete="off" />
  149.       </el-form-item>
  150.       <el-form-item label="电话" >
  151.         <el-input v-model="form.phone" autocomplete="off" />
  152.       </el-form-item>
  153.       <el-form-item label="地址" >
  154.         <el-input v-model="form.address" autocomplete="off" />
  155.       </el-form-item>
  156.     </el-form>
  157.     <template #footer>
  158.                 <span class="dialog-footer">
  159.                   <el-button @click="dialogFormVisible = false,this.load">取消</el-button>
  160.                   <el-button type="primary" @click="save">
  161.                     确认
  162.                   </el-button>
  163.                 </span>
  164.     </template>
  165.   </el-dialog>
  166. </template>
  167.  
  168. <script>
  169. import {Bottom, CirclePlus, Edit, Location, Message, Remove, Search, Top} from "@element-plus/icons";
  170.  
  171.  
  172. export default {
  173.   name: "TableView",
  174.   components: {
  175.     Edit,
  176.     Top,
  177.     Bottom,
  178.     Remove,
  179.     CirclePlus,
  180.     Location, Search,
  181.     Message,
  182.     },
  183.   data(){
  184.     // const item = {
  185.     //   date: '2016-05-02',
  186.     //   name: 'Tom',
  187.     //   address: 'No. 189, Grove St, Los Angeles',
  188.     // };
  189.  
  190.     return {
  191.       // tableData : (Array.from({ length: 20 }).fill(item)),
  192.       tableData :[],
  193.       pageNum:1,
  194.       pageSize:2,
  195.  
  196.       total:0,
  197.       username:"",
  198.       email:"",
  199.       address:"",
  200.       isCollapse:true,
  201.       sidewidth:200,
  202.       dialogFormVisible:false,
  203.       form:{},
  204.       multipleSelection:[],
  205.       letapear:false,
  206.       duoxuan:"多选"
  207.     }
  208.   },
  209.   created() {
  210.     //请求分页查询数据
  211.     this.load()
  212.  
  213.   },
  214.   methods:{
  215.     load(){
  216.       this.request.get("http://localhost:8081/page",{
  217.         params:{
  218.           pageNum:this.pageNum,
  219.           pageSize:this.pageSize,
  220.           username:this.username,
  221.           email:this.email,
  222.           address:this.address
  223.         }
  224.       }).then(res => {
  225.         console.log(res)
  226.         this.tableData= res.data
  227.         this.total = res.total
  228.       })
  229.     },
  230.     save(){
  231.       this.request.post("http://localhost:8081/save",this.form).then(res => {
  232.         if(res){
  233.           this.$message.success("保存成功")
  234.  
  235.         }else{
  236.           this.$message.error(("保存失败"))
  237.  
  238.         }
  239.         this.load();
  240.         this.dialogFormVisible=false;
  241.       })
  242.     },
  243.     handleSelectionChange(val){
  244.       // console.log(val)
  245.       this.multipleSelection = val;
  246.  
  247.     },
  248.     handleAdd(){
  249.       this.dialogFormVisible=true;
  250.       this.form={}
  251.     },
  252.     handleEdit(row){
  253.       this.dialogFormVisible=true;
  254.       this.form = Object.assign({},row);
  255.  
  256.     },
  257.     handleDelete(id){
  258.       this.request.delete("http://localhost:8081/"+id).then(res => {
  259.         if(res){
  260.           this.$message.success("删除成功")
  261.  
  262.         }else{
  263.           this.$message.error(("删除失败"))
  264.         }
  265.         this.load();
  266.       })
  267.     },
  268.     delBatch(){
  269.       let ids = this.multipleSelection.map(v => v.id)
  270.       console.log(ids)//[{}.{}.{}] => [1,2,3]
  271.       this.request.delete("http://localhost:8081/del/batch",{data:ids}).then(res => {
  272.         if(res){
  273.           this.$message.success("批量删除成功")
  274.  
  275.         }else{
  276.           this.$message.error(("批量删除失败"))
  277.         }
  278.         this.load();
  279.       })
  280.     },
  281.     Apearselection(){
  282.       if(!this.letapear){
  283.         this.letapear=true;
  284.         this.duoxuan="取消多选"
  285.       }else{
  286.         this.letapear=false;
  287.         this.duoxuan="多选"
  288.       }
  289.  
  290.     },
  291.     reset(){
  292.       this.username=""
  293.       this.email=""
  294.       this.address=""
  295.       this.load()
  296.     },
  297.     handleSizeChange(pageSize){
  298.       this.pageSize = pageSize
  299.       this.load()
  300.     },
  301.     handleCurrentChange(pageNum){
  302.       this.pageNum=pageNum
  303.       this.load()
  304.     }
  305.   }
  306. }
  307. </script>
  308.  
  309. <style scoped>
  310.  
  311. </style>

再把meanagor组件的大部分方法和属性和组件（除了折叠的方法，和用到的属性，其它都迁移到TableView里面）

然后把TableView放在路由里面：作为

它的子路由，这样就可以通过主路由加载子路由的方式拼装整个页面，这样侧边栏就会一直出现在页面里供我们操作 

我们也定义一个home放在里面当子路由：

 设置重定向：

 之后我们就可以通过路由入口的方式把路由入口router-view放在父组件需要加载子组件的地方

这样我们就可以通过访问子路由的方式 让整个页面加载

 

至此我们就把整个menager组件的所有功能拆分开成不同的组件，这样方便管理，方便维护更改

然后我们设置侧边栏点击可以跳转我们之前设置的两个路由界面：home，table

这个很简单我们只需要更改el-menu-item标签里的 index即可

 不过在此之前一定要记得把e-menu里面的router属性自己手动设为true ，它默认为false

 

 这样我们就实现了点击侧边栏跳转到我们设置的路由

 之后我们实现导入导出功能

这个功能要依赖于hutool，所以我们导入以下依赖

  1.         <dependency>
  2.             <groupId>cn.hutool</groupId>
  3.             <artifactId>hutool-all</artifactId>
  4.             <version>5.7.20</version>
  5.         </dependency>
  6.         <dependency>
  7.             <groupId>org.apache.poi</groupId>
  8.             <artifactId>poi-ooxml</artifactId>
  9.             <version>4.1.2</version>
  10.         </dependency>

hutool官网;https://www.wpsshop.cn/w/盐析白兔/article/detail/225805

推荐阅读
相关标签

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

  

闽ICP备14008679号