一、列表功能
SpringMVC设定拦截了所有路径，它把页面的请求也拦截了，如果去访问页面，一定找不到，过不了SpringMVC，所以需要加一个新的配置类，进行资源的放行。
SpringMvcSupport配置类
import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport; @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/"); } }
写完配置之后，要让SpringMVC加载上，在@ComponentScan进行加载。
@Configuration @ComponentScan({"com.itheima.controller","com.itheima.config"}) @EnableWebMvc public class SpringMvcConfig { }
发送ajax请求，得到返回值，让当前的数据模型加载从后台传进来的数据
books.html
//列表 getAll() { //发送ajax请求 axios.get("/books").then((res)=>{ this.dataList = res.data.data; }); },
页面列表展示效果
二、添加功能
弹出添加窗口功能
//弹出添加窗口 handleCreate() { this.dialogFormVisible = true; this.resetForm(); },
添加功能
//添加 handleAdd () { //发送ajax请求 axios.post("/books",this.formData).then((res)=>{ //如果操作成功，关闭弹层，显示数据 this.dialogFormVisible = false; this.getAll(); }); },
添加功能效果
添加成功后效果
三、添加功能状态处理
给添加功能状态处理，如有异常进行状态显示，无异常成功。
//添加 handleAdd () { //发送ajax请求 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(); }); },
添加成功效果
在BookServiceImpl中添加受影响行数大于0，受影响行数大于0为真，等于0为假
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; }
添加操作时输入大于数据表要求字段的最大长度20，既能得到失败效果
因为做了双向绑定，所以会进行回显，进行重置表单，在弹出添加功能进行调用。
//重置表单 resetForm() { this.formData = {}; },
四、修改功能
弹出编辑窗口，根据id查询，进行展示弹层，加载数据。
//弹出编辑窗口 handleUpdate(row) { //查询数据，根据id查询 axios.get("/books/"+row.id).then((res)=>{ if(res.data.code == 20041){ //展示弹层，加载数据 this.formData = res.data.data; this.dialogFormVisible4Edit = true; }else{ this.$message.error(res.data.msg); } }); },
编辑窗口效果
编辑功能与添加功能差不多，修改put请求及修改相应的状态码和对应的提示信息即可。
//编辑 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(); }); },
修改成功功能效果
修改失败功能效果
五、删除功能
弹出提示框，提示操作，根据id进行删除，还进行取消删除操作提示。
// 删除 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("取消删除操作"); }); }
删除提示框效果
删除成功效果
删除取消效果
