二.案例演示
1.前端注册
1.1.前端界面
仅为测试使用，所以没有去用特别复杂的参数传递
前端代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <link rel="stylesheet" href="static/css/iconfont.css"> <link rel="stylesheet" href="static/css/login.css"> <head> <%@include file="common/header.jsp" %> <style> body { color: #; } a { color: #; } a:hover { color: #; } .bg-black { background-color: #; } .tx-login-bg { background: url(static/images/bg.jpg) no-repeat 0 0; } </style> <script type="text/javascript"> layui.use(['jquery','layer'], function() { let $ = layui.jquery; let layer = layui.layer; $("#register").click(function() { $.ajax({ url: "${pageContext.request.contextPath}/user.action?methodName=Register", data: { name: $("#username").val(), loginname: $("#loginname").val(), password: $("#password").val(), rid: $("#rid").val() }, type: 'post', dataType: 'json', success: function(data) { if(data > 0) { layer.alert('注册成功', {icon: 1}); } else { layer.alert('注册失败', {icon: 5}); } } }) }) }); </script> </head> <body class="tx-login-bg"> <div class="tx-login-box"> <div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div> <ul class="tx-form-li row"> <li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="请输入姓名" class="tx-input"></p></li> <li class="col-24 col-m-24"><p><input type="text" id="loginname" placeholder="请输入登录名" class="tx-input"></p></li> <li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="请输入密码" class="tx-input"></p></li> <li class="col-24 col-m-24"><p><input type="text" id="rid" placeholder="请输入身份id" class="tx-input"></p></li> <li class="col-24 col-m-24"><p class="tx-input-full"><button id="register" class="tx-btn tx-btn-big bg-black">注册</button></p></li> <li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">返回登录</a></p></li> </ul> </div> </body> </html>
详解:
[]中的表示用到的技术
利用ajax进行参数传递及XML的方式进行方法选择
1.2 后端验证
(1).dao方法
//获取最大id public int getMaxId() throws Exception { //创建连接 Connection conn = DBAccess.getConnection(); int id = 0; String sql = "select MAX(id) from t_oa_user"; PreparedStatement ps = conn.prepareStatement(sql); ResultSet rs = ps.executeQuery(); if(rs.next()) { id = rs.getInt(1); } return id; } //注册 public int register(User user) throws Exception { //创建连接 Connection conn = DBAccess.getConnection(); String sql = "insert into t_oa_user(id,name,loginName,pwd,rid) values(?,?,?,?,?)"; PreparedStatement ps = conn.prepareStatement(sql); ps.setLong(1, user.getId()); ps.setString(2, user.getName()); ps.setString(3, user.getLoginname()); ps.setString(4, user.getPwd()); ps.setLong(5, user.getRid()); int n = ps.executeUpdate(); return n; }
通过方法获取最大id(id唯一),将封装好的对象参数进行传递进行注册
(2).后端验证
package com.zking.web; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.zking.dao.UserDao; import com.zking.entity.User; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; import com.zking.util.ResponseUtil; public class UserAction extends ActionSupport implements ModelDriver<User>{ private User user = new User(); private UserDao ud = new UserDao(); public void Register(HttpServletRequest req,HttpServletResponse reps) { try { //先获取最大的id数 int maxId = ud.getMaxId(); user = new User(maxId+1, req.getParameter("name"), req.getParameter("loginname"), req.getParameter("password"), Long.parseLong(req.getParameter("rid"))); int register = ud.register(user); ResponseUtil.writeJson(reps, register); } catch (Exception e) { e.printStackTrace(); } } @Override public User getModel() { return user; } }
将参数封装到对象中并通过dao方法进行增加，利用工具类进行回显
注：UserAction需要到XML中进行配置
配置后在前端进行使用
根据后端回显数据，进行返回结果
icon是Layui中的标签库的样式，可到参考网址进行查看
三.总结
layui为我们提供大量的标签库和组件，它的轻量化使其应用在很多后端中，它的简洁也深受很多程序员的喜爱，使用方式也非常简便，虽然它已经下线，但这并不掩盖它的强大
