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
2. 1. jdbc.properties设置
      1. 数据库相关设置：数据库名/帐号/密码，修改成自己电脑对应的帐号和密码

         jdbc.driver=com.mysql.jdbc.Driver
         jdbc.url=jdbc:mysql://localhost:3306/lxy?useUnicode=true&characterEncoding=UTF-8&useSSL=false
         jdbc.username=root
         jdbc.password=1234
         jdbc.initialSize=10
         jdbc.maxTotal=100
         jdbc.maxIdle=50
         jdbc.minIdle=10
         jdbc.maxWaitMillis=-1

3. 1. generatorConfig.xml设置
      1. 修改classPathEntry配置，更换成本地maven仓库中mysql数据库jdbc驱动jar包的位置

      2. 修改table配置表信息(tableName和domainObjectName)，更换成数据库中对应数据库表
      3. 点击Edit Configurations...配置，添加Maven，输入命名：mybatis-generator:generate -e
4. 1. application.yml设置
      1. 数据库相关设置：数据库名/帐号/密码，修改成自己电脑对应的帐号和密码
5. 1. 由于电脑tomcat以及jdk的安装位置不一样，需重新配置jdk和tomcat
6. 1. 以上步骤完成之后，先不要编写任何代码，先将web项目发布至tomcat并启动，如果访问成功，表示web项目部署成功

---

一、生成书本表

DROP TABLE IF EXISTS `t_book_vue`;
CREATE TABLE `t_book_vue`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `bookname` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `price` float NOT NULL,
  `booktype` varchar(40) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 41 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '书本信息表' ROW_FORMAT = Dynamic;

INSERT INTO `t_book_vue` VALUES (1, '西游记', 100, '名著');
INSERT INTO `t_book_vue` VALUES (2, '红楼梦', 110, '名著');
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

package com.zking.ssm.mapper;

import com.zking.ssm.model.Book;
import org.springframework.stereotype.Repository;

import java.util.List;
import java.util.Map;

@Repository
public interface BookMapper {
    //删除书本
    int deleteByPrimaryKey(Integer id);
    //新增书本
    int insert(Book record);
    //根据书本编号查询书本信息
    Book selectByPrimaryKey(Integer id);
    //修改书本信息
    int updateByPrimaryKey(Book record);
    //模糊查询书本
    List queryBookPager(Book book);
}

2、BookMapper.xml 

  
    
      
      
      
      
    
  
  
    id, bookname, price, booktype
  
  
    select  from t_book_vue
    where id = #{id,jdbcType=INTEGER}
  
  
    select  from t_book_vue
    
      
        bookname like concat('%',#{bookname},'%')
      
    
    order by id desc
  
  
    delete from t_book_vue where id = #{id,jdbcType=INTEGER}
  
  
    insert into t_book_vue (bookname, price,booktype)
    values (#{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL},
      #{booktype,jdbcType=VARCHAR})
  
  
    update t_book_vue
    set bookname = #{bookname,jdbcType=VARCHAR},
      price = #{price,jdbcType=REAL},
      booktype = #{booktype,jdbcType=VARCHAR}
    where id = #{id,jdbcType=INTEGER}
  

3、 IBookService.java

package com.zking.ssm.service;

import com.zking.ssm.model.Book;
import com.zking.ssm.util.PageBean;

import java.util.List;
import java.util.Map;

public interface IBookService {
    int deleteByPrimaryKey(Integer id);

    int insert(Book record);

    Book selectByPrimaryKey(Integer id);

    int updateByPrimaryKey(Book record);

    List queryBookPager(Book book, PageBean pageBean);
}

4、BookServiceImpl.java 

package com.zking.ssm.service.impl;

import com.zking.ssm.mapper.BookMapper;
import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.PageBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;

@Service
public class BookServiceImpl implements IBookService {

    @Autowired
    private BookMapper bookMapper;

    @Override
    public int deleteByPrimaryKey(Integer id) {
        return bookMapper.deleteByPrimaryKey(id);
    }

    @Override
    public int insert(Book record) {
        return bookMapper.insert(record);
    }

    @Override
    public Book selectByPrimaryKey(Integer id) {
        return bookMapper.selectByPrimaryKey(id);
    }

    @Override
    public int updateByPrimaryKey(Book record) {
        return bookMapper.updateByPrimaryKey(record);
    }

    @Override
    public List queryBookPager(Book book, PageBean pageBean) {
        return bookMapper.queryBookPager(book);
    }

}

5、BookController.java

package com.zking.ssm.controller;

import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.JsonResponseBody;
import com.zking.ssm.util.PageBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import java.util.List;

@Controller
@RequestMapping("/book")
public class BookController {

    @Autowired
    private IBookService bookService;

    @RequestMapping("/addBook")
    @ResponseBody
    public JsonResponseBody addBook(Book book){
        try {
            bookService.insert(book);
            return new JsonResponseBody<>("新增书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("新增书本失败",false,0,null);
        }
    }

    @RequestMapping("/editBook")
    @ResponseBody
    public JsonResponseBody editBook(Book book){
        try {
            bookService.updateByPrimaryKey(book);
            return new JsonResponseBody<>("编辑书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("编辑书本失败",false,0,null);
        }
    }

    @RequestMapping("/delBook")
    @ResponseBody
    public JsonResponseBody delBook(Book book){
        try {
            bookService.deleteByPrimaryKey(book.getId());
            return new JsonResponseBody<>("删除书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("删除书本失败",false,0,null);
        }
    }

    @RequestMapping("/queryBookPager")
    @ResponseBody
    public JsonResponseBody> queryBookPager(Book book, HttpServletRequest req){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List books = bookService.queryBookPager(book, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询书本失败",false,0,null);
        }
    }
}

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

---

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

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

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

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

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

查询所有：

模糊查询： 

 页面验证：