标签:cat 综合 ann dev get path wired hub 路由
前后端分离介绍
前后端分离web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。
两个服务器
1搭建模块化
作为各项目的公共工具的抽取
PageList:total,rows
AjaxResult:success,message
作为各项目的公共的抽取,依赖basic-utils模块
BaseDomain
BaseService
BaseMapper
BaseQuery
crm-common本模块作为一个项目三层的公共部分的抽取,依赖basic-core
domain:
query:
crm-dao本模块作为一个项目持久层,依赖crm-common和basic-core:
包含mapper接口和映射;和持久层的配置
crm-service本模块作为一个项目业务层,依赖crm-mapper
业务
crm-service本模块作为一个项目表现层,依赖crm-service
Controller
而现在我们的整体架构为前后端分离架构,所有的静态资源全部在前端项目中
2
接口就是提供数据东西.最简单实现接口的方式就是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请求
1) 接口测试人员要通过接口描述测试接口 黑盒测试
2) 前端开发人员要通过接口描述使用接口.
怎么描述?????
1) 写接口doc文档
直接罗列所有接口,每个接口有访问地址(访问方式),参数及返回值.
2) 可以直接通过后端代码产生能够让前台开发或测试人员能够看懂就ok---swagger文档 json,yml,页面展示 采纳
(1)将我们的SwaggerAPI文档扩展名改为yml
http://localhost/v2/api-docs 改为json
(2)在easyMock中点击“设置”选项卡
(3)SwaggerDocs API 选择Upload
vue-element-admin 是一个后台前端解决方案,它基于 vue-cli 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。
本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。
集成方案: vue-element-admin
基础模板: vue-admin-template
桌面终端: electron-vue-admin
Github地址:
https://github.com/PanJiaChen/vue-element-admin
我们直接使用今天resources目录中已经下载好模板
npm install
npm run dev
做点小改
标签:cat 综合 ann dev get path wired hub 路由
原文地址:https://www.cnblogs.com/13438145925xiaozheng/p/11421567.html