前后端分离实现springboot+mybatis+Vue.js的图书管理系统

逆风boy
187 阅读4分钟

图书管理系统（springboot+mybatis+vue）

项目说明

  • 此项目为图书管理系统后台，使采用的是springboot+mybatis等技术实现数据持久化以及api服务调用，
    前台使用vue.js,vue-resource,vue-router,iView2.0UI框架,vue-quill-editor等技术实现前台页面，前台地址是:[Vue-iView-Demo]
    项目下载地址：gitee.com/huang_yuze/…
  • 由于前期没有上传后台项目springboot的application.porperties文件，故此次一并上传，大家就不必到issue中寻找了。

项目启动

  • 1.数据库：mysql5.6执行以下脚本,前台项目下脚本文件–sbm.sql （数据库脚本在前台项目下，请移步：[Vue-iView-Demo]
  • 2.后台启动：导入项目，进入控制台，到项目所在路径，执行命令：mvn clean spring-boot:run
  • 3.前台启动：导入项目，进入控制台，到项目所在路径，执行命令：npm run dev，访问地址：http://localhost:8075 进入到登录界面，打开数据库中t_reader表获取用户名和密码

效果展示

在这里插入图片描述

tip

鉴于star该项目的同学越来越多，鄙人觉得应当补充以上信息供大家交流学习，如果大家有任何建议均可issue，一定尽一切办法解决各位的问题，希望大家一起进步，oh yeah!

