# 商城

**Repository Path**: yang-long-yearyear/shop

## Basic Information

- **Project Name**: 商城
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-18
- **Last Updated**: 2024-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 第一天
### 技术选型
1. 前端：Vue
2. 前端组件库：ant-design-vue 
3. 后端：Java SpringBoot + Mybatis-Plus 
4. 数据库：MySql Redis
### maven 模块化
### SpringBoot 整合 Mybatis-Plus

## 第二天
### controller 层设计与实现
1. 使用到的jar包：
 - fastjson包 ----- 序列化工具包
 - lombok包 ------- 简化代码
 - mybatis-plus包 ------- mybatis-plus框架
 - redis包  ------- redis数据库
 - mysql包  ------- mysql数据库
 - springfox-swagger2包  ------- swagger
 - springfox-swagger-ui包 ------ swagger使用的前端包
 - spring-boot-starter-web包 ----web
 - jackson-databind包 --- 序列化工具包
 - pagehelper-spring-boot-starter包---- 分页插件
 - spring-boot-devtools包 ------ 热部署
2. 用到的注解：
 - @RestController 控制器
 - @RequestMapping 请求映射
 - @GetMapping 映射get请求
 - @PostMapping 映射post请求
 - @PutMapping 映射put请求
 - @DeleteMapping 映射delete请求
 - @RequestBody 请求体
 - @ResponseBody 响应体
 - @PathVariable 路径变量
 - @Configuration 配置类
 - @EnableSwagger2 开启swagger
 - @Api 接口
 - @ApiOperation 接口描述
 - @ApiImplicitParam 接口参数
 - @ApiImplicitParams 接口参数
 - @ApiResponses 接口返回值
 - @ApiModel 实体类
 - @ApiModelProperty 实体类属性
 - @SpringBootTest 测试
3. 项目结构
- goods项目结构
```
├── pom.xml
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com.kfm.shop
│   │   │       ├── config
│   │   │       │   └── SwaggerConfig.java
│   │   │       ├── controller
│   │   │       │   └── GoodsController.java
│   │   │       │   └── TestController.java
│   │   │       ├── mapper
│   │   │       │   └── GoodsMapper.java
│   │   │       ├── service
│   │   │       │   └── GoodsService
│   │   │       │   └── serviceImpl
│   │   │       │       └── GoodsServiceImpl.java
│   │   │       ├── ex
│   │   │       │   └── MyExceptionHandler.java
│   │   │       ├── util
│   │   │       │   └── Result.java
``` 
- system项目结构
```
├── pom.xml
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com.kfm.system
│   │   │       ├── config
│   │   │       │   └── SwaggerConfig.java
│   │   │       ├── controller
│   │   │       │   └── SysMuneController.java
│   │   │       │   └── SysRoleController.java
│   │   │       │   └── SysUserController.java
│   │   │       ├── ex
│   │   │       │   └── SystemExceptionHandler.java
│   │   │       ├── mapper
│   │   │       │   └── SysMuneMapper.java
│   │   │       │   └── SysRoleMapper.java
│   │   │       │   └── SysUserMapper.java
│   │   │       ├── model
│   │   │       │   └── SysMune.java
│   │   │       │   └── SysRole.java
│   │   │       │   └── SysUser.java
│   │   │       ├── service
│   │   │       │   └── SysMuneService
│   │   │       │   └── SysRoleService
│   │   │       │   └── SysUserService
│   │   │       │   └── serviceImpl
│   │   │       │       └── SysMuneServiceImpl.java
│   │   │       │       └── SysRoleServiceImpl.java
│   │   │       │       └── SysUserServiceImpl.java
│   │   │       ├── util
│   │   │       │   └── Result.java
```
## 第三天
### 添加common项目
1. 项目结构
```
├── pom.xml
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com.kfm.common
│   │   │       ├── config
│   │   │       │   └── SwaggerConfig.java
│   │   │       ├── ex
│   │   │       │   └── CommonExceptionHandler.java
│   │   │       ├── util
│   │   │       │   └── Result.java
 ```
