Vue+SpringBoot图书管理系统前后端分离（教你一步一步搭建）

介绍：

本次实验主要是以Vue+springboot+Mybatis实现的一个小型图书管理系统，主要只是对图书的增删改查操作（属于最基础最基础的一个部分），主要还是个练手如何使用前后端分离。

前端：使用Vue+axios+elemenet框架实现

后端：SpringBoot+Mybatis

说明：

如果想要学习这篇文章，你需要具备Vue脚手架环境以及搭建Vue脚手架工程的能力，其次你需要初步会用springboot（如注解的含义等）以及mybatis的使用.

下面我就带领老铁们一块搭建一下环境吧

环境搭建

后端环境搭建

1.新建一个工程（只有收费版的idea才有这个选项哦）

2.选择Java8

4.配置工程所包含内容

后面就下一步下一部知道完成

5.添加依赖

当你创建完成以后，你就有了springboot的工程了，后面就需要加一下依赖了（比如mybatis等）

注意在dependencies节点下加一些相关依赖
（这里的依赖代码请翻倒最后去）

6.之后就是创建一个yml文件

然后就在后面找到我的yml，复制粘贴就ok

7.配置mybatis相关配置（resources->创建mapper文件夹->BookMapper.xml）

代码见后面

8.创建java包，并填写内容

代码见下

至此，我们的后端环境基本ok

前端Vue脚手架搭建

1.window+r 输入cmd进入命令模式，输入vue ui

2.傻瓜式安装（前提你会vue）

3.vue代码的编写

项目截图

代码架构图

前端代码

<template>
	<div id="app">
		<el-row style="padding: 20px;">
			<el-col :span="10">
				<el-input v-model="input" placeholder="请输入书名"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click='searchUser'>搜索</el-button>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" @click='onaddUserVisible'>增加图书</el-button>
			</el-col>
		</el-row>
		<el-table stripe border :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="id" width="180">
			</el-table-column>
			<el-table-column prop="bookname" label="书名" width="180">
			</el-table-column>
			<el-table-column prop="price" label="价格">
			</el-table-column>
			<el-table-column prop="publicer" label="出版社">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" @click="updateUser(scope.row)">修改书籍信息</el-button>
					<el-button type="danger" @click="deleteUser(scope.row.bookname)">删除书籍信息</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="添加书籍" :visible.sync="addUserVisible" width="80%" >
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="编号:">
					<el-input v-model="form.id"></el-input>
				</el-form-item>
				<el-form-item label="书名:">
					<el-input v-model="form.bookname"></el-input>
				</el-form-item>
				<el-form-item label="价格:">
					<el-input v-model="form.price"></el-input>
				</el-form-item>
				<el-form-item label="出版社:">
					<el-input v-model="form.publicer"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onaddUser">立即添加图书</el-button>
					<el-button @click="onaddUsercancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog title="修改书籍信息" :visible.sync="updateUserVisible" width="80%" >
			<el-form :model="updateUserForm" label-width="80px">
				<el-form-item label="编号:">
					<el-input v-model="updateUserForm.id"></el-input>
				</el-form-item>
				<el-form-item label="书名:">
					<el-input v-model="updateUserForm.bookname"></el-input>
				</el-form-item>
				<el-form-item label="价格:">
					<el-input v-model="updateUserForm.price"></el-input>
				</el-form-item>
				<el-form-item label="出版社:">
					<el-input v-model="updateUserForm.publicer"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onUpdateCommit">立即修改用户</el-button>
					<el-button @click="onupdatecancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>


