elementui-ssm 前后端分离的CRUD

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

controller 层
目前时间格式还没弄好,前台传过来的是带时分秒的格式,和数据库不匹配,还需要配置下
高级查询还没做,性别回显未解决

package cn.itsource.crm.web.controller;

import cn.itsource.crm.domain.Employee;
import cn.itsource.crm.query.EmployeeQuery;
import cn.itsource.crm.service.IEmployeeService;
import cn.itsource.util.AjaxResult;
import cn.itsource.util.PageList;
import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@Controller
@RequestMapping("/employee") //定位资源

//此注解解决跨域无法访问的问题
@CrossOrigin
public class EmployeeController {
    @Autowired
    private IEmployeeService employeeService;

    //查询所有

    @ResponseBody
    @RequestMapping(method = RequestMethod.PATCH)
    public  List<Employee> list(){
        System.out.println("------------------");
        return employeeService.loadAll();
    }

    //查询一个
    @ResponseBody
    @RequestMapping(value = "{id}",method = RequestMethod.GET)
    public Employee getById(@PathVariable("id") Long id){
        Employee employee = null;
        try {
            employee = employeeService.loadById(id);
        } catch (Exception e) {
            e.printStackTrace();
            AjaxResult.me().setMessage("操作失败").setSuccess(false);
        }
        return employee;
    }

    //创建员工接口:url 参数,返回值
    //@RequestBody 在请求主体里面传递过,前端要传递json就用这种方式
    @RequestMapping(value = "/add" ,method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult add(@RequestBody Employee employee) {
        System.out.println(employee);
        try {
            employeeService.save(employee);
        } catch (Exception e) {
            e.printStackTrace();
            AjaxResult.me().setMessage("操作失败").setSuccess(false);
        }
        System.out.println("添加成功");
        return AjaxResult.me();
    }

    @RequestMapping(value = "/update",method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@RequestBody Employee employee){
        try {

            employeeService.update(employee);
        } catch (Exception e) {
            e.printStackTrace();
            AjaxResult.me().setMessage("操作失败").setSuccess(false);
        }
        System.out.println("修改成功"+employee);
        return AjaxResult.me();
    }
    //删除接口:url 参数,返回值
    // 前台传递del /employee/1
    @RequestMapping(value = "{id}",method = RequestMethod.DELETE)
    @ResponseBody
    @CrossOrigin
    public AjaxResult delele(@PathVariable("id")Long id){
        System.out.println("删除进来了么");
        try {
            employeeService.delete(id);
        } catch (Exception e) {
            e.printStackTrace();
            AjaxResult.me().setMessage("操作失败").setSuccess(false);
        }
        System.out.println("删除成功"+id);
        return AjaxResult.me();
    }

    // 高级查询
    @ResponseBody
    @RequestMapping(value = "pagelist",method = RequestMethod.GET)
    public PageList<Employee> query(@RequestBody EmployeeQuery query){
        return new PageList<>();
    }
}

前端的crud

<template>
   <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
         <el-form :inline="true" :model="filters">
            <el-form-item>
               <el-input v-model="filters.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" v-on:click="getUsers">查询</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="users" 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" width="60">
         </el-table-column>
         <el-table-column prop="name" label="姓名" width="120" sortable>
         </el-table-column>
         <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
         </el-table-column>
         <el-table-column prop="age" label="年龄" width="100" sortable>
         </el-table-column>
         <el-table-column prop="birth" label="生日" width="120" sortable>
         </el-table-column>
         <el-table-column prop="addr" label="地址" min-width="180" sortable>
         </el-table-column>
         <el-table-column label="操作" width="150">
            <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="20" :total="total" style="float:right;">
         </el-pagination>
      </el-col>

      <!--编辑界面-->
      <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
         <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="姓名" prop="name">
               <el-input v-model="editForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别">
               <el-radio-group v-model="editForm.sex">
                  <el-radio class="radio" :label="1">男</el-radio>
                  <el-radio class="radio" :label="0">女</el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄">
               <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
            </el-form-item>
            <el-form-item label="生日">
               <el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
            </el-form-item>
            <el-form-item label="地址">
               <el-input type="textarea" v-model="editForm.addr"></el-input>
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
         </div>
      </el-dialog>

      <!--新增界面-->
      <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
         <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
            <el-form-item label="姓名" prop="name">
               <el-input v-model="addForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别">
               <el-radio-group v-model="addForm.sex">
                  <el-radio class="radio" :label="1">男</el-radio>
                  <el-radio class="radio" :label="0">女</el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄">
               <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
            </el-form-item>
            <el-form-item label="生日">
               <el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>
            </el-form-item>
            <el-form-item label="地址">
               <el-input type="textarea" v-model="addForm.addr"></el-input>
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click.native="addFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
         </div>
      </el-dialog>
   </section>
</template>

<script>
   import util from '../../common/js/util'
   //import NProgress from 'nprogress'
   import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

