前后端分离CRUD

前后端分离CRUD

• 一. 跨域问题
• 1.1 什么是跨域？
• 1.2 跨域解决方案
• 二.crud实现
• 2.1 条件查询
• 2.2 添加/修改
• 2.3 删除
• 2.4 批量删除

一. 跨域问题

1.1 什么是跨域？

简单的理解，就是域名，ip，端口只要其中一个不同，就会出现跨域问题。
也就是一个系统访问另一个系统会存在跨域。

跨域不一定会有跨域问题。
因为跨域问题是浏览器对于ajax请求的一种安全限制
也就是说，跨域问题只针对于ajax

1.2 跨域解决方案

1. Jsonp-- json变种
   最早的解决方案，利用动态去填充script标签可以跨域的原理实现。

<sccipt src=”http:/wwww/ssss”> --处理

限制：

• 需要服务的支持
• 只能发起GET请求

2. nginx反向代理(部署)
   思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式
   缺点：需要在nginx进行额外配置，语义不清晰
   

3. CORS(推荐)
   规范化的跨域请求解决方案，安全可靠。

优势：

• 在服务端进行控制是否允许跨域，可自定义规则
• 支持各种请求方式
  缺点：
• 会产生额外的请求,要做询问

使用cors方案是，要注意spring的版本，修改为4.2.5

<spring.version>4.2.5.RELEASE</spring.version>

在controller中加上注解

@Controller
@RequestMapping("/department")
@CrossOrigin
public class DepartmentController {
	...
	@RequestMapping(value = "/list",method = RequestMethod.PATCH)
    @ResponseBody
    public List<Department> index(){
       return departmentService.selectAll();
    }
    ...
}

在main.js中引入：

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

这样就可访问了

二.crud实现

上一篇已经把后台接口写好了，本章只需要写前段就行了
结构：

2.1 条件查询

template：

<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="searchForm">
				<el-form-item>
					<el-input v-model="searchForm.name" placeholder="部门"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getDepartmentList">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

<!--列表-->
		<el-table :data="departments" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" label="编号" width="80">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="120" sortable>
			</el-table-column>
			<el-table-column label="操作">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

data：

data() {
			return {
                //查询form
                searchForm:{
                    name:""
                },
				//弹出框标题
			    title:"",
                //列表选中行
                sels: [],
				//数据列表
                departments: [],
				//当前页
				currentPage:1,
				//每页条数
                pageSize: 5,
                total: 0,
				//加载效果
				listLoading: false,
				form:{
                    id:"",
					name:""
				},
				//弹出框是否显示
                formVisible:false,
				//添加是否显示加载框
                addLoading:false,
				//校验规则
                addFormRules:{
                    name:[
						{required:true, message:"请输入名字", trigger:"blur"}
					]
				}
			};
		}

methods:

//获取部门列表
			getDepartmentList() {
				let param = {
					currentPage: this.currentPage,
                    pageSize: this.pageSize,
					name:this.searchForm.name
				};
				//开启加载效果
				this.listLoading = true;
				//加载请求
				this.$http.patch("/department/pagelist",param).then(res=>{
                    this.total = res.data.total;
                    this.departments = res.data.result;
                    this.listLoading = false;
                });
            }

2.2 添加/修改

template：
编辑框：

<!--编辑界面-->
		<el-dialog :title="title" v-model="formVisible">
			<el-form :model="form" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="formVisible = false">取消</el-button>
				<el-button type="primary" @click.native="submit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

methods：

//添加事件
handleAdd(){
	this.formVisible = true,
	this.title = "添加部门"
}

//提交表单
            submit(){
                //验证form表单
                this.$refs.addForm.validate((valid) => {
                    if (valid) {//校验通过之后就进入该代码块
                        //加载效果
                        this.addLoading = true;
                        //获取form表单数据
                        let param = Object.assign({}, this.form);
                        //如果有id，就是修改
                        if(param.id){
                            //保存数据
                            this.$http.post("/department/update", param).then(res => {
                                //提交成功
                                if(res.data.success){
                                    //停止添加按钮的加载框
                                    this.addLoading = false;
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    //弹出框关闭
                                    this.formVisible = false;
                                    //重置form表单
                                    this.$refs['addForm'].resetFields();
                                    //加载列表
                                    this.getDepartmentList();
                                }else{
                                    this.$notify.error({
                                        title: '错误',
                                        message: res.data.msg
                                    });
                                }
                            });
                        }else{
                            //保存数据
                            this.$http.put("/department/save", param).then(res => {
                                //提交成功
                                if(res.data.success){
                                    //停止添加按钮的加载框
                                    this.addLoading = false;
                                    this.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                    //弹出框关闭
                                    this.formVisible = false;
                                    //重置form表单
                                    this.$refs['addForm'].resetFields();
                                    //加载列表
                                    this.getDepartmentList();
                                }else{
                                    this.$notify.error({
                                        title: '错误',
                                        message: res.data.msg
                                    });
                                }
                            });
                        }
                    }
                });
			}

2.3 删除

methods：

//删除事件
            handleDel(i,r){
                this.$confirm('亲，确定要删除吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/department/delete/"+r.id).then(res=>{
                        if(res.data.success){
                            //NProgress.done();
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getDepartmentList();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                	}).catch(() => {
                });
			}

2.4 批量删除

//批量删除
            batchRemove(){
                this.$confirm('亲，确定要删除吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("/department/batchDelete",this.sels).then(res=>{
                        if(res.data.success){
                            //NProgress.done();
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getDepartmentList();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                }).catch(() => {
                });
			},
			//当前页改变时触发事件
            handleCurrentChange(v){
			    this.currentPage = v,
				this.getDepartmentList()
			},
			//复选框选择的行发生改变触发事件
			selsChange: function (v) {
				this.sels = v;
			},
		}

来源：CSDN

作者：一只羊驼啊

链接：https://blog.csdn.net/qq_43684164/article/details/103848810