正文 

当前位置： 首页 > IT > java教程

springboot+vue+实战项目之第3集(代码片段)

Panda_Java Panda_Java     2022-12-31     159

关键词：

SpringBoot+vue+实战项目--锋迷商城

1.《锋迷商城》业务流程设计-接⼝规范

在企业项⽬开发中，当完成项⽬的需求分析、功能分析、数据库分析与设计之后，
项⽬组就会按照项⽬中的功能进⾏开发任务的分配

1.1 前后端分离与单体架构流程实现的区别

单体架构：⻚⾯和控制之间可以进⾏跳转，同步请求控制器，流程控制由控制器来完成
前后端分离架构：前端和后端分离开发和部署，前端只能通过异步向后端发送请求，
后端只负责接收请求及参数、处理请求、返回处理结果，但是后端并不负责流程控制，
流程控制是由前端完成

1.1.1单体架构

1.1.2 前后端分离架构

1.2 接口介绍

1.2.1接口概念

狭义的理解：就是控制器中可以接受⽤户请求的某个⽅法
应⽤程序编程接⼝，简称API，就是软件系统不同组成部分衔接的约定

1.2.2接口规范

参考：《锋迷商城》后端接⼝说明

1.3 Swagger

前后端分离开发，后端需要编写接⼝说明⽂档，会耗费⽐较多的时间
swagger是⼀个⽤于⽣成服务器接⼝的规范性⽂档、并且能够对接⼝进⾏测试的⼯具

1.3.1作用

  1. ⽣成接⼝说明⽂档
  2. 对接⼝进⾏测试

1.3.2 Swagger整合

  1. 在api⼦⼯程添加依赖（Swagger2 \\ Swagger UI）
<dependency>
 	 <groupId>io.springfox</groupId>
	 <artifactId>springfox-swagger2</artifactId>
	 <version>2.9.2</version>
</dependency>
<dependency>
	 <groupId>io.springfox</groupId>
	 <artifactId>springfox-swagger-ui</artifactId>
	 <version>2.9.2</version>
</dependency>
  1. 在api⼦⼯程创建swagger的配置（Java配置⽅式）
@Configuration
@EnableSwagger2
public class SwaggerConfig 
 	/*swagger会帮助我们⽣成接⼝⽂档
	 * 1：配置⽣成的⽂档信息
	 * 2: 配置⽣成规则*/
	 /*Docket封装接⼝⽂档信息*/
	 @Bean
	 public Docket getDocket()
	 //创建封⾯信息对象
		 ApiInfoBuilder apiInfoBuilder = new ApiInfoBuilder();
 		 apiInfoBuilder.title("《锋迷商城》后端接⼝说明")
 			  		   .description("此⽂档详细说明了锋迷商城项⽬后端接⼝规范....")
					   .version("v 2.0.1")
 					   .contact( new Contact("亮哥","www.liangge.com","liangge@wang.com") );
		 ApiInfo apiInfo = apiInfoBuilder.build();
 		 Docket docket = new Docket(DocumentationType.SWAGGER_2)
						 .apiInfo(apiInfo) //指定⽣成的⽂档中的封⾯信息：⽂档标题、版本、作者
						 .select()	 
						 .apis(RequestHandlerSelectors.basePackage("com.qfedu.fmmall.controller"))
						 .paths(PathSelectors.any())
						 .build();
		 return docket;
  1. 测试：
    启动SpringBoot应⽤，访问：http://localhost:8080/swagger-ui.html

1.3.3 Swagger注解说明

  1. swagger提供了⼀套注解，可以对每个接⼝进⾏详细说明
  2. @Api 类注解，在控制器类添加此注解，可以对控制器类进⾏功能说明
@Api(value = "提供商品添加、修改、删除及查询的相关接⼝",tags = "商品管理")
  1. @ApiOperation ⽅法注解：说明接⼝⽅法的作⽤
  2. @ApiImplicitParams 和 @ApiImplicitParam ⽅法注解，说名接⼝⽅法的参数
  3. @ApiModel 和 @ApiModelProperty 当接⼝参数和返回值为对象类型时，在实体类中添加注解说明
  4. @ApiIgnore 接⼝⽅法注解，添加此注解的⽅法将不会⽣成到接⼝⽂档中

1.3.4 Swagger-ui 插件

导入插件依赖