   export default {
      data() {
         return {
            filters: {
               name: ''
            },
            users: [],
            total: 0,
            page: 1,
            listLoading: false,
            sels: [],//列表选中列

            editFormVisible: false,//编辑界面是否显示
            editLoading: false,
            editFormRules: {
               name: [
                  { required: true, message: '请输入姓名', trigger: 'blur' }
               ]
            },
            //编辑界面数据
            editForm: {
               id: 0,
               name: '',
               sex: 1,
               age: 0,
               birth: '',
               addr: ''
            },

            addFormVisible: false,//新增界面是否显示
            addLoading: false,
            addFormRules: {
               name: [
                  { required: true, message: '请输入姓名', trigger: 'blur' }
               ]
            },
            //新增界面数据
            addForm: {
               name: '',
               sex: -1,
               age: 0,
               birth: '',
               addr: ''
            }

         }
      },
      methods: {
         //性别显示转换
         formatSex: function (row, column) {
            return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
         },
         handleCurrentChange(val) {
            this.page = val;
            this.getUsers();
         },
         //获取用户列表
         getUsers() {
            //获取参数
            let para = {
               page: this.page,
               name: this.filters.name
            };
            //刷新效果
            this.listLoading = true;
            //NProgress.start();
            //发送请求到后台拿数据
            //发送请求 axios请求 -- 全部axios http://localhost/department
            this.$http.patch('/employee',para).then(res=>{
            //getUserListPage(para).then((res) => {
               console.debug(res);
               this.total = 20;
               this.users = 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 };
               this.$http.delete('/employee/'+row.id).then((res) => {
               //removeUser(para).then((res) => {
                  this.listLoading = false;
                  //NProgress.done();
                  if (res.data.success){
                     this.$message({
                        message: '删除成功',
                        type: 'success'
                     });
                  }else {
                     this.$message({
                        message: '删除失败',
                        type: 'success'
                     });
                  }
                  this.getUsers();
               });
            }).catch(() => {

            });
         },
         //显示编辑界面
         handleEdit: function (index, row) {
            this.editFormVisible = true;
            this.editForm = Object.assign({}, row);
         },
         //显示新增界面
         handleAdd: function () {
            this.addFormVisible = true;
            this.addForm = {
               name: '',
               sex: -1,
               age: 0,
               birth: '',
               addr: ''
            };
         },
         //编辑
         editSubmit: function () {
            this.$refs.editForm.validate((valid) => {
               if (valid) {
                  this.$confirm('确认提交吗？', '提示', {}).then(() => {
                     this.editLoading = true;
                     //NProgress.start();
                     let para = Object.assign({}, this.editForm);
                     para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');

                     this.$http.post('/employee/update',para).then(res=>{
                     //editUser(para).then((res) => {
                        this.editLoading = false;
                        //NProgress.done();
                        if (res.data.success){
                           this.$message({
                              message: '修改成功',
                              type: 'success'
                           });
                        }else {
                           this.$message({
                              message: '修改失败',
                              type: 'success'
                           });
                        };
                        this.$refs['editForm'].resetFields();
                        this.editFormVisible = false;
                        this.getUsers();
                     });
                  });
               }
            });
         },
         //新增
         addSubmit: function () {
            this.$refs.addForm.validate((valid) => {
               if (valid) {
                  this.$confirm('确认提交吗？', '提示', {}).then(() => {
                     this.addLoading = true;
                     //NProgress.start();
                     let para = Object.assign({}, this.addForm);
                     para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
                     this.$http.put('/employee/add',para).then(res=>{
                     //addUser(para).then((res) => {
                        this.addLoading = false;
                        //NProgress.done();
                        if (res.data.success){
                           this.$message({
                              message: '添加成功',
                              type: 'success'
                           });
                        }else {
                           this.$message({
                              message: '添加失败',
                              type: 'success'
                           });
                        };
                        this.$refs['addForm'].resetFields();
                        this.addFormVisible = false;
                        this.getUsers();
                     });
                  });
               }
            });
         },
         selsChange: function (sels) {
            this.sels = sels;
         },
         //批量删除  还未做实现
         batchRemove: function () {
            var ids = this.sels.map(item => item.id).toString();
            this.$confirm('确认删除选中记录吗？', '提示', {
               type: 'warning'
            }).then(() => {
               this.listLoading = true;
               //NProgress.start();
               let para = { ids: ids };
               batchRemoveUser(para).then((res) => {
                  this.listLoading = false;
                  //NProgress.done();
                  if (res.data.success){
                     this.$message({
                        message: '删除成功',
                        type: 'success'
                     });
                  }else {
                     this.$message({
                        message: '删除失败',
                        type: 'success'
                     });
                  };
                  this.getUsers();
               });
            }).catch(() => {

            });
         }
      },
      mounted() {
         this.getUsers();
      }
   }

</script>

<style scoped>

</style>