SSM+elementUI前后端分离开发

1.后台crud

上一篇中已经详细写到了,如何构建Maven分模块集成ssm
链接:
https://blog.csdn.net/qq_45642432/article/details/103413033

话不多说上后台crud代码:

mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.hr.crm.mapper.DepartmentMapper">
    <select id="queryAll" resultType="Department">
        select * from t_department
    </select>

    <select id="queryOne" parameterType="long" resultType="Department">
        select * from t_department WHERE id = #{id}
    </select>
    
    <insert id="save" parameterType="Department" >
        insert into t_department(name) VALUES(#{name})
    </insert>

    <update id="update" parameterType="Department">
        update t_department set name=#{name} where id = #{id}
    </update>
    
    <delete id="remove" parameterType="long">
        delete from t_department where id = #{id}
    </delete>
</mapper>

contorller(restfull风格发送请求)

@Controller
@RequestMapping("/department")
@CrossOrigin
public class DepartmentController {

    @Autowired
    private IDepartmentService departmentService;

    @RequestMapping(value = "/list",method = RequestMethod.PATCH)
    @ResponseBody
    public List<Department> list(){
        return departmentService.queryAll();
    }

    @RequestMapping(method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult add(@RequestBody Department department){
        System.out.println("新增"+department);
        departmentService.save(department);
        return new AjaxResult();
    }

    //value =/"{id}"  value ="{id}"  都可以
    @RequestMapping(value ="{id}" ,method = RequestMethod.DELETE)
    @ResponseBody
    public AjaxResult delete(@PathVariable Long id){
        System.out.println("删除的id"+id);
        departmentService.remove(id);
        return new AjaxResult();
    }

    @RequestMapping(method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@RequestBody Department department){
        System.out.println("修改"+department);
        departmentService.update(department);
        return new AjaxResult();
    }

    @RequestMapping(value ="/{id}", method = RequestMethod.GET)
    @ResponseBody
    public Department queryOne(@PathVariable Long id){
        System.out.println("查询数据id"+id);
        return departmentService.queryOne(id);
    }
}

1.1 启动tomcat进行测试(postman)

通过网页是无法直接访问请求的,所以这里需要用postman进行测试(需要启动tomcat)
这里是用数据库中的真实数据,进行测试.

2.elementUI

2.1另外创建一个项目写前端代码

2.2 输入指令引入vue

2.3 写一个vue文件

2.4 导入vue组件(routes.js)

import Department from './views/itsource/department.vue'

2.5 配置路由(routes.js)

{
    path: '/',
    component: Home,
    name: '组织机构管理',
    iconCls: 'el-icon-message',//图标样式class
    children: [
        { path: '/department', component: Department, name: '部门管理' }
            ]
}

引入axios(main.js)

import axios from 'axios'
//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost/'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

2.6 前端crud(vue)

查询

            getDepartments() {
                this.listLoading = true;
                this.$http.patch('/department/list').then(res=>{
                    //this.total = res.data.total;
                    this.departments = res.data;
                    this.listLoading = false;

                });
            },

添加

//新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            //拷贝 this.addForm这个对象 para = {name:'xxx'}
                            let para = Object.assign({}, this.addForm);
                            this.$http.put('/department',para).then(res=>{
                                this.addLoading = false;
                                //NProgress.done();
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                //验证的重置
                                this.$refs['addForm'].resetFields();
                                //关闭新增对话框
                                this.addFormVisible = false;
                                this.getDepartments();
                            });
                        });
                    }
                });
            },

修改

 editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);
                            this.$http.post('/department',para).then(res=>{
                                this.editLoading = false;
                                //NProgress.done();
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.getDepartments();
                            });
                        });
                    }
                });
            },

删除

//删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    this.$http.delete('/department/'+ row.id).then(res=>{
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getDepartments();
                    });
                }).catch(() => {
                });
            },
        },

测试

通过网页测试时会报错,不能跨域访问

解决跨域访问

配置文件(crm_parent pom.xml)

将pom.xml中的spring版本改为4.2.5

controller

在controller中加入@crossorign注解,就可以跨域访问了

再次测试

成功!!!
实现了前后端分离完成crud