目录
前言：利用Spring、SpringMvc、Mybatis的结合进行一个简易版的前后端分离的书本管理系统。
一、对Spring、SpringMvc、MyBatis——ssm进行分析。
1.spring简介
2.SpringMvc简介
3.Mybatis简介
二、前后端分离的管理系统中各个层所代表的含义
1.controller层
2.mapper层
3.model层
4.service层以及他的impl（这个impl看个人编码习惯可以不要）
三、根据跨域问题的处理
四、前端页面效果（HBuilderX）
前端主要是action.js与BookList.vue
前言：利用Spring、SpringMvc、Mybatis的结合进行一个简易版的前后端分离的书本管理系统。
一、对Spring、SpringMvc、MyBatis——ssm进行分析。
1.spring简介
Spring框架是一个开源应用程序框架，通过提供基础设施支持来支持Java应用程序的开发。它是著名的Java企业版框架之一。Spring通过使用普通旧Java对象 (POJO) 帮助开发人员创建高效的应用程序。 Spring框架正在成为这些问题的解决方案。它采用多种新技术来构建企业应用程序，包括普通旧Java 对象(POJO)、面向方面编程 (AOP) 和依赖注入(DI)。 它消除了使用EJB创建企业应用程序所涉及的困难。Spring是一个开源的轻量级框架，它允许Java EE 7开发人员使用AOP、POJO和DI构建简单、可靠且可扩展的企业应用程序。 Spring框架可以被认为是子框架的集合，也称为层，例如Spring AOP、Spring Web Flow、Spring Object-Relational Mapping (Spring ORM) 和Spring Web MVC。在构建 Web应用程序时，你可以单独使用这些模块中的任何一个。这些模块也可以组合在一起以在Web应用程序中提供更好的功能。
2.SpringMvc简介
Spring MVC属于SpringFrameWork的后续产品，已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构，从而在使用Spring进行WEB开发时，可以选择使用Spring的Spring MVC框架或集成其他MVC开发框架，如Struts1(现在一般不用)，Struts 2(一般老项目使用)等等。
3.Mybatis简介
MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 POJOs(Plain Ordinary Java Object,普通的 Java对象)映射成数据库中的记录。
二、前后端分离的管理系统中各个层所代表的含义
1.controller层
代码语言：javascript复制Controller一般指的是MVC架构里的控制层，是对项目里的功能做统一的调度。java里的著名的MVC框架有struts和springmvc。不过这2个都是javaweb里的框架技术。 是一个jsp、少量的用户提交内容的场景，就会来到这个代替Struts2Action的jsp，由它来调用Model层的ServiceBean，然后又redirect/forward回View层的jsp。如果顺手，可以用spring的DataBinder将Request参数绑定到DTO，否则继续复古的用N多。
package com.zking.spboot.controller;
import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/book")
public class BookController {
@Autowired
private BookService bookService;
@RequestMapping("/addBook")
public JsonResponBody<?> addBook(Book book){
bookService.insert(book);
return new JsonResponBody<>();
}
@RequestMapping("/queryBook")
public JsonResponBody<List<Book>>queryAll(Book book){
List<Book> books=bookService.queryAll(book);
return new JsonResponBody<>(200,"ok",books);
}
@Data
@AllArgsConstructor
@NoArgsConstructor
class JsonResponBody<T>{
private int code=200;
private String msg="ok";
private T data;
}
}2.mapper层
代码语言：javascript复制mapper层的作用是对数据库进行数据持久化操作，他的方法语句是直接针对数据库操作的现在用mybatis逆向工程生成的。 mapper层，其实就是dao层，主要是做数据持久层的工作，负责与数据库进行联络的一些任务都封装在此。
package com.zking.spboot.mapper;
import com.zking.spboot.model.Student;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface StudentMapper {
List<Student> queryAll(Student student);
int insert(Student record);
int deleteByPrimaryKey(Integer id);
int insertSelective(Student record);
Student selectByPrimaryKey(Integer id);
int updateByPrimaryKeySelective(Student record);
int updateByPrimaryKey(Student record);
}Mapper.xml
代码语言：javascript复制<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.zking.spboot.mapper.BookMapper" >
<resultMap id="BaseResultMap" type="com.zking.spboot.model.Book" >
<constructor >
<idArg column="id" jdbcType="INTEGER" javaType="java.lang.Integer" />
<arg column="bookname" jdbcType="VARCHAR" javaType="java.lang.String" />
<arg column="price" jdbcType="REAL" javaType="java.lang.Float" />
<arg column="booktype" jdbcType="VARCHAR" javaType="java.lang.String" />
</constructor>
</resultMap>
<sql id="Base_Column_List" >
id, bookname, price, booktype
</sql>
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
select
<include refid="Base_Column_List" />
from t_book
where id = #{id,jdbcType=INTEGER}
</select>
<select id="queryAll" resultType="com.zking.spboot.model.Book">
select <include refid="Base_Column_List"/> from t_book where 1=1
<if test="null!=bookname and ''!=bookname">
and bookname like concat('%',#{bookname},'%')
</if>
</select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
delete from t_book
where id = #{id,jdbcType=INTEGER}
</delete>
<insert id="insert" parameterType="com.zking.spboot.model.Book" >
insert into t_book (bookname, price,
booktype)
values (#{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL},
#{booktype,jdbcType=VARCHAR})
</insert>
<insert id="insertSelective" parameterType="com.zking.spboot.model.Book" >
insert into t_book
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
id,
</if>
<if test="bookname != null" >
bookname,
</if>
<if test="price != null" >
price,
</if>
<if test="booktype != null" >
booktype,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id,jdbcType=INTEGER},
</if>
<if test="bookname != null" >
#{bookname,jdbcType=VARCHAR},
</if>
<if test="price != null" >
#{price,jdbcType=REAL},
</if>
<if test="booktype != null" >
#{booktype,jdbcType=VARCHAR},
</if>
</trim>
</insert>
<update id="updateByPrimaryKeySelective" parameterType="com.zking.spboot.model.Book" >
update t_book
<set >
<if test="bookname != null" >
bookname = #{bookname,jdbcType=VARCHAR},
</if>
<if test="price != null" >
price = #{price,jdbcType=REAL},
</if>
<if test="booktype != null" >
booktype = #{booktype,jdbcType=VARCHAR},
</if>
</set>
where id = #{id,jdbcType=INTEGER}
</update>
<update id="updateByPrimaryKey" parameterType="com.zking.spboot.model.Book" >
update t_book
set bookname = #{bookname,jdbcType=VARCHAR},
price = #{price,jdbcType=REAL},
booktype = #{booktype,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
</mapper>3.model层
model层的作用主要就是用来传参用的，如果你传过参数那么你就知道有数组，单个传参，但是如果是20个或者更多的话怎么传呢，这就是 model的好处了，model基本是数据库中表的字段的集合，通过getset访问器，使其能够传递更多的值，比如，student表，那么在model中就有个这样的类里面声明属性，属性和数据库中的字段一直，那么不管你更新还是插入，那么你就能直接实例化model层的类给属性赋值，然后就能传递这个类的实例了，然后再取出来
4.service层以及他的impl（这个impl看个人编码习惯可以不要）
代码语言：javascript复制service是业务层，是使用一个或多个模型执行操作的方法。 1. 封装通用的业务逻辑，操作。 如一些数据的检验，可以通用处理。 2. 与数据层的交互。 3. 其他请求：如远程服务获取数据，如第三方api等。
package com.zking.spboot.service;
import com.zking.spboot.model.Book;
import java.util.List;
public interface BookService {
List<Book> queryAll(Book book);
int insert(Book record);
}
BookServicelmpl:
代码语言：javascript复制package com.zking.spboot.service.impl;
import com.zking.spboot.mapper.BookMapper;
import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class BookServiceImpl implements BookService {
@Autowired
private BookMapper bookMapper;
@Override
public List<Book> queryAll(Book book) {
return bookMapper.queryAll(book);
}
@Override
public int insert(Book record) {
return bookMapper.insert(record);
}
}三、根据跨域问题的处理
1.这个文件我是放在了util文件中的（CoreMapper）
代码语言：javascript复制package com.zking.spboot.util;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsMapping implements WebMvcConfigurer {
/*@Override
*
* 重新跨域支持方法
* CorsRegistry 开启跨域注册
*/
public void addCorsMappings(CorsRegistry registry) {
//addMapping 添加可跨域的请求地址
registry.addMapping("/**")
//设置跨域 域名权限 规定由某一个指定的域名 端口能访问跨域项目
.allowedOrigins("*")
//是否开启cookie跨域
.allowCredentials(false)
//规定能够跨域访问的方法类型
.allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
//添加验证头信息 token
//.allowedHeaders()
//预检请求存活时间 在此期间不再次发送预检请求
.maxAge(3600);
}
}2.接下来就是application.yml文件（是一个配置文件）：
代码语言：javascript复制YAML文件格式是Spring Boot支持的一种JSON超集文件格式，相较于传统的Properties配置文件，YAML文件以数据为核心，是一种更为直观且容易被电脑识别的数据序列化格式。application.yaml配置文件的工作原理和application.properties是一样的，只不过yaml格式配置文件看起来更简洁一些。 * YAML文件的扩展名可以使用.yml或者.yaml。
server:
port: 8080
servlet:
context-path: /spboot
spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/bookshop?useUnicode=true&characterEncoding=utf8&useSSL=false
username: root
password: 1234
druid:
initial-size: 5
min-idle: 5
max-active: 20
max-wait: 60000
time-between-eviction-runs-millis: 60000
min-evictable-idle-time-millis: 30000
validation-query: SELECT 1 FROM DUAL
test-while-idle: true
test-on-borrow: true
test-on-return: false
pool-prepared-statements: true
max-pool-prepared-statement-per-connection-size: 20
filter:
stat:
merge-sql: true
slow-sql-millis: 5000
web-stat-filter:
enabled: true
url-pattern: /*
exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
session-stat-enable: true
session-stat-max-count: 100
stat-view-servlet:
enabled: true
url-pattern: /druid/*
reset-enable: true
login-username: admin
login-password: admin
allow: 127.0.0.1
#deny: 192.168.1.100
freemarker:
cache: false
charset: UTF-8
content-type: text/html
suffix: .ftl
template-loader-path: classpath:/templates
mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: com.zking.spboot.model
configuration:
map-underscore-to-camel-case: true
logging:
level:
com.zking.spboot.mapper: debug
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true
params: count=countSql3.其次就是generatorConfig.xml文件（此文件呢就是一个连接数据库来生成mapper.....等文件）
代码语言：javascript复制是 mybatis-generator-maven-plugin插件的配置文件，配置该插件，用于连接数据库自动生成mybatis需要的代码文件 可以用于加载配置项或者配置文件，在整个配置文件中就可以使用${propertyKey}的方式来引用配置项 resource：配置资源加载地址，使用resource，MBG从classpath开始找，比如com/myproject/generatorConfig.properties url：配置资源加载地质，使用URL的方式，比如file:///C:/myfolder/generatorConfig.properties. 注意，两个属性只能选址一个; 另外，如果使用了mybatis-generator-maven-plugin，那么在pom.xml中定义的properties都可以直接在generatorConfig.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>
<!-- 引入配置文件 -->
<properties resource="jdbc.properties"/>
<!--指定数据库jdbc驱动jar包的位置-->
<classPathEntry location="E:repositorymvn-repositorymysqlmysql-connector-java5.1.44mysql-connector-java-5.1.44.jar"/>
<!-- 一个数据库一个context -->
<context id="infoGuardian">
<!-- 注释 -->
<commentGenerator>
<property name="suppressAllComments" value="true"/><!-- 是否取消注释 -->
<property name="suppressDate" value="true"/> <!-- 是否生成注释代时间戳 -->
</commentGenerator>
<!-- jdbc连接 -->
<jdbcConnection driverClass="${jdbc.driver}"
connectionURL="${jdbc.url}" userId="${jdbc.username}" password="${jdbc.password}"/>
<!-- 类型转换 -->
<javaTypeResolver>
<!-- 是否使用bigDecimal， false可自动转化以下类型（Long, Integer, Short, etc.） -->
<property name="forceBigDecimals" value="false"/>
</javaTypeResolver>
<!-- 01 指定javaBean生成的位置 -->
<!-- targetPackage：指定生成的model生成所在的包名 -->
<!-- targetProject：指定在该项目下所在的路径 -->
<javaModelGenerator targetPackage="com.zking.spboot.model"
targetProject="src/main/java">
<!-- 是否允许子包，即targetPackage.schemaName.tableName -->
<property name="enableSubPackages" value="false"/>
<!-- 是否对model添加构造函数 -->
<property name="constructorBased" value="true"/>
<!-- 是否针对string类型的字段在set的时候进行trim调用 -->
<property name="trimStrings" value="false"/>
<!-- 建立的Model对象是否 不可改变 即生成的Model对象不会有 setter方法，只有构造方法 -->
<property name="immutable" value="false"/>
</javaModelGenerator>
<!-- 02 指定sql映射文件生成的位置 -->
<sqlMapGenerator targetPackage="com.zking.spboot.mapper"
targetProject="src/main/resources">
<!-- 是否允许子包，即targetPackage.schemaName.tableName -->
<property name="enableSubPackages" value="false"/>
</sqlMapGenerator>
<!-- 03 生成XxxMapper接口 -->
<!-- type="ANNOTATEDMAPPER",生成Java Model 和基于注解的Mapper对象 -->
<!-- type="MIXEDMAPPER",生成基于注解的Java Model 和相应的Mapper对象 -->
<!-- type="XMLMAPPER",生成SQLMap XML文件和独立的Mapper接口 -->
<javaClientGenerator targetPackage="com.zking.spboot.mapper"
targetProject="src/main/java" type="XMLMAPPER">
<!-- 是否在当前路径下新加一层schema,false路径com.oop.eksp.user.model， true:com.oop.eksp.user.model.[schemaName] -->
<property name="enableSubPackages" value="false"/>
</javaClientGenerator>
<!-- 配置表信息 -->
<!-- schema即为数据库名 -->
<!-- tableName为对应的数据库表 -->
<!-- domainObjectName是要生成的实体类 -->
<!-- enable*ByExample是否生成 example类 -->
<!-- <table schema="" tableName="t_student" domainObjectName="Student"
enableCountByExample="false" enableDeleteByExample="false"
enableSelectByExample="false" enableUpdateByExample="false">
<!– 忽略列，不生成bean 字段 –>
<!– <ignoreColumn column="FRED" /> –>
<!– 指定列的java数据类型 –>
<!– <columnOverride column="LONG_VARCHAR_FIELD" jdbcType="VARCHAR" /> –>
</table>-->
<!--<table schema="" tableName="t_book" domainObjectName="Book"
enableCountByExample="false" enableDeleteByExample="false"
enableSelectByExample="false" enableUpdateByExample="false">
<!– 忽略列，不生成bean 字段 –>
<!– <ignoreColumn column="FRED" /> –>
<!– 指定列的java数据类型 –>
<!– <columnOverride column="LONG_VARCHAR_FIELD" jdbcType="VARCHAR" /> –>
</table>-->
</context>
</generatorConfiguration>四、前端页面效果（HBuilderX）
前端主要是action.js与BookList.vue
首先是action.js(根据自己后端的路径来进行配置我这里呢就配置了书本的添加与查询方法的路径)
代码语言：javascript复制/**
* 对后台请求的地址的封装，URL格式如下：
* 模块名_实体名_操作
*/
export default {
//服务器
'SERVER': 'http://localhost:8080/spboot',
'ADD':'book/addBook',
'ALL':'book/queryAll',
//获得请求的完整地址，用于mockjs测试时使用
'getFullPath': k => {
return this.SERVER this[k];
}
}其次是BookList.vue:这个就是前端的页面效果的代码
代码语言：javascript复制<template>
<div>
<!-- <h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1> -->
<!-- 1.搜索栏 -->
<el-form :inline="true">
<el-form-item label="书本名称">
<el-input v-model="bookname" placeholder="书本名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query">查询</el-button>
<el-button type="primary" @click="open">新增</el-button>
</el-form-item>
</el-form>
<!-- 2.数据表格 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="书本编号" width="180">
</el-table-column>
<el-table-column prop="bookname" label="书本名称" width="180">
</el-table-column>
<el-table-column prop="price" label="书本价格">
</el-table-column>
<el-table-column prop="booktype" label="书本类型">
</el-table-column>
</el-table>
<!-- 3.弹出框 -->
<el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close">
<el-form :model="book" :rules="rules" ref="book">
<el-form-item prop="bookname" label="书本名称" label-width="90px">
<el-input v-model="book.bookname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="price" label="书本价格" label-width="90px">
<el-input v-model="book.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="booktype" label="书本类型" label-width="90px">
<el-select style="width:100%;" v-model="book.booktype" placeholder="请选择书本类型">
<el-option label="玄幻" value="玄幻"></el-option>
<el-option label="文学" value="文学"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data: function() {
return {
ts: new Date().getTime(),
bookname: '',
tableData: [],
dialogFormVisible: false,
book: {
bookname: '',
price: '',
booktype: ''
},
rules: {
bookname: [{
required: true,
message: '请输入书本名称',
trigger: 'blur'
}, ],
price: [{
required: true,
message: '请输入书本价格',
trigger: 'blur'
}, ],
booktype: [{
required: true,
message: '请选择书本类型',
trigger: 'change'
}, ]
}
};
},
methods: {
close:function(){
//清空表单数据
this.book={
bookname: '',
price: '',
booktype: ''
};
//清空表单验证
this.$refs['book'].resetFields();
},
save: function() {
this.$refs['book'].validate((valid) => {
if (valid) {
let url=this.axios.urls.ADD;
this.axios.post(url,this.book).then(resp => {
let data = resp.data; //data --> date XXXXXX
// {code:200,msg:'OK',data:[....]}
if(data.code==200){
//关闭弹出框
this.dialogFormVisible=false;
//再次查询列表方法
this.query();
}else{
this.$message.error('新增失败！');
}
}).catch(err => {
})
} else {
console.log('error submit!!');
return false;
}
});
},
query: function() {
//1.定义查询参数
let params = {
bookname: this.bookname
};
//2.获取请求路径
let url = this.axios.urls.ALL;
//3.发起ajax请求
this.axios.post(url, params).then(resp => {
let data = resp.data; //data --> date XXXXXX
// {code:200,msg:'OK',data:[....]}
console.log(data);
this.tableData = data.data;
}).catch(err => {
})
},
open: function() {
this.dialogFormVisible = true;
}
}
}
</script>
<style>
</style>以上的代码展示是我根据我的项目文件顺序来发布的（由后端代码——>前端代码）
页面效果如下：
