JAVAWEB增删改查武林秘籍

增删改查武林秘籍学之受用无穷,可在30分钟内写完增删改查所有后台代码

1.项目搭建

1:创建一个maven 带骨架webapp的项目
2:创建表:book表(你所要增删改查的表)    并且使用idea 连接数据库(方便生成实体类)
3.导包(pom文件 dependencies下所有的包) (记得刷新maven)(记得刷新maven)(记得刷新maven)
4,复制resources目录下所需要的文件
修改XxxxMapper 为你需要的名字
5.检查jdbc.properties 中的数据库是否写错(只需要检查数据库 别的什么都不用管)
6.创建包
com.ufox.pojo :实体类包  : 自动生成数据表 Book表 (注意改包)  把Cond.java 和 RespResult.java 复制到此包下 (可以复制属于工具类)
com.ufox.service: 业务层包    XxxxxService
com.ufox.web.servlet: 前端控制器:  productServlet  (此项目只需要一个Servlet)
com.ufox.web.filter:过滤器包   : 把解决乱码的过滤器 粘贴到此包中, 把CharchaterFilter.java粘贴到filter包下
com.ufox.mapper: 操作数据库包   创建XxxxMapper (注意是接口)
com.ufox.utils  (存放工具类包) :   把 JSONUtils.java  和 SqlSessionUtil.java 粘贴到 utils包下  (可以复制 已经提供好)

到此项目搭建完毕,请把每一步操作熟练,已经尽量压缩

2.代码阶段

接下来进入代码阶段:请一定要沿用此代码的方法名称风格

2.1进行mapper接口的书写

你需要在此接口中书写6个方法
1:根据条件查询   方法名称:selectByCond(Cond cond); //参数为条件对象     //在Xml中写sql
2:添加语句       方法名称:add(Book book);//参数为实体类对象             //使用注解写sql
3:根据id删除语句  方法名称:delById(String id);//id                    //使用注解写sql
4:批量删除语句    方法名称:delBatch(List<String> list);  参数为集合 集合中存的是前端传递过来的id数组   //在Xml中写sql
5:根据id查询     方法名称:selectById( String id);//id               //使用注解写sql
6:更新语句        方法名称:update(Book book);                           //使用注解写sql

public interface BookMapper {//根据条件查询List<Book> selectByCond(Cond cond);//添加语句@Insert("insert into book values(null,#{name},#{price},#{autor})")int add(Book book);//根据id删除语句@Delete("delete from book where id = #{id}")int delById(@Param("id") String id);//批量删除语句int delBatch(List<String> list);//根据id查询@Select("select * from book where id = #{id}")Book selectById(@Param("id") String id);//更新语句@Update("update book set name=#{name},price=#{price},autor=#{autor} where id = #{id}")int update(Book book);
}

到此为止 mapper接口中的方法书写完毕 请一定一定要保持sql语句的准确性,如果sql不对,对于新手来说,调试是很大的挑战

2.2进行Service类中方法的书写

此类中方法很简单,只需要把mapper接口中的注解全部去掉然后加上大括号就行

需要注意的是: 你需要使用mapper ,为了简化代码我们把mapper 设为静态在静态代码块中赋值

//业务层代码

public class BookService {private static BookMapper mapper;static {SqlSession session = SqlSessionUtil.getSession();mapper = session.getMapper(BookMapper.class);}//根据条件查询public List<Book> selectByCond(Cond cond) {return mapper.selectByCond(cond);}//添加语句public int add(Book book) {return mapper.add(book);}//根据id删除语句public int delById(String id) {return mapper.delById(id);}//批量删除语句public int delBatch(List<String> list) {return mapper.delBatch(list);}//根据id查询public Book selectById(String id) {return mapper.selectById(id);}//更新语句public int update(Book cust) {return mapper.update(cust);}
}

2.3Servlet类中代码的编写

为了简化代码我们把所有的代码都放在了一个servlet中,但是这并不会让你的代码显得臃肿,反而经过我们这套系统的简化,代码变得非常简介,但是请注意我们在方法上写的注释,注意提交方式并且在路径后拼接 type="需要操作的方法"**(非常重要)**

