• 前后端分离 基础（新增与查询）

    目录

    一，后端

    1.1 修改settings---->搜索Maven

    1.2 application.yml文件与jdbc.properties文件 对应数据库的账号密码

    application.yml

     1.4 jdbc.properties

    1.3 generatorConfig.xml

    jdbc驱动jar包

    1.4 从本地导入pom依赖

    POM

    1.5 自动生成

     1.6 各个层的编写

    Mapper.xml

    mapper

    service

    impl（实现层）

    Contrpller

    二，前端

    actions.js

    BookLsit.vue页面

    页面展示：

     新增：

    前言：本期是从导入MAVEN项目后准备自动生成开始编写的

    后端的配置以及生成代码加编写模糊查询方法

    前端的界面搭建和事件以及获取后台的接口

    一，后端

    1.1 修改settings---->搜索Maven

    1.2 application.yml文件与jdbc.properties文件 对应数据库的账号密码

    application.yml

    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: 123456
    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.

     1.4 jdbc.properties

    1. jdbc.driver=com.mysql.jdbc.Driver
    2. jdbc.url=jdbc:mysql://localhost:3306/bookshop?useUnicode=true&characterEncoding=UTF-8
    3. jdbc.username=root
    4. jdbc.password=123456

    1.3 generatorConfig.xml

    jdbc驱动jar包

    1. "1.0" encoding="UTF-8" ?>
    2. DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
    3.         "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd" >
    4. <generatorConfiguration>
    5.     
    6.     <properties resource="jdbc.properties"/>
    7.  
    8.     
    9.     <classPathEntry location="F:\cangku\mvn_repository\mysql\mysql-connector-java\5.1.24\mysql-connector-java-5.1.24.jar"/>
    10.  
    11.     
    12.     <context id="infoGuardian">
    13.         
    14.         <commentGenerator>
    15.             <property name="suppressAllComments" value="true"/>
    16.             <property name="suppressDate" value="true"/> 
    17.         commentGenerator>
    18.  
    19.         
    20.         <jdbcConnection driverClass="${jdbc.driver}"
    21.                         connectionURL="${jdbc.url}" userId="${jdbc.username}" password="${jdbc.password}"/>
    22.  
    23.         
    24.         <javaTypeResolver>
    25.             
    26.             <property name="forceBigDecimals" value="false"/>
    27.         javaTypeResolver>
    28.  
    29.         
    30.         
    31.         
    32.         <javaModelGenerator targetPackage="com.zking.spboot.model"
    33.                             targetProject="src/main/java">
    34.             
    35.             <property name="enableSubPackages" value="false"/>
    36.             
    37.             <property name="constructorBased" value="true"/>
    38.             
    39.             <property name="trimStrings" value="false"/>
    40.             
    41.             <property name="immutable" value="false"/>
    42.         javaModelGenerator>
    43.  
    44.         
    45.         <sqlMapGenerator targetPackage="com.zking.spboot.mapper"
    46.                          targetProject="src/main/resources">
    47.             
    48.             <property name="enableSubPackages" value="false"/>
    49.         sqlMapGenerator>
    50.  
    51.         
    52.         
    53.         
    54.         
    55.         <javaClientGenerator targetPackage="com.zking.spboot.mapper"
    56.                              targetProject="src/main/java" type="XMLMAPPER">
    57.             
    58.             <property name="enableSubPackages" value="false"/>
    59.         javaClientGenerator>
    60.  
    61.         
    62.         
    63.         
    64.         
    65.         
    66.         
    67.                
    68.                
    69.             
    70.             
    71.             
    72.             
    73.         
    74.  
    75.         <table schema="" tableName="t_book" domainObjectName="Book"
    76.                enableCountByExample="false" enableDeleteByExample="false"
    77.                enableSelectByExample="false" enableUpdateByExample="false">
    82.         table>
    83.  
    84.     context>
    85. generatorConfiguration>

    1.4 从本地导入pom依赖

    POM

    1. "1.0" encoding="UTF-8"?>
    2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.     <modelVersion>4.0.0modelVersion>
    5.     <parent>
    6.         <groupId>org.springframework.bootgroupId>
    7.         <artifactId>spring-boot-starter-parentartifactId>
    8.         <version>2.3.1.RELEASEversion>
    9.         <relativePath/> 
    10.     parent>
    11.     <groupId>com.zkinggroupId>
    12.     <artifactId>spbootartifactId>
    13.     <version>0.0.1-SNAPSHOTversion>
    14.     <name>spbootname>
    15.     <description>Demo project for Spring Bootdescription>
    16.  
    17.     <properties>
    18.         <java.version>1.8java.version>
    19.         <mysql.version>5.1.44mysql.version>
    20.     properties>
    21.  
    22.     <dependencies>
    23.         <dependency>
    24.             <groupId>org.springframework.bootgroupId>
    25.             <artifactId>spring-boot-starter-aopartifactId>
    26.         dependency>
    27.         <dependency>
    28.             <groupId>org.springframework.bootgroupId>
    29.             <artifactId>spring-boot-starter-jdbcartifactId>
    30.         dependency>
    31.         <dependency>
    32.             <groupId>org.springframework.bootgroupId>
    33.             <artifactId>spring-boot-starter-webartifactId>
    34.         dependency>
    35.         <dependency>
    36.             <groupId>org.mybatis.spring.bootgroupId>
    37.             <artifactId>mybatis-spring-boot-starterartifactId>
    38.             <version>1.3.2version>
    39.         dependency>
    40.         <dependency>
    41.             <groupId>mysqlgroupId>
    42.             <artifactId>mysql-connector-javaartifactId>
    43.             <version>${mysql.version}version>
    44.             <scope>runtimescope>
    45.         dependency>
    46.         <dependency>
    47.             <groupId>org.projectlombokgroupId>
    48.             <artifactId>lombokartifactId>
    49.         dependency>
    50.  
    51.         
    52.         <dependency>
    53.             <groupId>com.alibabagroupId>
    54.             <artifactId>druid-spring-boot-starterartifactId>
    55.             <version>1.1.10version>
    56.         dependency>
    57.  
    58.         
    59.         <dependency>
    60.             <groupId>com.github.pagehelpergroupId>
    61.             <artifactId>pagehelper-spring-boot-starterartifactId>
    62.             <version>1.2.3version>
    63.         dependency>
    64.  
    65.         
    66.         <dependency>
    67.             <groupId>org.springframework.bootgroupId>
    68.             <artifactId>spring-boot-starter-freemarkerartifactId>
    69.         dependency>
    70.  
    71.         <dependency>
    72.             <groupId>org.springframework.bootgroupId>
    73.             <artifactId>spring-boot-starter-testartifactId>
    74.             <scope>testscope>
    75.             <exclusions>
    76.                 <exclusion>
    77.                     <groupId>org.junit.vintagegroupId>
    78.                     <artifactId>junit-vintage-engineartifactId>
    79.                 exclusion>
    80.             exclusions>
    81.         dependency>
    82.     dependencies>
    83.  
    84.     <build>
    85.         <plugins>
    86.             <plugin>
    87.                 <groupId>org.springframework.bootgroupId>
    88.                 <artifactId>spring-boot-maven-pluginartifactId>
    89.             plugin>
    90.             <plugin>
    91.                 <groupId>org.mybatis.generatorgroupId>
    92.                 <artifactId>mybatis-generator-maven-pluginartifactId>
    93.                 <version>1.3.2version>
    94.                 <dependencies>
    95.                     
    96.                     <dependency>
    97.                         <groupId>mysqlgroupId>
    98.                         <artifactId>mysql-connector-javaartifactId>
    99.                         <version>${mysql.version}version>
    100.                     dependency>
    101.                 dependencies>
    102.                 <configuration>
    103.                     <overwrite>trueoverwrite>
    104.                 configuration>
    105.             plugin>
    106.         plugins>
    107.     build>
    108.  
    109. project>

    1.5 自动生成

     1.6 各个层的编写

    Mapper.xml

    1.  <select id="query" resultMap="BaseResultMap" parameterType="com.zking.spboot.model.Book" >
    2.     select
    3.     <include refid="Base_Column_List" />
    4.     from t_book where 1=1
    5.     <if test="null!=bookname and ''!=bookname">
    6.       and bookname like CONCAT('%',#{bookname},'%')
    7.     if>
    8.   select>

    mapper

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

    service

    1. package com.zking.spboot.service;
    2.  
    3. import com.zking.spboot.model.Book;
    4.  
    5. import java.util.List;
    6.  
    7. /**
    8.  * @author ljj
    9.  * @site www.xiaomage.com
    10.  * @company
    11.  * @create  2022-11-21 14:16
    12.  */
    13. public interface IBookService {
    14.     List query(Book book);
    15.  
    16.  
    17.     int insert(Book record);
    18.  
    19. }

    impl（实现层）

    1. package com.zking.spboot.service;
    2.  
    3. import com.zking.spboot.mapper.BookMapper;
    4. import com.zking.spboot.model.Book;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.stereotype.Service;
    7.  
    8. import java.util.List;
    9.  
    10. /**
    11.  * @author ljj
    12.  * @site www.xiaomage.com
    13.  * @company
    14.  * @create  2022-11-21 14:16
    15.  */
    16. @Service
    17. public class BookServiceImpl implements IBookService {
    18.  
    19.     @Autowired
    20.     private BookMapper bookMapper;
    21.  
    22.     @Override
    23.     public List query(Book book) {
    24.         return bookMapper.query(book);
    25.     }
    26.  
    27.     @Override
    28.     public int insert(Book record) {
    29.         return bookMapper.insert(record);
    30.     }
    31. }

    Contrpller

    1. package com.zking.spboot.controller;
    2.  
    3. import com.zking.spboot.model.Book;
    4. import com.zking.spboot.service.IBookService;
    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. /**
    15.  * @author ljj
    16.  * @site www.xiaomage.com
    17.  * @company
    18.  * @create  2022-11-21 14:18
    19.  */
    20. @RestController
    21. @RequestMapping("/book")
    22. public class BookController {
    23.  
    24.     @Autowired
    25.     private IBookService bookService;
    26.  
    27.     @RequestMapping("/query")
    28.     public JsonResponseBody query(Book book){
    29.         List books = bookService.query(book);
    30.         return new JsonResponseBody<>(200,"OK",books);
    31.     }
    32.  
    33.     @RequestMapping("/add")
    34.     public JsonResponseBody add(Book book){
    35.         bookService.insert(book);
    36.         return new JsonResponseBody<>();
    37.     }
    38.  
    39.  
    40.     @AllArgsConstructor
    41.     @NoArgsConstructor
    42.     @Data
    43.     class JsonResponseBody{
    44.         private int code=200;
    45.         private String msg;
    46.         private T data;
    47.     }
    48.  
    49. }

    二，前端

    actions.js

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

    BookLsit.vue页面

    1. <template>
    2. 	<div>
    3. 		<h1 align="center">SpringBoot阶段机试，ts={{ts}}h1>
    4. 		
    5. 		<el-form :inline="true">
    6. 			<el-form-item label="书籍名称">
    7. 				<el-input v-model="bookname">el-input>
    8. 			el-form-item>
    9. 			<el-form-item>
    10. 				<el-button type="primary" @click="query">查询el-button>
    11. 				<el-button type="primary" @click="open">添加书本el-button>
    12. 			el-form-item>
    13. 		el-form>
    14. 		
    15. 		<el-table :data="tableData" style="width: 100%">
    16. 			<el-table-column prop="id" label="书籍编号" width="180">
    17. 			el-table-column>
    18. 			<el-table-column prop="bookname" label="书籍名称" width="180">
    19. 			el-table-column>
    20. 			<el-table-column prop="price" label="书籍价格" width="180">
    21. 			el-table-column>
    22. 			<el-table-column prop="booktype" label="书籍类型">
    23. 			el-table-column>
    24. 		el-table>
    25. 		
    26. 		<el-dialog @close="close()" title="新增书籍" :visible.sync="dialogFormVisible">
    27. 			<el-form :rules="rules" ref="book" :model="book">
    28. 				<el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
    29. 					<el-input v-model="book.bookname" autocomplete="off">el-input>
    30. 				el-form-item>
    31. 				<el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
    32. 					<el-input v-model="book.price" autocomplete="off">el-input>
    33. 				el-form-item>
    34. 				<el-form-item prop="booktype" label="活动区域" :label-width="formLabelWidth">
    35. 					<el-select style="width: 100%;" v-model="book.booktype" placeholder="请选择书籍类型">
    36. 						<el-option label="修仙" value="修仙">el-option>
    37. 						<el-option label="武侠" value="武侠">el-option>
    38. 					el-select>
    39. 				el-form-item>
    40. 			el-form>
    41. 			<div slot="footer" class="dialog-footer">
    42. 				<el-button @click="dialogFormVisible = false">取 消el-button>
    43. 				<el-button type="primary" @click="save">确 定el-button>
    44. 			div>
    45. 		el-dialog>
    46. 	div>
    47. template>
    48.  
    49. <script>
    50. 	export default {
    51. 		data: function() {
    52. 			return {
    53. 				ts: new Date().getTime(),
    54. 				bookname: '',
    55. 				tableData: [],
    56. 				dialogFormVisible: false,
    57. 				formLabelWidth: '100px',
    58. 				book: {
    59. 					bookname: '',
    60. 					price: '',
    61. 					booktype: ''
    62. 				},
    63. 				rules: {
    64. 					bookname: [{
    65. 						required: true,
    66. 						message: '请输入书籍名称',
    67. 						trigger: 'blur'
    68. 					}, ],
    69. 					price: [{
    70. 						required: true,
    71. 						message: '请输入书籍价格',
    72. 						trigger: 'blur'
    73. 					}, ],
    74. 					booktype: [{
    75. 						required: true,
    76. 						message: '请选择书籍类型',
    77. 						trigger: 'change'
    78. 					}, ],
    79. 				}
    80. 			};
    81. 		},
    82. 		methods: {
    83. 			close: function() {
    84. 				alert(111);
    85. 				this.$refs['book'].resetFields();
    86. 			},
    87. 			save: function() {
    88. 				this.$refs['book'].validate((valid) => {
    89. 					if (valid) {
    90. 						// 请求路径
    91. 						let url = this.axios.urls.ADD;
    92. 						// 发送请求
    93. 						this.axios.post(url, this.book).then(resp => {
    94. 							let rs = resp.data;
    95. 							if (rs.code == 200) {
    96. 								this.dialogFormVisible = false;
    97. 								this.query();
    98. 							}else{
    99. 								
    100. 							}
    101. 						}).catch(err => {
    102.  
    103. 						});
    104. 					} else {
    105. 						console.log('error submit!!');
    106. 						return false;
    107. 					}
    108. 				});
    109. 			},
    110. 			open: function() {
    111. 				this.dialogFormVisible = true;
    112. 			},
    113. 			query: function() {
    114. 				// 查询参数
    115. 				let params = {
    116. 					bookname: this.bookname
    117. 				}
    118. 				// 请求路径
    119. 				let url = this.axios.urls.ALL;
    120. 				// 发起请求
    121. 				this.axios.post(url, params).then(resp => {
    122. 					let rs = resp.data;
    123. 					console.log(rs);
    124. 					this.tableData = rs.data;
    125. 				}).catch(err => {
    126.  
    127. 				});
    128. 			}
    129. 		}
    130. 	}
    131. script>
    132.  
    133. <style>
    134. style>

    页面展示：

     新增：

  • 相关阅读:
    [锁]：乐观锁与悲观锁
    Mybatis+Servlet+Mysql 整合的一个小项目：对初学者非常友好，有助于初学者很快的上手Java Web
    《中学科技》是什么级别的刊物？如何投稿？
    你还不会判定表和因果图法的概念及运用？一篇文章教会你
    Springboot基于ElasticSearch全文搜索引擎策略实现
    第一个实例：QT实现汽车电子仪表盘
    【.NET6+Modbus】Modbus TCP协议解析、仿真环境以及基于.NET实现基础通信
    electron打包后主进程下载文件崩溃
    Go语言基础，墙上时钟Wall Clock与单调时钟Monotonic Clock
    【indexedDB】indexedDB知识梳理
  • 原文地址：https://blog.csdn.net/weixin_64313980/article/details/127980743