前后端分离开发 ---- 手把手教你做ssm+springboot入门后端项目黑马程序员瑞吉外卖（十）

谁借莪１个温暖的怀抱￠ 2023-10-13 22:14 8阅读 0赞

### 文章目录 ###

*  前言
 *  一、 前后端分离开发
 *   *  1. 介绍
     *  2. 开发流程
     *  3. 前端技术栈
 *  二、Swagger
 *   *  1. 介绍
     *  2. 使用方式
     *  3. 常用注解
 *  三、项目部署
 *   *  1. 前期准备说明
     *  2. 部署前端项目
     *  3. 部署后端项目
 *  总结

--------------------

# 前言 #

为了巩固所学的知识，作者尝试着开始发布一些学习笔记类的博客，方便日后回顾。当然，如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚，文章中如果有记录错误，欢迎读者朋友们批评指正。  
（博客的参考源码可以在我主页的资源里找到，如果在学习的过程中有什么疑问欢迎大家在评论区向我提出）

# 一、 前后端分离开发 #

## 1. 介绍 ##

> 1.  前后端分离开发，就是在项目开发过程中，对于前端代码的开发由专门的前端开发人员负责，后端代码则由后端开发人员负责，这样可以做到分工明确、各司其职，提高开发效率，前后端代码并行开发，可以加快项目开发进度。目前，前后端分离开发方式已经被越来越多的公司所采用，成为当前项目开发的主流开发方式。
> 2.  前后端分离开发后，从工程结构上也会发生变化，即前后端代码不再混合在同一个maven工程中，而是分为前端工程和后端工程。

![在这里插入图片描述][420541f668f548e386230a5c9d71277f.png]

## 2. 开发流程 ##

> 接口(API接口)就是一个http的请求地址主要就是去定义:请求路径、请求方式、请求参数、响应数据等内容

![在这里插入图片描述][a1a357376c2542148d0a5a968fbf467f.png]

## 3. 前端技术栈 ##

*  开发工具

> 1.  Visual Studio Code
> 2.  hbuilder

*  技术框架

> 1.  nodejs
> 2.  VUE
> 3.  ElementUl
> 4.  mock
> 5.  webpack

# 二、Swagger #

## 1. 介绍 ##

> 1.  使用Swagger你只需要按照它的规范去定义接口及接口相关的信息，再通过Swagger衍生出来的一系列项目和工具就可以做到生成各种格式的接口文档，以及在线接口调试页面等等
> 2.  官网: https://swagger.io/
> 3.  knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案

## 2. 使用方式 ##

导入knife4j的maven坐标

<dependency>
          <groupId>com.github.xiaoymin</groupId>
          <artifactId>knife4j-spring-boot-starter</artifactId>
          <version>3.0.2</version>
      </dependency>

*  导入knife4j相关配置类
 *  设置静态资源，否则接口文档页面无法访问

@Slf4j
    @Configuration
    @EnableSwagger2
    @EnableKnife4j
    public class WebMvcConfig extends WebMvcConfigurationSupport {
        
    
        /**
         * 设置静态资源映射
         * @param registry
         */
        @Override
        protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        
            log.info("开始进行静态资源映射...");
            registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
            registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
            registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
            registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
        }
    
        /**
         * 扩展mvc框架的消息转换器
         * @param converters
         */
        @Override
        protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
        
            log.info("扩展消息转换器...");
            //创建消息转换器对象
            MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
            //设置对象转换器，底层使用Jackson将Java对象转为json
            messageConverter.setObjectMapper(new JacksonObjectMapper());
            //将上面的消息转换器对象追加到mvc框架的转换器集合中
            converters.add(0,messageConverter);
        }
    
        @Bean
        public Docket createRestApi() {
        
            // 文档类型
            return new Docket(DocumentationType.SWAGGER_2)
                    .apiInfo(apiInfo())
                    .select()
                    .apis(RequestHandlerSelectors.basePackage("org.example.controller"))
                    .paths(PathSelectors.any())
                    .build();
        }
    
        private ApiInfo apiInfo() {
        
            return new ApiInfoBuilder()
                    .title("瑞吉外卖")
                    .version("1.0")
                    .description("瑞吉外卖接口文档")
                    .build();
        }
    }