2. 项目中添加common依赖
```xml
<dependency>
    <groupId>com.kfm.common</groupId>
    <artifactId>common</artifactId>
    <version>1.0-SNAPSHOT</version>
</dependency>
```
3. 项目中添加common的配置文件
```xml
<import>
    <groupId>com.kfm.common</groupId>
    <artifactId>common-config</artifactId>
    <version>1.0-SNAPSHOT</version>
</import>
```
4. 项目中添加common的工具类
```java
@Component
@Slf4j
class CommonUtil {
    String getIpAddr(HttpServletRequest request)
}
```
5. 项目中添加common的异常处理类
```java
@RestControllerAdvice
@Slf4j
class CommonExceptionHandler {
    @ExceptionHandler(value = Exception.class) 
    @ResponseBody
    Result exceptionHandler(Exception e) {
        log.error("系统异常", e);
        return Result.error(e.getMessage());
    }
}

```

## 第四天
### 添加多表联查
SQL语句如下
```sql
    <select id="selectMenusWithRoleIds" resultType="com.kfm.shop.system.model.SysMenu">
    select t2.*
    from sys_role_menu t1
             inner join sys_menu t2 on t1.menu_id = t2.id
    where t1.role_id in
            <foreach collection="ids" item="id" open="(" close=")" separator=",">
        #{id}
        </foreach>
    order by parent_id, order_num
    </select>

    <select id="selectUserByIdWithRole" resultType="com.kfm.shop.system.model.dto.SysUserDTO">
        select
            t1.id, t1.username, t1.phone, t1.name, t3.id roleId, t3.name roleName, t3.role_code
        FROM
            sys_user t1
                INNER JOIN sys_user_role t2 ON t1.id = t2.user_id
                INNER JOIN sys_role t3 ON t2.role_id = t3.id
        WHERE
            t1.id = #{id};
    </select>
```
## 第五天
### 添加登录接口-返回token
1. 导入Redis依赖
```xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
```
2. 使用拦截器
```text
// 添加一个全局拦截器到拦截器注册表中
registry.addInterceptor(loginInterceptor)
// 设置拦截的路径模式为"**"，表示所有的请求都需要经过该拦截器
.addPathPatterns("/**")
// 设置拦截器排除的路径模式为"/sysUser/login"，表示该路径不需要经过该拦截器
.excludePathPatterns("/sysUser/login");
```
3. 异常的处理（自定义异常处理类以给用户友好的提示）
4. 关于swagger 出现StringIndexOutOfBoundsException的问题
```xml
spring:
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher
```
5. 自定义权限注解
```java
@Target(ElementType.METHOD) // 注解的作用范围
@Retention(RetentionPolicy.RUNTIME) // 注解的生命周期
```
6. 权限的实现-AOP的使用-常用的注解
导入AOP依赖
```xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-aop</artifactId>
</dependency>
```
使用到的注解
```text
@Aspect // 将该类标记为切面
@Component // 将该类标记为Spring组件
@Slf4j // 日志注解
@EnableAspectJAutoProxy // 开启AOP(可以写在切面类上也可以写在启动类上)
@Before("@annotation(Permission)") // 前置通知
@annotation(Permission) // 注解通知
```
7. 注意事项
```text
1. 切面类和启动类不能同时使用@EnableAspectJAutoProxy
2. 在哪里需要使用切面类需要在哪里为其添加我们自定义的权限注解本文中使用的是Permission注解，使用切面控制权限时需要在切面类中添加@Permission(权限标识)
3. 我们在前置通知时使用的是@Before("@annotation(Permission)")表示的是在执行方法之前执行，如果我们需要在方法执行之后执行，可以使用@After("@annotation(Permission)")
4. 切面类中使用@annotation(Permission)表示的是在切面类中使用了Permission注解，如果我们需要在切面类中使用其他的注解，可以使用@annotation(注解名称)
5. 在定义切入点时，使用@Pointcut注解，该注解的作用是定义一个切入点，切入点的定义需要使用正则表达式，切入点的定义格式为：
@Pointcut("execution(* com.kfm.shop.system.controller.*.*(..))")
```
## 第六天
### 添加登录接口-返回token-使用jwt
1. 导入JWT依赖
```xml
<dependency>
    <groupId>com.auth0</groupId>
    <artifactId>java-jwt</artifactId>
    <version>3.4.0</version>
</dependency>
``` 
2. 使用Jwt生成Token 
3. 解决 jackson 版本不兼容问题 
4. 修改redis 存储 key 的规则
5. 建议在数据库中存储用户ID时使用UUID，不去使用自增长ID，因为自增长ID可能会出现并发问题，如果使用自增长ID，那么在数据库中会出现大量的无效的ID，而使用UUID则不会出现这种问题。
6. 第七天计划 前端页面的书写以及前端js复习+学习

