SSM_CRUD

最新推荐文章于 2024-06-29 16:00:56 发布

沉睡的男人

最新推荐文章于 2024-06-29 16:00:56 发布

阅读量233

点赞数

分类专栏： IT 文章标签： java svn ssm

本文链接：https://blog.csdn.net/zenghu12/article/details/103435978

版权

IT 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.后端crud

(1)mapper.xml 写 select insert update delete

<mapper namespace="cn.itsource.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>

(2)在对应的controller写上 crud方法

2. 前端界面处理

(1) 创建一个Department.vue这个页面

(2) 配置路由

(3) main.js 引入axios

(4) 注释掉模拟数据

(5) 修改Department.vue这里面界面

3.1前端访问后端

3.1跨域问题
(1)同一个域名,不同的端口 --属于跨域 localhost:8080 --> localhost:80
(2)不同域名 – 属于跨域 192.168.0.1 192.168.0.2
(3) 二级域名不同 – 属于跨域 miaosha.jd.com --> qianggou.jd.com
浏览器(同源策略)针对ajax的请求, 如果访问的时候不同的域名,或者不同的端口, 存在跨域问题
同源策略:只允许相同协议相同域名相同的端口

3.2跨域问题解决
(1)jsonp–很早的
动态的构造的标签

(2)通过nginx (部署) – 解决跨域问题 – 反向代理机制
类似中间商 ,把访问后台的请求转换访问自己, 让那个nginx去访问后台,把结果那会,在转给前台
缺点:
部署服务,做配置

(3) CORS机制: 跨域资源共享"(Cross-origin resource sharing) "
解决跨域问题 (浏览器有同源策略,(相同域名,相同的端口,相同协议),如果不是同源,存在跨域问题)
发送请求: 普通请求发送一次,后台服务需要运行访问 …
特殊请求发送二次, 第一次是预检请求, 服务器也要运行预检, 前台发现预检通过,在发送真实请求 , 真实请求也需要服务器允许
解决:都需要服务允许

注解: 版本 spring版本 4.2.5 以后才支持注解
在controller类上面加上注解

@CrossOrigin

即可跨域访问

4.前端crud

代码

 //获取用户列表
            getDepartments() {
                let para = {
                    page: this.page,
                    name: this.filters.name
                };
                this.listLoading = true;
                //NProgress.start();
                //getUserListPage(para).then((res) => {
                this.$http.patch("/department/list").then((res) => {
                    console.log(res);
                    this.total = res.data.total;
                    this.departments = res.data;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },
			//查询一个
            handleSearch:function(){
                this.listLoading = true;
                //NProgress.start();
                //getUserListPage(para).then((res) => {
                this.$http.get("/department/"+this.filters.name).then((res) => {
                    console.log(res);
                    this.total = res.data.total;
                    this.departments = res.data;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = { id: row.id };
                    console.log("id="+para.id);
                    //removeUser(para).then((res) => {
                    this.$http.delete("/department/"+row.id).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getDepartments();
                    });
                }).catch(() => {

                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            //显示新增界面
            handleAdd: function () {
                this.addFormVisible = true;
                this.addForm = {
                    name: '',

                };
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);
                            console.log(para);
                            //editUser(para).then((res) => {
                            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();
                            });
                        });
                    }
                });
            },
            //新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            //NProgress.start();
                            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();
                            });
                        });
                    }
                });
            },