*  在LoginCheckFilter中设置不需要处理的请求路径

//定义不需要处理的请求路径
            String[] urls = new String[]{
        
                    "/employee/login",
                    "/employee/logout",
                    "/backend/**",
                    "/front/**",
                    "/common/**",
                    "/user/sendMsg",
                    "/user/login",
                    "/doc.html",
                    "/webjars/**",
                    "/swagger-resources",
                    "/v2/api-docs"
            };

*  启动项目访问doc.html

![在这里插入图片描述][e8c4f436b72c4bbd9556beca371a6b7e.png]

## 3. 常用注解 ##

*  常用注解如下

<table> 
 <thead> 
  <tr> 
   <th>注解</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@Api</td> 
   <td>用在请求的类上，例如Controller，表示对类的说明</td> 
  </tr> 
  <tr> 
   <td>@ApiModel</td> 
   <td>用在类上，通常是实体类，表示一个返回响应数据的信息</td> 
  </tr> 
  <tr> 
   <td>@ApiModelProperty</td> 
   <td>用在属性上，描述响应类的属性</td> 
  </tr> 
  <tr> 
   <td>@ApiOperation</td> 
   <td>用在请求的方法上，说明方法的用途、作用</td> 
  </tr> 
  <tr> 
   <td>@ApilmplicitParams</td> 
   <td>用在请求的方法上，表示一组参数说明</td> 
  </tr> 
  <tr> 
   <td>@ApilmplicitParam</td> 
   <td>用在@ApilmplicitParams注解中，指定一个请求参数的各个方面</td> 
  </tr> 
 </tbody> 
</table>

*  示例

/**
     * 套餐管理
     */
    
    @RestController
    @RequestMapping("/setmeal")
    @Slf4j
    @Api(tags = "套餐相关接口")
    public class SetmealController {
        
    
        @Autowired
        private SetmealService setmealService;
    
        @Autowired
        private CategoryService categoryService;
    
        @Autowired
        private SetmealDishService setmealDishService;
    
        /**
         * 新增套餐
         * @param setmealDto
         * @return
         */
        @PostMapping
        @CacheEvict(value = "setmealCache",allEntries = true)
        @ApiOperation(value = "新增套餐接口")
        public R<String> save(@RequestBody SetmealDto setmealDto){
        
            log.info("套餐信息：{}",setmealDto);
    
            setmealService.saveWithDish(setmealDto);
    
            return R.success("新增套餐成功");
        }
    
        /**
         * 套餐分页查询
         * @param page
         * @param pageSize
         * @param name
         * @return
         */
        @GetMapping("/page")
        @ApiOperation(value = "套餐分页查询接口")
        @ApiImplicitParams({
        
                @ApiImplicitParam(name = "page",value = "页码",required = true),
                @ApiImplicitParam(name = "pageSize",value = "每页记录数",required = true),
                @ApiImplicitParam(name = "name",value = "套餐名称",required = false)
        })
        public R<Page> page(int page,int pageSize,String name){
        
            //分页构造器对象
            Page<Setmeal> pageInfo = new Page<>(page,pageSize);
            Page<SetmealDto> dtoPage = new Page<>();
    
            LambdaQueryWrapper<Setmeal> queryWrapper = new LambdaQueryWrapper<>();
            //添加查询条件，根据name进行like模糊查询
            queryWrapper.like(name != null,Setmeal::getName,name);
            //添加排序条件，根据更新时间降序排列
            queryWrapper.orderByDesc(Setmeal::getUpdateTime);
    
            setmealService.page(pageInfo,queryWrapper);
    
            //对象拷贝
            BeanUtils.copyProperties(pageInfo,dtoPage,"records");
            List<Setmeal> records = pageInfo.getRecords();
    
            List<SetmealDto> list = records.stream().map((item) -> {
        
                SetmealDto setmealDto = new SetmealDto();
                //对象拷贝
                BeanUtils.copyProperties(item,setmealDto);
                //分类id
                Long categoryId = item.getCategoryId();
                //根据分类id查询分类对象
                Category category = categoryService.getById(categoryId);
                if(category != null){
        
                    //分类名称
                    String categoryName = category.getName();
                    setmealDto.setCategoryName(categoryName);
                }
                return setmealDto;
            }).collect(Collectors.toList());
    
            dtoPage.setRecords(list);
            return R.success(dtoPage);
        }
    
        /**
         * 删除套餐
         * @param ids
         * @return
         */
        @DeleteMapping
        @CacheEvict(value = "setmealCache",allEntries = true)
        @ApiOperation(value = "套餐删除接口")
        public R<String> delete(@RequestParam List<Long> ids){
        
            log.info("ids:{}",ids);
    
            setmealService.removeWithDish(ids);
    
            return R.success("套餐数据删除成功");
        }
    
        /**
         * 根据条件查询套餐数据
         * @param setmeal
         * @return
         */
        @GetMapping("/list")
        @Cacheable(value = "setmealCache",key = "#setmeal.categoryId + '_' + #setmeal.status")
        @ApiOperation(value = "套餐条件查询接口")
        public R<List<Setmeal>> list(Setmeal setmeal){
        
            LambdaQueryWrapper<Setmeal> queryWrapper = new LambdaQueryWrapper<>();
            queryWrapper.eq(setmeal.getCategoryId() != null,Setmeal::getCategoryId,setmeal.getCategoryId());
            queryWrapper.eq(setmeal.getStatus() != null,Setmeal::getStatus,setmeal.getStatus());
            queryWrapper.orderByDesc(Setmeal::getUpdateTime);
    
            List<Setmeal> list = setmealService.list(queryWrapper);
    
            return R.success(list);
        }
    }

