苍穹外卖开发心得

博客介绍

• 本项目也是很早之前写过的项目 当时没有打算上传，写的很杂，整篇文档的精髓是 请求参数处理办法、类开发五部走、接口开发（控制器开发四步走）即使您没有接触过后端开发 在看了几集视频后来看这几个会对您构建后端认识有着巨大帮助
• 请善用文章的目录功能

请求参数类型及处理办法

Headers http://localhost/api/setmeal Path： /admin/setmeal

三、@RequestBody

从http请求body部分获取参数，通常用于接受json或xml格式

路径参数 http://localhost/api/setmeal/44 Path： /admin/setmeal/{id}

一、@PathVariable：

用于从请求的URL路径中获取路径变量的值。路径变量是URL中的一部分，用于在RESTful风格的API中传递数据。路径变量的值会直接嵌入到URL路径中，并使用占位符 {} 来表示，Spring MVC 会根据占位符中的变量名将值注入到方法参数中。

@GetMapping("/users/{userId}")
public String getUser(@PathVariable("userId") Long userId) {
    // 根据用户ID查询用户信息
}

查询参数 http://localhost/api/setmeal/page?page=1&pageSize=10&status= Path： /admin/setmeal/page

Query:

//以下代码是请求参数对应接收类
@Data
public class SetmealPageQueryDTO implements Serializable {
    private int page;
    private int pageSize;
    private String name;
    //分类id
    private Integer categoryId;
    //状态 0表示禁用 1表示启用
    private Integer status;
}

image-20240229134940898

• 为什么这里可以不加任何东西就获取到参数呢？
• 当Spring MVC发现一个方法的参数类型不是基本类型（如int、String等）而是一个POJO（Plain Old Java Object）时，它会尝试从请求中提取参数，并将参数的值赋给该POJO对象对应的属性

二、@RequestParam：

用于从请求的查询参数中获取单个参数值。通常用于GET请求或者POST请求中的查询参数。在GET请求中，查询参数会附加在URL后面，如 ?key1=value1&key2=value2，而在POST请求中，查询参数会放在请求体中，需要使用 @RequestParam 指定参数名来获取值。

@GetMapping("/search")
public String search(@RequestParam("keyword") String keyword) {
    // 处理查询操作
}

还可以使用@ModelAttribute

类开发五步走

一：添加Spring Framework中的类标识注解 @RestController 这个注解后面可以跟上命名，当同一个项目中有两个一样的类名时，就可以使用这个注解来进行区别

二：添加处理路径 @RequestMapping(“/”)

三：添加日志记录器 原生是logging。这里我选择使用@Slf4j 创建日志记录器，并进行管理。使用该注解后，使用 log 对象进行管理

四：生成接口文档 @Api(tags = "标题") 这里使用Swagger生成接口文档，方便测试

五：对象管理 使用 @Autowired 来进行依赖注入

接口开发

接口开发主要有三个地方需要开发，一是controller二是 service 三是mapper

控制器controller开发四步走

@PostMapping("/admin/employee")
@ApiOperation("新增员工")
public Result save(@RequestBody EmployeeDTO employeeDTO){
    //RequestBody 注解的作用是告诉Spring MVC框架，要将HTTP请求的body部分（通常是JSON或XML格式的数据）映射到方法参数 employeeDTO 上。
    
    log.info("新增员工：{}",employeeDTO);
    employeeService.sava(employeeDTO);
}

一： 确认控制器地址 @PostMapping(“/admin/employee”) 确认后面的请求路劲该写什么

二：编写传输的数据模型 编写一个实体用来接收前端传递过来的数据模型 EmployeeDTO employeeDTO

三：编写处理返回结果的类 Result

四：调用业务逻辑层的相关方法 employeeService.sava(employeeDTO);

附加： log.info(“新增员工：{}”,employeeDTO);便于调试@ApiOperation(“新增员工”)使得生成出来的接口测试站点更加容易阅读

业务逻辑层开发

一：编写接口的方法

二： 在实现类中实现

三：封装好属性与数据

记得在业务逻辑类前加上@service标签

image-20240225103945830

业务逻辑层（service）开发小技巧

遇到前端传来数据与数据库实体差距过大创建了两个对象的时候，业务逻辑层使用对象拷贝能更快拿到数据

image-20240225100540185

image-20240225100702900

项目名词解释

