基于Springboot2+Vue3的Partner交友项目(四)

后台管理

环境搭建

1 创建vue3项目 npm init vue@latest

2 运行项目 cd partner-manager 、 npm install 、 npm run dev

3 npm 配置淘宝镜像 npm config set registry https://registry.npm.taobao.org

4 配置启动

5 vite.config.js 配置端口号

export default defineConfig({server: {host: '0.0.0.0',port: 7000,https: false,}
})

6 安装依赖

element-plus 安装：npm install element-plus --save

// main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'app.use(ElementPlus)

iicon组件 安装：npm i @element-plus/icons-vue -S

axios 安装：npm i axios -S 封装 request.js 和 config.js

// config.js
export default {serverUrl: 'localhost:9090'
}
// request.js   直接复制前端项目的  

缓存持久化插件 pinia数据是缓存到内存的，开启持久化后才能缓存到浏览器

安装： npm i pinia-plugin-persistedstate -S

// main.js 引用
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

7 布局主页面

8 分页插件中文设置：

// 在main.js里引入：
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'app.use(ElementPlus, {locale: zhCn,
})

9 完成后台管理基本框架：头部菜单、左侧菜单、主体。主体分文搜索区域、表格区域、分页区域。

后台登录及数据请求

后台登录：实现 Login.vue，用到了 request.js 、config.js 、user.js。直接复制前端项目的，但 user.js 里面的 user 属性需

​ 要改为 manager。否则前后端用的同一个缓存且变量名一样，退出登录时删除后端数据会导致前台数据被删。

数据请求：实现 load 方法。

