前后端分离CRUD_前后端分离列表遍历

前后端分离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,"删除失败");
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

DepartmentQuery 获取前台传递的部门名称

public class DepartmentQuery extends BaseQuery {
    //根据部门名字查询
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 前台
  前台将每页显示的数据条数和当前页以及查询条件通过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();
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

删除

前台获取需要删除的数据的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(() => {

                        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

后台根据id进行查询删除

 <delete id="delete">
        DELETE FROM t_department WHERE id=#{id}
    </delete>
1
2
3

批量删除

前台定义方法 获取选中的行，将数据集合传递到后台

 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(() => {

                });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

后台接收数据集合，根据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,"删除失败");
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12

<!--批量删除-->
    <delete id="batchRemove">
        DELETE FROM t_department WHERE id IN
        <foreach collection="list" item="i" open="(" separator="," close=")">
            #{i.id}
        </foreach>
    </delete>
1
2
3
4
5
6
7

添加&&修改

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('添加失败');
                                    }
                                });
                            }
                        });
                    }
                });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43