• 前后端分离的书本管理系统

    目录

    前言：利用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层

    Controller一般指的是MVC架构里的控制层，是对项目里的功能做统一的调度。java里的著名的MVC框架有struts和springmvc。不过这2个都是javaweb里的框架技术。

    是一个jsp、少量的用户提交内容的场景，就会来到这个代替Struts2Action的jsp，由它来调用Model层的ServiceBean，然后又redirect/forward回View层的jsp。如果顺手，可以用spring的DataBinder将Request参数绑定到DTO，否则继续复古的用N多。

    1. package com.zking.spboot.controller;
    2.  
    3. import com.zking.spboot.model.Book;
    4. import com.zking.spboot.service.BookService;
    5. import lombok.AllArgsConstructor;
    6. import lombok.Data;
    7. import lombok.NoArgsConstructor;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.web.bind.annotation.RequestMapping;
    10. import org.springframework.web.bind.annotation.RestController;
    11.  
    12. import java.util.List;
    13.  
    14. @RestController
    15. @RequestMapping("/book")
    16. public class BookController {
    17.  
    18.     @Autowired
    19.     private BookService bookService;
    20.  
    21.     @RequestMapping("/addBook")
    22.     public JsonResponBody addBook(Book book){
    23.         bookService.insert(book);
    24.         return new JsonResponBody<>();
    25.     }
    26.  
    27.     @RequestMapping("/queryBook")
    28.     public JsonResponBody>queryAll(Book book){
    29.         List books=bookService.queryAll(book);
    30.         return new JsonResponBody<>(200,"ok",books);
    31.     }
    32.  
    33.     @Data
    34.     @AllArgsConstructor
    35.     @NoArgsConstructor
    36.     class JsonResponBody{
    37.         private int code=200;
    38.         private String msg="ok";
    39.         private T data;
    40.     }
    41. }

    2.mapper层 

    mapper层的作用是对数据库进行数据持久化操作，他的方法语句是直接针对数据库操作的现在用mybatis逆向工程生成的。

    mapper层，其实就是dao层，主要是做数据持久层的工作，负责与数据库进行联络的一些任务都封装在此。

    1. package com.zking.spboot.mapper;
    2.  
    3. import com.zking.spboot.model.Student;
    4. import org.springframework.stereotype.Repository;
    5.  
    6. import java.util.List;
    7.  
    8. @Repository
    9. public interface StudentMapper {
    10.  
    11.     List queryAll(Student student);
    12.  
    13.     int insert(Student record);
    14.  
    15.     int deleteByPrimaryKey(Integer id);
    16.  
    17.  
    18.  
    19.     int insertSelective(Student record);
    20.  
    21.     Student selectByPrimaryKey(Integer id);
    22.  
    23.     int updateByPrimaryKeySelective(Student record);
    24.  
    25.     int updateByPrimaryKey(Student record);
    26. }

    Mapper.xml

    1. "1.0" encoding="UTF-8" ?>
    2. DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    3. <mapper namespace="com.zking.spboot.mapper.BookMapper" >
    4.   <resultMap id="BaseResultMap" type="com.zking.spboot.model.Book" >
    5.     <constructor >
    6.       <idArg column="id" jdbcType="INTEGER" javaType="java.lang.Integer" />
    7.       <arg column="bookname" jdbcType="VARCHAR" javaType="java.lang.String" />
    8.       <arg column="price" jdbcType="REAL" javaType="java.lang.Float" />
    9.       <arg column="booktype" jdbcType="VARCHAR" javaType="java.lang.String" />
    10.     constructor>
    11.   resultMap>
    12.   <sql id="Base_Column_List" >
    13.     id, bookname, price, booktype
    14.   sql>
    15.   <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
    16.     select 
    17.     <include refid="Base_Column_List" />
    18.     from t_book
    19.     where id = #{id,jdbcType=INTEGER}
    20.   select>
    21.     <select id="queryAll" resultType="com.zking.spboot.model.Book">
    22.       select <include refid="Base_Column_List"/> from t_book where 1=1
    23.       <if test="null!=bookname and ''!=bookname">
    24.         and bookname like concat('%',#{bookname},'%')
    25.       if>
    26.     select>
    27.     <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
    28.     delete from t_book
    29.     where id = #{id,jdbcType=INTEGER}
    30.   delete>
    31.   <insert id="insert" parameterType="com.zking.spboot.model.Book" >
    32.     insert into t_book (bookname, price,
    33.       booktype)
    34.     values (#{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL},
    35.       #{booktype,jdbcType=VARCHAR})
    36.   insert>
    37.   <insert id="insertSelective" parameterType="com.zking.spboot.model.Book" >
    38.     insert into t_book
    39.     <trim prefix="(" suffix=")" suffixOverrides="," >
    40.       <if test="id != null" >
    41.         id,
    42.       if>
    43.       <if test="bookname != null" >
    44.         bookname,
    45.       if>
    46.       <if test="price != null" >
    47.         price,
    48.       if>
    49.       <if test="booktype != null" >
    50.         booktype,
    51.       if>
    52.     trim>
    53.     <trim prefix="values (" suffix=")" suffixOverrides="," >
    54.       <if test="id != null" >
    55.         #{id,jdbcType=INTEGER},
    56.       if>
    57.       <if test="bookname != null" >
    58.         #{bookname,jdbcType=VARCHAR},
    59.       if>
    60.       <if test="price != null" >
    61.         #{price,jdbcType=REAL},
    62.       if>
    63.       <if test="booktype != null" >
    64.         #{booktype,jdbcType=VARCHAR},
    65.       if>
    66.     trim>
    67.   insert>
    68.  
    69.   <update id="updateByPrimaryKeySelective" parameterType="com.zking.spboot.model.Book" >
    70.     update t_book
    71.     <set >
    72.       <if test="bookname != null" >
    73.         bookname = #{bookname,jdbcType=VARCHAR},
    74.       if>
    75.       <if test="price != null" >
    76.         price = #{price,jdbcType=REAL},
    77.       if>
    78.       <if test="booktype != null" >
    79.         booktype = #{booktype,jdbcType=VARCHAR},
    80.       if>
    81.     set>
    82.     where id = #{id,jdbcType=INTEGER}
    83.   update>
    84.   <update id="updateByPrimaryKey" parameterType="com.zking.spboot.model.Book" >
    85.     update t_book
    86.     set bookname = #{bookname,jdbcType=VARCHAR},
    87.       price = #{price,jdbcType=REAL},
    88.       booktype = #{booktype,jdbcType=VARCHAR}
    89.     where id = #{id,jdbcType=INTEGER}
    90.   update>
    91. mapper>

    3.model层

    model层的作用主要就是用来传参用的，如果你传过参数那么你就知道有数组，单个传参，但是如果是20个或者更多的话怎么传呢，这就是 model的好处了，model基本是数据库中表的字段的集合，通过getset访问器，使其能够传递更多的值，比如，student表，那么在model中就有个这样的类里面声明属性，属性和数据库中的字段一直，那么不管你更新还是插入，那么你就能直接实例化model层的类给属性赋值，然后就能传递这个类的实例了，然后再取出来 

    4.service层以及他的impl（这个impl看个人编码习惯可以不要）

     service是业务层，是使用一个或多个模型执行操作的方法。
    1. 封装通用的业务逻辑，操作。
    如一些数据的检验，可以通用处理。
    2. 与数据层的交互。
    3. 其他请求：如远程服务获取数据，如第三方api等。

    1. package com.zking.spboot.service;
    2.  
    3. import com.zking.spboot.model.Book;
    4.  
    5. import java.util.List;
    6.  
    7. public interface BookService {
    8.  
    9.     List queryAll(Book book);
    10.  
    11.     int insert(Book record);
    12. }

     BookServicelmpl:

    1. package com.zking.spboot.service.impl;
    2.  
    3. import com.zking.spboot.mapper.BookMapper;
    4. import com.zking.spboot.model.Book;
    5. import com.zking.spboot.service.BookService;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.stereotype.Service;
    8.  
    9. import java.util.List;
    10.  
    11. @Service
    12. public class BookServiceImpl implements BookService {
    13.  
    14.     @Autowired
    15.     private BookMapper bookMapper;
    16.  
    17.     @Override
    18.     public List queryAll(Book book) {
    19.         return bookMapper.queryAll(book);
    20.     }
    21.  
    22.     @Override
    23.     public int insert(Book record) {
    24.         return bookMapper.insert(record);
    25.     }
    26. }

    三、根据跨域问题的处理

    1.这个文件我是放在了util文件中的（CoreMapper）

    1. package com.zking.spboot.util;
    2.  
    3. import org.springframework.context.annotation.Configuration;
    4. import org.springframework.web.servlet.config.annotation.CorsRegistry;
    5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    6.  
    7. @Configuration
    8. public class CorsMapping implements WebMvcConfigurer {
    9.  
    10.     /*@Override
    11.     *
    12.      * 重新跨域支持方法
    13.      * CorsRegistry  开启跨域注册
    14.      */
    15.     public void addCorsMappings(CorsRegistry registry) {
    16.         //addMapping 添加可跨域的请求地址
    17.         registry.addMapping("/**")
    18.                 //设置跨域 域名权限 规定由某一个指定的域名+端口能访问跨域项目
    19.                 .allowedOrigins("*")
    20.                 //是否开启cookie跨域
    21.                 .allowCredentials(false)
    22.                 //规定能够跨域访问的方法类型
    23.                 .allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
    24.                 //添加验证头信息  token
    25.                 //.allowedHeaders()
    26.                 //预检请求存活时间 在此期间不再次发送预检请求
    27.                 .maxAge(3600);
    28.     }
    29. }

    2.接下来就是application.yml文件（是一个配置文件）：

    YAML文件格式是Spring Boot支持的一种JSON超集文件格式，相较于传统的Properties配置文件，YAML文件以数据为核心，是一种更为直观且容易被电脑识别的数据序列化格式。application.yaml配置文件的工作原理和application.properties是一样的，只不过yaml格式配置文件看起来更简洁一些。

    * YAML文件的扩展名可以使用.yml或者.yaml。

    1. server:
    2.   port: 8080
    3.   servlet:
    4.     context-path: /spboot
    5. spring:
    6.   datasource:
    7.     type: com.alibaba.druid.pool.DruidDataSource
    8.     driver-class-name: com.mysql.jdbc.Driver
    9.     url: jdbc:mysql://localhost:3306/bookshop?useUnicode=true&characterEncoding=utf8&useSSL=false
    10.     username: root
    11.     password: 1234
    12.     druid:
    13.       initial-size: 5
    14.       min-idle: 5
    15.       max-active: 20
    16.       max-wait: 60000
    17.       time-between-eviction-runs-millis: 60000
    18.       min-evictable-idle-time-millis: 30000
    19.       validation-query: SELECT 1 FROM DUAL
    20.       test-while-idle: true
    21.       test-on-borrow: true
    22.       test-on-return: false
    23.       pool-prepared-statements: true
    24.       max-pool-prepared-statement-per-connection-size: 20
    25.       filter:
    26.         stat:
    27.           merge-sql: true
    28.           slow-sql-millis: 5000
    29.       web-stat-filter:
    30.         enabled: true
    31.         url-pattern: /*
    32.         exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
    33.         session-stat-enable: true
    34.         session-stat-max-count: 100
    35.       stat-view-servlet:
    36.         enabled: true
    37.         url-pattern: /druid/*
    38.         reset-enable: true
    39.         login-username: admin
    40.         login-password: admin
    41.         allow: 127.0.0.1
    42.         #deny: 192.168.1.100
    43.   freemarker:
    44.     cache: false
    45.     charset: UTF-8
    46.     content-type: text/html
    47.     suffix: .ftl
    48.     template-loader-path: classpath:/templates
    49. mybatis:
    50.   mapper-locations: classpath:mapper/*.xml
    51.   type-aliases-package: com.zking.spboot.model
    52.   configuration:
    53.     map-underscore-to-camel-case: true
    54. logging:
    55.   level:
    56.     com.zking.spboot.mapper: debug
    57. pagehelper:
    58.   helperDialect: mysql
    59.   reasonable: true
    60.   supportMethodsArguments: true
    61.   params: count=countSql
    62.

     3.其次就是generatorConfig.xml文件（此文件呢就是一个连接数据库来生成mapper.....等文件）

    是 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中使用

    1. "1.0" encoding="UTF-8" ?>
    2. "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
    3.         "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd" >
    5.     
    6.     "jdbc.properties"/>
    7.  
    8.     
    9.     "E:\repository\mvn-repository\mysql\mysql-connector-java\5.1.44\mysql-connector-java-5.1.44.jar"/>
    10.  
    11.     
    12.     "infoGuardian">
    13.         
    14.         
    15.             "suppressAllComments" value="true"/>
    16.             "suppressDate" value="true"/> 
    17.         
    18.  
    19.         
    20.         "${jdbc.driver}"
    21.                         connectionURL="${jdbc.url}" userId="${jdbc.username}" password="${jdbc.password}"/>
    22.  
    23.         
    24.         
    25.             
    26.             "forceBigDecimals" value="false"/>
    27.         
    28.  
    29.         
    30.         
    31.         
    32.         "com.zking.spboot.model"
    33.                             targetProject="src/main/java">
    34.             
    35.             "enableSubPackages" value="false"/>
    36.             
    37.             "constructorBased" value="true"/>
    38.             
    39.             "trimStrings" value="false"/>
    40.             
    41.             "immutable" value="false"/>
    42.         
    43.  
    44.         
    45.         "com.zking.spboot.mapper"
    46.                          targetProject="src/main/resources">
    47.             
    48.             "enableSubPackages" value="false"/>
    49.         
    50.  
    51.         
    52.         
    53.         
    54.         
    55.         "com.zking.spboot.mapper"
    56.                              targetProject="src/main/java" type="XMLMAPPER">
    57.             
    58.             "enableSubPackages" value="false"/>
    59.         
    60.  
    61.         
    62.         
    63.         
    64.         
    65.         
    66.   
    67.  
    68.         
    69.  
    70.

    四、前端页面效果（HBuilderX）

    前端主要是action.js与BookList.vue

    首先是action.js(根据自己后端的路径来进行配置我这里呢就配置了书本的添加与查询方法的路径)

    1. /**
    2.  * 对后台请求的地址的封装，URL格式如下：
    3.  * 模块名_实体名_操作
    4.  */
    5. export default {
    6. 	//服务器
    7. 	'SERVER': 'http://localhost:8080/spboot',
    8. 	'ADD':'book/addBook',
    9. 	'ALL':'book/queryAll',
    10. 	//获得请求的完整地址，用于mockjs测试时使用
    11. 	'getFullPath': k => {
    12. 		return this.SERVER + this[k];
    13. 	}
    14. }

    其次是BookList.vue:这个就是前端的页面效果的代码

    2.  
    3. <script>
    4. 	export default {
    5. 		data: function() {
    6. 			return {
    7. 				ts: new Date().getTime(),
    8. 				bookname: '',
    9. 				tableData: [],
    10. 				dialogFormVisible: false,
    11. 				book: {
    12. 					bookname: '',
    13. 					price: '',
    14. 					booktype: ''
    15. 				},
    16. 				rules: {
    17. 					bookname: [{
    18. 						required: true,
    19. 						message: '请输入书本名称',
    20. 						trigger: 'blur'
    21. 				 }, ],
    22. 					price: [{
    23. 						required: true,
    24. 						message: '请输入书本价格',
    25. 						trigger: 'blur'
    26. 					}, ],
    27. 					booktype: [{
    28. 						required: true,
    29. 						message: '请选择书本类型',
    30. 						trigger: 'change'
    31. 					}, ]
    32. 				}
    33. 			};
    34. 		},
    35. 		methods: {
    36. 			close:function(){
    37. 				//清空表单数据
    38. 				this.book={
    39. 					bookname: '',
    40. 					price: '',
    41. 					booktype: ''
    42. 				};
    43. 				//清空表单验证
    44. 				this.$refs['book'].resetFields();
    45. 			},
    46. 			save: function() {
    47. 				this.$refs['book'].validate((valid) => {
    48. 					if (valid) {
    49. 						let url=this.axios.urls.ADD;
    50. 						this.axios.post(url,this.book).then(resp => {
    51. 							let data = resp.data; //data  -->  date  XXXXXX
    52. 							// {code:200,msg:'OK',data:[....]}
    53. 							if(data.code==200){
    54. 								//关闭弹出框
    55. 								this.dialogFormVisible=false;
    56. 								//再次查询列表方法
    57. 								this.query();
    58. 							}else{
    59. 								this.$message.error('新增失败！');
    60. 							}
    61. 						}).catch(err => {
    62.  
    63. 						})
    64. 					} else {
    65. 						console.log('error submit!!');
    66. 						return false;
    67. 					}
    68. 				});
    69. 			},
    70. 			query: function() {
    71. 				//1.定义查询参数
    72. 				let params = {
    73. 					bookname: this.bookname
    74. 				};
    75. 				//2.获取请求路径
    76. 				let url = this.axios.urls.ALL;
    77. 				//3.发起ajax请求
    78. 				this.axios.post(url, params).then(resp => {
    79. 					let data = resp.data; //data  -->  date  XXXXXX
    80. 					// {code:200,msg:'OK',data:[....]}
    81. 					console.log(data);
    82. 					this.tableData = data.data;
    83. 				}).catch(err => {
    84.  
    85. 				})
    86. 			},
    87. 			open: function() {
    88. 				this.dialogFormVisible = true;
    89. 			}
    90. 		}
    91. 	}
    92. script>
    93.  
    94. <style>
    95. style>

     以上的代码展示是我根据我的项目文件顺序来发布的（由后端代码——>前端代码）

    页面效果如下：

     写本此博客呢是出于朋友需要（想着写一篇博客方便她学习也方便她的朋友以及所需要的小伙伴）

  • 相关阅读:
    GPU Counter功能更新｜支持Adreno、PowerVR芯片
    2023年中国分布式光纤传感产量、需求量及行业市场规模分析[图]
    Java抽象类和接口
    制作手机IOS苹果ipa应用的重签名工具
    从0开始的计组学习！让我们踏上计组的奇妙学习之旅叭~
    【影像三维地形图制作（附练习数据）
    matlab自动生成FPGA rom源码
    python+nodejs+php+springboot+vue 导师双选系统
    Spring(18) @Order注解介绍、使用、底层原理
    第五章：方法
  • 原文地址：https://blog.csdn.net/m0_62019369/article/details/127818024