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

本文链接：https://blog.csdn.net/weixin_43335392/article/details/120007876

前言：很多人学完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 地址的一部分，以保证整体风格的一致性。

操作	传统方式	REST风格
查询操作	getUserById?id=1	user/1---->发送get请求
保存操作	saveUser	user----->发送post请求
删除操作	deleteUser?id=1	user/1---->发送delete请求
更新操作	updateUser	user---->发送put请求

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>
      <version>8.0.25</version>
    </dependency>

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.2.3</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.12.4</version>
    </dependency>

    </dependencies>

5.2编写配置文件

5.2.1web.xml:

<web-app>

<!--配置Spring配置文件路径，且服务器启动就加载-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  
<!--配置请求转发-->
  <servlet>
    <servlet-name>DispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
   <!--SpringMVC配置文件路径-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springMVC.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>DispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

<!--配置字符编码过滤器，防止请求参数中文乱码-->
  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceResponseEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>


</web-app>

5.2.2 SpingMVC配置文件：springMVC.xml

SpingMVC配置文件：springMVC.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context  http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc  http://www.springframework.org/schema/mvc/spring-mvc.xsd">
	<!--自动包扫描-->
    <context:component-scan base-package="com.lin.controller"/>
    <!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"/>
    <!--注解驱动，会与jackson包配合将json字符串转为pojo对象-->
    <mvc:annotation-driven/>
    <!--开启访问静态资源-->
    <mvc:default-servlet-handler/>
</beans>

5.2.3 数据库连接信息dbconfig.properties

mysql.url=jdbc:mysql://localhost:3306/revisecode
mysql.driver=com.mysql.cj.jdbc.Driver
mysql.user=root
mysql.password=123456

5.2.4 Spring配置文件applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xsi:schemaLocation="http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">
    <!--不扫描已由springMVC扫描的controller注解-->
    <context:component-scan base-package="com.lin">
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <!--加载properties文件-->
    <context:property-placeholder location="classpath:dbconfig.properties"/>
    <!--配置数据源-->
    <bean class="com.alibaba.druid.pool.DruidDataSource" id="dataSource">
        <property name="url" value="${mysql.url}"/>
        <property name="driverClassName" value="${mysql.driver}"/>
        <property name="username" value="${mysql.user}"/>
        <property name="password" value="${mysql.password}"/>
    </bean>

    <!--mybatis配置-->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean" id="sqlSessionFactory">
        <property name="dataSource" ref="dataSource"/>
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    </bean>
    <!--自动扫描mapper接口-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.lin.mapper"/>
    </bean>

    <!--spring事务控制-->
    <bean class="org.springframework.jdbc.datasource.DataSourceTransactionManager" id="transactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!--配置事务-->
    <aop:config>
       <aop:pointcut id="txPoint" expression="execution(* com.lin.service..*(..))"/>
        <aop:advisor advice-ref="txAdvice" pointcut-ref="txPoint"/>
    </aop:config>

    <!--配置事务增强,事务如何切入-->
    <tx:advice id="txAdvice"  transaction-manager="transactionManager">
        <tx:attributes>
        <!--所有方法都是事务方法-->
            <tx:method name="*"/>
        <!--以get开始的有所方法进行优化-->
            <tx:method name="get*" read-only="true"/>
        </tx:attributes>
    </tx:advice>


</beans>

5.3 使用MyBatis逆向工程

5.3.1两张表的结构

对应的两张sql表：
链接：https://pan.baidu.com/s/1HGuBo5Pf5Kat39_GKLwMzA
提取码：e1eh

5.3.2编写配置文件mbg.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>

    <context id="DB2Tables" targetRuntime="MyBatis3">

        <!-- 去掉生成的结构中多余的注释 -->
        <commentGenerator>
            <property name="suppressAllComments" value="true" />
        </commentGenerator>

        <!-- 配置数据库连接 -->
        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/revisecode"
                        userId="root"
                        password="123456">
        </jdbcConnection>

        <javaTypeResolver>
            <property name="forceBigDecimals" value="false" />
        </javaTypeResolver>

        <!-- 指定javaBean生成的位置 -->
        <javaModelGenerator targetPackage="com.lin.pojo"
                            targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true" />
            <property name="trimStrings" value="true" />
        </javaModelGenerator>

        <!--指定mapper.xml文件生成的位置 -->
        <sqlMapGenerator targetPackage="mapper" targetProject=".\src\main\resources">
            <property name="enableSubPackages" value="true" />
        </sqlMapGenerator>

        <!-- 指定mapper接口生成的位置 -->
        <javaClientGenerator type="XMLMAPPER"
                             targetPackage="com.lin.mapper" targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true" />
        </javaClientGenerator>

        <!-- 指定对应的sql表以及生成的pojo类名 -->
        <table tableName="tag" domainObjectName="Tag"></table>
        <table tableName="topic" domainObjectName="Topic"></table>
    </context>
</generatorConfiguration>

5.3.3 读取配置文件生成逆向工程

在test包下新建一个Generate类

package com.lin.test;

import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.internal.DefaultShellCallback;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

public class Generate {
    public static void main(String[] args) throws Exception
    {
        List<String> warnings = new ArrayList<String>();
        boolean overwrite = true;
        //注意最前面是没有/，因为idea已经帮你写了工程全路径/，或者可以写./src/....
        File configFile = new File("src/main/resources/mbg.xml");
        ConfigurationParser cp = new ConfigurationParser(warnings);
        Configuration config = cp.parseConfiguration(configFile);
        DefaultShellCallback callback = new DefaultShellCallback(overwrite);
        MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
        myBatisGenerator.generate(null);
    }
}

最终生成了两张表的pojo、mapper接口、配置文件mapper.xml
在这里插入图片描述

6.测试搭建好的环境

至此，环境搭建已经完成，可以简单写一个Service层、Controller层测试能不能从数据库中读取，并且将数据以json的形式打印在页面上。

以tag表(存放的是题的类别，或者说标签)为例，尝试读取表中数据并输出
在这里插入图片描述

6.1编写Service层

TagService接口：

package com.lin.service;
@Service
public interface TagService {
	//查询所有tag
    List<Tag> getAllTags();
}

TagService实现类：

package com.lin.service;

@Service
public class TagServiceImpl implements TagService{
    @Autowired
    private TagMapper tagMapper;
    @Override
    public List<Tag> getAllTags() {
        return tagMapper.selectByExample(null);
    }
}

6.2编写Controller层

注意解决前后端传输数据的跨域问题！！！其实有很多方法解决，你可以专门写一个Filter，然后配web.xml中。也可以选择使用SpringMVC提供的注解

//标识该类的全部方法的返回值通过responseBody输出到页面上
@RestController
//解决跨域问题
@CrossOrigin(origins = "*", maxAge = 3600)
public class TagController {
    @Autowired
    private TagService tagService;

  //GET请求获取全部Tag
    @GetMapping("/tags")
    public List<Tag> getAllTag(){
        return tagService.getAllTags();
    }
}