@WebServlet("/productServlet")
public class ProductServlet extends HttpServlet {BookService bookService = new BookService();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) {//获取用户的提交方式String type = request.getParameter("type");//添加方法if (type != null && "add".equals(type)) {try {this.add(request, response);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}//查询方法if (type != null && "query".equals(type)) {try {this.query(request, response);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}//修改方法if (type != null && "update".equals(type)) {try {this.update(request, response);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}//删除方法if (type != null && "delete".equals(type)) {try {this.delete(request, response);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}//删除方法if (type != null && "queryById".equals(type)) {try {this.queryById(request, response);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}//批量删除if (type != null && "delBath".equals(type)) {try {this.delBath(request, response);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}//根据id查询一条数据 get请求 拼接参数private void queryById(HttpServletRequest request, HttpServletResponse response) throws IOException {//获取idString id = request.getParameter("id");Book book = bookService.selectById(id);response.getWriter().write(JSON.toJSONString(new RespResult(2000, book)));}//添加 post请求 对象 需要用工具类直接获取数据public void add(HttpServletRequest request, HttpServletResponse response)throws Exception {Book book = JSONUtils.getInstance(request, Book.class);int count = bookService.add(book);if (count > 0) {response.getWriter().write(JSON.toJSONString(new RespResult(2000, "添加成功")));} else {response.getWriter().write(JSON.toJSONString(new RespResult(5000, "添加失败")));}}// 根据id删除  //get请求 参数拼接在路径后面public void delete(HttpServletRequest request, HttpServletResponse response)throws Exception {String id = request.getParameter("id");int count = bookService.delById(id);if (count > 0) {response.getWriter().write(JSON.toJSONString(new RespResult(2000, "操作成功")));} else {response.getWriter().write(JSON.toJSONString(new RespResult(5000, "操作失败")));}}// 修改public void update(HttpServletRequest request, HttpServletResponse response)throws Exception {Book book = JSONUtils.getInstance(request, Book.class);int count = bookService.update(book);if (count > 0) {response.getWriter().write(JSON.toJSONString(new RespResult(2000, "操作成功")));} else {response.getWriter().write(JSON.toJSONString(new RespResult(5000, "操作失败")));}}// 查询public void query(HttpServletRequest request, HttpServletResponse response)throws Exception {//获取参数Cond Cond = JSONUtils.getInstance(request, Cond.class);//给分页插件设置 查询的当前页码  和 每页显示的条数PageHelper.startPage(Cond.getPage(), Cond.getSize());//根据条件进行查询List<Book> list = bookService.selectByCond(Cond);//把查询出来的数据放到PageInfo中  会自动计算 总页数 和总条数 (我们只需要把PageInfo返回就可以了)PageInfo pageInfo = new PageInfo(list);//返回数据response.getWriter().write(JSON.toJSONString(new RespResult(2000, pageInfo)));}
// 批量删除 post提交方式 需要传递过去一个数组对象public void delBath(HttpServletRequest request, HttpServletResponse response)throws Exception {//获取id的集合BufferedReader reader = request.getReader();String s = reader.readLine();//{ids:[2,4,6]}List<String> strings = JSON.parseArray(s, String.class);
//批量删除int count = bookService.delBatch(strings);
if (count > 0) {response.getWriter().write(JSON.toJSONString(new RespResult(2000, "操作成功")));} else {response.getWriter().write(JSON.toJSONString(new RespResult(5000, "操作失败")));}}
protected void doPost(HttpServletRequest request, HttpServletResponse response) {doGet(request, response);}

}

到此为止,我们的增删改查后台逻辑代码就书写完毕,去postman中进行测试把当我们测试通过后,再去进行前端代码的开发

请相信这不是最简单的代码,最优的代码永远在你的脑海中

以下是前端的教程:

第一步:把文件复制道webapp目录下

引入element.css element.js

vue.js axios.js 这些文件

 <link rel="stylesheet" href="element/index.css"><script src="js/vuejs-2.5.16.js"></script><script src="element/index.js"></script><script src="js/axios-0.18.0.js"></script>

element 中文组件官网:Element - The world's most popular Vue UI framework

你一共需要导入四部分

1.条件查询部分内容

2.列表展示部分内容

3.分页插件部分内容

4.添加/修改页面内容

script的基本模板

记得创建<div id=app></div> 所有的代码都写在div中

<script>//创建vue实例new Vue({el: "#app",//挂载 固定写法data:{//数据total: 0,//总条数tableData: [],//列表中展示的数据ids:[],//批量删除需要用到的存id的数组cond:{page:1,//当前页 默认为1size:5,//每页查询的条数 默认为5param1:"",//参数条件1param2:"",//参数条件2param3:"",//参数条件3},//修改回显展示的对象Updateobj:{id:"",name:"",price:"",autor:"",}
},created() { //vue 实例后就执行的方法 查询所有
this.findAll();
},methods:{//查询所有 //postfindAll(){
},//根据id删除 //getdeleteById(){
},//批量删除  postdeleteBatch(){
},//根据id查询一个 修改时用  getselectById(){
},//修改 postupdate(){
},//添加 postadd(){
},//所有element中的方法都写在此一下}})