项目代码实现：
Controller类：
package com.lin.appapidemo.controller.shixun;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.lin.appapidemo.mapper.shixun.AlbumMapper;
import com.lin.appapidemo.mapper.shixun.BorrowrecordMapper;
import com.lin.appapidemo.mapper.shixun.ReaderMapper;
import com.lin.appapidemo.mapper.shixun.SubalbumMapper;
import com.lin.appapidemo.model.shixun.Album;
import com.lin.appapidemo.model.shixun.Borrowrecord;
import com.lin.appapidemo.model.shixun.Reader;
import com.lin.appapidemo.model.shixun.Subalbum;
import com.lin.appapidemo.util.DateTimeUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
@RequestMapping("/excise")
public class ExciseController {
@Autowired(required = false)
private ReaderMapper readerMapper;
@Autowired(required = false)
private AlbumMapper albumMapper;
@Autowired(required = false)
private SubalbumMapper subalbumMapper;
@Autowired(required = false)
private BorrowrecordMapper borrowrecordMapper;

@RequestMapping(value = "/login",method = RequestMethod.POST)
public Map<String,Object> login(@RequestParam("account")String account,@RequestParam("password")String password){
    Map<String,Object> map=new HashMap<>();
    Reader reader=readerMapper.selectWholeByAccount(account);
    if(reader!=null){
        System.out.println("hahaha"+reader.getPassword().equals(password));
        if(reader.getPassword().equals(password)){
            System.out.println("hahaha"+reader.getPassword().equals(password));
            map.put("result","yes");
            map.put("loginUser",reader);
            if(reader.getCondi()==0){
                map.put("condi",0);
            }else if(reader.getCondi()==1){
                map.put("condi",1);
            }else{
                map.put("condi",2);
            }
            return map;
        }
    }
    map.put("result","no");
    return map;
}

@RequestMapping(value = "/getAllReaders",method = RequestMethod.POST)
public Map<String,Object> getAllReaders(@RequestParam("account")String account,@RequestParam("currentPage")int currentPage){
    Map<String,Object> map=new HashMap<>();
    PageHelper.startPage(currentPage,10);
    List<Reader> list=readerMapper.selectByAccount(account);
    PageInfo<Reader> pageInfo=new PageInfo<>(list);
    map.put("readers",list);
    map.put("pageInfo",pageInfo);
    return map;
}

@RequestMapping(value = "/getAllAlbums",method = RequestMethod.POST)
public Map<String,Object> getAllAlbums(@RequestParam("title")String title,@RequestParam("currentPage")int currentPage){
    Map<String,Object> map=new HashMap<>();
    PageHelper.startPage(currentPage,10);
    List<Album> list=albumMapper.selectByTitle(title);
    PageInfo<Album> pageInfo=new PageInfo<>(list);
    map.put("pageInfo",pageInfo);
    map.put("albums",list);
    return map;
}

@RequestMapping(value = "/getAllBorrowRecords",method = RequestMethod.POST)
public Map<String,Object> getAllBorrowRecords(@RequestParam("raccount")String raccount,@RequestParam("currentPage")int currentPage){
    Map<String,Object> map=new HashMap<>();
    PageHelper.startPage(currentPage,10);
    List<Borrowrecord> list=borrowrecordMapper.selectAllInfoByRaccount(raccount);
    PageInfo<Borrowrecord> pageInfo=new PageInfo<>(list);
    map.put("pageInfo",pageInfo);
    map.put("borrowrecords",list);
    return map;
}

@RequestMapping(value = "/addReader",method = RequestMethod.POST)
public Map<String,Object> addReader(@RequestParam("account")String account,@RequestParam("name")String name,@RequestParam("sex")String sex,@RequestParam("condi")int condi){
    Map<String,Object> map=new HashMap<>();
    if(readerMapper.selectWholeByAccount(account)!=null){
        map.put("status","no");
    }else{
        readerMapper.insert(new Reader(account,account,name,sex, DateTimeUtil.getDate(),condi));
        map.put("status","ok");
    }
    return map;
}
@RequestMapping(value = "/addAlbum",method = RequestMethod.POST)
public Map<String,Object> addAlbum(@RequestParam("title")String title,@RequestParam("author")String author,@RequestParam("publisher")String publisher,@RequestParam("publishtime")String publishtime,@RequestParam("descri")String descri){
    Map<String,Object> map=new HashMap<>();
    albumMapper.insert(new Album(title,author,publisher,publishtime,0,descri,DateTimeUtil.getDate()));
    map.put("status","ok");
    return map;
}
@RequestMapping(value = "/addSubAlbum",method = RequestMethod.POST)
public Map<String,Object> addSubAlbum(@RequestParam("aid")int aid,@RequestParam("number")String number){
    Map<String,Object> map=new HashMap<>();
    if(subalbumMapper.selectByNumber(number)!=null){
        map.put("status","no");
    }else{
        Album album=albumMapper.selectById(aid);
        album.setNum(album.getNum()+1);
        albumMapper.updateByPrimaryKey(album);
        subalbumMapper.insert(new Subalbum(aid,number,0,DateTimeUtil.getDate()));
        map.put("status","ok");
    }
    return map;
}
@RequestMapping(value = "/borrow",method = RequestMethod.POST)
public Map<String,Object> borrow(@RequestParam("aid")int aid,@RequestParam("rid")int rid,@RequestParam("raccount")String raccount){
    Map<String,Object> map=new HashMap<>();
    if(rid!=0){
        Album album=albumMapper.selectById(aid);
        int count=0;
        //找到可借的那本书编号id
        int enableborrowSAid=0;
        for(int i=0,len=album.getSubalbums().size();i<len;i++){
            if(album.getSubalbums().get(i).getCondi()==0){
                enableborrowSAid=album.getSubalbums().get(i).getSid();
                count++;
            }
        }
        if(count!=0){
            map.put("status","ok");
            Borrowrecord borrowrecord=new Borrowrecord(rid,raccount,aid,enableborrowSAid,DateTimeUtil.getDate(),DateTimeUtil.getDateAfter15(),DateTimeUtil.getDateNumber());
            borrowrecordMapper.insert(borrowrecord);
            Subalbum subalbum=subalbumMapper.selectById(enableborrowSAid);
            subalbum.setCondi(1);
            subalbumMapper.updateByPrimaryKey(subalbum);
        }else{
            map.put("status","no");
        }
    }
    return map;
}
@RequestMapping(value = "/reback",method = RequestMethod.POST)
public Map<String,Object> reback(@RequestParam("bid")int bid,@RequestParam("sid")int sid){
    Map<String,Object> map=new HashMap<>();
    if(bid!=0&&sid!=0){
        borrowrecordMapper.delete(borrowrecordMapper.selectByPrimaryKey(bid));
        Subalbum subalbum=subalbumMapper.selectByPrimaryKey(sid);
        subalbum.setCondi(0);
        subalbumMapper.updateByPrimaryKey(subalbum);
        map.put("status","yes");
    }else{
        map.put("status","no");
    }

    return map;
}

}

Mapper类：
package com.lin.appapidemo.mapper.shixun;