• **序列化：**把对象转化为可传输的字节序列过程称为序列化。 **反序列化：**把字节序列还原为对象的过程称为反序列化。
• 设置工厂连接对象，这里的工厂指的是设计模式

问题

• 什么是消息转换器
• 什么是@builder构建器
• 切面是什么，有什么用解决了什么问题
• 什么加了builder注解后会让方法变成私有

开发的一些常见东西

• 购物车中的物品结算时，前端已经做了为空不能结算的校验，但后端还是要再做一遍，因为可能会出现不从前端发来的请求

项目的约定

• 管理端发来的请求使用admin为前缀
• 用户端发来的请求使用user为前缀
• 前端提交过来的属性与实体类（根据数据库属性设计的对象）属性差别比较大时，使用dto来封装前端提交过来的数据
• 账号密码默认为123456

开发小技巧

• 更多技巧见：https://blog.csdn.net/lisu061714112/article/details/117856048?ops_request_misc=&request_id=&biz_id=102&utm_term=idea%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91%E6%8A%80%E5%B7%A7&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-1-117856048.142v99pc_search_result_base3&spm=1018.2226.3001.4187
• 使用alt加回车可以快捷生成未实现的方法
• 多学习别人的工具类是怎么写的
• 多个参数时，实体要放在第一个位置
• 复杂的sql，现在数据库中写一遍试试
• 遇到需要更新某数据时候，可以直接找到数据然后覆盖

项目技术点

• 自定义异常类
• 自定义注解
• 接口文档生成
• 接口开发
• 文件上传
• PageHelper的分页查询
• 让springboot框架来解析接口的数据
• 项目规范：常量类、公共字段注入、数据加密
• BeanUtils用来拷贝对象
• 测试类中代码每次启动都会运行一次
• 依赖注入的深入学习
• Builder模式创建对象 重要零碎
• 面对一个请求中的数据要同时插入两张表的时，在业务逻辑层进行处理，分别插入两张表的数据
• DTO后缀的实体一般用于数据流转，VO后缀用于数据展示，而没有后缀的一般用于与数据库交互
• @Options在mapper层使用该注解可以使得立刻获得插入数据的某项属性，如id

后端开发

开发流程与工具选择

• 使用yapi来管理所有的接口，导入接口文档
• 使用swagger对接口进行测试

image-20240222132757566

image-20240222133015401

image-20240222133724203

• 项目中的这个用来排除不上传的文件

image-20240222142352794

• 拿到项目后可以在maven生命周期中对项目进行编译

反向代理

image-20240222145116467

image-20240222145131763

image-20240222145143310

配置方式

image-20240222145602105

image-20240222145705222

image-20240222145722035

• 此处将前端发来请求中有/api/变成了admin

IDEA 开发小技巧 TODO

image-20240222151302203

• 可在使用TODO来标识

使用MD5对数据 库中密码进行加密

image-20240224111510997

Swagger

image-20240224112319860

image-20240224150815419

• 都是配置形的代码，固定的

image-20240224151752911

• 这样配置能扫描的包包括controller.admin

常用的注解

image-20240225091529849

/* 该注解用于生成接口文档时显示作用于类 */
@Api(tags = "员工相关接口")
public class EmployeeController {