<dependency>
 	<groupId>com.github.xiaoymin</groupId>
 	<artifactId>swagger-bootstrap-ui</artifactId>
	<version>1.9.6</version>
</dependency>

1.4 RESTful

  1. 前后端分离开发的项⽬中，前后端之间是接⼝进⾏请求和响应，后端向前端提供请求时就要对外暴露⼀个URL；URL的设计不能是随意的，需要遵从⼀定的设计规范——RESTful
RESTful 是⼀种Web api的标准，也就是⼀种url设计⻛格/规范
每个URL请求路径代表服务器上的唯⼀资源
传统的URL设计：
	 http://localhost:8080/goods/delete?goodsId=1 商品1
	 http://localhost:8080/goods/delete?goodsId=2 商品2
RESTful设计：
	 http://localhost:8080/goods/delete/1 商品1
 	 http://localhost:8080/goods/delete/2 商品2

 @RequestMapping("/delete/gid")
 public ResultVO deleteGoods(@PathVariable("gid") int goodsId)
	 System.out.println("-----"+goodsId);
 	 return new ResultVO(10000,"delete success",null);
  1. 使⽤不同的请求⽅式表示不同的操作
SpringMVC对RESTful⻛格提供了很好的⽀持，在我们定义⼀个接⼝的URL时，可以通
过@RequestMapping(value="/id",method=RequestMethod.GET) 形式指定请求
⽅式，也可使⽤特定请求⽅式的注解设定URL
@PostMapping("/add")
@DeleteMapping("/id")
@PutMapping("/id")
@GetMapping("/id")
post 添加.  get 查询.  put 修改. delete 删除. option (预检).
  1. 接⼝响应的资源的表现形式采⽤JSON（或者XML）
  2. 在控制类或者每个接⼝⽅法添加 @ResponseBody 注解将返回的对象格式为json
  3. 或者直接在控制器类使⽤ @RestController 注解声明控制器
  4. 前端(Android\\ios\\pc)通过⽆状态的HTTP协议与后端接⼝进⾏交互

springboot+vue+实战项目之第2集(代码片段)

SpringBoot+vue+实战项目--锋迷商城1.Maven聚合工程1.1Maven聚合工程概念1.2创建Maven聚合工程1.2.1创建Maven父工程1.2.2创建Module1.3Maven聚合工程依赖继承1.3.1依赖继承1.3.2依赖版本管理2.《锋迷商城》项目搭建2.1技术储备2.2创建Maven聚... 查看详情

springboot+vue+实战项目之第4集(代码片段)

《锋迷商城》设计及实现—用户管理1.实现流程2.后端接口开发2.1完成DAO操作2.2完成Service业务2.3完成Controller提供接口2.4接口测试1.实现流程2.后端接口开发2.1完成DAO操作创建实体类 @Data @NoArgsConstructor @AllArgsConstructor @Ap... 查看详情

精通系列springboot集成elasticsearch+项目实战(代码片段)

Java之ElasticSearch7.x.x+SpringBoot+爬虫+项目实战【一篇文章精通系列】【SpringBoot集成ElasticSearch+项目实战】一、ElasticSearch的Java官方文档1、查看官方文档2、找到了原生的依赖3、初始化二、创建SpringBoot项目1、创建项目2、... 查看详情

第二季springboot+vue前后端分离项目实战笔记(代码片段)

