前言：很多人学完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.xsdhttp://www.springframework.org/schema/context  http://www.springframework.org/schema/context/spring-context.xsdhttp://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.xsdhttp://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsdhttp://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsdhttp://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 generatorConfigurationPUBLIC "-//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 {//查询所有tagList<Tag> getAllTags();
}

TagService实现类：

package com.lin.service;@Service
public class TagServiceImpl implements TagService{@Autowiredprivate TagMapper tagMapper;@Overridepublic List<Tag> getAllTags() {return tagMapper.selectByExample(null);}
}

6.2编写Controller层

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

//标识该类的全部方法的返回值通过responseBody输出到页面上
@RestController
//解决跨域问题
@CrossOrigin(origins = "*", maxAge = 3600)
public class TagController {@Autowiredprivate TagService tagService;//GET请求获取全部Tag@GetMapping("/tags")public List<Tag> getAllTag(){return tagService.getAllTags();}
}

7.启动Tomcat

使用Postman发送GET请求到 http://localhost/工程路径/tags，也可以直接打开浏览器查看

可以看到返回的是JSON格式字符串，大功告成！！

8.总结

SSM的整合最繁琐的就是xml文件的配置，你也可以选择使用Java配置类与注解联合进行配置，也是稍显繁琐。如果有了SpringBoot，SpringBoot最突出作用就是一个脚手架，他帮你搭建好环境，让你省去很多配置。

现在后端已经简单地跑起来了。下一节将会介绍前端环境配置，让前后端实现联调！！！

点击收藏关注，时刻更新！！！

注：系列一直更新，敬请收藏关注！！
全文原创，非授权请勿转载！！侵权必究

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

浅谈前后端分离与实践之 nodejs 中间层服务
一.背景书接上文,浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务,前后端开发过程中只需定义好接口规范,便可以相互进行各自的开发任务.联调的时候,按照之前定义的开发规 ...
vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（1）——自定义菜单和仪表盘
0. 写在前面 vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现.它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证, ...
一次前后端分离的实践
前后端分离该如何做? 这个问题,不同的技术人员,由于所处的岗位不一样,给出的答案都不一样. 前后端分离的问题,不仅仅是技术上的选型问题,还涉及到整个团队在认知.职责.流程上面重新定义的问题,这也是为什 ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
物联网设备数据是如何流转的：基于EMQX与TDengine的前后端分离项目实践
背景在我写了TDengine极简实战:从采集到入库,从前端到后端,体验物联网设备数据流转这篇文章后,不少读者朋友评论.私信说可不可以提供代码参考学习下,那必须是可以的.那篇文章主要介绍了数据采集.数 ...
java前后端分离框架_Spring Boot 入门及前后端分离项目实践
本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发.Spring Boot ...
SpringBoot+Vue前后端分离项目的搭建及简单开发（这次保证看明白~）
文章目录概述一.搭建SpringBoot后端 1.sql脚本 2.新建SpringBoot项目 3.MP代码生成 4.编写Controller 二.搭建Vue前端 1.IDEA安装Vue.js插件 ...
springboot+vue前后端分离框架快速搭建
项目介绍一款 Java 语言基于 SpringBoot2.x.MybatisPlus.Vue.ElementUI.MySQL等框架精心打造的一款前后端分离框架,致力于实现模块化.组件化.可插拔的前后 ...

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