<script>
	export default {
		name: 'App',
		mounted() {
			this.requestUser()
		},
	
		methods: {
			//添加图书信息
			onaddUser() {
	
				var that = this
				this.$axios.post('http://localhost:8088/springboot/addBook', {
						id: this.form.id,
						bookname: this.form.bookname,
						price:this.form.price,
						publicer:this.form.publicer
					})
					.then(function(response) {
						console.log()
						if (response.data.code == 0) {
							that.addUserVisible = false
							that.requestUser()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {

					})
			},
			//根据图书名查询图书
			searchUser() {
				var that = this
				console.log(this.input)
				this.$axios.get('http://localhost:8088/springboot/findBookByName/' + this.input )
					.then(function(response) {
						console.log(response.data)
						that.tableData=response.data.data
						console.log(that.tableData)
					}).catch(function(error) {

					})
				
			},
			onaddUsercancel() {
				this.addUserVisible = false
			},
			onupdatecancel(){
				this.updateUserVisible = false
			},
			onaddUserVisible() {
				this.addUserVisible = true
			},
			updateUser(user) {
				console.log(user)
				this.updateUserForm = user
				this.updateUserVisible = true

			},
			onUpdateCommit() {
				var that = this
				this.$axios.post('http://localhost:8088/springboot/updateBook', {
						id: this.updateUserForm.id,
						bookname: this.updateUserForm.bookname,
						price:this.updateUserForm.price,
						publicer:this.updateUserForm.publicer
					})
					.then(function(response) {
						console.log(response.data)
						if (response.data.code == 0) {
							that.$message({
								message: response.data.msg,
								type: 'success'
							})
							that.updateUserVisible = false
							that.requestUser()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						that.$message.error(error);
					})
			},
			//删除图书
			deleteUser(bookname) {
				// console.log(id)
					console.log(bookname)
				var that = this
		
				this.$axios.post('http://localhost:8088/springboot/deleteBook/'+bookname)
					.then(function(response) {
						console.log(response.data.msg)
						if (response.data.code == 0) {
							that.$message(response.data.msg);
							that.requestUser()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {

					})
			},
			//查询所有图书
			requestUser() {
				var that = this
				this.$axios.get('http://localhost:8088/springboot/findAllBook')
					.then(function(response) {
						that.tableData = response.data.data
						console.log(response.data.data)
					}).catch(function(error) {

					})
			}
		},
		data() {
			return {
				tableData: [],
				input: '',
				addUserVisible: false,
				updateUserVisible: false,
				form: {
					id: 0,
					bookname: '',
					price:0,
					publicer:''
				},
				updateUserForm: {
					id: 0,
					bookname: '',
					price:0,
					publicer:''
				}
			}
		}
	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>

后端代码

pipo

package c201801020105cmengtao.pojo;

public class Book {
    int id;
    String bookname;
    double price;
    String publicer;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getBookname() {
        return bookname;
    }

    public void setBookname(String bookname) {
        this.bookname = bookname;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public String getPublicer() {
        return publicer;
    }

    public void setPublicer(String publicer) {
        this.publicer = publicer;
    }

    @Override
    public String toString() {
        return "Book{" +
                "id=" + id +
                ", bookname='" + bookname + '\'' +
                ", price=" + price +
                ", publicer='" + publicer + '\'' +
                '}';
    }
}

dao

Mybatis数据库接口层

package c201801020105cmengtao.dao;

import c201801020105cmengtao.pojo.Book;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
@Mapper
public interface BookMapper {
    //查询所有书籍
    public List<Book> findAllBook();
//按照书名查询
    public List<Book> findBookByName(String name);
    //增加书籍
    public int addBook(Book book);
    //删除书籍
    public int deleteBookByName(String name);
    //修改书籍
    public int updateBook(Book book);


}

service

service接口

package c201801020105cmengtao.service;

import c201801020105cmengtao.pojo.Book;

import java.util.List;

public interface BookService {
    //查询所有书籍
    public List<Book> findAllBook();
    //按照书名查询
    public List<Book> findBookByName(String name);
    //增加书籍
    public int addBook(Book book);
    //删除书籍
    public int deleteBookByName(String name);
    //修改书籍
    public int updateBook(Book book);
}

service接口的实现类

package c201801020105cmengtao.service.impl;

import c201801020105cmengtao.dao.BookMapper;
import c201801020105cmengtao.pojo.Book;
import c201801020105cmengtao.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class BookServiceImpl implements BookService {
@Autowired
BookMapper bookMapper;
    @Override
    public List<Book> findAllBook() {
        return bookMapper.findAllBook();
    }

    @Override
    public List<Book> findBookByName(String name) {
        return bookMapper.findBookByName(name);
    }

    @Override
    public int addBook(Book book) {
   return    bookMapper.addBook(book);
    }

    @Override
    public int deleteBookByName(String name) {
        return bookMapper.deleteBookByName(name);
    }

    @Override
    public int updateBook(Book book) {
 return bookMapper.updateBook(book);
    }
}

controller

package c201801020105cmengtao.controller;

import c201801020105cmengtao.pojo.Book;
import c201801020105cmengtao.service.BookService;
import c201801020105cmengtao.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@CrossOrigin(origins = "*",maxAge = 3600)
@RestController
public class BookController {

@Autowired
BookService bookService;
//查询所有图书
   @RequestMapping("findAllBook")
    public Result findAllBook(){
          return  Result.ok().put("data",bookService.findAllBook());
   }

   //根据书名查询单个图书
   @RequestMapping("findBookByName/{bookname}")
   public Result findBookByName(@PathVariable  String bookname){
       return  Result.ok().put("data",bookService.findBookByName(bookname));
   }

   //增加图书
    @RequestMapping("addBook")
    public Result addBook(@RequestBody Book book) {

        int result = bookService.addBook(book);
        if (result > 0) {
            return Result.ok("操作成功");
        }
        return   Result.ok("操作失败");

    }
    //根据书名删除图书
    @RequestMapping("deleteBook/{bookname}")
    public Result deleteBook(@PathVariable String bookname){
        int result = bookService.deleteBookByName(bookname);
        if (result > 0) {
            return Result.ok("删除成功");
        }
        return   Result.ok("删除失败");
    }
    //根据书名修改图书
    @RequestMapping("updateBook")
    public Result  updateBook(@RequestBody Book book){
       int result=bookService.updateBook(book);
        if (result > 0) {
            return Result.ok("修改成功");
        }
        return   Result.ok("修改失败");
    }
}

utils（工具类）

处理各种异常的工具类

package c201801020105cmengtao.utils;


import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;

import java.sql.SQLException;

@ControllerAdvice
public class MyControllerAdvice {


    @ResponseBody
    @ExceptionHandler(value = SQLException.class)
    public Result sqlHandler(Exception ex) {
        return Result.error(501,"数据连接失败");
    }


    /**
     * 全局异常捕捉处理
     *
     * @param ex
     * @return
     */
    @ResponseBody
    @ExceptionHandler(value = Exception.class)
    public Result errorHandler(Exception ex) {
        return Result.error(510,ex.getMessage());
    }

}

返回数据封装类

package c201801020105cmengtao.utils;

import java.util.HashMap;
import java.util.Map;

/**
 * 返回数据封装类
 */
public class Result extends HashMap<String, Object> {
    private static final long serialVersionUID = 1L;

    public Result() {
        put("code", 0);
        put("msg", "success");
    }

    public static Result error() {
        return error(500, "未知异常，请联系管理员");
    }

    public static Result error(String msg) {
        return error(500, msg);
    }

    public static Result error(int code, String msg) {
        Result r = new Result();
        r.put("code", code);
        r.put("msg", msg);
        return r;
    }

    public static Result ok(String msg) {
        Result r = new Result();
        r.put("msg", msg);
        return r;
    }

    public static Result ok(Map<String, Object> map) {
        Result r = new Result();
        r.putAll(map);
        return r;
    }

    public static Result ok() {
        return new Result();
    }

    public Result put(String key, Object value) {
        super.put(key, value);
        return this;
    }
}

yml配置（包含端口的配置，数据库的配置等）

server:
  port: 8088
  servlet:
    context-path: /springboot
spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/bookstore?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: c201801020105cmengtao.pojo

#showSql
logging:
  level:
    com:
      hnucm:
        springboot: debug

数据库配置xml（包含数据库的增删改查操作）

这里的id是和dao里的方法名要一致，然后注意的是，查询语句就写在xml代码当中就可以了

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="c201801020105cmengtao.dao.BookMapper">
<!--    //查-->
    <select id="findAllBook" resultType="c201801020105cmengtao.pojo.Book">
    select  * from bookinfo;
</select>
<!--    查单个-->
<select id="findBookByName" resultType="c201801020105cmengtao.pojo.Book"  parameterType="String">
    select  * from bookinfo where bookname=#{name};
</select>
<!--增加-->
<insert id="addBook" parameterType="c201801020105cmengtao.pojo.Book">
insert into bookinfo(id,bookname,price,publicer) values  (#{id},#{bookname},#{price},#{publicer})
</insert>
<!--    根据书名删除元素-->
    <delete id="deleteBookByName" parameterType="String" >
        delete from bookinfo where bookname =#{bookname}
    </delete>
<!--    更新操作-->
    <update id="updateBook" parameterType="c201801020105cmengtao.pojo.Book">
        update bookinfo set bookname=#{bookname},price=#{price},publicer=#{publicer} where id=#{id};
    </update>
</mapper>

完整代码

图书管理系统练手项目

申明

如果下载不了，或者有什么技术意问，欢迎加群提问问题！

QQ群：1098392728