/**
     * 通用返回结果，服务端响应的数据最终都会封装成此对象
     * @param <T>
     */
    @Data
    @ApiModel("返回结果")
    public class R<T> implements Serializable{
        
    
        @ApiModelProperty("编码")
        private Integer code; //编码：1成功，0和其它数字为失败
    
        @ApiModelProperty("错误信息")
        private String msg; //错误信息
    
        @ApiModelProperty("数据")
        private T data; //数据
    
        @ApiModelProperty("动态数据")
        private Map map = new HashMap(); //动态数据
    
        public static <T> R<T> success(T object) {
        
            R<T> r = new R<T>();
            r.data = object;
            r.code = 1;
            return r;
        }
    
        public static <T> R<T> error(String msg) {
        
            R r = new R();
            r.msg = msg;
            r.code = 0;
            return r;
        }
    
        public R<T> add(String key, Object value) {
        
            this.map.put(key, value);
            return this;
        }
    
    }

/**
     * 套餐
     */
    @Data
    @ApiModel("套餐")
    public class Setmeal implements Serializable {
        
    
        private static final long serialVersionUID = 1L;
    
        @ApiModelProperty("主键")
        private Long id;
    
    
        //分类id
        @ApiModelProperty("分类id")
        private Long categoryId;
    
    
        //套餐名称
        @ApiModelProperty("套餐名称")
        private String name;
    
    
        //套餐价格
        @ApiModelProperty("套餐价格")
        private BigDecimal price;
    
    
        //状态 0:停用 1:启用
        @ApiModelProperty("状态")
        private Integer status;
    
    
        //编码
        @ApiModelProperty("套餐编号")
        private String code;
    
    
        //描述信息
        @ApiModelProperty("描述信息")
        private String description;
    
    
        //图片
        @ApiModelProperty("图片")
        private String image;
    
    
        @TableField(fill = FieldFill.INSERT)
        private LocalDateTime createTime;
    
    
        @TableField(fill = FieldFill.INSERT_UPDATE)
        private LocalDateTime updateTime;
    
    
        @TableField(fill = FieldFill.INSERT)
        private Long createUser;
    
    
        @TableField(fill = FieldFill.INSERT_UPDATE)
        private Long updateUser;
    
    }

![在这里插入图片描述][6af631713db94d4891e0205a77db4d31.png]

# 三、项目部署 #

## 1. 前期准备说明 ##

