文章目录
前言
最近写了个课设，刚好刚学完javaweb需要巩固一下，课设内容是java增删改查，想睡觉有人送枕头了属于是，这里我是实现了增删改查，删除那里我就偷懒了，只写了批量删除。（实际上就是黑马项目套皮，不过我实现了修改功能，还是有点价值滴）
项目逻辑
后端写好Servlet服务，前端通过ajax申请服务，并将表中数据通过Servlet与后台数据库交互，从而达到前端和后端互通的效果。
一、Mapper层实现代码
1.BookMapper.class
代码如下（示例）：
package com.MyJavaClass.mapper;
import com.MyJavaClass.pojo.Book;
import org.apache.ibatis.annotations.*;
import java.util.List;
public interface BookMapper {
@Select("select * from books")
List<Book> selectAll();
@Insert("insert into books values(null,#{bookName},#{writer},#{user},#{number},#{state})")
void add(Book book);
List<Book> selectBycondition();
void deleteByIds(@Param("ids")int[] ids);
@Select("select * from books limit #{begin}, #{size}")
List<Book> selectByPage(@Param("begin")int begin,@Param("size") int size);
@Select("select count(*) from books")
int selectTotalCount();
List<Book> selectByPageAndCondition(@Param("begin") int begin,@Param("size") int size,@Param("book") Book book);
int selectTotalCountByCondition(Book book);
@Update("update books set bookName = #{bookName}, writer = #{writer},user = #{user}, number = #{number}, state = #{state} where id = #{id}")
void updateById(Book book);
}
2.BookMapper.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="com.MyJavaClass.mapper.BookMapper">
<select id="selectBycondition" resultType="com.MyJavaClass.pojo.Book">
select * from books
<where>
<if test=""></if>
</where>
</select>
<delete id="deleteByIds">
delete from books where id in
<foreach collection="ids" item="id" separator="," open="(" close=")">
#{
id}
</foreach>
</delete>
<select id="selectByPageAndCondition" resultType="com.MyJavaClass.pojo.Book">
select * from books
<where>
<if test="book.number != null and book.number != '' ">
and number like #{
book.number}
</if>
<if test="book.bookName != null and book.bookName != '' ">
and bookName like #{
book.bookName}
</if>
<if test="book.writer != null and book.writer != '' ">
and writer like #{
book.writer}
</if>
<if test="book.state != null">
and state = #{
book.state}
</if>
</where>
limit #{
begin},#{
size}
</select>
<select id="selectTotalCountByCondition" resultType="java.lang.Integer">
select count(*)
from books
<where>
<if test="number != null and number != '' ">
and number like #{
number}
</if>
<if test="bookName != null and bookName != '' ">
and bookName like #{
bookName}
</if>
<if test="writer != null and writer != '' ">
and writer like #{
book.writer}
</if>
<if test="state != null">
and state = #{
state}
</if>
</where>
</select>
</mapper>
二、Book数据类型
1.Book.class
Integer id;
String number;
String bookName ;
String writer ;
String user ;
Integer state ;
2.MySQL
id int PRIMARY KEY auto_increment,
bookName varchar(20),
writer varchar(20),
user varchar(20),
number varchar(20),
state INT
三、Service层
1、Service接口
文件名：BookService
package com.MyJavaClass.service;
import com.MyJavaClass.pojo.Book;
import com.MyJavaClass.pojo.PageBean;
import java.util.List;
public interface BookService {
List<Book> selectAll();
void add(Book book);
void deleteByIds(int[] ids);
PageBean<Book> selectByPage(int currentPage,int pageSize);
PageBean<Book> selectByPageAndCondition(int currentPage,int pageSize,Book book);
void updateById(Book book);
}
2、Service实现类
文件名：BookServiceimpl
package com.MyJavaClass.service.impl;
import com.MyJavaClass.mapper.BookMapper;
import com.MyJavaClass.pojo.Book;
import com.MyJavaClass.pojo.PageBean;
import com.MyJavaClass.service.BookService;
import com.MyJavaClass.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import java.util.List;
public class BookServiceimpl implements BookService {
SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
public List<Book> selectAll(){
SqlSession sqlSession = factory.openSession();
BookMapper bookMapper = sqlSession.getMapper(BookMapper.class);
List<Book> books = bookMapper.selectAll();
sqlSession.close();
return books;
}
public void add(Book book){
SqlSession sqlSession = factory.openSession();
BookMapper bookMapper = sqlSession.getMapper(BookMapper.class);
bookMapper.add(book);
sqlSession.commit();
sqlSession.close();
}
public void deleteByIds(int[] ids){
SqlSession sqlSession = factory.openSession();
BookMapper bookMapper = sqlSession.getMapper(BookMapper.class);
bookMapper.deleteByIds(ids);
sqlSession.commit();
sqlSession.close();
}
@Override
public PageBean<Book> selectByPage(int currentPage, int pageSize) {
SqlSession sqlSession = factory.openSession();
BookMapper bookMapper = sqlSession.getMapper(BookMapper.class);
int begin = (currentPage - 1) * pageSize;
int size = pageSize;
List<Book> rows = bookMapper.selectByPage(begin,size);
int totalCount = bookMapper.selectTotalCount();
PageBean<Book> pageBean = new PageBean<>();
pageBean.setRows(rows);
pageBean.setTotalCount(totalCount);
sqlSession.close();
return pageBean;
}
@Override
public PageBean<Book> selectByPageAndCondition(int currentPage, int pageSize, Book book) {
SqlSession sqlSession = factory.openSession();
BookMapper bookMapper = sqlSession.getMapper(BookMapper.class);
int begin = (currentPage - 1) * pageSize;
int size = pageSize;
String number = book.getNumber();
if(number != null && number.length()>0){
book.setNumber("%" + number + "%");
}
String bookName = book.getBookName();
if(bookName != null && bookName.length()>0){
book.setBookName("%" + bookName + "%");
}
String writer = book.getWriter();
if(writer != null && writer.length()>0){
book.setWriter("%" + writer + "%");
}
List<Book> rows = bookMapper.selectByPageAndCondition(begin,size,book);
int totalCount = bookMapper.selectTotalCountByCondition(book);
PageBean<Book> pageBean = new PageBean<>();
pageBean.setRows(rows);
pageBean.setTotalCount(totalCount);
sqlSession.close();
return pageBean;
}
public void updateById(Book book){
SqlSession sqlSession = factory.openSession();
BookMapper bookMapper = sqlSession.getMapper(BookMapper.class);
bookMapper.updateById(book);
sqlSession.commit();
sqlSession.close();
}
}
四、Servlet层
文件名：BookServlet.class
package com.MyJavaClass.web;
import com.MyJavaClass.pojo.Book;
import com.MyJavaClass.pojo.PageBean;
import com.MyJavaClass.service.BookService;
import com.MyJavaClass.service.impl.BookServiceimpl;
import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.util.List;
@WebServlet("/Book/*")
public class BookServlet extends BaseServlet{
private BookService bookService = new BookServiceimpl();
public void selectAll(HttpServletRequest req, HttpServletResponse resp)throws ServletException,IOException{
List<Book> books = bookService.selectAll();
String jsonString = JSON.toJSONString(books);
resp.setContentType("text/json;charset=utf-8");
resp.getWriter().write(jsonString);
}
public void add(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
BufferedReader br = req.getReader();
String params = br.readLine();
Book book = JSON.parseObject(params,Book.class);
bookService.add(book);
resp.getWriter().write("success");
}
public void deleteByIds(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
BufferedReader br = req.getReader();
String params = br.readLine();
int[] ids = JSON.parseObject(params,int[].class);
bookService.deleteByIds(ids);
resp.getWriter().write("success");
}
public void selectByPage(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
String _currentPage = req.getParameter("currentPage");
String _pageSize = req.getParameter("pageSize");
int currentPage = Integer.parseInt(_currentPage);
int pageSize = Integer.parseInt(_pageSize);
//2. 调用service查询
PageBean<Book> pageBean = bookService.selectByPage(currentPage, pageSize);
//2. 转为JSON
String jsonString = JSON.toJSONString(pageBean);
//3. 写数据
resp.setContentType("text/json;charset=utf-8");
resp.getWriter().write(jsonString);
}
public void selectByPageAndCondition(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
String _currentPage = req.getParameter("currentPage");
String _pageSize = req.getParameter("pageSize");
int currentPage = Integer.parseInt(_currentPage);
int pageSize = Integer.parseInt(_pageSize);
BufferedReader br = req.getReader();
String params = br.readLine();
Book book = JSON.parseObject(params,Book.class);
PageBean<Book> pageBean = bookService.selectByPageAndCondition(currentPage,pageSize,book);
String jsonString = JSON.toJSONString(pageBean);
resp.setContentType("text/json;charset=utf-8");
resp.getWriter().write(jsonString);
}
public void updateById(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
// String id = req.getParameter("id");
BufferedReader br = req.getReader();
String params = br.readLine();
Book book = JSON.parseObject(params, Book.class);
if(book!=null){
System.out.println("ok");
System.out.println(book);
}
else System.out.println("no");
bookService.updateById(book);
resp.getWriter().write("success");
}
}
五、前端代码实现
文件名：Book.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
body{
background:url("img/p.png") no-repeat center top;
background-size:cover;
background-attachment:fixed;
opacity:0.75;
}
</style>
</head>
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="book" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="book.state" placeholder="当前状态">
<el-option label="在库中" value="1"></el-option>
<el-option label="未在库中" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="书籍编号">
<el-input v-model="book.number" placeholder="书籍编号"></el-input>
</el-form-item>
<el-form-item label="书籍名称">
<el-input v-model="book.bookName" placeholder="书籍名称"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="book.writer" placeholder="作者"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
<el-button type="success" onclick="window.location.href='student.html'"plain>学生信息查询</el-button>
</el-row>
<!--添加数据对话框表单-->
<el-dialog
title="新增书籍"
:visible.sync="dialogVisible"
width="30%"
>
<el-form ref="form" :model="book" label-width="80px">
<el-form-item label="书籍编号">
<el-input v-model="book.number"></el-input>
</el-form-item>
<el-form-item label="书籍名称">
<el-input v-model="book.bookName"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="book.writer"></el-input>
</el-form-item>
<el-form-item label="借阅人">
<el-input v-model="book.user"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="book.state"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog
title="修改书籍"
:visible.sync="dialog2Visible"
width="30%"
>
<el-form ref="form" :model="brandSelect" label-width="80px">
<el-form-item label="书籍编号">
<el-input v-model="brandSelect.number"></el-input>
</el-form-item>
<el-form-item label="书籍名称">
<el-input v-model="brandSelect.bookName"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="brandSelect.writer"></el-input>
</el-form-item>
<el-form-item label="借阅人">
<el-input v-model="brandSelect.user"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="brandSelect.state"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="update">提交</el-button>
<el-button @click="dialog2Visible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--表格-->
<template >
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="number"
label="书籍编号"
align="center"
>
</el-table-column>
<el-table-column
prop="bookName"
label="书籍名称"
align="center"
>
</el-table-column>
<el-table-column
prop="writer"
align="center"
label="作者">
</el-table-column>
<el-table-column
prop="state"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
prop="user"
align="center"
label="借阅人">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-row>
<el-button type="primary"@click="brandShow(scope.row)">修改</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
<!--分页工具条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
new Vue({
el: "#app",
mounted(){
<!-- //当页面加载完成后，发送异步请求，获取数据-->
<!-- var _this = this;-->
<!-- axios({
-->
<!-- method:"get",-->
<!-- url:"http://localhost:8080/curriculumDesign/Book/selectAll"-->
<!-- }).then(function (resp) {
-->
<!-- _this.tableData = resp.data;-->
<!-- })-->
this.selectAll();
},
methods: {
//根据id查询
selectAll(){
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/curriculumDesign/Book/selectByPage?currentPage="+this.currentPage+"&pageSize=" + this.pageSize
}).then(resp =>{
//设置表格数据
_this.tableData = resp.data.rows; // {rows:[],totalCount:100}
//设置总记录数
_this.totalCount = resp.data.totalCount;
})
},
tableRowClassName({
row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
brandShow(row) {
// 获取数据
this.brandSelect = row;
console.log(this.book);
// 弹出窗口
this.dialog2Visible = true;
console.log(this.dialog2Visible);
this.selectAll();
},
update(){
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/curriculumDesign/Book/updateById",
data:_this.brandSelect //这是提交的表单数据
}).then(function (resp){
//这里是success数据
if(resp.data == "success"){
//添加成功
_this.dialog2Visible = false;
console.log("修改成功！");
//重新查询数据进行显示
_this.selectAll();
_this.$message({
message: '恭喜你，修改成功',
type: 'success'
});
}
else{
_this.$message.error('修改失败');
}
})
},
// 查询方法
onSubmit() {
axios({
method:"post",
url:"http://localhost:8080/curriculumDesign/Book/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
data:this.book
}).then((resp) => {
//设置表格数据
this.tableData = resp.data.rows; // {rows:[],totalCount:100}
//设置总记录数
this.totalCount = resp.data.totalCount;
})
},
// 添加数据
addBrand(){
var _this = this;
// 发送ajax请求，添加数据
axios({
method:"post",
url:"http://localhost:8080/curriculumDesign/Book/add",
data:_this.book
}).then(function (resp) {
//响应数据的处理逻辑
if(resp.data == "success"){
//添加成功
//关闭窗口
_this.dialogVisible = false;
// 重新查询数据
_this.selectAll();
// 弹出消息提示
_this.$message({
message: '恭喜你，添加成功',
type: 'success'
});
}
})
},
deleteByIds(){
// 弹出确认提示框
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//用户点击确认按钮
//1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可
for (let i = 0; i < this.multipleSelection.length; i++) {
let selectionElement = this.multipleSelection[i];
this.selectedIds[i] = selectionElement.id;
}
//2. 发送AJAX请求
var _this = this;
// 发送ajax请求，添加数据
axios({
method:"post",
url:"http://localhost:8080/curriculumDesign/Book/deleteByIds",
data:_this.selectedIds
}).then(function (resp) {
if(resp.data == "success"){
//删除成功
// 重新查询数据
_this.selectAll();
// 弹出消息提示
_this.$message({
message: '恭喜你，删除成功',
type: 'success'
});
}
})
}).catch(() => {
//用户点击取消按钮
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//分页
handleSizeChange(val) {
this.pageSize = val;
this.selectAll();
},
handleCurrentChange(val) {
this.currentPage = val;
this.selectAll();
}
},
data() {
return {
// 当前页码
// 每页显示的条数
pageSize:5,
// 总记录数
totalCount:100,
// 当前页码
currentPage: 1,
// 添加数据对话框是否展示的标记
dialogVisible: false,
dialog2Visible: false,
<!-- Integer id;-->
<!-- String number;-->
<!-- -->
<!-- String bookName ;-->
<!-- String writer ;-->
<!-- String user ;-->
<!-- Integer state ;-->
book:{
state:'',
bookName:'',
user:'',
writer:'',
number:"",
id:""
},
brandSelect:{
state:'',
bookName:'',
user:'',
writer:'',
number:"",
id:""
},
// 品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id:"",
ordered:"",
description:""
},
// 复选框选中数据集合
multipleSelection: [],
selectedIds:[],
// 表格数据
tableData: [{
number:"ccsu123",
bookName: '华为',
writer: '老人与海',
state: '1',
user:"唐涛",
id:'1'
}]
}
}
})
</script>
</body>
</html>
# 总结
以上就是全部代码了，做起来并不复杂，一两天就能做完，在熟练的情况下不到一天就能弄完。
页面如下
