• SSM前后端分离项目（后端:SpringBoot 前端:vue+elementui）

    大纲：

            1、以书籍为例进行 书本的新增&删除&修改&模糊查询，实现书本信息管理系统。

            2、运用工具+技术        

                      工具：IntelliJ IDEA 、HBuilder X、MYSQL数据库

                      后台技术：SpringBoot        前端技术：vue+elementUI

            3、注意事项

    1. 后台代码注意事项
      1. maven的设置
        1. 由于电脑maven安装位置不同，需要重新配置
        2. 依赖可能在本地库不存在，需要重新下载(必须联网)
        3. 项目->maven->Update project
      1. jdbc.properties设置
        1. 数据库相关设置：数据库名/帐号/密码，修改成自己电脑对应的帐号和密码 
          1. jdbc.driver=com.mysql.jdbc.Driver
          2. jdbc.url=jdbc:mysql://localhost:3306/lxy?useUnicode=true&characterEncoding=UTF-8&useSSL=false
          3. jdbc.username=root
          4. jdbc.password=1234
          5. jdbc.initialSize=10
          6. jdbc.maxTotal=100
          7. jdbc.maxIdle=50
          8. jdbc.minIdle=10
          9. jdbc.maxWaitMillis=-1
      1. generatorConfig.xml设置
        1. 修改classPathEntry配置，更换成本地maven仓库中mysql数据库jdbc驱动jar包的位置 
          1.  
          2.     
          3.     "D:\repository\mvn-repository\mysql\mysql-connector-java\5.1.44\mysql-connector-java-5.1.44.jar"/>
        2. 修改table配置表信息(tableName和domainObjectName)，更换成数据库中对应数据库表
        3. 点击Edit Configurations...配置，添加Maven，输入命名：mybatis-generator:generate -e
      1. application.yml设置
        1. 数据库相关设置：数据库名/帐号/密码，修改成自己电脑对应的帐号和密码
      1. 由于电脑tomcat以及jdk的安装位置不一样，需重新配置jdk和tomcat
      1. 以上步骤完成之后，先不要编写任何代码，先将web项目发布至tomcat并启动，如果访问成功，表示web项目部署成功

    一、生成书本表

    1. DROP TABLE IF EXISTS `t_book_vue`;
    2. CREATE TABLE `t_book_vue`  (
    3.   `id` int(11) NOT NULL AUTO_INCREMENT,
    4.   `bookname` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
    5.   `price` float NOT NULL,
    6.   `booktype` varchar(40) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
    7.   PRIMARY KEY (`id`) USING BTREE
    8. ) ENGINE = InnoDB AUTO_INCREMENT = 41 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '书本信息表' ROW_FORMAT = Dynamic;
    9.  
    10. INSERT INTO `t_book_vue` VALUES (1, '西游记', 100, '名著');
    11. INSERT INTO `t_book_vue` VALUES (2, '红楼梦', 110, '名著');
    12. INSERT INTO `t_book_vue` VALUES (3, '三国演义', 121, '名著');

     二、打开HBuilderX 导入book_html文件

    在终端下载npm,执行命令：npm install(npm i)，下载成功之后运行项目，执行命令：npm run dev

    三、在Idea中 导入java项目，配置数据库相关设置，在generatorConfig.xml文件中table配置表信息，进行生成表，然后在编写Sevice层&SeviceImpl层&Controller层。

    1、BookMapper.java

    1. package com.zking.ssm.mapper;
    2.  
    3. import com.zking.ssm.model.Book;
    4. import org.springframework.stereotype.Repository;
    5.  
    6. import java.util.List;
    7. import java.util.Map;
    8.  
    9. @Repository
    10. public interface BookMapper {
    11.     //删除书本
    12.     int deleteByPrimaryKey(Integer id);
    13.     //新增书本
    14.     int insert(Book record);
    15.     //根据书本编号查询书本信息
    16.     Book selectByPrimaryKey(Integer id);
    17.     //修改书本信息
    18.     int updateByPrimaryKey(Book record);
    19.     //模糊查询书本
    20.     List queryBookPager(Book book);
    21. }

    2、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.ssm.mapper.BookMapper" >
    4.   <resultMap id="BaseResultMap" type="com.zking.ssm.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 <include refid="Base_Column_List" /> from t_book_vue
    17.     where id = #{id,jdbcType=INTEGER}
    18.   select>
    19.   <select id="queryBookPager" resultType="com.zking.ssm.model.Book">
    20.     select <include refid="Base_Column_List"/> from t_book_vue
    21.     <where>
    22.       <if test="null!=bookname and ''!=bookname">
    23.         bookname like concat('%',#{bookname},'%')
    24.       if>
    25.     where>
    26.     order by id desc
    27.   select>
    28.   <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
    29.     delete from t_book_vue where id = #{id,jdbcType=INTEGER}
    30.   delete>
    31.   <insert id="insert" parameterType="com.zking.ssm.model.Book" >
    32.     insert into t_book_vue (bookname, price,booktype)
    33.     values (#{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL},
    34.       #{booktype,jdbcType=VARCHAR})
    35.   insert>
    36.   <update id="updateByPrimaryKey" parameterType="com.zking.ssm.model.Book" >
    37.     update t_book_vue
    38.     set bookname = #{bookname,jdbcType=VARCHAR},
    39.       price = #{price,jdbcType=REAL},
    40.       booktype = #{booktype,jdbcType=VARCHAR}
    41.     where id = #{id,jdbcType=INTEGER}
    42.   update>
    43. mapper>

    3、 IBookService.java

    1. package com.zking.ssm.service;
    2.  
    3. import com.zking.ssm.model.Book;
    4. import com.zking.ssm.util.PageBean;
    5.  
    6. import java.util.List;
    7. import java.util.Map;
    8.  
    9. public interface IBookService {
    10.     int deleteByPrimaryKey(Integer id);
    11.  
    12.     int insert(Book record);
    13.  
    14.     Book selectByPrimaryKey(Integer id);
    15.  
    16.     int updateByPrimaryKey(Book record);
    17.  
    18.     List queryBookPager(Book book, PageBean pageBean);
    19. }

    4、BookServiceImpl.java 

    1. package com.zking.ssm.service.impl;
    2.  
    3. import com.zking.ssm.mapper.BookMapper;
    4. import com.zking.ssm.model.Book;
    5. import com.zking.ssm.service.IBookService;
    6. import com.zking.ssm.util.PageBean;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.stereotype.Service;
    9.  
    10. import java.util.List;
    11. import java.util.Map;
    12.  
    13. @Service
    14. public class BookServiceImpl implements IBookService {
    15.  
    16.     @Autowired
    17.     private BookMapper bookMapper;
    18.  
    19.     @Override
    20.     public int deleteByPrimaryKey(Integer id) {
    21.         return bookMapper.deleteByPrimaryKey(id);
    22.     }
    23.  
    24.     @Override
    25.     public int insert(Book record) {
    26.         return bookMapper.insert(record);
    27.     }
    28.  
    29.     @Override
    30.     public Book selectByPrimaryKey(Integer id) {
    31.         return bookMapper.selectByPrimaryKey(id);
    32.     }
    33.  
    34.     @Override
    35.     public int updateByPrimaryKey(Book record) {
    36.         return bookMapper.updateByPrimaryKey(record);
    37.     }
    38.  
    39.     @Override
    40.     public List queryBookPager(Book book, PageBean pageBean) {
    41.         return bookMapper.queryBookPager(book);
    42.     }
    43.  
    44. }

    5、BookController.java

    1. package com.zking.ssm.controller;
    2.  
    3. import com.zking.ssm.model.Book;
    4. import com.zking.ssm.service.IBookService;
    5. import com.zking.ssm.util.JsonResponseBody;
    6. import com.zking.ssm.util.PageBean;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.stereotype.Controller;
    9. import org.springframework.web.bind.annotation.RequestMapping;
    10. import org.springframework.web.bind.annotation.ResponseBody;
    11. import javax.servlet.http.HttpServletRequest;
    12. import java.util.List;
    13.  
    14. @Controller
    15. @RequestMapping("/book")
    16. public class BookController {
    17.  
    18.     @Autowired
    19.     private IBookService bookService;
    20.  
    21.     @RequestMapping("/addBook")
    22.     @ResponseBody
    23.     public JsonResponseBody addBook(Book book){
    24.         try {
    25.             bookService.insert(book);
    26.             return new JsonResponseBody<>("新增书本成功",true,0,null);
    27.         } catch (Exception e) {
    28.             e.printStackTrace();
    29.             return new JsonResponseBody<>("新增书本失败",false,0,null);
    30.         }
    31.     }
    32.  
    33.     @RequestMapping("/editBook")
    34.     @ResponseBody
    35.     public JsonResponseBody editBook(Book book){
    36.         try {
    37.             bookService.updateByPrimaryKey(book);
    38.             return new JsonResponseBody<>("编辑书本成功",true,0,null);
    39.         } catch (Exception e) {
    40.             e.printStackTrace();
    41.             return new JsonResponseBody<>("编辑书本失败",false,0,null);
    42.         }
    43.     }
    44.  
    45.     @RequestMapping("/delBook")
    46.     @ResponseBody
    47.     public JsonResponseBody delBook(Book book){
    48.         try {
    49.             bookService.deleteByPrimaryKey(book.getId());
    50.             return new JsonResponseBody<>("删除书本成功",true,0,null);
    51.         } catch (Exception e) {
    52.             e.printStackTrace();
    53.             return new JsonResponseBody<>("删除书本失败",false,0,null);
    54.         }
    55.     }
    56.  
    57.     @RequestMapping("/queryBookPager")
    58.     @ResponseBody
    59.     public JsonResponseBody> queryBookPager(Book book, HttpServletRequest req){
    60.         try {
    61.             PageBean pageBean=new PageBean();
    62.             pageBean.setRequest(req);
    63.             List books = bookService.queryBookPager(book, pageBean);
    64.             return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
    65.         } catch (Exception e) {
    66.             e.printStackTrace();
    67.             return new JsonResponseBody<>("分页查询书本失败",false,0,null);
    68.         }
    69.     }
    70. }

    6、后端代码编写完成，可先运行tomcat测试一下

    四、在前端中编写页面代码

    1、先将后端的ip地址配置到action.js中

    1. /**
    2.  * 对后台请求的地址的封装，URL格式如下：
    3.  * 模块名_实体名_操作
    4.  */
    5. export default {
    6. 	//http://localhost:8080/ssm/user/userLogin
    7. 	'SERVER': 'http://localhost:8080/ssm', //服务器
    8. 	'INIT_MENU':'/module/queryRootNode',	//初始化首页左侧菜单
    9. 	'QUERY_BOOK_PAGE':'/book/queryBookPager',  //书本管理分页查询接口
    10. 	'ADD_BOOK':'/book/addBook',  //书本新增接口
    11. 	'EDIT_BOOK':'/book/editBook',  //书本编辑接口
    12. 	'DEL_BOOK':'/book/delBook',  //书本删除接口
    13. 	'VUEX_TEST':'/vuex/queryVuex',  //Vuex测试接口
    14. 	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    15. 		return this.SERVER + this[k];
    16. 	}
    17. }

    2、 在view文件中编写BookList.vue

    2.  
    4.

    前后端书本分离项目  页面最终效果：

    查询所有：

    模糊查询： 

     页面验证：

     

  • 相关阅读:
    【好玩】如何在github主页放一条贪吃蛇
    踩坑记录---openFeign高并发阻塞分析与解决
    springSecurity自定义认证逻辑，重写登陆，token过滤，退出
    2022年地理信息系统与遥感专业就业前景与升学高校排名选择
    Cpolar在Linux系统中的应用（网页篇2）
    数据存储（二）WebStorage 之 sessionStorage、globalStorage、localStorage
    VXLAN基础
    MySQL-如何合理正确使用索引
    darknet c++源码阅读笔记-01-activation_kernels.cu
    大聪明教你学Java | 比校验文件后缀名更靠谱的上传文件校验方式 —— 文件魔数校验
  • 原文地址：https://blog.csdn.net/m0_61911999/article/details/127794751