一个简单的前后端分离项目

目录

前后端分离项目

介绍

技术栈：

前端简介

后端简介

总结

一、跨域

二、Mybatis-Plus

三、Redis

四、数据交互

五、Vue

---

链接：前后端分离: 第一次接触前后端分离项目，做一个简单的项目体会一下前后端分离的思想

前后端分离项目

介绍

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

技术栈：

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 的基础上只做增强不做改变，为简化开发、提高效率而生。

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

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

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

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语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。

/**
 * 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是前端页面跳转的请求