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

关注

原创最新推荐文章于 2026-06-19 11:43:08 发布 401 阅读 AI 写同款· GEO 优化 ›

avue-crud 通过行状态来自定义显示编辑按钮从 avue-crud 的官方文档中我们可以知道，操作栏的按钮是否显示是通过 option 中相应的 Boolean 值控制的，比如： delBtn 对应删除按钮 editBtn 对应编辑按钮但是，这种控制是会对整个表格生效的，那如果我想根据行状态来自定义控制每一行的按钮是否显示呢？该怎么做？我的做法是根据官网的例子，用自定义插槽实现 <template slot="menu" slot-scope="{ row, index }"> <el-button . 阅读详情

文章目录

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

    });
},