前后端分离CRUD
分页&&高级查询
前后端分离会造成跨域问题,域名、端口、协议其中一个不同都会造成跨域问题;
解决:跨域资源共享(CORS)
1.引入spring4.2.5的包
2.加上注解@CrossOrigin
- 后台DepartmentController基本的CRUD
@Controller
@RequestMapping("/department")
@CrossOrigin
public class DepartmentController {
/**
* resetful: 它是一个架构风格,它是基于Http协议的扩展
* 它给你提供了多种请求方式来定位资源
* GET 一般是用来做查询的,查询单个对象
* POST 一般用来做修改的
* DELETE 一般用来做删除
* PUT 一般用来做新增
* PATCH 一般用来操作批量数据的
*/
@Autowired
private IDepartmentService iDepartmrntService;
//查询所有
@RequestMapping(value = "/findAllPage",method = RequestMethod.PATCH)
@ResponseBody
public PageResult<Department> findAllPage(@RequestBody DepartmentQuery query){
return iDepartmrntService.findPageByQuery(query);
}
//查询一个
@RequestMapping(value = "/findOne/{id}",method = RequestMethod.GET)
@ResponseBody
public Department findOne(@PathVariable("id") Long id){
return iDepartmrntService.findOne(id);
}
//添加
@RequestMapping(value = "/add",method = RequestMethod.PUT)
@ResponseBody
public AjaxResult add(@RequestBody Department department){
try {
iDepartmrntService.add(department);
return new AjaxResult();
} catch (Exception e) {
e.printStackTrace();
return new AjaxResult(false,"添加失败");
}
}
//修改 @RequestBody:前端传递json对象,它会自动转为Department对象
@RequestMapping(value = "/update",method = RequestMethod.POST)
@ResponseBody
public AjaxResult update(@RequestBody Department department){
try {
iDepartmrntService.update(department);
return new AjaxResult();
} catch (Exception e) {
e.printStackTrace();
return new AjaxResult(false,"修改失败");
}
}
//删除
@RequestMapping(value = "/delete/{id}",method = RequestMethod.DELETE)
@ResponseBody
public AjaxResult delete(@PathVariable("id") Long id){
try {
iDepartmrntService.delete(id);
return new AjaxResult();
} catch (Exception e) {
e.printStackTrace();
return new AjaxResult(false,"删除失败");
}
}
}
DepartmentQuery 获取前台传递的部门名称
public class DepartmentQuery extends BaseQuery {
//根据部门名字查询
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
departmentMapper.xml
<!--根据条件 查询分页列表-->
<select id="findByQuery" resultType="Department">
SELECT * FROM t_department
<include refid="whereSql"/>
LIMIT #{begin},#{pageSize}
</select>
<!--根据条件 查询分页列表总数-->
<select id="findCountByQuery" resultType="long">
SELECT COUNT(*) FROM t_department
<include refid="whereSql"/>
</select>
<!--抽取公共的sql-->
<sql id="whereSql">
<where>
<if test="name!=null and name!=''">
<!--根据部门名字模糊查询-->
AND name LIKE CONCAT("%",#{name},"%")
</if>
</where>
</sql>
- 前台
前台将每页显示的数据条数和当前页以及查询条件通过Ajax传递到控制层DepartmentController层findAllPage中,封装到DepartmentQuery,后台返回数据给前台
loadDepartmentList(){
//开启加载框
this.listLoading=true;
let param = {
//传输每页数据条数和当前页到后台
pageSize: this.pageSize,
currentPage: this.currentPage,
//传递查询信息到后台
name:this.searchForm.name
};
this.$http.patch("/department/findAllPage",param).then(res=>{
console.debug(res)
this.total=res.data.total;
this.department=res.data.result;
this.listLoading=false;
});
}
},
mounted(){
this.loadDepartmentList();
}
删除
前台获取需要删除的数据的id,传递给后台,后台根据id进行删除
//删除一条数据
handleDel(index,row){
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.$http.delete("/department/delete/"+row.id).then(res=>{
console.debug(res.data.success)
if (res.data.success){//删除成功
this.$message({
message: '删除成功',
type: 'success'
});
//删除后重新加载数据列表
this.loadDepartmentList();
}else{
this.$message.error('删除失败');
}
});
}).catch(() => {
});
后台根据id进行查询删除
<delete id="delete">
DELETE FROM t_department WHERE id=#{id}
</delete>
批量删除
前台定义方法 获取选中的行,将数据集合传递到后台
batchRemove(){
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.$http.patch("/department/batchRemove/",this.sels).then(res=>{
console.debug(res.data.success)
if (res.data.success){//删除成功
this.$message({
message: '删除成功',
type: 'success'
});
//删除后重新加载数据列表
this.loadDepartmentList();
}else{
this.$message.error('删除失败');
}
});
}).catch(() => {
});
后台接收数据集合,根据id进行遍历删除
//批量删除
@RequestMapping(value = "/batchRemove",method = RequestMethod.PATCH)
@ResponseBody
public AjaxResult batchRemove(@RequestBody List<Department> departments){
try {
iDepartmrntService.batchRemove(departments);
return new AjaxResult();
} catch (Exception e) {
e.printStackTrace();
return new AjaxResult(false,"删除失败");
}
}
<!--批量删除-->
<delete id="batchRemove">
DELETE FROM t_department WHERE id IN
<foreach collection="list" item="i" open="(" separator="," close=")">
#{i.id}
</foreach>
</delete>
添加&&修改
1.验证通过(输入框不为空)才进行添加
2.通过是否有id判断添加或者修改
3.添加修改发送请求携带参数到后台
4.清空表单
5.关闭添加修改框
6.重新加载数据
//提交表单
addSubmit(){
this.$refs.addForm.validate((valid) => {
if (valid) {//通过校验就进入
this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.addLoading = true;//加载框
let param = Object.assign({}, this.addForm);//将表单中的数据通过继承放到{}中
if (param.id){//有id就是修改
this.$http.post("/department/update",param).then(res=>{
if (res.data.success){
this.addLoading = false;//关闭加载框
this.$message({
message: '提交成功',
type: 'success'
});
//添加完清空表单
this.$refs['addForm'].resetFields();
this.addFormVisible = false;//关闭添加框
this.loadDepartmentList();//重新加载数据
}else{
this.$message.error('修改失败');
}
});
}else{//添加
this.$http.put("/department/add",param).then(res=>{
if(res.data.success){
this.addLoading = false;//关闭加载框
this.$message({
message: '提交成功',
type: 'success'
});
//添加完清空表单
this.$refs['addForm'].resetFields();
this.addFormVisible = false;//关闭添加框
this.loadDepartmentList();//重新加载数据
}else{
this.$message.error('添加失败');
}
});
}
});
}
});