一.分级建立项目包
1.建立department包（实作有关department表的操作）
① 建立dao包（实作数据库中department的增删改查操作 建立java和数据库直接的联系）
（1）添加记录
（2）根据主键洗掉
（3）根据查询条件洗掉
（4）根据主键修改其它全部栏位
（5）根据主键修改部分其他栏位
（6）根据多条件模糊查询记录
（7）根据主键查询一条记录
② 建立model包（创建有关department物体类）
③ 建立service包
④ 建立servlet包
2.建立employee包（实作有关employee表的操作）
① 建立dao包（实作数据库中employee的增删改查操作 建立java和数据库直接的联系）
（1）添加记录
（2）根据主键洗掉
（3）根据查询条件洗掉
（4）根据主键修改其它全部栏位
（5）根据主键修改部分其他栏位
（6）根据多条件模糊查询记录
（7）根据主键查询一条记录
② 建立model包（创建有关employee物体类）
③ 建立service包
④ 建立servlet包
3.建立project包（实作有关project表的操作）
① 建立dao包（实作数据库中project的增删改查操作 建立java和数据库直接的联系）
（1）添加记录
（2）根据主键洗掉
（3）根据查询条件洗掉
（4）根据主键修改其它全部栏位
（5）根据主键修改部分其他栏位
（6）根据多条件模糊查询记录
（7）根据主键查询一条记录
② 建立model包（创建有关project物体类）
③ 建立service包
④ 建立servlet包
4.建立score包（实作有关score表的操作）
① 建立dao包（实作数据库中score的增删改查操作 建立java和数据库直接的联系）
（1）添加记录
（2）根据主键洗掉
（3）根据查询条件洗掉
（4）根据主键修改其它全部栏位
（5）根据主键修改部分其他栏位
（6）根据多条件模糊查询记录
（7）根据主键查询一条记录
② 建立model包（创建有关score物体类）
③ 建立service包
④ 建立servlet包
5.建立until 工具包（封装工具类简化代码）
① 建立JDBCUtil工具类（数据库加载、数据库连接、数据库操作、数据库关闭、）
② 建立FmtEmpty(判空)
③ 建立jdbc 组态档
6.建立init 工具包（封装工具类简化代码）
① 建立CharFilter工具类（解决数据库中文乱码的问题）
二、 整个系统的互动程序（开发流程）
①建立工具类
（1）hedaer 封装路径（java代码获取、EL表达式获取）
②创建注册界面（reg.jsp） css(base.css -- window样式)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="UTF-8"> -->
<title>注册页面</title>
<!-- <link rel="stylesheet" href="https://www.cnblogs.com/demo220111/web/base/layui/css/layui.css" > -->
<!-- <script type="text/javascript" src="https://www.cnblogs.com/demo220111/web/base/layui/layui.js" ></script> -->
<!-- 利用包含来简化代码（工具类） -->
<%@ include file="/web/header.jsp" %>
</head>
<body >
<div >
<fieldset >
<legend>注册</legend>
<div >
<form >
<div >
<label >账号</label>
<div >
<input type="text" name="code" required lay-verify="required"
placeholder="请输入账号" autocomplete="off" >
</div>
</div>
<div >
<label >密码</label>
<div >
<input type="password" name="pass" required lay-verify="required"
placeholder="请输入密码" autocomplete="off" >
</div>
</div>
<div >
<label >姓名</label>
<div >
<input type="text" name="name" required lay-verify="required"
placeholder="请输入姓名" autocomplete="off" >
</div>
</div>
<div >
<div >
<input type="button" value="https://www.cnblogs.com/xmczrj/p/注册" lay-submit lay-filter="reg" >
<input type="reset" value="https://www.cnblogs.com/xmczrj/p/重置" >
</div>
<input type="button" value="https://www.cnblogs.com/xmczrj/p/回传登录" onclick="">
</div>
<!-- reg是传递给EmployeeServlet 自变量 -->
<input type="hidden" name="action" value="https://www.cnblogs.com/xmczrj/p/reg" >
</form>
</div>
</fieldset>
</div>
<script type="text/javascript">
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
form.on("submit(reg)",function(data){
//layer.msg("1111");
console.log(data.field)
$.ajax({//四个属性一个方法
url : base.app +"/EmployeeServlet",
type : "post",
data : data.field, //a=b&c=d /{a:b,c:d}
dataType : "text",//text / json
success : function(data){
console.log(data)
// todo
}
});
});
</script>
</body>
</html>
（1） <input type="button" value="https://www.cnblogs.com/xmczrj/p/注册" lay-submit lay-filter="reg" > 输入框不能为空
触发回呼方法（测验段）
var form = layui.form;
var layer = layui.layer;
form.on("submit(reg)",function(data){
layer.msg("1111");
});
（2）注册页面请求，是请求到employee表中，注册员工信息
触发回呼方法（应用段）
<script type="text/javascript">
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
form.on("submit(reg)",function(data){
//layer.msg("1111");
console.log(data.field)
$.ajax({//四个属性一个方法
url:"",
data:"",
type:"",
dataType:"",
success:function(data){
}
});
});
</script>
（3）撰写EmployeeServlet类中的方法 （接受请求、获取资料、封装物件、呼叫方法、回传结果）
注解@WebServlet("/EmployeeServlet")
实作ajax请求互动
private static final long serialVersionUID =1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String res = null;
switch (req.getParameter("action")) {
case "reg":
res = reg(req);
break;
}
// ajax 请求接收
PrintWriter writer = resp.getWriter();
writer.write(res);
writer.flush();
writer.close();
writer = null ;
}
private String reg(HttpServletRequest req) {
String code = req.getParameter("code");
String pass = req.getParameter("pass");
String name = req.getParameter("name");
EmployeeModel model = new EmployeeModel(code,name,pass);
return service.insert(model);
}
（4） 实作员工注册功能（主要测验能否互动）
![]()
![]()
（5） 完善员工注册功能（主要完善业务逻辑）
PS：
private static String table = "employee";
private static String cols = "code,name,pass,code_dept,image";
// 此处的数据库表栏位 在方法中可以不使用某一个，但是不能在方法中使用没有的表栏位
1.reg.jsp 档案
form.on("submit(reg)",function(data){
//layer.msg("1111");
//console.log(data.field)
$.ajax({//四个属性一个方法
url : base.app +"/EmployeeServlet",
type : "post",
data : data.field, //a=b&c=d /{a:b,c:d}
dataType : "text",//text / json
success : function(data){
// console.log(data) 测验ajax请求是否可用
// todo
if(data=https://www.cnblogs.com/xmczrj/p/=1){
layer.msg("注册成功")
}else if(data =https://www.cnblogs.com/xmczrj/p/="repeat"){
layer.msg("注册失败，账号重复")
}else{
layer.msg("注册失败")
}
}
});
});
2.EmployeeServiceImpl 档案
public String insert(EmployeeModel model) {
// return dao.insert(model) + ""; 测验能否实作互动
// 完善业务逻辑
// 在EmployeeModel 创建code构造方法
EmployeeModel m1 = new EmployeeModel(model.getCode());
EmployeeModel mdb = dao.selectModel(m1);
if (mdb != null)
return "repeat";
return dao.insert(model) + "";
}
3.EmployeeModel 创建code 构造方法
public EmployeeModel(String code) {
super();
this.code = code;
}
4.给reg.jsp 页面添加互动操作（判断注册是否成功）
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
form.on("submit(reg)",function(data){
//layer.msg("1111");
//console.log(data.field)
$.ajax({//四个属性一个方法
url : base.app +"/EmployeeServlet",
type : "post",
data : data.field, //a=b&c=d /{a:b,c:d}
dataType:'text',//text / json
success : function(data){
//console.log(data) //测验ajax请求是否可用
// todo
if(data=https://www.cnblogs.com/xmczrj/p/=1){
layer.msg("注册成功")
}else if(datahttps://www.cnblogs.com/xmczrj/p/=="repeat"){
layer.msg("注册失败，账号重复")
}else{
layer.msg("注册失败")
}
}
error:function(){// 例外处理
alert("注册失败，账号重复");
}
});
});
5.使用工具类来简化reg.jsp 页面添加操作的代码
header.jsp (将参考路径进行封装)
<!-- java代码 获取工程名 -->
<% String app=request.getContextPath(); %>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.cnblogs.com/xmczrj/p//web/base/css/base.css" >
<link rel="stylesheet" href="https://www.cnblogs.com/xmczrj/p//web/base/layui/css/layui.css" >
<script type="text/javascript" src="https://www.cnblogs.com/xmczrj/p//web/base/layui/layui.js" ></script>
<!-- EL表达式 获取工程名 -->
<script>
var base={
app:"${pageContext.request.contextPath}"
}
</script>
<script type="text/javascript" src="https://www.cnblogs.com/xmczrj/p//web/base/js/base.js"></script>
base.js 工具类（将操作方法进行封装）
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
// 添加监听
function formSubmit(event,url,dataType,func){
//console.log(event) 除错
form.on("submit(" +event+")",function(data){
// console.log(data.field)除错
ajax(url,data.field,dataType,func)
})
}
function ajax(url,field,dataType,func){
//console.log(field)
$.ajax({//四个属性一个方法
url : base.app + url,
type : "post",
data : field,
dataType : dataType, //后采用
//dataType : "text",//text / json
success : func
// error:function(){// 例外处理
// alert("注册失败，账号重复");
// }
});
}
-
封装 关于请求的 FmtRequest 类
public class FmtRequest {
/**
* 根据传过来的所有自变量得到物体类的物件
* 根据请求的自变量情况反射物体类的物件 (请求的自变量名与物体类的属性名一致 ,并且一个自变量名对应一个自变量值 )
*
* @param <T> 反射
* @param req
* @param clazz
* @return
*/
public static <T> T parseModel(HttpServletRequest req,Class<T> clazz) {
T obj = null;
try {
obj = clazz.newInstance();
} catch (InstantiationException | IllegalAccessException e) {
e.printStackTrace();
return null;
}
0 评论