前后端分离最佳实践：搭建一个复习算法题的网站ReviseCode(一)

前言：很多人学完SSM就直接学SpringBoot，几乎没有试过整合SSM框架，导致仅仅是学会了SpringBoot使用，并不知道为什么是这样配置。另一方面，有的人整合了SSM框架，并且配置完后完成了简单的CURD，但是大多数人没有用前后端分离，而是还在用JSP、thymeLeaf等模板技术，这又导致后面学习SpringBoot与Vue脱节。因此，这一系列的文章目的是后端特意使用SSM框架，前端使用Vue，并使用RESTful风格API搭建一个用于复习刷过的算法题的网站——名为ReviseCode

1.网站的功能是什么？

很多人都在leetCode刷题，但是刷了很多题之后，遇到新的题还是没有头绪，原因在于没有总结归纳。所以你可以将刷过的题按照类别存在数据库中，然后每天通过这个网站随机/按权重抽取刷过的题目，再重新复习。

LeetCode登陆之后也能筛出刷过的题啊，为什么还要用这个网站呢？因为LeetCode不能根据刷过的题随机抽取一题。而且ReviseCode最重要的功能是按照权重随机抽取！！比如我今天刷了题A，并没有做出来，然后我给A题设置一个较高的权重，那么第二天再抽取的时候就很大可能重新抽到A，第二天做出来了，又可以适当降低权重；同样的如果复习的次数多了，某些题已经烂熟于心，那么可以设置一个很低的权重。 网站首页大致如下

2.技术栈

后端：MyBatis、Spring、SpringMVC、Mysql

前端：JS、Vue、Axios、Babel、Webpack

其他：Postman、RESTful、Maven

注：这里为了学习整合SSM，也为了后面更好的学习SpringBoot，特地使用SSM以及使用前后端分离模式来搭建，如果你是刚刚学完SSM想找项目练手，如果你对前后端分离不理解，如果你正准备学习SpringBoot，那么ReviseCode就是最佳实践！！

3.什么是前后端分离？

java后端三层架构：控制层，业务层，持久层。控制层负责接收参数，调用相关业务层，封装数据，以及路由到jsp页面。然后jsp页面上使用各种标签（jstl/el）或者手写java（<%=%>）将后台的数据展现出来。问题就出现在jsp这个环节。曾几何时，java程序员又要写后端逻辑，又要将前端工程师给的页面转为jsp，一旦上线出现问题前后端工程师互相甩锅，前端看着jsp一脸茫然，后端看着html、css也是手足无措。解决问题的方法就是：前后端分离！！

随着React、Vue等前端框架的诞生，前后端分离正在成为主流，所谓前后端分离就是：不再使用JSP、thymeleaf等模板。后端提供接口，前端向接口发起请求，数据以JSON格式传输；从此后端只要维护好后台逻辑、操作数据库、提供数据。前端做好数据展示，二者各司其职。

4.什么是RESTful？

HTTP 协议里面，四个表示操作方式的动词：GET、POST、PUT、DELETE。

REST 风格提倡 URL 地址使用统一的风格设计，从前到后各个单词使用斜杠分开，不使用问号键值对方式携带请求参数，而是将要发送给服务器的数据作为 URL 地址的一部分，以保证整体风格的一致性。

5.SSM整合环境搭建

介绍完相关概念，下面真正开始项目实践，首先是环境的搭建，大致分为四个步骤：
1、创建一个maven工程并引入项目依赖的jar包

2、编写ssm整合的关键配置文件

• web.xml以及spring,springmvc,mybatis配置文件

3、使用mybatis的逆向工程生成对应的bean以及mapper

5、测试搭建的环境

5.1创建工程并引入依赖

工程目录结构如下：

依赖大致可以分为三部分：
Spring相关：spring-webmvc、spring-jdbc(事务管理)、spring-aspects(apo织入)、spring-test

数据库相关：mybatis、mybatis-spring(适配包)、mybatis-generator-core(逆向工程)、mysql-connector-java(数据库驱动)、druid(数据库连接池)

其他：javax.servlet-api、jackson-databind(用于对象与JSON字符串间的转换)

pom.xml:
<dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.3.9</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.3.9</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>4.3.7.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>4.3.7.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.6</version>
    </dependency>

    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>2.0.2</version>
    </dependency>

    <dependency>
      <groupId>org.mybatis.generator</groupId>
      <artifactId>mybatis-generator-core</artifactId>
      <version>1.3.5</version>
    </dependency>

    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId