目录
一、列表功能
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("取消删除操作");
});
}
删除提示框效果
删除成功效果
删除取消效果