    @PostMapping("/login") 
    @ApiOperation(value = "员工登录方法")  // 注意这里
    public Result<EmployeeLoginVO> login(@RequestBody EmployeeLoginDTO employeeLoginDTO) {
   
    @PostMapping("/logout")
    @ApiOperation(value = "员工登出方法")
    public Result<String> logout() {
        return Result.success();
    }
}

• 写在控制器下面即可

image-20240225092157676

• 这个规范的叫法是 专注数据传输的类。

静态资源与Controller

• 静态资源只要存在于一个项目中就可被浏览器请求到，不需要后端处理。而控制器则是用于处理动态请求并生成动态内容的组件
• 静态资源就是项目中一个html5文件之类的
• 下面这个就是controller

image-20240225091210766

JWT

image-20240225214600653

image-20240225215523953

动态sql所使用的标签

因为要用到标签所以在xml中进行编写

要注意到几个问题：

一：扫描范围

image-20240225223530125

image-20240225224433835

处理分页查询放回的日期是数组类型数据

image-20240226083947728

• 方法一只能对标注的注解
• 方法二可以全局

image-20240226084019146

• 此处分页查询用来springboot中的page框架自动拼接

想要处理传递过来可变参数可写成以下模式

@PostMapping("/status/{status}")

请求路径

@PutMapping
    @ApiOperation("编辑员工信息")
    public Result  update(@RequestBody EmployeeDTO employeeDTO){
        log.info("编辑员工：{}", employeeDTO);
        employeeService.update(employeeDTO);
        return Result.success();

        @PostMapping
    @ApiOperation("新增员工")
    public Result save(@RequestBody EmployeeDTO employeeDTO){
        log.info("新增员工：{}",employeeDTO);
        employeeService.sava(employeeDTO);
        /* 一个工具类，这个代表放回成功 */
        return Result.success();
    }

这是同一个类中的两个方法，都没有指定请求的路径，于是被视为都挂在在类默认路径上，一个是put一个是post请求

公共字段自动填充问题

image-20240226142149967

• 通过定义字段和切面来实现

配置类的写法

image-20240226210125450

image-20240226210302568

• 这样会使得代码会提示

Configuration配置注解

与@Component的区别: @Configuration 是 @Component 注解的特化，它们都是用来声明一个类作为Spring管理的组件，但 @Configuration 有特殊的语义，用于定义Bean和配置项。

启动加载: 配置类通常在Spring应用程序启动时被加载，Spring容器会扫描并解析其中的配置信息，以构建应用程序的应用上下文。

使用事务的办法

image-20240226213037005

xml文件复制的方法

image-20240226213608880

• cv复制后修改这里

让MVC框架来解析接口的数据

image-20240227092247881

• 想要让mvc框架来解析这个接口，将逗号分隔的每个元素封装到list集合中去

加上@RequestParam 注解即可

Redis

一个基于内存的key-value结构数据库。读写性能高，适合存储热点数据（经常访问的），mysql的补充

https://redis.net.cn/

image-20240227200518455

image-20240227202233413

• 打开服务的时候记得两个窗口都不要关闭

数据类型

image-20240227203043827

image-20240227210639581

image-20240227210650498

image-20240227210702986

image-20240227210718245

image-20240227210737730

image-20240227210745801

在java中操作redis

image-20240227211616224

image-20240227212731683

像营业状态这种只有一个字符的东西就适合存在redis中

一个项目相同类名通过编译办法

image-20240227221603748

image-20240227221628208

一个项目Swagger设置不同页的接口文档办法

image-20240227223107801

• grouName记得设置，不能在创建bean的时候会出错

HttpClient

image-20240228103551958

    @Test
    public void testPOST() throws Exception {

        /* 1、创建httpclient对象 */
        CloseableHttpClient httpClient = HttpClients.createDefault();

        /* 2、创建请求对象 */
//Post方式请求
        HttpPost httpPost = new HttpPost("http://localhost:8080/admin/employee/login");

//构造json数据
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("username","admin");
        jsonObject.put("password", "123456");

//构造请求体
        StringEntity stringEntity = new StringEntity(jsonObject.toString());
//设置请求编码
        stringEntity.setContentEncoding("utf-8");
//设置数据类型
        stringEntity.setContentType("application/json");
//设置当前Post请求的请求体
        httpPost.setEntity(stringEntity);


        /* 3、发送请求 */
//发送请求
        CloseableHttpResponse response = httpClient.execute(httpPost);


        /* 4、解析返回结果 */
//http响应码
        int statusCode = response.getStatusLine().getStatusCode();

//http响应体
        HttpEntity entity = response.getEntity();
//将响应体转为String字符串
        String body = EntityUtils.toString(entity);
        System.out.println(body);

        /* 5、关闭资源 */
//关闭资源
        response.close();
        httpClient.close();


    }

微信小程序

https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

本套教程需要再详情中将基础库改为2.7以下版本

image-20240228112230723

• 防止请求发送不出去

image-20240228112405676

image-20240228112516637

image-20240228145027360

拦截器配置

registry.addInterceptor(jwtTokenAdminInterceptor)
        // 要拦截的网址
        .addPathPatterns("/user/**")
        // 要排除的网址
        .excludePathPatterns("/user/user/login")

配置类注解 @Configuration

开发的顺序

开发新增接口时注意这个新增是不是需要查询别的东西之类的，如果需要，那将很难进行测试

分页查询PageHelper

在进行数据库查询前，调用 PageHelper.startPage(pageNum, pageSize) 方法来开启分页功能。其中，pageNum 表示页码，pageSize 表示每页显示的记录数。执行完查询操作后，会自动进行分页，无需手动处理。

使用reids来进行缓存数据

   /**
     * 根据分类id查询菜品
     *
     * @param categoryId
     * @return
     */
    // @GetMapping("/list")
    // @ApiOperation("根据分类id查询菜品")
    // public Result<List<DishVO>> list(Long categoryId) {
    //     Dish dish = new Dish();
    //     dish.setCategoryId(categoryId);
    //     dish.setStatus(StatusConstant.ENABLE);//查询起售中的菜品
    //
    //     List<DishVO> list = dishService.listWithFlavor(dish);
    //
    //     return Result.success(list);
    // }


    /* 进行接口改造，使得能存放进redis中 */
    @GetMapping("/list")
    @ApiOperation("根据分类id查询菜品")
    public Result<List<DishVO>> list(Long categoryId) {

        // 构造redis中的key dish_分类id
        String key="dish_"+categoryId;

        // 先查找redis中是否存在菜品数据 此处数据类型和存放进去的数据类型一致
        List<DishVO> list =(List<DishVO>) redisTemplate.opsForValue().get(key);

        if (list!=null &&list.size()>0){
        //     直接返回内容无需查询数据库
            return Result.success(list);
        }

        Dish dish = new Dish();
        dish.setCategoryId(categoryId);
        dish.setStatus(StatusConstant.ENABLE);//查询起售中的菜品
        /* 如果不存在，查询数据库，将查询道德数据放入reids中 */
        list = dishService.listWithFlavor(dish);
        redisTemplate.opsForValue().set(key,list);

        return Result.success(list);
    }

增删改查启停售都需要清除缓存

 @PostMapping
    @ApiOperation("新增菜品")
    public Result<String> save(@RequestBody DishDTO dishDTO){
        log.info("新增菜品：{}", dishDTO);
        dishService.saveWithFlavor(dishDTO);
        return Result.success();
    }

  /* 清理缓存数据 */
        String  key ="dish_"+dishDTO.getCategoryId();

Spring Cache

• 一个款框架，能便捷的实现缓存功能还能便捷的切换基础

image-20240302151201386

/* spel表达式来动态获取key */
@PostMapping
// @CachePut(cacheNames="userCache",key="#user.id") //如果使用spring cache缓存数据，key的生成：userCache::abc】
// @CachePut(cacheNames="userCache",key="#result.id")
// @CachePut(cacheNames="userCache",key="#p0.id")
// @CachePut(cacheNames="userCache",key="#a0.id")
// @CachePut(cacheNames="userCache",key="#root.args[0].id")
public User save(@RequestBody User user){
    userMapper.insert(user);
    return user;
}

程序入口

image-20240302154656371

• 在这里进行配置

使用静态方法来管理当前数据

• 需求：购物车删除菜品的时候需要知道这个人的id，新增菜品的时候也是这样，不同人有不同的id，这时候将id用静态方法来管理获得，比较合适

编写类似一下的工具类

package com.sky.context;

public class BaseContext {

    public static ThreadLocal<Long> threadLocal = new ThreadLocal<>();

    public static void setCurrentId(Long id) {
        threadLocal.set(id);
    }

    public static Long getCurrentId() {
        return threadLocal.get();
    }

    public static void removeCurrentId() {
        threadLocal.remove();
    }

}

使用内网穿透工具将本地ip映射到网络上

image-20240304140751476

Spring Task

• 一个定时处理

cron表达式

image-20240307205934297

• 日和周两个有一个就好，因为会比较容易冲突
• 可是使用生成器自动生成

使用的方式：

一、在启动类上面加上

@EnableScheduling//开启任务调度

项目的用户下单需求分析

• 下单后一直没有支付，每隔一分钟去检查一次订单的情况
• 派送完成但用户一直没有点击收到订单，这种情况打烊后一段时间去检查订单的情况

Apache ECharts

• 一个功能强大灵活易用的数据可视化工具

Apache POI

• 一个处理office各种文件格式中的开源项目

image-20240308143505142

• 遇到创建的表格比较复杂的时候可以先把表格样式弄出来

前端开发

## 使用vue-cli脚手架来创建工程

https://so.csdn.net/so/search?spm=1000.2115.3001.4498&q=%E4%BD%BF%E7%94%A8vue%E8%84%9A%E6%89%8B%E6%9E%B6%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE&t=&u=

image-20240310085648784

image-20240308151347343

image-20240309201912996

Vue的基本复习

• 插值的用法

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
    <h1>{{ age > 40 ? '老奶' : '青年' }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三',
      age: '30'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

//上面的标题会变成下面的张三，而另一个年龄会变成老年。如此做判断的

属性绑定

image-20240309204337121

• 这种时候想要展示data区域的name属性的值，需要使用属性绑定

image-20240309204526545

简写

image-20240309204737715

事件绑定

image-20240309204935718

双向绑定

image-20240309205056727

条件渲染

image-20240309205449969

跨域问题

image-20240309210632103

image-20240309223556641

image-20240309223707265

• 配置代理后需要重启服务才能生效

axios统一调用方式发送请求

image-20240310084715141

image-20240310085105155

image-20240310085128920

Vue-Router

• vue是单页面路由，根据浏览器的路径不同，使用不同的视图组件替换这个页面内容

image-20240310092504689

image-20240310085829005

image-20240310085850862

• 也可是使用npm install vue-router来实现路由功能

image-20240310090701561

image-20240310091802910

• 现在index中定义路由表，然后在页面中分别有路由视图组件，路由连接
• 路由有标签式和编程式两种方式来跳转

编程式

image-20240310092206876

404处理

//这样能实现访问不存在资源的时候显示404
  {
    path: '/404',
    component: () => import('../views/404View.vue')
  }, {
    path: '*',
    redirect: '/404'
  }

image-20240310093150214

嵌套路由

image-20240310100604674

image-20240310100243927

• 如果直接访问/c页面就显示相应的页面

使用重定向进行默认设置

image-20240310100749029

vuex

• 管理需要共享的数据

image-20240310101202032

image-20240310101322132

• 使用这个功能的标志是多了store这个文件夹

image-20240310102240599

image-20240310102310078

**步骤一：**index中创建方法后，

image-20240310102750620

步骤二： 在mutations中定义的函数因为不能直接调用，所以必须通过以下方式来调用

image-20240310103230193

image-20240310110835270

调用异步请求

image-20240310105157448

image-20240310105053355

• 如图，在vuex中定义请求后要如何调用起来
• 注意会有代理问题

TypeScript

image-20240310140111445

image-20240310141803375

image-20240310142430126

• 指定取值的范围

image-20240310143052697

本文作者https://blog.csdn.net/qq_61654952?spm=1000.2115.3001.5343

image-20240310143458915

• 编译成js后，会变成方法

image-20240310143824097

[外链图片转存中…(img-EhKxU8Vm-1712314231766)]

• 如果直接访问/c页面就显示相应的页面

使用重定向进行默认设置

[外链图片转存中…(img-bwnjzw3H-1712314231767)]

vuex

• 管理需要共享的数据

[外链图片转存中…(img-vaX7q7Ey-1712314231767)]

[外链图片转存中…(img-okxEjIki-1712314231768)]

• 使用这个功能的标志是多了store这个文件夹

[外链图片转存中…(img-zQiJk4w6-1712314231768)]

[外链图片转存中…(img-susgEZlQ-1712314231768)]

**步骤一：**index中创建方法后，

[外链图片转存中…(img-PRr357Aq-1712314231768)]

步骤二： 在mutations中定义的函数因为不能直接调用，所以必须通过以下方式来调用

[外链图片转存中…(img-kP6I4NaE-1712314231768)]

[外链图片转存中…(img-VdyhpKXT-1712314231769)]

调用异步请求

[外链图片转存中…(img-m66u91rp-1712314231769)]

[外链图片转存中…(img-JIJwhaio-1712314231769)]

• 如图，在vuex中定义请求后要如何调用起来
• 注意会有代理问题

TypeScript

[外链图片转存中…(img-rBvk9sui-1712314231770)]

[外链图片转存中…(img-vlfMABWM-1712314231770)]

[外链图片转存中…(img-7doQuGPt-1712314231770)]

• 指定取值的范围

[外链图片转存中…(img-B1tSYwZq-1712314231770)]

[外链图片转存中…(img-egRQsefR-1712314231771)]

[外链图片转存中…(img-2qouvsDY-1712314231771)]

• 编译成js后，会变成方法

[外链图片转存中…(img-YV5FsncG-1712314231771)]

[外链图片转存中…(img-jiyUC6fr-1712314231772)]