极简单的用户信息增删改查操作案例(一)

极简单的用户信息增删改查操作案例(一)

一、所需知识与环境

1、SQL基础
2、JDBCTemplate、Druid基础
3、HTTP、HTML、JSP基础
4、Servlet、Request、Response基础
5、Tomcat服务器
6、MySQL数据库

二、用户查询需求

用户打开网页,可以进行添加、删除、修改、查询用户信息的操作。

三、案例分析

1、通过三层架构(软件设计架构):界面层、业务逻辑层、数据访问层开发编码。
2、用户通过浏览器访问服务器的index.jsp等页面。
3、界面层:准备已写好的js,css,jsp代码。通过UserListServlet调用业务逻辑层的查询方法。
4、业务逻辑层:通过UserServiceImpl调用数据访问层的查询方法。
5、数据访问层:通过UserDaoImpl查询访问数据库的User表。

在这里插入图片描述

四、开发步骤

1、创建项目、导入jar包、准备前端工程代码

在这里插入图片描述

2、创建数据库中的User表


	create database db4; -- 创建数据库
	
	use db4; 			 -- 使用数据库
	
	create table user(   -- 创建表
		id int primary key auto_increment,
		name varchar(20) not null,
		gender varchar(5),
		age int,
		address varchar(32),
		qq	varchar(20),
		email varchar(50)
	);
				

在这里插入图片描述