import com.lin.appapidemo.model.shixun.Album;
import com.lin.appapidemo.model.shixun.Borrowrecord;
import com.lin.appapidemo.util.MyMapper;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface AlbumMapper extends MyMapper{
@Select(“select * from t_album where aid=#{aid}”)
@Results({
@Result(id=true,column=“aid”,property = “aid”),
@Result(column = “title”,property = “title”),
@Result(column = “author”,property = “author”),
@Result(column = “publisher”,property = “publisher”),
@Result(column = “publishtime”,property = “publishtime”),
@Result(column = “num”,property = “num”),
@Result(column = “descri”,property = “descri”),
@Result(column = “time”,property = “time”),
@Result(column=“aid”,property = “subalbums”,
many=@Many(select=“com.lin.appapidemo.mapper.shixun.SubalbumMapper.selectByAid”)
)
})
Album selectById(@Param(“aid”) int aid);
/**
*根据图书title模糊查询，及该图书所有的副本编号
*@params:
*@return:
*@date: 22:00 2018/1/11
**/
@Select(" "
)
@Results({
@Result(id=true,column=“aid”,property = “aid”),
@Result(column = “title”,property = “title”),
@Result(column = “author”,property = “author”),
@Result(column = “publisher”,property = “publisher”),
@Result(column = “publishtime”,property = “publishtime”),
@Result(column = “num”,property = “num”),
@Result(column = “descri”,property = “descri”),
@Result(column = “time”,property = “time”),
@Result(column=“aid”,property = “subalbums”,
many=@Many(select=“com.lin.appapidemo.mapper.shixun.SubalbumMapper.selectByAid”)
)
})
List selectByTitle(@Param(“title”)String title);
}

Brrowedbook的接口：
package com.lin.appapidemo.mapper.shixun;

import com.lin.appapidemo.model.shixun.Borrowrecord;
import com.lin.appapidemo.util.MyMapper;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface BorrowrecordMapper extends MyMapper{
@Select(" "
)
@Results({
@Result(id=true,column=“bid”,property = “bid”),
@Result(column = “rid”,property = “rid”),
@Result(column = “raccount”,property = “raccount”),
@Result(column = “aid”,property = “aid”),
@Result(column = “sid”,property = “sid”),
@Result(column = “time”,property = “time”),
@Result(column = “inttime”,property = “inttime”),
@Result(column=“rid”,property = “reader”,
one=@One(select=“com.lin.appapidemo.mapper.shixun.ReaderMapper.selectById”)
),
@Result(column=“aid”,property = “album”,
one=@One(select=“com.lin.appapidemo.mapper.shixun.AlbumMapper.selectById”)
),
@Result(column=“sid”,property = “subalbum”,
one=@One(select=“com.lin.appapidemo.mapper.shixun.SubalbumMapper.selectById”)
)
})
List selectAllInfoByRaccount(@Param(“raccount”)String raccount);
}

后端服务开启项目：
在这里插入图片描述
前台实现步骤：
安装HbuilderX编写代码工具+node.js工具
然后导入项目就能实现

前台注意事项：
src:撸码的地方～基本你所有的代码都在这一块完成。

assets:存放web中引用的图片 媒体资源。

components:主要存放可复用组件，你可以在任意页面中复用这些组件。

router文件夹：index.js 路由配置文件。在此处配置各个页面的跳转引用关系。

APP.vue:项目入口文件，相当于一个组件，页面的根部。我们可以在这个页面进行一些css reset 操作。

main.js：项目的核心文件，根逻辑，页面加载首先会加载这份js文件。

static：主要存放外部引用资源（静态资源目录）。比如xxx.min.js

index.html：首页入口文件

package.json：项目配置文件

前端实现代码：
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import Global from ‘./components/util/Global’

Vue.prototype.GLOBAL = Global
Vue.config.productionTip = false

// 设置请求头部content-type:application/x-www-form-urlencoded
// Vue.http.options.emulateJSON = true
// Vue.http.options.emulateHTTP = true
// Vue.http.options.xhr = { withCredentials: true }

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
template: ‘’,
components: { App }
})

页面App.vue代码:\

开启外部终端：
在这里插入图片描述
前台效果展示：
在这里插入图片描述
登录账号信息在数据库中

avatar
文章
阅读
粉丝