• 利用SpringBoot和vue+elementui做一个简单的书本信息管理系统

    目录

    1.准备工作

    1.1.数据库准备

    1.2.前端准备工作

    1.3.后端准备工作

    2.后台代码的编写

    2.1.修改配置文件

    2.2. 编写service层

    2.3.编写Controller层

    3.前台代码的编写

    3.1.在src里面的api里面的action.js

    3.2.搜索栏，表单 

    3.3.表格

    3.4.弹出新增的模态框

    1.准备工作

    提前准备好的db（数据库表），html（前端代码），java（后端代码）等文件夹

    1.1.数据库准备

    表：

    create database if not exists bookshop default charset utf8 collate utf8_general_ci;
    use bookshop;
    create table t_book(
       id int not null auto_increment primary key comment '书本编号',
       bookname varchar(50) not null comment '书本名称',
       price float default 0 comment '书本价格',
       booktype varchar(20) comment '书本类型'
    ) comment '书本信息表';
    insert into t_book(bookname,price,booktype) values
    ('三国演义',110,'战争'),
    ('西游记',120,'神话'),
    ('红楼梦',130,'古典');

    把什么的数据直接放到mysql里面进行执行即可

     现在数据库准备工作已经完成

    1.2.前端准备工作

    把我们提前准备好的HTML文件里面的spbook文件夹导入前端工具中

    在找的文件的根目录执行

    npm -v     查看版本

     注意：如果npm -v没有出现版本的话我们需要以管理员的身份进入即可

    在执行npm i 或者npm install下载依赖

     npm run dev

     这样我们的前端准备工作就完成了

    1.3.后端准备工作

    导入准备好的java中的开发工具中

     1.3.1修改maven仓库

    导入项目之后面要修改maven仓库，一定要找到本地仓库

     导入改变即可

    1.3.2.修改配置文件

    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

     其他不要修改即可！！！

    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

    同样的修改数据库名称和密码

    generatorConfig.xml

    1. "1.0" encoding="UTF-8" ?>
    2. 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="D:\repository\mvn-repository\mysql\mysql-connector-java\5.1.44\mysql-connector-java-5.1.44.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">
    78.             
    79.             
    80.             
    81.             
    82.         table>
    83.  
    84.     context>
    85. generatorConfiguration>

     

     1.3.3.配置maven

     

     同时即可生成代码

    完成以上步骤说明前后端环境已经搭建完成！！！！

    2.后台代码的编写

    2.1.修改配置文件

    BookMapper：
    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.     int deleteByPrimaryKey(Integer id);
    11.  
    12.     /**
    13.      * 根据书籍名称模糊查询
    14.      * @param book
    15.      * @return
    16.      */
    17.     List query(Book book);
    18.  
    19.     /**
    20.      * 新增书籍
    21.      * @param record
    22.      * @return
    23.      */
    24.  
    25.     int insert(Book record);
    26.  
    27.     int insertSelective(Book record);
    28.  
    29.     Book selectByPrimaryKey(Integer id);
    30.  
    31.     int updateByPrimaryKeySelective(Book record);
    32.  
    33.     int updateByPrimaryKey(Book record);
    34. }

     BookMapper.xml:

    1. "1.0" encoding="UTF-8" ?>
    2. 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.   <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
    22.     delete from t_book
    23.     where id = #{id,jdbcType=INTEGER}
    24.   delete>
    25.  
    26.   <select id="query" resultType="com.zking.spboot.model.Book"  >
    27.     select <include refid="Base_Column_List"/> from t_book where 1=1
    28.     <if test="null!=bookname and ''!=bookname">
    29.       and bookname like  concat('%',#{bookname},'%')
    30.     if>
    31.  
    32.   select>
    33.  
    34.  
    35.  
    36.   <insert id="insert" parameterType="com.zking.spboot.model.Book" >
    37.     insert into t_book (id, bookname, price, 
    38.       booktype)
    39.     values (#{id,jdbcType=INTEGER}, #{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL}, 
    40.       #{booktype,jdbcType=VARCHAR})
    41.   insert>
    42.   <insert id="insertSelective" parameterType="com.zking.spboot.model.Book" >
    43.     insert into t_book
    44.     <trim prefix="(" suffix=")" suffixOverrides="," >
    45.       <if test="id != null" >
    46.         id,
    47.       if>
    48.       <if test="bookname != null" >
    49.         bookname,
    50.       if>
    51.       <if test="price != null" >
    52.         price,
    53.       if>
    54.       <if test="booktype != null" >
    55.         booktype,
    56.       if>
    57.     trim>
    58.     <trim prefix="values (" suffix=")" suffixOverrides="," >
    59.       <if test="id != null" >
    60.         #{id,jdbcType=INTEGER},
    61.       if>
    62.       <if test="bookname != null" >
    63.         #{bookname,jdbcType=VARCHAR},
    64.       if>
    65.       <if test="price != null" >
    66.         #{price,jdbcType=REAL},
    67.       if>
    68.       <if test="booktype != null" >
    69.         #{booktype,jdbcType=VARCHAR},
    70.       if>
    71.     trim>
    72.   insert>
    73.   <update id="updateByPrimaryKeySelective" parameterType="com.zking.spboot.model.Book" >
    74.     update t_book
    75.     <set >
    76.       <if test="bookname != null" >
    77.         bookname = #{bookname,jdbcType=VARCHAR},
    78.       if>
    79.       <if test="price != null" >
    80.         price = #{price,jdbcType=REAL},
    81.       if>
    82.       <if test="booktype != null" >
    83.         booktype = #{booktype,jdbcType=VARCHAR},
    84.       if>
    85.     set>
    86.     where id = #{id,jdbcType=INTEGER}
    87.   update>
    88.   <update id="updateByPrimaryKey" parameterType="com.zking.spboot.model.Book" >
    89.     update t_book
    90.     set bookname = #{bookname,jdbcType=VARCHAR},
    91.       price = #{price,jdbcType=REAL},
    92.       booktype = #{booktype,jdbcType=VARCHAR}
    93.     where id = #{id,jdbcType=INTEGER}
    94.   update>
    95. mapper>

    2.2. 编写service层

    BookService：
    1. package com.zking.spboot.service;
    2.  
    3. import com.zking.spboot.model.Book;
    4. import org.springframework.stereotype.Repository;
    5.  
    6. import java.util.List;
    7.  
    8. public interface BookService {
    9.  
    10.     /**
    11.      * 根据商品名称模糊查询
    12.      * @param book
    13.      * @return
    14.      */
    15.     List<Book> query(Book book);
    16.  
    17.     /**
    18.      * 新增书籍
    19.      * @param record
    20.      * @return
    21.      */
    22.  
    23.     int insert(Book record);
    24.  
    25.  
    26. }

     选中BookService  alt+Enter 选择 implement interface

     

     即可生成

    BookServiceImpl：
    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. import org.springframework.web.bind.annotation.RequestMapping;
    9.  
    10. import java.util.List;
    11.  
    12. /**
    13.  * @author冰冰
    14.  * @create  2022-11-19 10:24
    15.  */
    16. @Service
    17. public class BookServiceImpl implements BookService {
    18.     @Autowired
    19.     private BookMapper bookMapper;
    20.     @Override
    21.     public List query(Book book) {
    22.         return bookMapper.query(book);
    23.     }
    24.  
    25.     @Override
    26.     public int insert(Book record) {
    27.         return bookMapper.insert(record);
    28.     }
    29. }

    2.3.编写Controller层

    BookController：
    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. /**
    15.  * @author冰冰
    16.  * @create  2022-11-19 10:29
    17.  */
    18. @RestController
    19. @RequestMapping("/book")
    20. public class BookController {
    21.  
    22.     @Autowired
    23.     private BookService bookService;
    24.     //模糊查询
    25.     @RequestMapping("/query")
    26.     public  JsonResponseBody query(Book book){
    27.         List books = bookService.query(book);
    28.         return new JsonResponseBody<>(200,"ok",books);
    29.     }
    30.     //新增
    31.     @RequestMapping("/add")
    32.     public  JsonResponseBody add(Book book){
    33.       bookService.insert(book);
    34.         return new JsonResponseBody<>();
    35.     }
    36.  
    37.     @Data
    38.     @AllArgsConstructor
    39.     @NoArgsConstructor
    40.     class JsonResponseBody{
    41.         private int code = 200;
    42.         private  String msg = "ok";
    43.         private T data;
    44.     }
    45.  
    46. }

    注意：这里要确保下载了Lombok主键

     

     

     

     以上完成后台就全部写完了！！（只包括新增和查询和模糊查询）

    3.前台代码的编写

    3.1.在src里面的api里面的action.js

    action.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. }

    3.2.搜索栏，表单 

    表单的样式我们拜读官网

    Element - The world's most popular Vue UI framework

    注意：下面这个bookname是跟数据库的书籍名称保存一致


            
              
                bookname" >
              
              
                query">查询
              
            

    效果：

    3.3.表格

     
            tableData" style="width: 100%">
                
                
                
                
                
                
                
                
            

    效果：

    查询

     模糊查询

    3.4.弹出新增的模态框


            @close="close" title="书籍新增" :visible.sync="dialogFormVisible">
                book" :rules="rules" ref="book">
                    
                        book.bookname" autocomplete="off">
                    
                    
                        book.price" autocomplete="off">
                    
                    formLabelWidth">
                        book.booktype" placeholder="请输入书籍类型">
                            
                            
                        
                    
                
                


                    dialogFormVisible = false">取 消
                    @click="save">确 定
                

            
     

    增加一个新增按钮


                
                    
                
                
                    查询
                    新增
                
            

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

    效果：

  • 相关阅读:
    微服务平滑迁移上云最佳实践
    华为HCIA（三）
    Windows连接Linux上安装的Redis
    （十一）Powershell调用java实验
    【花雕动手做】有趣好玩的音乐可视化系列小项目（15）--横排LED方管灯
    CH455G驱动数码管
    Spring第六讲：Spring事务原理及应用
    Vue3+node.js网易云音乐实战项目(六)
    基于SSM+Vue的乐购游戏商城系统
    web 安全总结
  • 原文地址：https://blog.csdn.net/m0_68211831/article/details/127924520