配套视频在b站：【第二季】全网最简单但实用的SpringBoot+Vue前后端分离项目实战SpringBoot+Vue项目实战第二季一、些许优化刷新丢失其它标签页缓存已打开标签页tagsViewCache()window.addEventListener("beforeunload",()=>letta... 查看详情

基于vue+vue-cli+webpack搭建渐进式高可维护性前端实战项目(代码片段)

   本文是专栏《Vue+SpringBoot前后端分离项目实战》的实战第一篇，将从Vue脚手架安装开始，逐步带你搭建起一套管理系统所需的架构。当然，在默认安装完成之后，会对文件目录进行初步的细化拆分，以... 查看详情

精通系列springboot集成elasticsearch+项目实战(代码片段)

Java之ElasticSearch7.x.x+SpringBoot+爬虫+项目实战【一篇文章精通系列】【SpringBoot集成ElasticSearch+项目实战】一、ElasticSearch的Java官方文档1、查看官方文档2、找到了原生的依赖3、初始化二、创建SpringBoot项目1、创建项目2、... 查看详情

springboot+vue练手级项目，真实的在线博客系统(代码片段)

文章目录springboot练手实战项目说明基础知识面试准备1.工程搭建1.1新建maven工程1.1.2遇到的bug1.2配置1.3启动类2.首页-文章列表2.1接口说明2.2编码2.2.0Spring—基于注解开发2.2.1表结构entity层2.2.2Controller2.2.3Service2.2.3.0解决mapper爆红2.2.3.... 查看详情

java网络商城项目springboot+springcloud+vue网络商城（ssm前后端分离项目）八（文件的上传fastdfs和校验）（nginx的请求前缀配置，在发布项目的时候要注意）(代(代

一、品牌新增功能（图片上传）1、新建一个微服务：文件的上传的微服务2、添加依赖<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi& 查看详情

springboot+vue实战wiki

1、idea设置encodingmavencompileauto2、versioncontrolcrtl+d进行代码对比3、crtl+r替换4、mybatis插件5、ideahttp文件6、将布局写在app.vue,将各页面变化部分放各自路由页面 查看详情

个人项目实战2，springboot集成（html+vue.js）前端框架(代码片段)

文章目录前言一，导入VUE组件库二，springboot引入html1，springboot配置文件中配置静态资源2，编写一个html3，关键代码（1）引入饿了么CSS（2）引入关键JS（3）编写页面body内容（4）... 查看详情

使用vue+axios+vuex实现登录后前端数据本地化存储实战

前言这已经是《Vue+SpringBoot前后端分离项目实战》专栏的前端部分第8篇博客了，服务端部分由天哥（天哥主页）负责，目前专栏目录如下：Vue+SpringBoot前后端分离项目实战-前端部分1. 手把手带你做一套毕业设计-征程开启2.&nbs... 查看详情

springboot之第一个springboot程序(代码片段)

...nish。启动之后：右下角选择自动导入。2、在pom.xml中导入springboot相关依赖<?xmlversion="1.0"encoding="UTF-8"?><projec 查看详情

java网络商城项目springboot+springcloud+vue网络商城（ssm前后端分离项目）七（品牌查询，品牌提交表单信息以及表单页面信息和校验）以及axios（ajax）的使用(代码(代

1、商品分类完成以后，自然轮到了品牌功能了（1）为了方便看到效果，我们新建一个MyBrand.vue，从0开始搭建（2）修改item的路径route("/item/brand",'/item/MyBrand',"Brand"),（3 查看详情

15个优秀开源的springboot学习项目

SpringBoot算是目前Java领域最火的技术栈了，松哥年初出版的《SpringBoot+Vue全栈开发实战》迄今为止已经加印了8次，SpringBoot的受欢迎程度可见一斑。经常有人问松哥有没有推荐的SpringBoot学习资料？当然有！买松哥书就对了，哈哈... 查看详情

项目部署vue+springboot前后分离个人博客项目实战部署保姆教程linux+docker安装部署启动一条龙教程(代码片段)

目录SpringBoot开源项目部署在75元阿里云centos7上，小白手把手教程技术栈系统环境需求后端部署步骤redis配置前端域名从如何拥有个人服务器和域名开始说起。在职程序员教你如何选择个人服务器和个人域名，让自己变得IT... 查看详情

最火的13个springboot实战开源项目推荐！总有一款适合你

...om/Snailclimb/…Guide哥注：下面这些推荐的项目几乎都和SpringBoot有关，毕竟这年头没有理由再搞SSM/SSH这些东西了。商城系统Guide哥注：下面的商城系统大多比较复杂比如mall,如果没有Java基础和SpringBoot都还没有摸熟的话不推荐过... 查看详情

springboot之第一个应用helloworld(代码片段)

新建一个maven项目 pom.xml增加如下配置<properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.8</maven.compiler.source><maven.co 查看详情

springboot知识体系+vue3实战wiki知识库系统笔记demo3_commonresp(代码片段)

SpringBoot知识体系+Vue3实战WIKI知识库系统笔记注：可以点击提交的log来查看每次提交完成的功能，这是非常好的学习方式。设置一个CommonResp的类。packagecom.roc.wiki.resp;publicclassCommonResp<T>privatebooleansuccess=true;privateSt... 查看详情