前后端分离项目基础CRUD实现

1.技术架构

后端:
1.ssm+maven多模块
2.swagger文档描述(代码拷贝过来 就可以生成了)
3.postman测试
4.请求 put /get/post/patch/delete…
5.json

前端:
1.Nodejs 前端服务
2.npm: 管理js库 依赖关系
3.webpack:对静态资源打包
4.vuejs:MVVM(model view view Model 双向绑定)模式的开发js库
5.ElementUI:前端ui框架
6.vuecli:vue开发脚手架,能够快速搭建vue项目,里面包含了webpack的打包配置,服务器热启动.

2.后端crud实现

后端项目结构:

注意：pom.xml被忽略
现象: 导包没用,项目变灰

不能忽略这些，√都要取消

2.1 restfull概述

Restfull是http协议的扩展,它以资源为核心,通过url定位资源,以http协议不同请求方式表示操作(PUT,POST,GET,DELETE,PATCH,HEAD,OPTION)

请求示例，这只是一般情况，后面会进行优化，比如添加修改都用Put
1.添加:
PUT /employee
2.删除:
DELETE /employee/id
3.修改:
POST /employee
4.查询一个:
GET /employee/id
5.批量查询
PATCH/employee

2.2 后端接口实现

1.继承结构
domain继承BaseDomain
Mapper.java继承BaseMapper 自己的Mapper.xml
不要忘记了在Mapper.xml里面忘记了写对应的映射语句
IServie继承与IbaseService的基础接口方法
ServiceImpl基于BaseServiceImpl,里面实现基础接口实现.

以部门为例写一个crud接口

1.domain

public class Department extends BaseDomain {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "Department{" +
                "name='" + name + '\'' +
                ", id=" + id +
                '}';
    }
}

2.mapper

public interface DepartmentMapper
        extends BaseMapper<Department> {
}

mapper.xml

 <!--方法的id最好与baseMapper里方法名保持一致-->
 <!--查询所有-->
    <select id="findAll" resultType="Department">
        select * from t_department
    </select>
    <!--通过id查询一个-->
    <select id="findOne" 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="delete" parameterType="long">
        delete from t_department where id = #{id}
    </delete>

3.service

public interface IDepartmentService
        extends IBaseService<Department> {
}

serviceImpl

@Service
public class DepartmentServiceImpl
        extends BaseServiceImpl<Department>
        implements IDepartmentService {
}

4.controller

@Controller
@RequestMapping("/department")
@CrossOrigin
public class DepartmentController {

    @Autowired
    private IDepartmentService departmentService;

    /**
     * equestMethod.PATCH   批量操作
     * @return
     */
    @RequestMapping(value = "/list",method = RequestMethod.PATCH)
    @ResponseBody
    public List<Department> findAll(){
        return departmentService.findAll();
    }

    /**
     * RequestMethod.GET  表示查询一个
     * @param id
     * @return
     */
    @RequestMapping(value = "/{id}",method = RequestMethod.GET)
    @ResponseBody
    public Department findOne(@PathVariable Long id){
        return departmentService.findOne(id);
    }

    /**
     * RequestMethod.PUT 表示新增请求
     * @param department
     * @return
     */
    @RequestMapping(method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult add(@RequestBody Department department){
        try {
            departmentService.save(department);
        } catch (Exception e) {
            e.printStackTrace();
            return new AjaxResult("新增失败:"+e.getMessage());
        }
        return new AjaxResult();
    }

    /**
     * RequestMethod.POST 修改请求
     * @param department
     * @return
     */
    @RequestMapping(method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@RequestBody Department department){
        try {
            departmentService.update(department);
        } catch (Exception e) {
            e.printStackTrace();
            return new AjaxResult("修改失败:"+e.getMessage());
        }
        return new AjaxResult();
    }

    /**
     * RequestMethod.DELETE  删除请求
     * @param id
     * @return
     */
    @RequestMapping(value = "/{id}",method = RequestMethod.DELETE)
    @ResponseBody
    public AjaxResult delete(@PathVariable Long id){
        try {
            departmentService.delete(id);
        } catch (Exception e) {
            e.printStackTrace();
            return new AjaxResult("删除失败:"+e.getMessage());
        }
        return new AjaxResult();
    }
}

到这一步，后台就准备完毕

3 前端项目准备

1.运行前端项目（之前网上下载的模板）

npm install 安装依赖前端js库
npm run dev 运行前端项目
npm run build 打包–先不管 发布时候使用

2.新建一个department.vue文件（可以copy模板自带的table.vue再进行修改）
3.配置路由

import department from './views/department/Department.vue'

{ path: '/department', component: department, name: '部门管理' },

4.实现crud
4.1 关闭Mock模拟数据，使用后台提供的真实数据

4.2 登录拦截先取消，后面再做登录相关

4.3 在main.js页面引入axios

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

4.4 修改department.vue里面的细节方法请求等
4.4.1模板的请求转为axios请求

//editUser(para).then((res) => {
this.$http.post("/department",para).then((res) => 

4.4.2 数据展示问题,根据实际情况

this.departments = res.data;

4.5 解决跨域问题
4.5.1-----spring版本4.2.5以上才支持注解

<!-- spring版本号 -->
        <spring.version>4.2.5.RELEASE</spring.version>

4.5.2-----控制层加注解@CrossOrigin

@Controller
@RequestMapping("/department")
@CrossOrigin
public class DepartmentController {

其余解决方式
点击这里查看更多跨域问题解决方式