# 前后端分离

**Repository Path**: qu-yongjun/SpringBoot-Vue

## Basic Information

- **Project Name**: 前后端分离
- **Description**: 第一次接触前后端分离项目，做一个简单的项目体会一下前后端分离的思想
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2023-03-12
- **Last Updated**: 2024-01-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前后端分离项目

## 介绍
第一次接触前后端分离项目，做一个简单的项目体会一下前后端分离的思想

## 技术栈：

SpringBoot、Mybatis、Mybatis-Plus、Redis、Vue

# 前端简介

技术：Vue
介绍：使用vue-admin-template，前端界面使用脚手架的布局，界面中内容来源于Element-UI

# 后端简介

技术：SpringBoot+Redis+MySQL+Mybatis+Mybatis-Plus
介绍：完成了增删改查功能，分页查询，条件查询，逻辑删除，登录。登陆时使用redis做登录超时功能，分页和逻辑删除使用Mybatis-Plus的插件。

# 总结

前后端分离思想起源于前端越来越多的需求，将前端分离出来作为单独一个工作，让前后端条理分明。

## 一、跨域

跨域：由于浏览器同源策略的限制，要求当前页面和服务端必须同源，也就是协议、域名和端口号必须一致。

解决跨域方法：1.在后端配置跨域类
							 2.在Controller层使用跨域注解
							 3.在前端配置动态代理
							 4.使用nginx

## 二、Mybatis-Plus

Mybatis-Plus：是一个 MyBatis的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。

分页插件：三个必要数据（每页条数、当前页码、总条数）

```java
@Configuration
public class MpConfig {
    /**
     * 新的分页插件,一缓和二缓遵循mybatis的规则,需要设置 MybatisConfiguration#useDeprecatedExecutor = false 避免缓存出现问题(该属性会在旧插件移除后一同移除)
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}
```

逻辑删除：需要在数据库设计时添加一项删除的状态

```java
mybatis-plus:
  global-config:
    db-config:
      logic-delete-field: deleted # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
```

## 三、Redis

Redis：即远程字典服务，是一个开源的使用ANSI [C语言](https://baike.baidu.com/item/C语言?fromModule=lemma_inlink)编写、支持网络、可基于内存亦可持久化的日志型、Key-Value[数据库](https://baike.baidu.com/item/数据库/103728?fromModule=lemma_inlink)，并提供多种语言的API。

```java
/**
 * redis配置
 */
@Configuration
public class MyRedisConfig {

    @Autowired
    private RedisConnectionFactory factory;
    @Bean
    public RedisTemplate redisTemplate(){
        RedisTemplate<String,Object> redisTemplate = new RedisTemplate<>();
        redisTemplate.setConnectionFactory(factory);

        redisTemplate.setKeySerializer(new StringRedisSerializer());
        Jackson2JsonRedisSerializer<Object> serializer = new Jackson2JsonRedisSerializer<>(Object.class);
        redisTemplate.setValueSerializer(serializer);

        ObjectMapper om = new ObjectMapper();
        om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
        om.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
        om.setTimeZone(TimeZone.getDefault());
        om.configure(MapperFeature.USE_ANNOTATIONS, false);
        om.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
        om.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false);
        om.activateDefaultTyping(LaissezFaireSubTypeValidator.instance ,ObjectMapper.DefaultTyping.NON_FINAL, JsonTypeInfo.As.PROPERTY);
        om.setSerializationInclusion(JsonInclude.Include.NON_NULL);
        serializer.setObjectMapper(om);

        return redisTemplate;
    }
}
```

## 四、数据交互

1.get请求：前端使用url传递参数，后端接收时使用@PathVariable

2.post请求：前端使用JSON传递参数，后端使用@RequestBody接收参数

## 五、Vue

vue：是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue使用感想：
1.vue有些类似java，我认为一个vue组件主要分为4个部分，页面，数据定义，方法定义和样式。方法和脚本等也可以用java工具类的形式进行导入，减少代码冗余。

2.在代码中，api文件夹下的js文件是与后端交互的请求，route是前端页面跳转的请求