3、创建User实体类


    package cn.actadd.domain;

    public class User {
   
        private int id;
        private String name;
        private String gender;
        private int age;
        private String address;
        private String qq;
        private String email;

        public int getId() {
   
            return id;
        }

        public void setId(int id) {
   
            this.id = id;
        }

        public String getName() {
   
            return name;
        }

        public void setName(String name) {
   
            this.name = name;
        }

        public String getGender() {
   
            return gender;
        }

        public void setGender(String gender) {
   
            this.gender = gender;
        }

        public int getAge() {
   
            return age;
        }

        public void setAge(int age) {
   
            this.age = age;
        }

        public String getAddress() {
   
            return address;
        }

        public void setAddress(String address) {
   
            this.address = address;
        }

        public String getQq() {
   
            return qq;
        }

        public void setQq(String qq) {
   
     
  • 5
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
layui是一款基于jQuery开发的UI框架,它的简洁、易用和美观受到了众多开发者的好评。在实际开发中,常常需要使用到增删的功能,本文将为大家分享一个基于layui框架的完整增删案例。 1. 实现数据库连接 一般而言,我们需要选择一款关系型数据库来存储数据。本例中,我们使用MySQL数据库。要使用该数据库,需要使用一个驱动,这里我们使用node.js的mysql包,需要使用npm命令安装: ``` npm install mysql ``` 连接数据库的步骤如下: ``` const mysql = require("mysql"); const connection = mysql.createConnection({ host: "localhost", user: "root", password: "root", database: "test" }); connection.connect((err) => { if (err) { console.error("error connecting: " + err.stack); return; } console.log("connected as id " + connection.threadId); }); ``` 在这里,我们使用了mysql.createConnection()方法创建了一个连接对象,该方法需要传递一个配置对象,包括连接数据库的地址、用户名、密码和数据库名。连接成功后,我们可以在回调函数中打印出连接的线程ID。 2. 实现表格展示 在完成数据库连接后,我们需要实现表格展示。这里我们使用了layui框架的table模块,该模块封装了表格的相关操作,代码如下: ``` layui.use("table", function () { var table = layui.table; //展示表格 table.render({ elem: "#userListTable", url: "/api/user", cols: [[ { type: "numbers", title: "序号" }, { field: "name", title: "用户名" }, { field: "age", title: "年龄" }, { field: "gender", title: "性别" }, { fixed: "right", title: "操作", toolbar: "#userListBar" } ]] }); }); ``` 在这里,我们使用了table.render()方法渲染了一个表格,需要传递一个配置对象。其中,elem表示表格的容器的ID,url表示获取表格数据的地址,而cols则表示表格的列,每列需要配置相应的字段名和显示名称。最后一个操作列使用了固定为右对齐,并且使用了自定义工具栏模板。 3. 实现增删的逻辑操作 在完成表格展示后,我们需要实现增删的逻辑操作。这里我们使用了layui框架的form模块,该模块封装了表单的相关操作,代码如下: 3.1 添加用户 在该案例中,添加用户按钮点击后,会弹出一个添加用户表单。点击表单的提交按钮后,会触发系统的提交事件,触发后台的添加用户接口,将数据提交到数据库中,代码如下: ``` layui.use("form", function () { var form = layui.form; //添加用户弹窗 $("#addUserBtn").click(function () { layer.open({ type: 1, title: "添加用户", content: $("#addUser"), area: ["500px", "300px"] }); }); //监听添加用户表单提交 form.on("submit(addUserForm)", function (data) { $.ajax({ url: "/api/user", type: "POST", data: JSON.stringify(data.field), dataType: "JSON", contentType: "application/json", success: function (res) { if (res.code === 0) { layer.msg("添加用户成功"); table.reload("userListTable"); layer.closeAll(); } else { layer.msg("添加用户失败,请联系管理员"); } } }); return false; }); }); ``` 在这里,我们使用了layer.open()方法弹出了添加用户表单,该方法需要传递一个配置对象,表单的内容需要放在该对象的content属性中。在表单提交后,我们使用了$.ajax()方法提交表单数据,data.field表示表单的所有数据,需要将其转换成JSON格式。在提交成功后,我们使用了table.reload()方法重新渲染了表格,并使用layer.closeAll()方法关闭了添加用户弹窗。 3.2 删除用户 在该案例中,删除用户按钮点击后,会弹出一个提示框,询问用户是否确定删除。点击确认按钮后,会触发系统的提交事件,触发后台的删除用户接口,将数据从数据库中删除,代码如下: ``` //监听删除用户按钮 table.on("tool(userListTable)", function (obj) { var data = obj.data; if (obj.event === "del") { layer.confirm("是否确定删除该用户" + data.name + "?", function (index) { $.ajax({ url: "/api/user/" + data.id, type: "DELETE", dataType: "JSON", contentType: "application/json", success: function (res) { if (res.code === 0) { layer.msg("删除用户成功"); obj.del(); } else { layer.msg("删除用户失败,请联系管理员"); } } }); layer.close(index); }); } }); ``` 在这里,我们使用了table.on()方法监听了用户列表的表格,当用户点击删除按钮时,需要弹出确认对话框,需要传递一个确认消息和回调函数,点击确认后触发$.ajax()方法提交删除请求,最后使用obj.del()方法删除表格中对应的行。 3.3 修用户 在该案例中,修用户按钮点击后,会弹出一个修用户表单。点击表单的提交按钮后,会触发系统的提交事件,触发后台的修用户接口,将数据更新到数据库中,代码如下: ``` //监听修用户按钮 table.on("tool(userListTable)", function (obj) { var data = obj.data; if (obj.event === "edit") { layer.open({ type: 1, title: "修用户", content: $("#editUser"), area: ["500px", "300px"], success: function (layero, index) { form.val("editUserForm", data); form.render(); } }); } //监听修用户表单提交 form.on("submit(editUserForm)", function (formdata) { formdata = formdata.field; formdata.id = data.id; $.ajax({ url: "/api/user", type: "PUT", data: JSON.stringify(formdata), dataType: "JSON", contentType: "application/json", success: function (res) { if (res.code === 0) { layer.msg("修用户成功"); table.reload("userListTable"); layer.closeAll(); } else { layer.msg("修用户失败,请联系管理员"); } } }); return false; }); }); ``` 在这里,我们使用了table.on()方法监听了用户列表的表格,当用户点击编辑按钮时,需要弹出修用户表单,需要传递一个配置对象,表单的内容需要放在该对象的content属性中。在表单展示后,我们使用了form.val()方法填充了表单的内容,并使用form.render()方法渲染了表单。在表单提交后,我们使用了$.ajax()方法提交表单数据,并使用table.reload()方法重新渲染了表格,并使用layer.closeAll()方法关闭了修用户弹窗。 4. 实现后端API接口 在完成前端页面的开发后,我们需要实现后端的API接口以完成对数据库的操作。这里我们使用了node.js和express框架,需要使用npm命令安装: ``` npm install express npm install body-parser ``` 在该案例中,我们实现了如下API接口: 4.1 获取用户列表 ``` router.get("/user", (req, res, next) => { connection.query("SELECT * FROM user", (error, results, fields) => { if (error) { res.json({ code: -1, msg: error }); } else { res.json({ code: 0, data: results }); } }); }); ``` 在这里,我们使用了connection.query()方法询了user表中的所有数据,并将询结果返回到前端。 4.2 添加用户 ``` router.post("/user", (req, res, next) => { const { name, age, gender } = req.body; const sql = "INSERT INTO user (name, age, gender) VALUES (?, ?, ?)"; connection.query(sql, [name, age, gender], (error, results, fields) => { if (error) { res.json({ code: -1, msg: error }); } else { res.json({ code: 0, msg: "添加用户成功" }); } }); }); ``` 在这里,我们使用了req.body获取了用户表单提交的数据,并使用connection.query()方法将数据插入到user表中,并将结果返回到前端。 4.3 修用户 ``` router.put("/user", (req, res, next) => { const { id, name, age, gender } = req.body; const sql = "UPDATE user SET name = ?, age = ?, gender = ? WHERE id = ?"; connection.query(sql, [name, age, gender, id], (error, results, fields) => { if (error) { res.json({ code: -1, msg: error }); } else { res.json({ code: 0, msg: "修用户成功" }); } }); }); ``` 在这里,我们使用了req.body获取了用户表单提交的数据,并使用connection.query()方法将数据更新到user表中,并将结果返回到前端。 4.4 删除用户 ``` router.delete("/user/:id", (req, res, next) => { const id = req.params.id; const sql = "DELETE FROM user WHERE id = ?"; connection.query(sql, [id], (error, results, fields) => { if (error) { res.json({ code: -1, msg: error }); } else { res.json({ code: 0, msg: "删除用户成功" }); } }); }); ``` 在这里,我们使用了req.params获取了URL参数,并使用connection.query()方法将数据从user表中删除,并将结果返回到前端。 5. 总结 本文详细介绍了使用layui框架实现增删的完整案例。在该案例中,我们使用了MySQL数据库来存储数据,并使用node.js和express框架实现了后端API接口。在前端页面上,我们使用了layui框架的table和form模块实现了表格展示和表单操作,并使用了layer模块实现了弹窗提示。通过该案例的学习,相信读者可以对layui框架和前后端交互有更深刻的理解和认识。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值