Java增删改查网页 javaweb增删改查代码

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();
    @Override
    protected 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 block
                e.printStackTrace();
            }
        }
        //查询方法
        if (type != null && "query".equals(type)) {
            try {
                this.query(request, response);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        //修改方法
        if (type != null && "update".equals(type)) {
            try {
                this.update(request, response);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        //删除方法
        if (type != null && "delete".equals(type)) {
            try {
                this.delete(request, response);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        //删除方法
        if (type != null && "queryById".equals(type)) {
            try {
                this.queryById(request, response);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        //批量删除
        if (type != null && "delBath".equals(type)) {
            try {
                this.delBath(request, response);
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }
    //根据id查询一条数据 get请求 拼接参数
    private void queryById(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //获取id
        String 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,//当前页 默认为1
                size:5,//每页查询的条数 默认为5
                param1:"",//参数条件1
                param2:"",//参数条件2
                param3:"",//参数条件3
            },
            //修改回显展示的对象
            Updateobj:{
                id:"",
                name:"",
                price:"",
                autor:"",
            }

        },
        created() { //vue 实例后就执行的方法 查询所有

            this.findAll();

        },
        methods:{
            //查询所有 //post
            findAll(){

            },
            //根据id删除 //get
            deleteById(){

            },
            //批量删除  post
            deleteBatch(){

            },
            //根据id查询一个 修改时用  get
            selectById(){

            },
            //修改 post
            update(){

            },
            //添加 post
            add(){

            },
            
            //所有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-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="名称"
                width="120"
                prop="name">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格"
                width="120">
        </el-table-column>
        <el-table-column
                prop="autor"
                label="作者"
                show-overflow-tooltip>
        </el-table-column>

        <!--操作模块代码-->
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row.id)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

将分页模块复制过来

<!--分页模块-->

<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中进行复制,本教程只是增加一些注释,方便于你更好的理解