const namex = ref('')
const address = ref('')
const pageNum= ref(1)
const pageSize = ref(6)
const total = ref(0)const state = reactive({tableData: [],form: {} // 绑定表单类容
})// 拿后台数据
const load = () => {request.get('user/page',{params: {namex: namex.value, // 注意.valueaddress: address.value,pageNum: pageNum.value,pageSize: pageSize.value,}}).then(res => {console.log(res)state.tableData = res.data.recordstotal.value = res.data.total})
}
load()

后台管理增删改查

实现退出登录

   // UserServiceImpl@Overridepublic void logout(String uid) {// 退出登录 satoken提供StpUtil.logout(uid);log.info("用户{}退出成功", uid);}//  WebController @ApiOperation(value = "用户退出登录接口")@GetMapping("/logout/{uid}")public Result logout(@PathVariable String uid) {userService.logout(uid);return Result.success();}

  const logout = () => {request.get('/logout/' + user.uid).then(res => {if (res.code === '200') {userStore.logout() // 把当前用户信息删除} else {ElMessage.error(res.msg)}})}

实现分页 分页插件 Mybatis-plus官网：https://baomidou.com/

package com.partner.boot.common;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
public class MybatisPlusConfig {/*** 新的分页插件,一缓和二缓遵循mybatis的规则,需要设置 MybatisConfiguration#useDeprecatedExecutor = false 避免缓存出现问题(该属性会在旧插件移除后一同移除)*/@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}

实现查询和重置 多条件分页模糊查询 前端还是调用load

     // UserController @GetMapping("/page")public Result findPage(@RequestParam(defaultValue = "") String namex,@RequestParam(defaultValue = "") String address,@RequestParam Integer pageNum,@RequestParam Integer pageSize) {System.out.print(namex + "  " +address  + "  " + pageNum  + "  " + pageSize);QueryWrapper<User> queryWrapper = new QueryWrapper<User>().orderByDesc("id");// !"" = StrUtil.isNotBlank(name)  name and addressqueryWrapper.like(StrUtil.isNotBlank(namex), "namex", namex);queryWrapper.like(StrUtil.isNotBlank(address), "address", address);return Result.success(userService.page(new Page<>(pageNum, pageSize), queryWrapper));}

// 刷新
const reset = () => {namex.value = ''load()
}

设置每页信息数 当前页面数

    // 页面数const  currentChange = (num) => {console.log(num)pageNum.value = numload()}// 页面大小const handleSizeChange = (size) => {console.log(size)pageSize.value = sizeload()}<!-- 分页 @=v-on--><div style="margin: 10px 0"><el-pagination@current-change="currentChange"@size-change="handleSizeChange"v-model:current-page="pageNum"v-model:page-size="pageSize"background:page-sizes="[2, 4, 6, 10, 20]"layout="total, sizes, prev, pager, next, jumper":total=totalclass="mt-4"/></div>

实现新增与编辑，element弹窗组件，dialog

const dialogFormVisible = ref(false)const ruleFormRef = ref()// 新增校验规则
const rules = reactive({namex: [{ required: true, message: '请输入名称', trigger: 'blur' },{min: 3, max: 20, message: '长度在3-20之间', trigger: 'blur'}]
})// 新增
const handleAdd = () => {dialogFormVisible.value = trueruleFormRef.value.resetFields() // 取消校验提示state.form = {}
}// 保存
const save = () => {ruleFormRef.value.validate(valid => {// valid就是校验的结果// if (valid) {//   request.post('/user',state.form).then(res => {//     // 保存新用户//     if (res.code === '200') {//       ElMessage.success('保存成功')//       // 关闭弹窗//       dialogFormVisible.value = false//       load()  // 刷新表格数据//     } else {//       ElMessage.error(res.msg)//     }//   })// 区分新增与修改request.request({url: '/user',method: state.form.id ? 'put' : 'post',data: state.form}).then(res => {if (res.code === '200') {ElMessage.success('保存成功')dialogFormVisible.value = falseload()  // 刷新表格数据} else {ElMessage.error(res.msg)}})})
}// 编辑
const handleEdit = (raw) => {state.form = JSON.parse(JSON.stringify(raw))  // 以下两段代码位置不可以互换dialogFormVisible.value = trueruleFormRef.value.resetFields() // 取消校验提示
}<!-- 弹窗 --><el-dialog v-model="dialogFormVisible" title="信息" width="40%"><el-form ref="ruleFormRef" :rules="rules" :model="state.form" label-width="80px" style="padding: 0 20px" status-icon><!-- 保存新用户--><el-form-item prop="username" label="用户名" ><el-input v-model="state.form.username" autocomplete="off" /></el-form-item><el-form-item prop="namex" label="姓名" ><el-input v-model="state.form.namex" autocomplete="off" /></el-form-item><el-form-item prop="email" label="邮箱" ><el-input v-model="state.form.email" autocomplete="off" /></el-form-item><el-form-item prop="address" label="地址" ><el-input v-model="state.form.address" autocomplete="off" /></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogFormVisible = false"> 取消 </el-button><el-button type="primary" @click="save"> 保存 </el-button></span></template></el-dialog>

增加地址字段，在数据库中加字段，在后端的实体类里也要增加。

实现删除

// 删除
const del = (id) => {request.delete('/user/' + id).then(res => {if (res.code === '200') {ElMessage.success('操作成功')load()  // 刷新表格数据} else {ElMessage.error(res.msg)}})
}

删除是逻辑删除，防止数据误删除

导入导出和批量删除

导出 先实现导出，因为导入需要一个模板导，导出成一个模板，再修改模板然后实现导入。 导出实际就是打开一个新

​ 的链接下载表格数据。导出是没有权限验证的，需要在 MyWebMvcConfig.java里面进行放 行: “/**/export”。

    // 导出接口const exportData = () => {window.open(`http://${config.serverUrl}/user/export`)}<!-- 导出 --><el-button type="primary" @click="exportData" class="ml5"><el-icon style="vertical-align: middle"><Top /></el-icon>  <span style="vertical-align: middle"> 导出 </span></el-button>

加上这个依赖，才能实现Excel导入导出

<dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.3</version>
</dependency>

    /***  UserController 导出接口*/@GetMapping("/export")public void export(HttpServletResponse response) throws Exception {// 从数据库查询出所有的数据List<User> list = userService.list();// 在内存操作，写出到浏览器 1操作ExcelWriter的一个对象ExcelWriter writer = ExcelUtil.getWriter(true);// 一次性写出list内的对象到excel，使用默认样式，强制输出标题writer.write(list, true);// 设置浏览器响应的格式 2 response对象response.setContentType("application/vnd.openxmlformats-"+ "officedocument.spreadsheetml.sheet;charset=utf-8");// 编码String fileName = URLEncoder.encode("User信息表", "UTF-8");// attachment 附件形式response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");// 3 写出到浏览器ServletOutputStream out = response.getOutputStream();writer.flush(out, true);out.close();writer.close();}

输出为excel统一请求头

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8

导入 导入可以理解为文件上传 ，后端没有对导入进行放行，因为是一个Post请求，所以需要校验token

    const userStore = useUserStore()const token = userStore.getBearerTokenconst handleImportSuccess = () => {// 刷新表格load()ElMessage.success("导入成功")}<!--  导入 --><el-uploadclass="ml5":show-file-list="false"style="display: inline-block; position: relative; top: 3px":action='`http://${config.serverUrl}/user/import`':on-success="handleImportSuccess":headers="{ Authorization: token}"><el-button type="primary"><el-icon style="vertical-align: middle"><Bottom /></el-icon>  <span style="vertical-align: middle"> 导入 </span></el-button></el-upload>

    /*** excel 导入* @param file* @throws Exception*/@PostMapping("/import")public Result imp(MultipartFile file) throws Exception {// 1 理解为文件上传 将file转换为流InputStream inputStream = file.getInputStream();// 2 操作ExcelReader的一个对象 从流里读数据ExcelReader reader = ExcelUtil.getReader(inputStream);// 3 通过 javabean 的方式读取Excel内的对象，但是要求表头必须是英文，跟javabean的属性要对应起来List<User> list = reader.readAll(User.class);// userService.saveBatch(list);// 应该对用户存的数据进行校验for (User user : list) {userService.saveUser(user);}return Result.success();}

导入用户数据的时候，注意校验数据得合法性，我是通过 saveUser 方法进行保存数据的

注意模板的选择，id列要删除，否则会报错。敏感的数据要清空，比如：uid。

批量删除

    // 批量删除const multipleSelection = ref([])const handleSelectionChange = (val) => {multipleSelection.value = val}const confirmDelBatch = () => {if (!multipleSelection.value || !multipleSelection.value.length) {ElMessage.warning("请选择数据")return}// 把对象数组 multipleSelection.value  转化为只包含 id 的纯数字 的数组 idArrconst idArr = multipleSelection.value.map(v => v.id)console.log(idArr)request.post('/user/del/batch', idArr).then(res => {if (res.code === '200') {ElMessage.success('操作成功')load()  // 刷新表格数据} else {ElMessage.error(res.msg)}})}<!-- 批量删除 --><el-popconfirm title="您确定删除吗？" @confirm="confirmDelBatch"><template #reference><el-button type="danger" style="margin-left: 5px"><el-icon style="vertical-align: middle"><Remove /></el-icon>  <span style="vertical-align: middle"> 批量删除 </span></el-button></template></el-popconfirm>

    //  UserController@PostMapping("/del/batch")public Result deleteBatch(@RequestBody List<Integer> ids) {// 后端是list列表对象，前端是list数组，springMVC在做转换的时候，// 他会把前端的数组 通过json的方式 映射成一个listuserService.removeByIds(ids);return Result.success();}

注意批量删除触发的时机，点击行的时候只是保存了行id数组，真正的删除是在点击

[批量删除] 按钮的时候触发的！

问题集

排查错误：先看请求，即前端传的值是否有问题；再看后台，后台记录可能有问题。

问题一：退出登录时删除后端数据会导致前台数据也被删除

解决：前后端用的同一个缓存且变量名一样，将前端变量名改为manager

问题二：新增保存不成功

解决：后台报错没设置默认密码，修改UserController里的save方法，将调用save改为调用saveUser，会校验用户是否存

​ 在，也会设置初始密码。同时需要在UserServiceImpl将saveUser方法改为public，在IUserService里的定义

​ saveUser方法。

问题三：form = JSON.parse(JSON.stringify(raw)) 这么赋值，form会变成响应式，就没法编辑

解决： const state = reactive({ form: {} })