路由警告
roter/index.js
新增数据
流程
1.在新增按钮上面加上点击事件
2.定义弹窗和表单的页面代码
3.点击触发弹窗打开（清空 form 对象）
4.表单要有数据绑定以及表单验证
5.后台要有对应的新增接口来接受数据
6.新增接口负责把数据插入到数据库里面
7.表单输入数据后点击确认按钮，把表单数据传给后台接口
8.新增成功之后要重新加载表格数据，关闭弹窗
Dialog弹窗
<el-dialog title="管理员信息" v-model="data.formVisible" width="500"><template #footer><div class="dialog-footer"><el-button @click="data.formVisible = false">取 消</el-button><el-button type="primary" @click="add = false">保 存</el-button></div></template></el-dialog>
Form 表单
<el-form :model="data.form" label-width="80px" style="padding: 20px 30px 10px 0"><el-form-item label="账号"><el-input v-model="data.form.username" autocomplete="off" /></el-form-item><el-form-item label="名称"><el-input v-model="data.form.name" autocomplete="off" /></el-form-item><el-form-item label="电话"><el-input v-model="data.form.phone" autocomplete="off" /></el-form-item><el-form-item label="邮箱"><el-input v-model="data.form.email" autocomplete="off" /></el-form-item></el-form>
出现“系统异常”怎么办？
看控制台报错，针对错误解决问题
表单验证
- 在表单 el-form 上有三个必须属性
2.在表单 el-form 上写上表单项的 prop
3.在 rules 里面定义验证的规则
4.定义 formRef 对象，作为表单的引用
5.通过 formRef 对象进行表单验证
destroy-on-close 属性可以重置 dialog
引入 Java 工具类 Hutool
<dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.25</version></dependency>
admin 新增流程
public void add(Admin admin) {//根据新的账号查询数据库，是否存在同样账号的数据Admin dbAdmin = adminMapper.selectByUsername(admin.getUsername());if(dbAdmin != null){throw new CustomerException("账号重复");}//默认密码 adminif (StrUtil.isBlank(admin.getPassword())) {admin.setPassword("admin");}adminMapper.insert(admin);}
编辑数据
流程
1.在编辑按钮上面加上点击事件
2.定义弹窗和表单的页面代码
3.点击触发弹窗打开（将行对象的数据 row 深度拷贝给 form 对象）
4.表单要有数据绑定以及表单验证
5.后台要有对应的修改接口来接受数据
6.修改接口负责把数据插入到数据库里面
7.表单输入数据后点击确认按钮，把表单数据传给后台接口
8.修改成功之后要重新加载表格数据，关闭弹窗
报 405 错误
405 错误表示你请求的方法类型跟后端定义的方法类型不一致，比如前端是 put 请求，后台接口是 post 接口
兼容新增和修改
const save = () => {//三元表达式 ？后面第一个表示有，第二个表示没有data.form.id ?update() : add()
}
删除数据
单个删除
const del = (id) => {ElMessageBox.confirm('删除后无法恢复，您确认删除吗？','删除确认',{type:'warning'}).then(res => {request.delete('/admin/delete/'+ id).then(res => {if (res.code === '200') {ElMessage.success('删除成功')load()} else {ElMessage.error(res.msg)}})}).catch(err => {})
}
批量删除
table 的多选事件 @selection-change="handleSelectionChange"
const handleSelectionChange = (rows) => {//rows 就是实际选择的数组data.rows = rows
}const deleteBatch = () => {if (data.rows.length === 0){ElMessage.warning('请选择数据')return}ElMessageBox.confirm('删除后无法恢复，您确认删除吗？','删除确认',{type:'warning'}).then(res => {request.delete('/admin/deleteBatch',{data:data.rows}).then(res => {if (res.code === '200') {ElMessage.success('批量删除成功')load()} else {ElMessage.error(res.msg)}})}).catch(err => {})
}