五、前后台协议联调实现CRUD
1. 导入前端页面
具体代码可以在我主页上传的的资源里找到
2. 在config包下编辑创建springmvc路径支持类SpringMvcSupport
@Configuration public class SpringMvcSupport extends WebMvcConfigurationSupport { @Override protected void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/pages/**").addResourceLocations("/pages/"); registry.addResourceHandler("/css/**").addResourceLocations("/css/"); registry.addResourceHandler("/js/**").addResourceLocations("/js/"); registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/"); } }
3. 加载springmvc支持类（在springmvc配置中扫描config包)
@Configuration @ComponentScan({"org.example.controller","org.example.config"}) @EnableWebMvc public class SpringMvcConfig { }
4. 运行tomcat,访问页面
- - 查询
5. 查询获取数据（渲染数据是前端双向绑定做的）
- 注释及相关的查询js代码
- 发送ajax请求
- 请求类型是get
- 请求路径是rest风格“/books”
- 请求结果模型dataList
- 从res.data中取数据
- 进一步从自定义的data字段中取数据
getAll() { axios.get("/books").then((res)=>{ this.dataList = res.data.data; }); }
- 重启tomcat再次访问books.html
- - 添加
6. 添加功能
- 为了实现判断是否添加失败的功能，BookDao中的方法的返回值由void改为int，代表行计数（即该操作改变了多少行）
public interface BookDao { // @Insert("insert into tbl_book values(null,#{type},#{name},#{description})") @Insert("insert into tbl_book (type,name,description) values(#{type},#{name},#{description})") public int save(Book book); @Update("update tbl_book set type = #{type}, name = #{name}, description = #{description} where id = #{id}") public int update(Book book); @Delete("delete from tbl_book where id = #{id}") public int delete(Integer id); @Select("select * from tbl_book where id = #{id}") public Book getById(Integer id); @Select("select * from tbl_book") public List<Book> getAll(); }
- 修改业务层实现类，当操作成功则返回值大于1，为true；反之，为false
@Transactional public class BookServiceImpl implements BookService { @Autowired private BookDao bookDao; public boolean save(Book book) { return bookDao.save(book) > 0; } public boolean update(Book book) { return bookDao.update(book) > 0; } public boolean delete(Integer id) { return bookDao.delete(id) > 0; } public Book getById(Integer id) { if(id == 1){ throw new BusinessException(Code.BUSINESS_ERR,"请不要使用你的技术挑战我的耐性!"); } // //将可能出现的异常进行包装，转换成自定义异常 // try{ // int i = 1/0; // }catch (Exception e){ // throw new SystemException(Code.SYSTEM_TIMEOUT_ERR,"服务器访问超时，请重试!",e); // } return bookDao.getById(id); } public List<Book> getAll() { return bookDao.getAll(); } }
- 注释及相关的添加操作js代码
- 发送ajax请求
- 添加的请求类型是post
- 请求的rest风格路径是“/books”
- 提交的内容是表单数据，经查询，本案例中添加表单自定义标识符叫formData
- $message.error() 在该前端框架中代表切换失败的样式
- 获得的数据res.data,自定义状态码code，获取的数据中的状态码res.data.code
- 添加操作完后重新获取所有数据this.getAll()
handleAdd () { axios.post("/books",this.formData).then((res)=>{ console.log(res.data); //如果操作成功，关闭弹层，显示数据 if(res.data.code == 20011){ this.dialogFormVisible = false; this.$message.success("添加成功"); }else if(res.data.code == 20010){ this.$message.error("添加失败"); }else{ this.$message.error(res.data.msg); } }).finally(()=>{ this.getAll(); }); },
- 运行结果示例
添加成功示例
添加失败示例
- - 修改
7. 修改功能
- 注释及相关的查询js代码
- 修改分两步，弹出编辑窗口根据id查询数据 + 编辑后保存加载数据
- 根据上文的设计可知从row获取行数据
- 根据上文的设计可知弹窗的标签名为dialogFormVisible4Edit，值为true代表展示弹层
//弹出编辑窗口 handleUpdate(row) { // console.log(row); //row.id 查询条件 //查询数据，根据id查询 axios.get("/books/"+row.id).then((res)=>{ // console.log(res.data.data); if(res.data.code == 20041){ //展示弹层，加载数据 this.formData = res.data.data; this.dialogFormVisible4Edit = true; }else{ this.$message.error(res.data.msg); } }); }, //编辑 handleEdit() { //发送ajax请求 axios.put("/books",this.formData).then((res)=>{ //如果操作成功，关闭弹层，显示数据 if(res.data.code == 20031){ this.dialogFormVisible4Edit = false; this.$message.success("修改成功"); }else if(res.data.code == 20030){ this.$message.error("修改失败"); }else{ this.$message.error(res.data.msg); } }).finally(()=>{ this.getAll(); }); },
- 运行示例
- - 删除
8. 删除功能
- 删除应该出现一个提示框，提示用户是否删除
- 删除的提交类型为delete
- 相关注释及js代码
handleDelete(row) { //1.弹出提示框 this.$confirm("此操作永久删除当前数据，是否继续？","提示",{ type:'info' }).then(()=>{ //2.做删除业务 axios.delete("/books/"+row.id).then((res)=>{ if(res.data.code == 20021){ this.$message.success("删除成功"); }else{ this.$message.error("删除失败"); } }).finally(()=>{ this.getAll(); }); }).catch(()=>{ //3.取消删除 this.$message.info("取消删除操作"); }); }
- 运行示例
`博客内容借鉴了bilibili黑马程序员SSM课程资料，如有侵权，请联系作者删除`
总结
欢迎各位留言交流以及批评指正，如果文章对您有帮助或者觉得作者写的还不错可以点一下关注，点赞，收藏支持一下。
