SSM+ElementUI综合练习

Posted 2022-09-03 13438145925xiaozheng

前后端分离介绍

前后端分离web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。

两个服务器 

 

1搭建模块化

1.1、 basic-uitl

作为各项目的公共工具的抽取

PageList：total,rows

AjaxResult:success,message

1.2、 basic-core

作为各项目的公共的抽取，依赖basic-utils模块

BaseDomain

BaseService

BaseMapper

BaseQuery

1.3、 crm-common

crm-common本模块作为一个项目三层的公共部分的抽取，依赖basic-core

domain:

query:

1.4、 crm-mapper

crm-dao本模块作为一个项目持久层，依赖crm-common和basic-core:

包含mapper接口和映射；和持久层的配置

1.5、 crm-service

crm-service本模块作为一个项目业务层，依赖crm-mapper

业务

 

1.6、 crm-web-mavenweb项目

 

crm-service本模块作为一个项目表现层，依赖crm-service

 

Controller

 

而现在我们的整体架构为前后端分离架构，所有的静态资源全部在前端项目中

2

2、 前后端分离后台实现-Crud

 

接口就是提供数据东西.最简单实现接口的方式就是springmvc中controller,是通过restful协议暴露,通过json作为数据传输格式.

 

 

 

restfull就是就是http协议的扩展,是以资源为核心,通过url定位资源,通过不同请求方式表示操作.(PUT-add,POST-update,DELET-del,GET-获取或查询,PATCH,HEAD,OPTION)

 

 

 

package cn.itsource.crm.web.controller;

import cn.itsource.AjaxResult;
import cn.itsource.crm.domian.Department;
import cn.itsource.crm.service.IDepartmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@Controller
@RequestMapping("/dept")
public class DepartmentCroller 
    @Autowired
    private IDepartmentService departmentService;

    /*@RequestMapping("/list")
    @ResponseBody
    public AjaxResult findall()
        try 
            List<Department> list = departmentService.findAll();
            System.out.println("list"+list);

         catch (Exception e) 
            return AjaxResult.getAjxRt().setMesg("失败").setSuccess(false);
        
        return new AjaxResult();
    */

    //创建员工接口:url 参数,返回值
    //@RequestBody 在请求主体里面传递过,前端要传递json就用这种方式
    @RequestMapping(method = RequestMethod.PUT)
    @ResponseBody
    public AjaxResult add(@RequestBody Department department)
    
        System.out.println("添加成功");
        return AjaxResult.getAjxRt();
    

    //删除接口:url 参数,返回值
    // 前台传递del /employee/1
    @RequestMapping(value = "id",method = RequestMethod.DELETE)
    @ResponseBody
    public AjaxResult del(@PathVariable("id")Long id)
        System.out.println("删除成功"+id);
        return AjaxResult.getAjxRt();
    
    //删除接口:url 参数,返回值
    // 前台传递del /employee/1
    @RequestMapping(value = "id",method = RequestMethod.POST)
    @ResponseBody
    public AjaxResult update(@PathVariable("id")Long id,@RequestBody Department department)
        System.out.println("修改成功"+id+department);
        return AjaxResult.getAjxRt();
    

    //查询一个
    @ResponseBody
    @RequestMapping(value = "id",method = RequestMethod.GET)
    public  AjaxResult getById(@PathVariable("id") Long id)
        System.out.println("--------"+id);
        try 
            Department department = departmentService.loadById(id);
            System.out.println(department);
            System.out.println(AjaxResult.getAjxRt());
         catch (Exception e) 
            e.printStackTrace();
            return AjaxResult.getAjxRt().setMesg("操作失败").setSuccess(false);
        
        return  AjaxResult.getAjxRt();
    


    //查询所有
    @ResponseBody
    @RequestMapping(method = RequestMethod.PATCH)
    public  List<Department> list()
        List<Department> list = departmentService.findAll();
        for (Department department : list) 
            System.out.println("我是部门"+department);
        
        return list;
    


//    // 高级查询
//    @ResponseBody
//    @RequestMapping(method = RequestMethod.GET)
//    public PageList<Department> query(@RequestBody DepartmentQuery query)
//        return new PageList<>();
//    

 

3.postman模拟前台发送restfull请求

4、 接口规范swagger

1.1、 为什么需要

1) 接口测试人员要通过接口描述测试接口 黑盒测试

2) 前端开发人员要通过接口描述使用接口.

 

怎么描述?????

1) 写接口doc文档

       直接罗列所有接口,每个接口有访问地址(访问方式),参数及返回值.

2) 可以直接通过后端代码产生能够让前台开发或测试人员能够看懂就ok---swagger文档 json,yml,页面展示 采纳

 

5.1、 swaggerAPI文档导入EasyMock

 

（1）将我们的SwaggerAPI文档扩展名改为yml

 

    http://localhost/v2/api-docs  改为json

 

（2）在easyMock中点击“设置”选项卡

 

（3）SwaggerDocs API 选择Upload

6、 前后端分离前台实现-crud

1、 vue-element-admin

1.1、 介绍

vue-element-admin 是一个后台前端解决方案，它基于 vue-cli 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

集成方案: vue-element-admin

基础模板: vue-admin-template

桌面终端: electron-vue-admin

1.2、 安装

1.2.1、 下载模板源代码

Github地址：

https://github.com/PanJiaChen/vue-element-admin

 

我们直接使用今天resources目录中已经下载好模板

 

1.2.2、 解压，启动项目

npm install

npm run dev

做点小改