前后端分离CRUD+代码管理工具-svn

最新推荐文章于 2023-10-11 16:15:03 发布

虞铭轩、

最新推荐文章于 2023-10-11 16:15:03 发布

阅读量330

点赞数

分类专栏：学习文章标签： java SVN

本文链接：https://blog.youkuaiyun.com/Java_pipixia/article/details/100125161

版权

学习专栏收录该内容

39 篇文章

订阅专栏

本文介绍了前后端分离的CRUD操作，包括跨域问题及其解决方案，如JSONP和CORS。接着讲解了SVN的安装、基本使用及冲突处理，最后阐述了在IDEA中使用SVN进行项目检出、代码上传和更新的操作步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1 前后端分离crud

1 先把前端的mock模拟注释掉，让请求后台代码

/*import Mock from './mock'
  Mock.bootstrap(); 前端人员使用*/

在发送ajax请求的时候，但是出现跨域问题
接收返回的值进行处理

1.1 什么是跨域

跨域：访问不同域名的服务
==跨域存在的问题:==不是所有的跨域都是存在问题，浏览器针对ajax请求的时候，有跨域的拦截处理
解决方案：

jsonp方式 -->缺点：需要服务器的支持，只能get方式(不用) src=“http:”
nginx(反向代理)服务器(最后一个项目)：
①让访问跨域请求，转向访问 nginx ，nginx做处理
cors方案(推荐)：
①浏览器支持这个访问：发送ajax的请求，需要询问服务器(预检过程) ，如果服务器同意之后，才让你访问
处理：
①springmvc 写 corsFilter过滤器
②通过注解==@CrossOrigin== --推荐版本spring 4.2.5以上

1.2 新增

修改department.vue页面
准备表单
点击新增流程：
弹出对话框

//控制是否弹出对话框
this.departmentFormVisible = true;

清理表单数据

//清空表单数据
this.department = {
   name: ''

点击保存流程：
检查是否验证通过

如果通过，发送axios请求
保存
返回关闭对话框重新查询数据

//新增 修改 保存
editSubmit: function () {
    //必须验证通过之后，才执行下面的代码
    this.$refs.departmentForm.validate((valid) => {
        if (valid) {
            //询问你 是否要提交
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
                //显示加载 圈
                this.editLoading = true;
                //备份 表单里面数据 备分一份给para变量
                let para = Object.assign({}, this.department);
                //发送ajax请求
                //editUser(para).then((res) => {
                let url = '/department/save';
                if(this.department.id){
                    console.log(this.department.id);
                    url='/department/update';
                }
                this.$http.put(url,para).then(res=>{
                    //关闭滚动圈
                    this.editLoading = false;

                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    //重置表单信息 为null
                    this.$refs['departmentForm'].resetFields();
                    //关闭对话框
                    this.departmentFormVisible = false;
                    //重心查询数据
                    this.getDepartments();
                });
            });
        }
    });
},

1.3 修改

弹出对话框:
修改this.departmentFormVisible = true;
回显this.department = Object.assign({}, row);
保存：
通过判断id 是否存在
存在修改 – update
不存在新增 --save

//显示编辑界面 弹出编辑框
handleEdit: function (index, row) {
    this.departmentFormVisible = true;
    this.department = Object.assign({}, row);
},

1.4 删除

得到要删除id值
发送请求删除的数据
重新加载数据

//删除
handleDel: function (index, row) {
    this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
    }).then(() => {
        this.listLoading = true;
        //获取删除的id
        let para = {id: row.id};
        this.$http.delete('/department/' + row.id).then(res => {
            this.listLoading = false;
if (res.data.success){
	this.$message({
		message: '删除成功',
		type: 'success'
	});
}else {
	this.$message({
		message: '删除失败',
		type: 'error'
	});
}

            //查询数据
            this.getDepartments();
        });
    }).catch(() => {

    });
},