图书管理系统
纯后台的管理系统，管理员可以图书信息进行管理
管理信息： 图书，读者，借阅
业务功能分析
图书管理：
管理所有图书信息
书名，类型，出版社，数量，操作人，操作时间
读者管理：
姓名，性别，电话，住址，操作人，操作时间
借阅管理：
书名，读者，借书时间， 还书时间
数据库设计
1.系统管理员表
admins
id，account，password
2.图书表
books
id，name，classify，author，publish，quantity，adminid，oper_time
3.读者表
readers
id，name,gender,phong,address,adminid，oper_time
4.借阅表
borrow
id, bookid, readerid, start_time,end_time，adminid，oper_time
5.分类表
types
id，name
6.历史记录
id，id, bookid, readerid, start_time,end_time，adminid，oper_time
登录功能
前端准备
1.创建vue2.0 项目
2.导入npm i vue-router@3.5.3
3.src下创建 router目录，并在该目录下创建index.js 同时src下创建 Login 与 Main组件
4.在 index.js 中配置这两个组件
5.在main.js中配置
6.在 App.vue 中加入 <-router-view>标签
此时启动测试是否可正常跳转 成功进行 下一步
7.导入elementUI npm i element-ui -S
8.配置 elementUI
----------------- 4 ---------
import Vue from 'vue';
import router from 'vue-router';
import Login from "../Login.vue";
import Main from "../Main.vue";
Vue.use(router)
var rout=new router({
routes:[
{
path:'/login',
name:'name',
component:Login
},
{
path:'/main',
component:Main
}
]
});
export default rout;
---------------- 5 --------
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import router from './router/index.js';
Vue.use(router);
new Vue({
render: h => h(App),
router,
}).$mount('#app')
----------6----------
<div id="app">
<!-- 在此标签上，用来切换不同的组件 -->
<router-view>< /router-view>
</div>
----------8------------
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
后端准备
1.创建web 项目
2.在 web目录–>WEB-INF–> 创建lib目录 导入所需jar包
3.创建 所需的包 servlet，dao，model，filter，util
界面
<template>
<div class="login_container">
<div class="login_box">
<div class="head"> 图书管理系统</div>
<div style="margin-top: 5px; padding: 20px; margin-left: 0px;padding-left: 0px; padding-right: 40px;" router>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="账号">
<el-input v-model="form.account" suffix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="form.password" suffix-icon="el-icon-lock"></el-input>
</el-form-item>
<el-form-item style="padding-left: 50px;">
<el-button type="primary" @click="login()">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
account: "admin",
password: "111"
}
}
},
methods: {
login() {
this.$http.post("login", jsonToString(this.form)).then((resp) => {
if (resp.data.code == 200) {
this.$message({
showClose: true,
message: resp.data.message,
type: 'success'
});
sessionStorage.setItem("account", resp.data.data.account);
sessionStorage.setItem("adminToken", resp.data.data.token);
this.$router.push("/main")
}
if (resp.data.code == 201) {
this.$message({
message: resp.data.message,
type: 'warning'
});
}
if (resp.data.code == 500) {
this.$message.error(resp.data.message);
}
})
}
}
}
//将json对象序列化为键=值&键=值
function jsonToString(jsonobj) {
console.log(jsonobj)
var str = "";
for (var s in jsonobj) {
str += s + "=" + jsonobj[s] + "&";
}
return str.substring(0, str.length - 1);
}
</script>
<style>
.login_container {
height: 100vh;
margin: 0px;
padding: 0px;
background-image: url(assets/book1.jpg);
background-size: cover;
}
.login_box {
width: 400px;
height: 250px;
margin: auto;
border-radius: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0.95;
background-color: white;
}
.head {
text-align: center;
color: #409EFF;
font-size: 25px;
margin-top: 10px;
width: 200px;
margin-left: 100px;
border-radius: 5px;
}
</style>
<template>
<el-container>
<el-header>
<div style="width: 500px; display: inline-block; font-size: 26px;font-weight: 400; color: #ffffff; ">
图书管理系统后台
</div>
<div style="float: right; color: #ffffff;">
<i class="el-icon-user-solid " style="margin-right: 15px">
<span style="margin-right: 20px;">{{account}}</span>
<el-button size="small" type="danger" @click="exit()">退出</el-button>
</i>
</div>
</el-header>
<el-container>
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">导航一</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {
account: ""
}
},
methods: {
exit() {
this.$router.push("/login")
}
},
mounted() {
this.account = sessionStorage.getItem("account")
}
}
</script>
<style>
.el-header,
.el-footer {
background-color: #242f42;
color: #333;
line-height: 60px;
}
.el-aside {
background-color: #324157;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
</style>
登录操作
1.安装axios
npm install axios
import axios from 'axios';
axios.defaults.baseURL="http://127.0.0.1:8088/library/";
Vue.prototype.$http=axios;
2.发送请求
login() {
this.$http.post("login", jsonToString(this.form)).then((resp) => {
if (resp.data.code == 200) {
this.$message({
showClose: true,
message: resp.data.message
});
sessionStorage.setItem("account", resp.data.data.account);
sessionStorage.setItem("adminToken", resp.data.data.token);
this.$router.push("/main")
}
if (resp.data.code == 201) {
this.$message({
message: resp.data.message,
type: 'warning'
});
}
if (resp.data.code == 500) {
this.$message.error(resp.data.message);
}
})
}
接收账号
mounted() {
this.account = sessionStorage.getItem("account");
}
3.后端接收请求
后端接收到请求，经过过滤器，到对应的servlet中，调用dao层，返回对象
3.1 登录servlet
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ffyc.library.dao.LoginDao;
import com.ffyc.library.model.Admin;
import com.ffyc.library.model.CommonResult;
import com.ffyc.library.util.JWTUtil;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
public class LoginServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter printWriter= resp.getWriter();
CommonResult commonResult=null;
String account =req.getParameter("account");
String password=req.getParameter("password");
LoginDao loginDao=new LoginDao();
try {
Admin admin=loginDao.login(account,password);
if(admin!=null){
String token= JWTUtil.getToken(admin);
admin.setToken(token);
commonResult=new CommonResult(200,admin,"登陆成功");
}else {
commonResult=new CommonResult(201,"账号或密码错误");
}
} catch (Exception e) {
e.printStackTrace();
commonResult =new CommonResult(500,"系统忙");
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
printWriter.print(json);
}
}
3.2登录dao
import com.ffyc.library.model.Admin;
import com.ffyc.library.util.JdbcUtil;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class LoginDao {
public Admin login(String account,String password) throws SQLException {
Admin admin=null;
Connection connection=null;
PreparedStatement ps=null;
try {
connection = JdbcUtil.getConnection();
ps=connection.prepareStatement("SELECT * FROM admin WHERE account=? AND PASSWORD=?");
ps.setObject(1,account);
ps.setObject(2,password);
ResultSet res=ps.executeQuery();
while (res.next()){
admin=new Admin();
admin.setId(res.getInt("id"));
admin.setAccount(res.getString("account"));
}
}finally {
JdbcUtil.close(connection,ps);
}
return admin;
}
}
3.3管理员类
public class Admin {
private int id;
private String account;
private String password;
private String token;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getToken() {
return token;
}
public void setToken(String token) {
this.token = token;
}
}
3.4过滤器
字符过滤器
import javax.servlet.*;
import java.io.IOException;
public class EncodFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
servletRequest.setCharacterEncoding("utf-8");
servletResponse.setCharacterEncoding("utf-8");
filterChain.doFilter(servletRequest,servletResponse);
}
}
跨域过滤器
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
//允许携带Cookie时不能设置为* 否则前端报错
httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
filterChain.doFilter(servletRequest, servletResponse);
}
}
token过滤器
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ffyc.library.model.CommonResult;
import com.ffyc.library.util.JWTUtil;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.io.PrintWriter;
public class AdminTokenFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
//System.out.println("token过滤验证");
//接收请求头中的 adminToken
HttpServletRequest request=(HttpServletRequest)servletRequest;
String adminToken=request.getHeader("adminToken");
boolean verify= JWTUtil.verify(adminToken);
//System.out.println(verify+" 过滤器验证token");
if(verify){
//验证成功 继续向后执行
filterChain.doFilter(servletRequest, servletResponse);
}else {
//验证失败
servletResponse.setContentType("text/html;charset-utf-8");
PrintWriter printWriter= servletResponse.getWriter();
CommonResult commonResult=new CommonResult(401,"Token验证失败，请重新登录");//后端封装数据的公共类
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
printWriter.print(json);
}
}
}
3.5工具类
数据处理
public class CommonResult {
private int code;
private Object data;
private String message;
public CommonResult(int code, Object data, String message) {
this.code = code;
this.data = data;
this.message = message;
}
public CommonResult(int code, String message) {
this.code = code;
this.message = message;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
生成token
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.ffyc.library.model.Admin;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
/**
* JWT工具类
*/
public class JWTUtil {
/**
* 根据用户id,账号生成token
* @param
* @return
*/
public static String getToken(Admin admin) {
String token = "";
try {
//过期时间 为1970.1.1 0:0:0 至 过期时间 当前的毫秒值 + 有效时间
Date expireDate = new Date(new Date().getTime() + 300*1000);
//秘钥及加密算法
Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
//设置头部信息
Map<String,Object> header = new HashMap<>();
header.put("typ","JWT");
header.put("alg","HS256");
//携带id，账号信息，生成签名
token = JWT.create()
.withHeader(header)
.withClaim("id",admin.getId())
.withClaim("account",admin.getAccount())
.withExpiresAt(expireDate)
.sign(algorithm);
}catch (Exception e){
e.printStackTrace();
return null;
}
return token;
}
/**
* 验证token是否有效
* @param token
* @return
*/
public static boolean verify(String token){
try {
//验签
Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
JWTVerifier verifier = JWT.require(algorithm).build();
DecodedJWT jwt = verifier.verify(token);
return true;
} catch (Exception e) {//当传过来的token如果有问题,抛出异常
return false;
}
}
/**
* 获得token 中playload部分数据,按需使用
* @param token
* @return
*/
public static DecodedJWT getTokenInfo(String token){
return JWT.require(Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE")).build().verify(token);
}
}
jdbc封装
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
public class JdbcUtil {
static String url="jdbc:mysql://127.0.0.1:3306/librarydb?serverTimezone=Asia/Shanghai";
static String uname="root";
static String pwd="root";
static {
try {
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
//获取数据库连接对象
public static Connection getConnection() throws SQLException {
Connection connection= DriverManager.getConnection(url,uname,pwd);
return connection;
}
//
public static void close(Connection connection, PreparedStatement preparedStatement) throws SQLException {
if(connection!=null){
connection.close();
}
if(preparedStatement!=null){
preparedStatement.close();
}
}
}
3.6xml文件
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>com.ffyc.library.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<filter>
<filter-name>encodfilter</filter-name>
<filter-class>com.ffyc.library.filter.EncodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>encodfilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<filter-name>corsfilter</filter-name>
<filter-class>com.ffyc.library.filter.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>corsfilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<filter-name>AdminTokenFilter</filter-name>
<filter-class>com.ffyc.library.filter.AdminTokenFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>AdminTokenFilter</filter-name>
<url-pattern>/back/*</url-pattern>
</filter-mapping>
3.7 路由守卫
//路由导航守卫，每次发生路由跳转时，就会自动执行此段逻辑
rout.beforeEach((to, from, next) => {
if (to.path == '/login') {//如果用户访问的登录页， 直接放行
return next();//放行，
} else {
var token = sessionStorage.getItem("account");//从浏览器中取出用户信息
if (token == null) {
return next("/login");
} else {//已经登录过
next();
}
}
})
// 添加响应拦截器
axios.interceptors.response.use((resp) => { //正常响应拦截
if (resp.data.code == 500) {
ElementUI.Message({
message: resp.data.message,
type: "error"
})
}
if (resp.data.code == 401) {
ElementUI.Message({
message: resp.data.message,
type: "token验证失败"
})
router.replace("/login");
}
return resp;
});
图书管理
1.前端
1.1 路由嵌套
在src 中 创建views 目录，为图书管理创建 books目录，创建List组件显示图书，Add，Udate 为新增 修改图书。
为组件进行路由配置， 配置映射地址时，使用路由嵌套。 在index.js中
/* 导入自己的组件 */
import Login from "../Login.vue";
import Main from "../Main.vue"; // ../上一级目录中找
import BuildList from "../views/build/List.vue";
import Dorm_adminList from "../views/dorm_admin/List.vue";
import Dorm from "../views/dorm/List.vue";
import Record from "../views/record/List.vue";
import Search from "../views/search.vue";
import Inspect from "../views/inspect/List.vue";
Vue.use(router) //vue支持使用router组件
/* 定义组件路由 */
var rout = new router({ //新建router对象
routes: [ //组件映射
{
path: '/login', //为组件定义地址
name: 'name', //组件起名 可不写
component: Login //对应那个组件
},
{
path: '/main',
component: Main,
children:[
{
path:"/build",
component:BuildList
},
{
path:"/dorm_admin",
component:Dorm_adminList
},
{
path:"/dorm",
component:Dorm
},
{
path:"/record",
component:Record
},
{
path:"/search",
component:Search
},
{
path:"/inspect",
component:Inspect
}
]
}
]
});
//导出路由对象
export default rout;
1.2Books界面
首先根据，点击图书管理，使用生命周期函数，从后端查询出所有图书，界面中显示。
查询根据给出的关键词，进行模糊查询并重新显示。
删除 使用后端返回但未显示的id 进行删除操作。
新增与修改 使用弹框的形式，通过点击打开弹框，修改时 需先根据id 将查询的数据 填充到框内。
在对图类别进行选择时，要先查出所有的类别，在进行下拉显示，先后端传入的为所分类的id。
list
<template>
<div>
<div style="height: 50px;">
<el-form :inline="true" class="demo-form-inline" style="text-align: left;">
<el-form-item>
<el-input v-model="sear" placeholder="书名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()">
搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="openAdd()" icon="el-icon-circle-plus-outline">
新增</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="bookList" border="" style="width: 100% ; ">
<el-table-column style="height: 0%;" type="index" width="50" label="序号">
</el-table-column>
<el-table-column prop="name" label="书名" width="180">
</el-table-column>
<el-table-column prop="author" label="作者" width="180">
</el-table-column>
<el-table-column prop="classify" label="类别">
</el-table-column>
<el-table-column prop="publish" label="出版社">
</el-table-column>
<el-table-column prop="quantity" label="数量">
</el-table-column>
<el-table-column prop="admin" label="操作人">
</el-table-column>
<el-table-column prop="time" label="操作时间">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="updatebook(scope.row.id)">编辑</el-button>
<el-button size="mini" type="danger" @click="deletebook(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<Add ref="add"></Add>
<Update ref="update"></Update>
</div>
</template>
<script>
import Add from './Add.vue';
import Update from './Update.vue';
export default {
components: { //注册组件
Add,
Update
},
data() {
return {
bookList: [],
sear: ""
}
},
methods: {
openAdd() {
this.$refs.add.dialogFormVisible = true;
},
deletebook(id) {
this.$confirm('此操作将永久删除该图书, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http.get("back/book?mark=deletebook&id=" + id).then((resp) => {
if (resp.data.code == 200) {
this.$router.go()
}
})
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
updatebook(id){
this.$refs.update.dialogFormVisible = true;
this.$refs.update.findbook(id);
},
search(){
console.log(this.sear)
this.$http.get("back/book?mark=findbooks&name="+this.sear).then((resp) => {
if(resp.data.code==200){
this.bookList = resp.data.data;
}
})
}
},
mounted() {
this.$http.get("back/book?mark=booklist").then((resp) => {
if (resp.data.code == 200) {
this.bookList = resp.data.data;
}
})
}
}
function jsonToString(jsonobj) {
console.log(jsonobj)
var str = "";
for (var s in jsonobj) {
str += s + "=" + jsonobj[s] + "&";
}
return str.substring(0, str.length - 1);
}
</script>
<style>
</style>
Add
<template>
<el-dialog title="新增图书" :visible.sync="dialogFormVisible">
<el-form ref="form" :model="form">
<el-form-item label="书名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="form.author" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="类别">
<el-select v-model="form.classid" placeholder="请选择">
<el-option v-for="item in classiList" :key="item.id" :label="item.classify" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="出版社">
<el-input v-model="form.publish" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="数量">
<el-input v-model="form.num" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addbook()">保存</el-button>
<el-button @click="dialogFormVisible=false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogFormVisible: false,
classiList: [],
classify: "",
form: {
name: "",
author: "",
classid: "",
publish: "",
num: "",
mark: "add"
}
}
},
methods: {
addbook() {
this.$http.post("back/book", jsonToString(this.form)).then((resp) => {
this.$message({
message: '保存成功',
type: 'success'
});
this.dialogFormVisible=false;
this.$router.go();
})
}
},
mounted() {
this.$http.get("back/book?mark=classlist").then((resp) => {
if (resp.data.code == 200) {
this.classiList = resp.data.data;
}
})
}
}
function jsonToString(jsonobj) {
console.log(jsonobj)
var str = "";
for (var s in jsonobj) {
str += s + "=" + jsonobj[s] + "&";
}
return str.substring(0, str.length - 1);
}
</script>
<style>
</style>
Update
<template>
<el-dialog title="修改图书" :visible.sync="dialogFormVisible">
<el-form ref="form" :model="form">
<el-form-item label="书名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="form.author" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="类别">
<el-select v-model="form.classid" placeholder="请选择">
<el-option v-for="item in classiList" :key="item.id" :label="item.classify" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="出版社">
<el-input v-model="form.publish" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="数量">
<el-input v-model="form.num" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updatebook()">保存</el-button>
<el-button @click="dialogFormVisible=false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogFormVisible: false,
classiList: [],
classify: "",
form: {
id:"",
name: "",
author: "",
classid: "",
publish: "",
num: "",
mark: "update"
}
}
},
methods: {
findbook(id){
this.$http.get("back/book?mark=findbook&id=" + id).then((resp) => {
if(resp.data.code==200){
this.form.id=resp.data.data.id;
this.form.name=resp.data.data.name;
this.form.author=resp.data.data.author;
this.form.classid=resp.data.data.classid;
this.form.publish=resp.data.data.publish;
this.form.num=resp.data.data.quantity;
}
})
},
updatebook(){
this.$http.post("back/book", jsonToString(this.form)).then((resp) => {
if (resp.data.code == 200) {
this.$message({
showClose: true,
message: resp.data.message,
type: 'success'
});
this.dialogFormVisible=false;
this.$router.go();
}
})
}
},
mounted() {
this.$http.get("back/book?mark=classlist").then((resp) => {
if (resp.data.code == 200) {
this.classiList = resp.data.data;
}
})
}
}
function jsonToString(jsonobj) {
console.log(jsonobj)
var str = "";
for (var s in jsonobj) {
str += s + "=" + jsonobj[s] + "&";
}
return str.substring(0, str.length - 1);
}
</script>
<style>
</style>
2.后端
2.1 servlet
import com.auth0.jwt.interfaces.DecodedJWT;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ffyc.library.dao.BookDao;
import com.ffyc.library.model.Book;
import com.ffyc.library.model.Classify;
import com.ffyc.library.model.CommonResult;
import com.ffyc.library.util.JWTUtil;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;
public class BookServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String mark=req.getParameter("mark");
if(mark.equals("booklist")){
BookList(req,resp);
}
if(mark.equals("classlist")){
ClassList(req,resp);
}
if(mark.equals("deletebook")){
Deletebook(req,resp);
}
if(mark.equals("findbook")){
Findbook(req,resp);
}
if(mark.equals("findbooks")){
Findbooks(req,resp);
}
}
private void Findbooks(HttpServletRequest req, HttpServletResponse resp) throws IOException {
String name=req.getParameter("name");
PrintWriter printWriter= resp.getWriter();
CommonResult commonResult=null;
BookDao bookDao=new BookDao();
try {
List books=bookDao.findBooks(name);
commonResult=new CommonResult(200,books,"已找到");
}catch (Exception e) {
commonResult=new CommonResult(200,"系统忙");
e.printStackTrace();
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
printWriter.print(json);
}
private void Findbook(HttpServletRequest req, HttpServletResponse resp) throws IOException {
String id=req.getParameter("id");
PrintWriter printWriter= resp.getWriter();
CommonResult commonResult=null;
BookDao bookDao=new BookDao();
try {
Book book=bookDao.findBook(id);
commonResult=new CommonResult(200,book,"已找到");
}catch (Exception e) {
commonResult=new CommonResult(200,"系统忙");
e.printStackTrace();
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
printWriter.print(json);
}
private void Deletebook(HttpServletRequest req, HttpServletResponse resp) throws IOException {
String id=req.getParameter("id");
PrintWriter printWriter= resp.getWriter();
CommonResult commonResult=null;
BookDao bookDao=new BookDao();
try {
bookDao.deleteBook(id);
commonResult=new CommonResult(200,"删除成功");
}catch (Exception e) {
commonResult=new CommonResult(200,"系统忙");
e.printStackTrace();
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
printWriter.print(json);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String mark=req.getParameter("mark");
if(mark.equals("add")){
AddBook(req,resp);
}
if(mark.equals("update")){
UpdateBook(req,resp);
}
}
private void UpdateBook(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter printWriter= resp.getWriter();
CommonResult commonResult=null;
BookDao bookDao=new BookDao();
String id=req.getParameter("id");
String name=req.getParameter("name");
String author=req.getParameter("author");
String classid=req.getParameter("classid");
String publish=req.getParameter("publish");
String num=req.getParameter("num");
String adminToken=req.getHeader("adminToken");
DecodedJWT decodedJWT= JWTUtil.getTokenInfo(adminToken);
Integer adminid=decodedJWT.getClaim("id").asInt();
try {
bookDao.updateBook(id,name,author,classid,publish,num,adminid);
commonResult=new CommonResult(200,"修改成功");
} catch (Exception e) {
commonResult=new CommonResult(200,"系统忙");
e.printStackTrace();
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
printWriter.print(json);
}
private void AddBook(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter printWriter= resp.getWriter();
CommonResult commonResult=null;
BookDao bookDao=new BookDao();
String name=req.getParameter("name");
String author=req.getParameter("author");
String classid=req.getParameter("classid");
String publish=req.getParameter("publish");
String num=req.getParameter("num");
String adminToken=req.getHeader("adminToken");
DecodedJWT decodedJWT= JWTUtil.getTokenInfo(adminToken);
Integer adminid=decodedJWT.getClaim("id").asInt();
try {
bookDao.addBook(name,author,classid,publish,num,adminid);
commonResult=new CommonResult(200,"添加成功");
} catch (Exception e) {
commonResult=new CommonResult(200,"系统忙");
e.printStackTrace();
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
printWriter.print(json);
}
private void ClassList(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter printWriter=resp.getWriter();
CommonResult commonResult=null;
BookDao bookDao=new BookDao();
try {
List<Classify> classes = bookDao.classList();
commonResult=new CommonResult(200,classes,"ok");
} catch (Exception e) {
commonResult=new CommonResult(200,"系统忙");
e.printStackTrace();
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
printWriter.print(json);
}
private void BookList(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter printWriter=resp.getWriter();
CommonResult commonResult=null;
BookDao bookDao=new BookDao();
try {
List<Book> books = bookDao.bookList();
commonResult=new CommonResult(200,books,"ok");
} catch (Exception e) {
commonResult=new CommonResult(200,"系统忙");
e.printStackTrace();
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
printWriter.print(json);
}
}
2.2 Dao
import com.ffyc.library.model.Book;
import com.ffyc.library.model.Classify;
import com.ffyc.library.util.JdbcUtil;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class BookDao {
public List<Book> bookList() throws SQLException {
List<Book> books = new ArrayList<>();
Connection connection=null;
PreparedStatement ps=null;
try {
connection= JdbcUtil.getConnection();
ps=connection.prepareStatement("SELECT b.id,b.NAME,b.author,b.publish,b.quantity,b.opertime,a.account,c.classify from books b \n" +
"\tLEFT JOIN classes c ON c.id=b.classid\n" +
"\tLEFT JOIN admin a ON a.id=b.adminid ");
ResultSet res=ps.executeQuery();
while (res.next()){
Book book = new Book();
book.setId(res.getInt("id"));
book.setName(res.getString("name"));
book.setAuthor(res.getString("author"));
book.setClassify(res.getString("classify"));
book.setPublish(res.getString("publish"));
book.setQuantity(res.getInt("quantity"));
book.setAdmin(res.getString("account"));
book.setTime(res.getDate("opertime"));
books.add(book);
}
}finally {
JdbcUtil.close(connection,ps);
}
return books;
}
public List<Classify> classList() throws SQLException {
List<Classify> classes = new ArrayList<>();
Connection connection=null;
PreparedStatement ps=null;
try {
connection= JdbcUtil.getConnection();
ps=connection.prepareStatement("SELECT * FROM classes ");
ResultSet res=ps.executeQuery();
while (res.next()){
Classify classify = new Classify();
classify.setId(res.getInt("id"));
classify.setClassify(res.getString("classify"));
classes.add(classify);
}
}finally {
JdbcUtil.close(connection,ps);
}
return classes;
}
public void addBook(String name, String author, String classid, String publish, String num,Integer adminid) throws SQLException {
Connection connection=null;
PreparedStatement ps=null;
try {
connection=JdbcUtil.getConnection();
ps=connection.prepareStatement("INSERT INTO books (name,classid,author,publish,quantity,adminid,opertime) VALUES(?,?,?,?,?,?,NOW())");
ps.setObject(1,name);
ps.setObject(2,classid);
ps.setObject(3,author);
ps.setObject(4,publish);
ps.setObject(5,num);
ps.setObject(6,adminid);
ps.executeUpdate();
} finally {
JdbcUtil.close(connection,ps);
}
}
public void deleteBook(String id) throws SQLException {
Connection connection=null;
PreparedStatement ps=null;
try {
connection=JdbcUtil.getConnection();
ps=connection.prepareStatement("DELETE FROM books WHERE id=?");
ps.setObject(1,id);
ps.executeUpdate();
} finally {
JdbcUtil.close(connection,ps);
}
}
public Book findBook(String id) throws SQLException {
Connection connection=null;
PreparedStatement ps=null;
Book book = new Book();
try {
connection = JdbcUtil.getConnection();
ps = connection.prepareStatement("SELECT * from books where id=?");
ps.setObject(1, id);
ResultSet res = ps.executeQuery();
while (res.next()) {
book.setId(res.getInt("id"));
book.setName(res.getString("name"));
book.setAuthor(res.getString("author"));
book.setClassid(res.getInt("classid"));
book.setPublish(res.getString("publish"));
book.setQuantity(res.getInt("quantity"));
}
}finally {
JdbcUtil.close(connection,ps);
}
return book;
}
public void updateBook(String id, String name, String author, String classid, String publish, String num, Integer adminid) throws SQLException {
Connection connection=null;
PreparedStatement ps=null;
try {
connection=JdbcUtil.getConnection();
System.out.println("aaaaa");
ps=connection.prepareStatement("UPDATE books SET name=?,author=?,publish=?,classid=?,quantity=?,adminid=?,opertime=NOW() WHERE id=?");
ps.setObject(1,name);
ps.setObject(2,author);
ps.setObject(3,publish);
ps.setObject(4,classid);
ps.setObject(5,num);
ps.setObject(6,adminid);
ps.setObject(7,id);
ps.executeUpdate();
} finally {
JdbcUtil.close(connection,ps);
}
}
public List<Book> findBooks(String name) throws SQLException {
List<Book> books = new ArrayList<>();
Connection connection=null;
PreparedStatement ps=null;
try {
connection= JdbcUtil.getConnection();
ps=connection.prepareStatement("SELECT b.id,b.NAME,b.author,b.publish,b.quantity,b.opertime,a.account,c.classify from books b \n" +
" LEFT JOIN classes c ON c.id=b.classid\n" +
" LEFT JOIN admin a ON a.id=b.adminid where b.name like ? OR b.author like ? OR b.publish like ?");
ps.setObject(1,"%"+name+"%");
ps.setObject(2,"%"+name+"%");
ps.setObject(3,"%"+name+"%");
ResultSet res=ps.executeQuery();
while (res.next()){
Book book = new Book();
book.setId(res.getInt("id"));
book.setName(res.getString("name"));
book.setAuthor(res.getString("author"));
book.setClassify(res.getString("classify"));
book.setPublish(res.getString("publish"));
book.setQuantity(res.getInt("quantity"));
book.setAdmin(res.getString("account"));
book.setTime(res.getDate("opertime"));
books.add(book);
}
}finally {
JdbcUtil.close(connection,ps);
}
return books;
}
}
2.3 model
import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;
public class Book {
private int id;
private String name;
private String author;
private String classify;
private int classid;
private String publish;
private int quantity;
private String admin;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
private Date time;
public int getId() {
return id;
}
public int getClassid() {
return classid;
}
public void setClassid(int classid) {
this.classid = classid;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public String getClassify() {
return classify;
}
public void setClassify(String classify) {
this.classify = classify;
}
public String getPublish() {
return publish;
}
public void setPublish(String publish) {
this.publish = publish;
}
public int getQuantity() {
return quantity;
}
public void setQuantity(int quantity) {
this.quantity = quantity;
}
public String getAdmin() {
return admin;
}
public void setAdmin(String admin) {
this.admin = admin;
}
public Date getTime() {
return time;
}
public void setTime(Date time) {
this.time = time;
}
}
public class Classify {
private int id;
private String classify;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getClassify() {
return classify;
}
public void setClassify(String classify) {
this.classify = classify;
}
}
总结
前端 报错405----> 可能后端 xml文件中的 地址出错
后端查询后，不显示列表 在Main组件中的菜单标签中 加入 router
在运行时浏览器内报错，注意把从 elementUI代码中 没有的属性删除
其余板块可根据图书管理，进行实现
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