## 第七天
### 前端校验与复习 使用ECharts可视化界面的实现和学习

## 第八天
### 前端校验以及使用ajax发送异步请求
1. 使用ajax发送异步请求步骤 axios官网
- 使用：`npm install axios` 下载安装ajax到vue项目中
- 使用`import axios from "axios"`在项目中引入
- 发送登录请求
```js
axios.post("/mock/login.json", toRaw(formState)).then((res) => {
    loading.value = false;
    console.log(res);
    if (res.data.code === 200) {
        // 登录成功
        console.log("登录成功");
        message.success("登录成功", 1, () => {
            // 路由跳转
            // router.push("/home");
            router.push({ path: "/home" });
        });
    } else {
        error.value = res.data.message;
    }
});
```

2. 前端页面的跳转 路由router 创建/router/index.js   使用Vue Router 官网 
- 创建路由实例
- 导出路由`export default router`
- 引入router路由`import router from router` 应用路由app.use(router)
- 在App.vue中添加`<RouterView/>`表示路由显示的地址
- `RouterLink to= "地址">名</RouterLink>` 点击跳转
- 路由跳转 router.push("/home") 或 router.push({ path: "/home" });
- ```
  import { useRouter,useRoute } from 'vue-router';
  /*
  useRouter 和 useRoute 是 vue-router@4 的新特性,
  区别在于 useRouter 是返回一个路由实例, 而 useRoute 是返回一个路由信息对象
  useRouter 主要用于在组件内部进行路由跳转, 而 useRoute 主要用于获取当前路由信息
  */
  ```
## 第九天
### 前端用户列表、商品列表的完善
1. 前端用户列表、商品列表的完善
2. 实现功能：用户列表、商品列表的分页查询
3. 实现功能：用户列表、商品列表的搜索功能
4. 实现功能：用户列表、商品列表的排序功能
5. 实现功能：用户列表、商品列表的删除功能
6. 实现功能：用户列表、商品列表的修改功能
7. 实现功能：用户列表、商品列表的添加功能

## 第十天
### 前端实现路由守卫、状态管理
1. 前端路由守卫
2. 前端路由守卫的实现
3. 前端路由守卫的使用
4. 前端路由守卫的注意事项
5. 状态管理
6. 状态管理的实现
7. 状态管理的使用
8. 菜单栏的完善

## 第十一天
### 前端 菜单管理 树形菜单
1. 前端菜单管理
2. 前端菜单管理的实现
3. 前端菜单管理的使用
### 前端 退出按钮
1. 前端退出按钮的实现
2. 前端退出按钮的使用
3. 前端退出按钮的注意事项

## 第十二天
### 用户商城前端 头部组件
1. 头部搜索框 
2. 头部购物车
3. 头部登录
### 用户商城前端 菜单组件
1. 菜单组件

## 第十三天
### 用户商城前端 商品详情页
1. 商品详情页
2. 商品详情页的实现
3. 商品详情页的使用


## 第十四天
### 用户商城前端 home页
1. 商品列表
2. 商品图片轮播
3. 热门推荐
### 用户商城前端 product页
1. 新上架商品展示
2. 旅游商品展示