1.条件查询部分内容

Data->Table表格部分内容(请任选一个) 建议带多选按钮的列表
修改表格样式
如果你的列表有多选 请复制 handleSelectionChange(){} 方法

将每条数据要显示的操作复制过来记得编辑(handleEdit)和删除(handleDelete)需要复制方法:

条件查询模块

<!--    条件查询及操作列表--><template>
<!--   :model: 你需要绑定的是data中的cond     --><el-form :inline="true" :model="cond" class="demo-form-inline"><el-form-item label="图书名称"><el-input v-model="cond.name" placeholder="图书名称"></el-input></el-form-item><el-form-item label="图书价格"><el-input v-model="cond.price" placeholder="图书价格"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
<!--            还有要 批量删除 及增加按钮 仅仅是两个按钮而已--><!--   需要打开添加页面--><el-button type="success">添加</el-button><!--  批量删除需要进行校验--><el-button type="danger">批量删除 </el-button></el-form></template>

表格模块

<!--    查询列表-->

<template><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="名称"width="120"prop="name"></el-table-column><el-table-columnprop="price"label="价格"width="120"></el-table-column><el-table-columnprop="autor"label="作者"show-overflow-tooltip></el-table-column>
<!--操作模块代码--><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row.id)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row.id)">删除</el-button></template></el-table-column></el-table>
</template>

将分页模块复制过来

<!--分页模块2222222222222222222-->

   <template><div class="block"><span class="demonstration">完整功能</span>
<!--    :current-page : 当前页:page-sizes: 每页显示的数据(选择项) 可以直接写死:page-size:  每页真实显示的条数:total: 总条数--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="cond.page":page-sizes="[5, 10, 20, 50]":page-size="cond.size"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></template>

将编辑添加页面复制过来

<!--    添加  编辑 弹出层-->

 <template>
<!--        dialogFormVisible 当这个值为true 打开 当为false 关闭 我们需要在data 中进行定义--><el-dialog title="收货地址" :visible.sync="dialogFormVisible"><el-form :model="Updateobj">
<!--                                        :label-width: 宽度 可以直接写死        --><el-form-item label="图书名称" label-width="120px"><el-input v-model="Updateobj.name" autocomplete="off"></el-input></el-form-item><el-form-item label="图书价格" label-width="120px"><el-input v-model="Updateobj.price" autocomplete="off"></el-input></el-form-item><el-form-item label="图书作者" label-width="120px"><el-input v-model="Updateobj.autor" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="tijiao">确 定</el-button></div></el-dialog></template>

// 向给定 ID 的用户发起请求

axios.get("/user?ID=12345").then(function (response) {//处理成功情况console.log(response);}).then(function () {//总是会执行});
//发送post请求
axios.post("/user", {firstName: "Fred",lastName: "Flintstone",}).then(function (response) {console.log(response);});

以下是发送到后台的接口

一共需要两种方式]提交 get 和 post get传递一i个参数 post传递对象参数

需要注意的是这些方法上都需要加上async

//根据id进行删除
var result = await axios.get("http://localhost?type=deleteById&id=1");
//根据id进行查询
var result = await axios.get("http://localhost?type=selectById&id=1");
//添加  需要传递对象
var result = await axios.post("http://localhost?type=addorupdate",this.obj);
//修改  需要传递对象
var result = await axios.post("http://localhost?type=addaddorupdate",this.obj);
//查询所有   需要传递条件对象
var result = await axios.post("http://localhost?type=addaddorupdate",this.cond);
//批量删除 需要传递id的数组
var result = await axios.post("http://localhost?type=deleteBatch",this.ids);

以下是element的提示消息(当然有很多,但是作为初学者,我认为你只需要使用成功和失败就够了)你甚至能背过它

//成功消息
this.$message.success('错了哦，这是一条错误消息');
//错误消息
this.$message.error('错了哦，这是一条错误消息');

其实我们写页面还是要去element中进行复制,本教程只是增加一些注释,方便于你更好的理解

----------------------------------------------------------------------------有道无术,术尚可求,有术无道,止于术

原创:孙舵