**1. 部署架构**

![在这里插入图片描述][bdd8c5af901e40a6846e446e2eaaef69.png]

**2.部署环境说明**

> 1.  192.168.154.130(服务器A)  
>     Nginx: 部署前端项目、配置反向代理  
>     Mysql: 主从复制结构中的主库
> 2.  192.168.54.129(服务器B)  
>     jdk: 运行Java项目  
>     git:版本控制工具  
>     maven:项目构建工具  
>     jar: Spring Boot项目打成jar包基于内置Tomcat运行  
>     Mysql: 主从复制结构中的从库
> 3.  127.0.0.1 (服务器C)  
>     Redis: 缓存中间件

## 2. 部署前端项目 ##

**1. 第一步: 在服务器A中安装Nginx，将前端项目打包后的dist目录上传到Nginx的html目录下**

![在这里插入图片描述][4da37f49da354b8eae78fda7fbc67097.png]

**2. 第二步:修改Nginx配置文件nginx.conf**

![在这里插入图片描述][0e42fb840e1042c895c9b9d3eb5d8c9c.png]

**3. 发送登录请求**

![在这里插入图片描述][26c7bfd05a8a46b48ed14ef14c9587b5.png]

## 3. 部署后端项目 ##

**1. 第一步:在服务器B中安装jdk、git、maven、MySQL，使用git clone命令将git远程仓库的代码克隆下来**

![在这里插入图片描述][cf2b61a0ef6d499cb07f30a546347a3e.png]

**2. 第二步:将编写好的reggieStart.sh文件上传到服务器B，通过chmod命令设置执行权限**

![在这里插入图片描述][8e6d13579b394b44a1ea5e05da26bc53.png]

**3. 第三步:执行reggieStart.sh脚本文件，自动部署项目**

![在这里插入图片描述][5e35487bda5c4cdba5171cfaac346177.png]

**4. 前端页面访问登录页面请求A代理器(前端slave)，反向代理B服务器（后端master）回传数据**

# 总结 #

欢迎各位留言交流以及批评指正，如果文章对您有帮助或者觉得作者写的还不错可以点一下关注，点赞，收藏支持一下。  
（博客的参考源码可以在我主页的资源里找到，如果在学习的过程中有什么疑问欢迎大家在评论区向我提出）

[420541f668f548e386230a5c9d71277f.png]: https://img-blog.csdnimg.cn/420541f668f548e386230a5c9d71277f.png
[a1a357376c2542148d0a5a968fbf467f.png]: https://img-blog.csdnimg.cn/a1a357376c2542148d0a5a968fbf467f.png
[e8c4f436b72c4bbd9556beca371a6b7e.png]: https://img-blog.csdnimg.cn/e8c4f436b72c4bbd9556beca371a6b7e.png
[6af631713db94d4891e0205a77db4d31.png]: https://img-blog.csdnimg.cn/6af631713db94d4891e0205a77db4d31.png
[bdd8c5af901e40a6846e446e2eaaef69.png]: https://img-blog.csdnimg.cn/bdd8c5af901e40a6846e446e2eaaef69.png
[4da37f49da354b8eae78fda7fbc67097.png]: https://img-blog.csdnimg.cn/4da37f49da354b8eae78fda7fbc67097.png
[0e42fb840e1042c895c9b9d3eb5d8c9c.png]: https://img-blog.csdnimg.cn/0e42fb840e1042c895c9b9d3eb5d8c9c.png
[26c7bfd05a8a46b48ed14ef14c9587b5.png]: https://img-blog.csdnimg.cn/26c7bfd05a8a46b48ed14ef14c9587b5.png
[cf2b61a0ef6d499cb07f30a546347a3e.png]: https://img-blog.csdnimg.cn/cf2b61a0ef6d499cb07f30a546347a3e.png
[8e6d13579b394b44a1ea5e05da26bc53.png]: https://img-blog.csdnimg.cn/8e6d13579b394b44a1ea5e05da26bc53.png
[5e35487bda5c4cdba5171cfaac346177.png]: https://img-blog.csdnimg.cn/5e35487bda5c4cdba5171cfaac346177.png