1.东软介绍
东软睿新科技集团总部位于大连，是中国领先的数字化人才教育服务提供者、教医养康旅生态先行者。2020年9月29日公司成功登陆香港联合交易所主板上市。如今，集团正依托“教育+科技+医养”的创新研发能力，打造“教医养康旅”五位一体融合发展新生态。
教育科技
以“东软教育科技集团”作为运营主体，依托东软雄厚的产业优势与学历教育丰厚的办学积淀，将领先的教育理念、方法、模式、体系、标准等数字化、产品化、平台化，构建起涵盖资源、软件、平台、数据四个层级的4S产品服务体系（CaaS-内容即服务，SaaS-软件即服务，PaaS-平台即服务， DaaS-数据即服务），以专业共建与产业学院、智慧教育平台与教学内容、实训室解决方案等多种形式，以数字工场作为实施载体，用一流的教育产品和服务为更多的普通高校和职业院校赋能。
截至目前，已与全国700余所本科和职业院校合作，其中包括 30余所“双一流”建设高校及建设学科名单的普通高校，及60余所被纳入中国职业教育“双高计划”建设学校的职业学校。
2.生产实习-时间安排
3.软件工程-项目阶段
瀑布模型将软件开发分为以下顺序阶段，每个阶段有明确的输入和输出：
需求分析（Requirements Analysis）
目标：明确用户需求，定义系统功能和非功能需求。
输出：《软件需求规格说明书》（SRS）。
关键活动：用户访谈、需求调研、用例分析。系统设计（System Design）
目标：基于需求设计系统架构和详细方案。
输出：《系统设计文档》（SDD），包括：
高层设计（架构设计）：模块划分、数据流图（DFD）、ER图。
详细设计：类图、算法设计、数据库表结构。实现（Implementation / Coding）
目标：编写代码，实现设计。
输出：可执行程序 + 源代码。
关键活动：编码规范、单元测试、版本控制（Git）。测试（Testing）
目标：发现并修复缺陷，确保软件符合需求。
输出：《测试报告》，包括：
单元测试（开发者）
集成测试（模块组合测试）
系统测试（整体功能验证）
验收测试（用户确认）
5.部署与维护（Deployment & Maintenance）
目标：交付用户使用并持续优化。
输出：上线系统 + 运维文档。
关键活动：
纠错性维护（修复Bug）
适应性维护（适应新环境，如操作系统升级）
完善性维护（新增功能）
4.数据库设计原则
数据库设计是软件系统开发的关键环节，良好的数据库设计能提高数据存储效率、查询性能、可维护性和扩展性。以下是数据库设计的核心原则：
1. 规范化设计（Normalization）
目标：减少数据冗余，避免异常（插入、更新、删除异常）。
常用范式：
第一范式（1NF）：字段不可再分（原子性），无重复列。
第二范式（2NF）：满足1NF，且非主键字段完全依赖主键（消除部分依赖）。
第三范式（3NF）：满足2NF，且非主键字段不传递依赖主键（消除冗余）。
适用场景：事务型系统（OLTP），如电商、ERP、MS。
反规范化：为提高查询性能，可适度冗余。
下面将通过一个具体的例子来说明三个范式。
假设我们有一个"学生课程记录"表：
第一范式（1NF）：确保每列都是原子的
要求：每个字段都是不可再分的最小数据单元，没有重复的列。
我们的初始表已经满足1NF，因为：
每个字段都是最小单元（学号、姓名等都不能再分）
没有重复的列
第二范式（2NF）：消除部分依赖
要求：在1NF基础上，非主键字段必须完全依赖于整个主键（不能只依赖于主键的一部分）。
问题分析：
主键应该是(学号,课程号)组合
但"学生姓名"、"系名"、"系主任"只依赖于学号
"课程名称"只依赖于课程号
解决方案：拆分成三个表
第三范式（3NF）：消除传递依赖
要求：在2NF基础上，非主键字段不能依赖于其他非主键字段（即不能有传递依赖）。
问题分析：
在学生表中，"系主任"依赖于"系名"，而"系名"又依赖于"学号"
存在传递依赖：学号 → 系名 → 系主任
解决方案：进一步拆分学生表
2. 合理的表结构设计
主键（Primary Key）：
唯一标识记录（如自增ID、UUID或业务主键）。
尽量使用简单、稳定的键（避免频繁更新）。
外键（Foreign Key）：
确保引用完整性（可加级联删除/更新约束）。
注意性能影响（大数据量时可能降低写入速度）。
字段类型选择：
用最小够用的数据类型（如TINYINT代替INT存储状态值）。
避免NULL（可用默认值替代，减少索引复杂度）。
3. 索引优化
索引原则：
为高频查询条件（WHERE、JOIN、ORDER BY）创建索引。
避免过多索引（影响写入性能）。
联合索引遵循最左前缀原则（如INDEX(a, b)可优化WHERE a=1 AND b=2，但不优化WHERE b=2）。
避免索引失效：
不要在索引列上使用函数（如WHERE YEAR(create_time)=2023）。
4. 性能与扩展性
读写分离：高频读操作用从库，写操作用主库。
分库分表：
水平分表：按数据行拆分（如按用户ID哈希）。
垂直分表：按列拆分（冷热数据分离）。
缓存层：用Redis缓存热点数据（如商品详情）。
5. 安全性与维护
数据安全：
敏感数据加密（如密码用哈希存储，信用卡号加密）。
定期备份（全量+增量备份）。
可维护性：
表名、字段名见名知义（如user_account而非tbl_ua）。
添加注释（COMMENT）说明字段用途。
5.前端页面设计原则
前端页面设计不仅关乎美观，更影响用户体验、可访问性和性能。以下是现代前端设计的关键原则：
1. 用户体验(UX)优先原则
以用户为中心：设计始终围绕用户需求和目标
一致性：保持界面元素、交互方式和视觉风格的一致性
直观性：用户无需思考就能理解界面功能
反馈机制：对用户操作提供即时、清晰的反馈（如按钮点击效果）
2. 视觉设计原则
层次结构：通过大小、颜色、间距建立清晰的视觉层次
对比度：确保文字与背景有足够对比度
留白：合理使用空白区域避免界面拥挤
色彩系统：限制主色数量（通常3-5种），建立配色方案
3. 可用性原则
Fitts定律：增大可点击目标尺寸，减少操作距离
希克定律：减少选择项以加速决策过程
米勒定律：人类短期记忆限制为7±2项，控制菜单项数量
邻近原则：相关元素应彼此靠近
4. 性能优化原则
关键渲染路径优化：优先加载可视区域内容
图片优化：适当压缩，使用现代格式(WebP/AVIF)
代码精简：删除未使用代码，最小化资源
延迟加载：非关键资源延迟加载
5. 可访问性原则
语义化HTML：正确使用HTML5语义标签
键盘导航：确保所有功能可通过键盘操作
替代文本：为所有非文本内容提供文本替代
6. 现代开发实践
组件化设计：构建可复用的UI组件
设计系统：建立统一的设计语言和模式库
渐进增强：确保基础功能在所有浏览器可用
无障碍优先：从项目开始就考虑可访问性
7. 实用设计模式示例
导航：固定头部、面包屑、分页
表单：内联验证、清晰标签、合理分组
内容展示：卡片布局、分栏、渐进披露
反馈：Toast通知、加载状态、空状态设计
优秀的前端设计是艺术与工程的结合，需要在美观性、功能性、性能和维护性之间取得平衡。随着Web技术的不断发展，这些原则也在持续演进，但以用户为中心的核心思想始终不变。
5.编码实现
MVC设计模式
mvc.png
后端核心类
1、Dao层
全称为Data Access Object，负责数据库执行sql，完成增删查改的功能。提供接口给Service层。
2、Service层
调用Dao层提供的接口，业务处理，为Controller层提供接口。
3、Controller层
负责请求转发，接收用户传来的参数，通过调用Service层提供的接口，实现将数据转发给Service层处理。接收Service的返回值，再转发给用户。
4、POJO
负责数据封装,便于各层之间数据传递
5.1数据库
5.1.1 新建库
库名
ldm
5.1.2 建表语句
DROP TABLE IF EXISTS manager;
DROP TABLE IF EXISTS customer;
CREATE TABLE manager -- 管理员表
(
mid INT PRIMARY KEY auto_increment, -- 管理员id
username VARCHAR(15) UNIQUE NOT NULL, -- 用户名
password VARCHAR(12) , -- 登录密码
role VARCHAR(7) -- 角色 客服 调度中心管理员 配送中心管理员 中心库房管理员 分站库房管理员 分站管理员 配送员
);
INSERT INTO manager(username,password,role)
VALUES('ok','123','客服');
CREATE TABLE customer -- 客户表
(
cid INT PRIMARY KEY auto_increment, -- 客户id
name VARCHAR(15) NOT NULL, -- 客户姓名
idNumber CHAR(18) , -- 身份证
workunit VARCHAR(30), -- 工作单位
landline CHAR(8), -- 座机
mobile CHAR(11), -- 移动电话
contactAddress VARCHAR(50), -- 联系地址
post CHAR(6) , -- 邮编
email VARCHAR(20) -- email
);
INSERT INTO customer(name,idNumber,workunit,landline,mobile,contactAddress,post,email)
VALUES('孟子义','130984199512053333','青岛江河湖海文化传媒工作室','85603066','18302225678','明志楼南103室','710124','zsbgs@mdit.edu.cn');
5.2JakartaEE项目
5.2.1新建项目
5.2.2修改pom.xml文件
<!-- lombok 提升po开发效率 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.38</version>
</dependency>
<!-- fastjson Json数据格式工具 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>2.0.37</version>
</dependency>
<!-- commons-dbcp2 开源数据源 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-dbcp2</artifactId>
<version>2.9.0</version>
</dependency>
<!-- commons-dbutils jdbc封装 -->
<dependency>
<groupId>commons-dbutils</groupId>
<artifactId>commons-dbutils</artifactId>
<version>1.7</version>
</dependency>
<!-- mysql-connector-java 数据库驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.32</version>
</dependency>
5.2.3创建如下包接口
5.2.4新建DBUtil.java类
在util包新建DBUtil类
import org.apache.commons.dbcp2.BasicDataSource;
import javax.sql.DataSource;
public class DBUtil {
private static final DataSource DATA_SOURCE;
static {
BasicDataSource ds = new BasicDataSource();
ds.setDriverClassName("com.mysql.cj.jdbc.Driver");
ds.setUrl("jdbc:mysql://localhost:3306/ldm?characterEncoding=utf8&serverTimezone=Asia/Shanghai");
ds.setUsername("root");
ds.setPassword("root");//密码不是root需要修改
ds.setInitialSize(5);
ds.setMaxTotal(10);
DATA_SOURCE = ds;
}
public static DataSource getDataSource() {
return DATA_SOURCE;
}
}
5.2.5登录功能-后端实现
1.po包下Manager.java
import lombok.Data;
//po类用于数据,与数据库中的表对应
//需要定义私有属性,属性和表中列对应
@Data //生成 setter/getter方法
public class Manager {
private Integer mid;
private String username;
private String password;
private String role;
}
2.dao包下ManagerDao.java
import cn.edu.mdit.ldm.po.Manager;
import cn.edu.mdit.ldm.util.DBUtil;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import java.sql.SQLException;
public class ManagerDao {
//定义QueryRunner类型属性,执行sql语句
private QueryRunner runner = new QueryRunner( DBUtil.getDataSource() );
public Manager selectByUsernameAndPassword( Manager manager ) {
Manager result = null;
String sql = "select * from manager where username=? and password=?";
try {
result = runner.query(sql, new BeanHandler<>(Manager.class) , manager.getUsername(),manager.getPassword() );
} catch (SQLException e) {
throw new RuntimeException(e);
}
return result;
}
}
3.service包下的ManagerService.java
import cn.edu.mdit.ldm.dao.ManagerDao;
import cn.edu.mdit.ldm.po.Manager;
public class ManagerService {
//定义ManagerDao类型属性
private ManagerDao dao = new ManagerDao();
public Manager login( Manager manager ){
return dao.selectByUsernameAndPassword(manager);
}
}
4.controller包下的LoginController.java
import cn.edu.mdit.ldm.po.Manager;
import cn.edu.mdit.ldm.service.ManagerService;
import com.alibaba.fastjson.JSON;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/login") //注册servlet并配置url -- 必须以/开头,不能重复
public class LoginController extends HttpServlet {
//定义ManagerService类型属性
private ManagerService service = new ManagerService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.设置请求及响应
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
//2.获取请求参数数据(前端发送的数据)
String username = request.getParameter("username");
String password = request.getParameter("password");
Manager manager = new Manager();
manager.setUsername(username);
manager.setPassword(password);
//3.调用业务类方法处理数据,获得处理结果
Manager result = service.login(manager);
//4.将处理结果转化为json格式字符串数据,发送给前端
PrintWriter out = response.getWriter();
out.print( JSON.toJSONString(result) );
}
}
5.2.6登录功能-前端实现
使用LayUI组件库-->LayUI
将layui文件夹复制到webapp文件夹下
1.png
login.html登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>管理员登录</title>
<link href="./layui/css/layui.css" rel="stylesheet">
<script src="./layui/layui.js"></script>
<style>
html,body{width: 100%;height: fit-content; background-color: rgba(255, 255, 255, 0.7); /* 半透明白色 */
backdrop-filter: blur(10px); /* 毛玻璃模糊 */}
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
.layui-form{ margin-top: 100px;}
</style>
</head>
<body>
<form class="layui-form">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" id="username" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input id="password" type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<a href="regist.html" style="float: right; margin-top: 7px;">注册</a>
</div>
<div class="layui-form-item">
<button type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
</div>
</div>
</form>
</body>
<script>
//表单提交
layui.use(()=>{
let form = layui.form;//获得表单
let $ = layui.jquery;//简化jQuery调用
// 校验通过
form.on('submit(login)', formData => {
// 此处可执行 发送Ajax请求 操作
$.post('http://localhost:9999/login',formData.field)
.then( res => {
if( res ){
layer.msg('登录成功',{icon: 1})
} else {
layer.msg('登录失败,用户名或密码不正确',{icon: 2})
}
})
});
});
</script>
</html>
5.2.7注册功能-后端实现
1.dao包中ManagerDao类中新增插入管理员数据方法
public int insert(Manager manager){
int result = 0;
String sql = "INSERT INTO manager (username, password, role) VALUES (?, ?, ?)";
try {
result = queryRunner.update(sql,manager.getUsername(),manager.getPassword(),manager.getRole());
} catch (SQLException e) {
throw new RuntimeException(e);
}
return result;//返回插入数据结果，1代表成功 0代表失败
}
2.service包中ManagerService类中新增注册管理员方法
public String regist(Manager manager){
return dao.insert(manager)==1?"注册成功":"注册失败";
}
3.controller包中增加RegistController.java类
import cn.edu.mdit.ldm.po.Manager;
import cn.edu.mdit.ldm.service.ManagerService;
import com.alibaba.fastjson.JSON;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/regist")
public class RegistController extends HttpServlet {
//依赖service
private ManagerService service = new ManagerService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.设置请求及响应
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
//2.获取请求参数数据(注册数据)
String username = request.getParameter("username");
String password = request.getParameter("password");
String role = request.getParameter("role");
Manager manager = new Manager();
manager.setUsername(username);
manager.setPassword(password);
manager.setRole(role);
//3.调用业务类方法,获得注册结果
String result = service.regist(manager);
//4.发送响应
PrintWriter out = response.getWriter();
out.print( JSON.toJSONString(result) );
}
}
5.2.8注册功能-前端实现
regist.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>注册</title>
<link href="./layui/css/layui.css" rel="stylesheet">
<script src="./layui/layui.js"></script>
<style>
.demo-reg-container{width: 320px; margin: 21px auto 0;}
.demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
</head>
<body>
<form class="layui-form">
<div class="demo-reg-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" id="username" name="username" value="" lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" id="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" id="confirmPassword" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">管理员角色</label>
<div class="layui-input-block">
<select name="role">
<option value="客服">客服</option>
<option value="调度中心管理员">调度中心管理员</option>
<option value="配送中心管理员">配送中心管理员</option>
<option value="配送中心管理员">中心库房管理员</option>
<option value="配送中心管理员">分站库房管理员</option>
<option value="配送中心管理员">分站管理员</option>
<option value="配送中心管理员">配送员</option>
</select>
</div>
</div>
<div class="layui-form-item">
<button id="btn-regist" class="layui-btn layui-btn-fluid" type="button" lay-submit lay-filter="reg">注册</button>
</div>
<div class="layui-form-item demo-reg-other">
<label>社交账号注册</label>
<span style="padding: 0 21px 0 6px;">
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
</span>
<a href="login.html">登录已有帐号</a>
</div>
</div>
</form>
</body>
<script>
layui.use(()=>{
let form = layui.form;
let $ = layui.jquery;
// 自定义验证规则
form.verify({
// 确认密码
confirmPassword: (value, item)=>{
let passwordValue = $('#password').val();
if(value !== passwordValue){
return '两次密码输入不一致';
}
}
});
// 校验通过
form.on('submit(reg)', formData => {
// 此处可执行 发送Ajax请求 操作
let loadIndex = layer.load(2,{content: '处理中'})
$.post('http://localhost:9999/regist',formData.field)
.then(res=>{
layer.close(loadIndex);
layer.msg(res)
})
});
});
</script>
</html>
5.2.9 登录成功后跳转首页
1.新增index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>物流配送系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./layui/css/layui.css" rel="stylesheet">
<script src="./layui/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">物流配送管理系统</div>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<span id="username">tester</span>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">客户服务中心</a>
<dl class="layui-nav-child">
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div id="main" style="padding: 15px;">
<blockquote class="layui-elem-quote layui-text">
物流配送管理系统
</blockquote>
<div class="layui-card layui-panel">
<div class="layui-card-body">
随着流通经济的发展，现代物流的重要性越来越受到人们的关注，<br>
为了降低成本、提高效益、充分发挥自身核心竞争力、增强企业对环境的迅速应变能力、<br>
第三方物流这种新兴物流形态和管理模式开始引起人们的重视。<br>
第三方物流企业引进先进的信息处理技术，<br>
不仅会提高物流企业的自动化程度和信息共享度、降低成本、提高工作效率还会从根本上改变物流企业的发展战略。<br>
当前第三方物流的竞争主要围绕着信息资源的占有而展开。
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let $ = layui.jquery
//初始化菜单
const menus = [
{
name: '客户维护管理',
path: './customerquery.html'
}
]
menus.forEach( menu => {
let dd = $('<dd>')
let a = $('<a></a>')
a.text(menu.name)
a.click(()=>{
$('#main').html('')
$("#main").load(menu.path);
})
dd.append(a)
$('.layui-nav-child').append(dd)
})
</script>
</html>
2.修改login.html
将原来的登录成功后，弹出消息
layer.msg('登录成功',{icon: 1})
替换为
sessionStorage.setItem('manager', JSON.stringify(res));
window.location.assign('./index.html');
5.2.10 客户信息查询功能-后端开发
1.在po包下新建Customer类
import lombok.Data;
@Data
public class Customer {
private Integer cid;
private String name;
private String idNumber;
private String workunit;
private String landline;
private String mobile;
private String contactAddress;
private String post;
private String email;
}
2.在po包下新建TableData类
import lombok.Data;
import java.util.List;
@Data
public class TableData {
private Integer code;
private String msg;
private Integer count;
private List data;
}
3.在dao包下新增CustomerDao类
import cn.edu.mdit.ldm.po.Customer;
import cn.edu.mdit.ldm.util.DBUtil;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import java.sql.SQLException;
import java.util.List;
public class CustomerDao {
private QueryRunner runner = new QueryRunner( DBUtil.getDataSource() );
public List<Customer> selectByName(String name){
List<Customer> list = null;
String sql = "select * from customer where name like ?";
try {
list = runner.query(sql,new BeanListHandler<>(Customer.class),"%"+name+"%" );
} catch (SQLException e) {
throw new RuntimeException(e);
}
return list;
}
}
4.在service包下新增CustomerService类
import cn.edu.mdit.ldm.dao.CustomerDao;
import cn.edu.mdit.ldm.po.Customer;
import java.util.List;
public class CustomerService {
private CustomerDao dao = new CustomerDao();
public List<Customer> queryCustomer(String name) {
return dao.selectByName(name);
}
}
5.在controller包下新增CustomerQueryController类
import cn.edu.mdit.ldm.po.Customer;
import cn.edu.mdit.ldm.po.TableData;
import cn.edu.mdit.ldm.service.CustomerService;
import com.alibaba.fastjson.JSON;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/customer/query")
public class CustomerQueryController extends HttpServlet {
private CustomerService service = new CustomerService();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=UTF-8");
String name = request.getParameter("name");
List<Customer> result = service.queryCustomer(name);
PrintWriter out = response.getWriter();
//将查询客户数据封装到layui需要的数据结构
TableData tableData = new TableData();
tableData.setCode(0);
tableData.setMsg("success");
tableData.setCount( result.size() );
tableData.setData( result );
out.print( JSON.toJSONString(tableData) );
}
}
5.2.11 客户信息查询功能-前端开发
在webapp下新增customerquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<blockquote class="layui-elem-quote layui-text">
客户维护管理
</blockquote>
<div class="layui-card layui-panel">
<div class="layui-card-body">
<input type="text" style="width: 200px;display: inline;" id="name" placeholder="请输入查询客户姓名" class="layui-input">
<button type="button" id="btn-query" class="layui-btn layui-bg-blue">查询</button>
<button type="button" id="btn-add" class="layui-btn">增加</button>
</div>
</div>
<table class="layui-table" id="table"></table>
</body>
<script>
$('#btn-add').click(()=>{
layer.open({
type: 2,
title: '增加',
shadeClose: true,
shade: 0.1,
area: ['580px', '90%'],
content: './customeradd.html'
});
})
</script>
</html>
客户新增页面customeradd.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./layui/css/layui.css" rel="stylesheet">
<script src="./layui/layui.js"></script>
<style>.layui-input{width: 80%}</style>
</head>
<body>
<form class="layui-form" >
<div class="layui-form-item">
<label class="layui-form-label">客户姓名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" lay-reqtext="请填写客户姓名" placeholder="请输入客户姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身份证编号</label>
<div class="layui-input-block">
<input type="text" name="idNumber" lay-verify="required" lay-reqtext="请填写身份证编号" placeholder="请输入身份证编号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">工作单位</label>
<div class="layui-input-block">
<input type="text" name="workunit" placeholder="请输入工作单位" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">座机</label>
<div class="layui-input-block">
<input type="text" name="landline" placeholder="请输入座机" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">移动电话</label>
<div class="layui-input-block">
<input type="text" name="mobile" lay-verify="required" lay-reqtext="请填写移动电话" placeholder="请输入移动电话" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系地址</label>
<div class="layui-input-block">
<input type="text" name="contactAddress" lay-verify="required" lay-reqtext="请填写联系地址" placeholder="请输入联系地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮编</label>
<div class="layui-input-block">
<input type="text" name="post" placeholder="请输入邮编" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">E-mail</label>
<div class="layui-input-block">
<input type="text" name="email" placeholder="请输入E-mail" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" lay-submit lay-filter="customeradd">提交</button>
</div>
</div>
</form>
</body>
<script>
layui.use(()=>{
let form = layui.form;//获得表单
// 校验通过
form.on('submit(customeradd)', formData => {
// 此处可执行 发送Ajax请求 操作
});
});
</script>
</html>
