码迷,mamicode.com
首页 > 其他好文 > 详细

SSM+ElementUI综合练习

时间:2019-08-28 01:29:22      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:cat   综合   ann   dev   get   path   wired   hub   路由   

前后端分离介绍

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

两个服务器 

 

1搭建模块化

技术图片

1.1、 basic-uitl

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

PageListtotal,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

做点小改

 

 

 

SSM+ElementUI综合练习

标签:cat   综合   ann   dev   get   path   wired   hub   路由   

原文地址:https://www.cnblogs.com/13438145925xiaozheng/p/11421567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!