登录小项目 js+servlet+jdbc+mvc

项目名称:
沪上阿姨
实现需求:
实现用户登录
实现用户退出
实现用户注册
功能分析:
用户登录:
根据用户名和密码查询用户信息。查询则登录成功,查不到则登录失败。
用户退出:
销毁session
用户注册:
将用户注册信息插入数据库
数据库设计:
用户表:
用户id
用户名
用户密码:
用户性别;
用户年龄:
SQL语句设计:
用户登录
select * from t_user where uname and pwd=?
用户注册:
insert into t_user values(default,?,?,?,?,?)
------------------------------------------------------------------------------
问题:
现在我们一个请求或者一个独立的业务逻辑都单独进行一个Servlet的创建进行请求处理。
但是一个网站的功能是非常的多,如果每个都创建单独的Servlet进行处理,这样造成Servlet过多。造成资源浪费。
解决:
服务器在接收到浏览器发送的请求后,会调用对应的servlet进行请求处理。
然后调用servlet中的servelt方法进行处理。
在servlet方法中调用其对应的功能处理方法进行请求处理 。
这样servlet我们只需要一个就可以了。

新的问题:
如何在service方法中实现根据请求动态的调用其功能处理方法呢?
解决:
使用反射
注意:
请求中需要附带要执行的方法名称。
-------------------------------------------------------------------------
问题二:
现在使用反射我们实现了在servlet方法中动态的根据请求调用对应的方法进行处理
但是真实开发过程中,虽然不会每个功能都创建一个servlet,但是也不会只使用一个servlet,我们servlet也不只一个,
一般是一个独立功能的模块一个servlet。我们需要在这些servlet的service方法中将反射代码声明一遍。
解决:
向上抽取BaseServlet类
实现:
我们自己得servlet--->
向上抽取父类BaseServlet(service)
注意: 我们希望BaseServlet不能被访问到(不能web.xml中配置BaseServlet)
我们希望BaseServlet不能被实例化(改为抽象类)
--------------->HttpServlet
BaseServlet使用:
1.创建Servlet继承BaseServlet即可
2.在自己得servlet中不要声明service方法,只要书写请求处理功能方法即可。
3.正常访问自己的servlet
注意:
请求必须附带被执行得方法名。
------------------------------------------------------------------------
JSP+Servlet项目整合练习总结和期望:
总结:
1.套用模板进行页面快速构建
在自己的项目中创建jsp文件
然后将模板中的前端相关代码赋值到自己的jsp文件中
将静态资源复制到 webRoot下
2.MVC的开发流程
M:model service dao pojo
v:view jsp js css html
c:control Servlet
3. Servlet+jsp+jdbc的功能开发数据流程
1.浏览器发起页面请求直接给jsp
2.浏览器发送功能请求给servlet. servlet调用service 。service进行业务逻辑处理,
service调用dao。dao层进程数据库操作(jdbc)。dao层将处理结果返回service
service再将结果返回给servlet,请求转发或者重定向给jsp。jsp做出页面响应。

4.request和session 作用域的使用
5.浏览器发起请求到服务器请求发起的方式
6.BaseServlet的抽取和使用。
--------------------------------------------------------
项目缺陷:
1.在jsp中获取从servelt流转过来的数据特别麻烦
2.在jsp页面中使用java代码块进行逻辑处理书写和阅读不方便
3.使用session进行数据流转是很方便的,但是session失效了,所有依赖session的功能都会出问题。
4.响应结果都是覆盖原有内容显示给用户。

代码如下:

Dao

package wq.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet; import wq.dao.UserDao;
import wq.util.DBUtil;
import wq.pojo.*; public class UserDaoImpl implements UserDao {
//查询用户信息
@Override
public User getUserInfoDao(String uname, String pwd) {
//声明jdbc变量
Connection conn=null;
PreparedStatement ps=null;
ResultSet rs=null;
//声明变量
User u=null;
try {
//创建连接
conn=DBUtil.getConnection();
//创建SQL命令
String sql="select * from t_user where uname=? and pwd=?";
//创建SQL命令对象
ps=conn.prepareStatement(sql);
//给占位符赋值
ps.setString(,uname);
ps.setString(, pwd);
//执行SQL命令
rs=ps.executeQuery();
//遍历
while(rs.next()){
//给变量赋值
u=new User(); u.setUid(rs.getInt("uid"));
u.setUname(rs.getString("uname"));
u.setPwd(rs.getString("pwd"));
u.setSex(rs.getString("sex"));
u.setAge(rs.getInt("age"));
u.setBirthday(rs.getString("birthday"));
}
} catch (Exception e) {
e.printStackTrace();
}finally{//关闭资源
DBUtil.closeAll(rs, ps, conn);
}
//返回结果
return u;
}
//用户注册
@Override
public int regUserinfoService(String uname, String pwd, String sex,
int age, String birthday) {
String sql="insert into t_user values(default,?,?,?,?,?)"; return DBUtil.executeDML(sql, uname,pwd,sex,age,birthday);
} }
package wq.dao;

import wq.pojo.User;

public interface UserDao {
/**
* 根据用户名和密码查询用户信息
* @author Administrator
*
*/
User getUserInfoDao(String uname, String pwd);
/**
* 用户注册
* @param uname
* @param pwd
* @param sex
* @param age
* @param birthday
* @return
*/ int regUserinfoService(String uname, String pwd, String sex, int age,
String birthday); }

User

package wq.pojo;

public class User {
private int uid;
private String uname;
private String pwd;
private String sex;
private int age;
private String birthday;
public int getUid() {
return uid;
}
public void setUid(int uid) {
this.uid = uid;
}
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
@Override
public String toString() {
return "User [uid=" + uid + ", uname=" + uname + ", pwd=" + pwd
+ ", sex=" + sex + ", age=" + age + ", birthday=" + birthday
+ "]";
}
@Override
public int hashCode() {
final int prime = ;
int result = ;
result = prime * result + age;
result = prime * result
+ ((birthday == null) ? : birthday.hashCode());
result = prime * result + ((pwd == null) ? : pwd.hashCode());
result = prime * result + ((sex == null) ? : sex.hashCode());
result = prime * result + uid;
result = prime * result + ((uname == null) ? : uname.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
User other = (User) obj;
if (age != other.age)
return false;
if (birthday == null) {
if (other.birthday != null)
return false;
} else if (!birthday.equals(other.birthday))
return false;
if (pwd == null) {
if (other.pwd != null)
return false;
} else if (!pwd.equals(other.pwd))
return false;
if (sex == null) {
if (other.sex != null)
return false;
} else if (!sex.equals(other.sex))
return false;
if (uid != other.uid)
return false;
if (uname == null) {
if (other.uname != null)
return false;
} else if (!uname.equals(other.uname))
return false;
return true;
}
public User() {
super();
// TODO Auto-generated constructor stub
}
public User(int uid, String uname, String pwd, String sex, int age,
String birthday) {
super();
this.uid = uid;
this.uname = uname;
this.pwd = pwd;
this.sex = sex;
this.age = age;
this.birthday = birthday;
} }

service

package wq.service.impl;

import wq.dao.UserDao;
import wq.dao.impl.UserDaoImpl;
import wq.pojo.User;
import wq.service.UserService; public class UserServiceImpl implements UserService{ //创建Dao层对象
UserDao ud=new UserDaoImpl();
@Override
public User getUserInfoService(String uname, String pwd) { //处理登录业务
return ud.getUserInfoDao(uname, pwd);
}
@Override
public int reqUserinfoService(String uname, String pwd, String sex,
int age, String birthday) {
//处理注册业务
return ud.regUserinfoService(uname,pwd,sex,age,birthday); } }
package wq.service;

import wq.pojo.User;

public interface UserService {
/**
* 用户登录
* @param uname
* @param pwd
* @return
*/
User getUserInfoService(String uname, String pwd);
/**
* 用户注册
* @param uname
* @param pwd
* @param sex
* @param age
* @param birthday
* @return
*/ int reqUserinfoService(String uname, String pwd, String sex, int age,
String birthday); }

servlet

package wq.servlet;

import java.io.IOException;
import java.lang.reflect.Method; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public abstract class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("utf-8");
//设置响应编码格式
resp.setContentType("text/html;charset=utf-8");
//获取请求信息
String methodName=req.getParameter("method");
//调用方法处理请求(动态根据方法名调用方法--->反射)
try {
//反射获取方法所在的类的类对象
Class cla=this.getClass();
//反射获取要被调用的方法对象
Method m=cla.getMethod(methodName, HttpServletRequest.class,HttpServletResponse.class);
//反射执行方法
m.invoke(this, req,resp);
} catch (Exception e) {
e.printStackTrace();
}
}
}
package wq.servlet;

import java.io.IOException;
import java.lang.reflect.Method; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession; import wq.pojo.User;
import wq.service.UserService;
import wq.service.impl.UserServiceImpl;
/***
* servlet创建一个,在service方法中动态的调用请求处理方法。
* 注意:
* 请求中需要附带要调用的方法名
*
*
*
* @author MyPC
*
*/
public class DataServlet extends BaseServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置请求编码格式
req.setCharacterEncoding("utf-8");
//设置响应编码格式
resp.setContentType("text/html;charset=utf-8");
//获取请求信息
String methodName=req.getParameter("method");
System.out.println("DataServlet.service(当前请求方法名为:)"+methodName);
//调用方法处理请求(动态根据方法名调用方法--->反射)
try {
//反射获取方法所在的类的类对象
Class cla=this.getClass();
//反射获取要被调用的方法对象
Method m=cla.getMethod(methodName, HttpServletRequest.class,HttpServletResponse.class);
//反射执行方法
m.invoke(this, req,resp);
} catch (Exception e) {
e.printStackTrace();
}
}
//登录处理方法
public void userLogin(HttpServletRequest req, HttpServletResponse resp) throws IOException{
System.out.println("DataServlet.userLogin(开始处理用户登录请求)");
//获取请求信息
String uname=req.getParameter("uname");
String pwd=req.getParameter("pwd");
//处理请求信息
System.out.println(uname+":"+pwd);
//创建业务层对象
UserService us=new UserServiceImpl();
User u=us.getUserInfoService(uname,pwd);
System.out.println("用户登录查询结果为:"+u);
//响应处理结果
//创建或者获取session对象
HttpSession hs=req.getSession();
if(u!=null){//登录成功
//将用户信息存储到session中
hs.setAttribute("user",u);
//重定向到main.jsp
resp.sendRedirect("/project2/main.jsp");
}else{//登录失败 //将登录失败的标记添加到session中
hs.setAttribute("flag", "loginFalse");
//重定向到login.jsp
resp.sendRedirect("/project2/login.jsp");
}
}
//退出处理方法
public void userOut(HttpServletRequest req, HttpServletResponse resp) throws IOException{
System.out.println("DataServlet.userOut(用户退出开始处理)");
//获取请求信息
//处理请求信息
//获取session
HttpSession hs = req.getSession();
//销毁session
hs.invalidate();
//响应处理结果
//重定向
resp.sendRedirect("/project2/login.jsp"); }
//注册处理方法
public void userReg(HttpServletRequest req, HttpServletResponse resp) throws IOException{
System.out.println("DataServlet.userReg(用户注册开始处理)");
//获取请求信息
String uname=req.getParameter("uname");
String pwd=req.getParameter("pwd");
String sex=req.getParameter("sex");
int age=Integer.parseInt(req.getParameter("age"));
String birthday=req.getParameter("birthday");
//处理请求信息
//获取业务层对象
UserService us=new UserServiceImpl();
//处理注册
int i=us.reqUserinfoService(uname,pwd,sex,age,birthday);
//响应处理结果
//获取Session对象
HttpSession hs=req.getSession();
//重定向到登录页面
if(i>){
//给注册成功添加标记到session中
hs.setAttribute("flag", "regSuccess");
resp.sendRedirect("/project2/login.jsp");
}else{
//重定向到注册页面
resp.sendRedirect("/project2/login.jsp");
}
} }

DBUtil

package wq.util;

import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties; public class DBUtil {
//声明全局变量记录jdbc参数
private static String driver;
private static String url;
private static String username;
private static String password;
//使用静态代码块,在类加载时即完成对属性文件的读取
static{
//动态获取属性配置文件的流对象
InputStream in=DBUtil.class.getResourceAsStream("/db.properties");
//创建Properties对象
Properties p=new Properties();
//加载
try {
p.load(in);//会将属性配置文件的所有数据存储到Properties对象中
//将读取的jdbc参数赋值给全局变量
driver=p.getProperty("driver");
url=p.getProperty("url");
username=p.getProperty("username");
password=p.getProperty("password");
//加载驱动
Class.forName(driver);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//创建连接对象并返回
public static Connection getConnection(){
Connection conn=null;
try {
conn = DriverManager.getConnection(url, username, password);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} return conn;
}
//关闭资源
public static void closeAll(ResultSet rs,Statement stmt,Connection conn){
try {
if(rs!=null){
rs.close();
}
} catch (SQLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
try {
stmt.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} }
//封装增加删除修改的通用工具方法
/**
* @param sql SQL语句
* @param objs SQL语句占位符实参,如果没有参数则传入null
* @return 返回增删改的结果,类型为int
*/
public static int executeDML(String sql,Object...objs){
// 声明jdbc变量
Connection conn = null;
PreparedStatement ps = null;
int i = -;
try {
// 获取连接对象
conn = DBUtil.getConnection();
// 开启事务管理
conn.setAutoCommit(false);
// 创建SQL命令对象
ps = conn.prepareStatement(sql);
// 给占位符赋值
if(objs!=null){
for(int j=;j<objs.length;j++){
ps.setObject(j+,objs[j]);
}
}
// 执行SQL
i = ps.executeUpdate();
conn.commit();
} catch (Exception e) {
try {
conn.rollback();
} catch (SQLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
e.printStackTrace();
} finally {
DBUtil.closeAll(null, ps, conn);
}
return i;
} }

db.properties

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/project
username=root
password=root

前端部分代码

login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!--
添加前端代码书写插件
插件在资料中,将查询包放到myEclipse的安装目录中的drops文件中,然后重启myEclipse即可。
安装后快捷键为:ctrl+E
模版套用:
在自己的项目中创建模版对应的jsp文件
将jsp文件中的basepath代码移动到其他位置
然后将模版中的HTML代码整个复制到对应的jsp中
然后将basepath在移动会head标签中
将模版中的前端资源文件复制到webRoot下。
-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>登录</title>
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.js"></script>
<script src="js/pintuer.js"></script>
</head>
<body>
<div class="bg"></div>
<div class="container">
<div class="line bouncein">
<div class="xs6 xm4 xs3-move xm4-move">
<div style="height:150px;"></div>
<div class="media media-y margin-big-bottom">
</div>
<form action="data" method="post">
<!-- 声明请求处理方法 -->
<input type="hidden" name="method" value="userLogin"/>
<div class="panel loginbox">
<div class="text-center margin-big padding-big-top"><h1>尚学堂后台管理中心</h1></div>
<!--声明java代码块 -->
<%
//获取session中的标记
Object obj=session.getAttribute("flag");
if(obj!=null){
if("loginFalse".equals((String)obj)){
%>
<div style="text-align: center;color:red;">用户名或密码错误</div>
<%
}else if("regSuccess".equals((String)obj)){
%>
<div style="text-align: center;color:red;">用户注册成功</div>
<%
}
}
session.invalidate();
%>
<div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
<div class="form-group">
<div class="field field-icon-right">
<input type="text" class="input input-big" name="uname" placeholder="登录账号" data-validate="required:请填写账号" />
<span class="icon icon-user margin-small"></span>
</div>
</div>
<div class="form-group">
<div class="field field-icon-right">
<input type="password" class="input input-big" name="pwd" placeholder="登录密码" data-validate="required:请填写密码" />
<span class="icon icon-key margin-small"></span>
</div>
</div>
<div class="form-group">
<div class="field">
<input type="text" class="input input-big" name="code" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
<img src="data:images/passcode.jpg" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'">
</div>
</div>
</div>
<div style="padding:30px;"><input type="submit" class="button button-block bg-main text-big input-big" value="登录"></div>
<div style="font-size: 15px;position: relative;left:300px;top:-20px;"><a href="register.jsp">注册</a></div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

main.jsp

<%@ page language="java" import="java.util.*,wq.pojo.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>后台管理中心</title>
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.js"></script>
<!--声明js代码域 -->
<script type="text/javascript">
$(function(){
//给退出登录添加单击事件
$("#out").click(function(){
return window.confirm("你真的要退出吗?");
})
}) </script> </head>
<body style="background-color:#f2f9fd;">
<div class="header bg-main">
<div class="logo margin-big-left fadein-top">
<h1><img src="data:images/y.jpg" class="radius-circle rotate-hover" height="50" alt="" />尚学堂后台管理中心</h1>
</div>
<div class="head-l" style="position: relative;left:850px;"><span style="font-size: 15px;color:white;">当前用户:<%=((User)session.getAttribute("user")).getUname()%></span>&nbsp;&nbsp;<a id="out" class="button button-little bg-red" href="data?method=userOut"><span class="icon-power-off"></span> 退出登录</a> </div>
</div>
<div class="leftnav">
<div class="leftnav-title"><strong><span class="icon-list"></span>菜单列表</strong></div>
<h2><span class="icon-user"></span>基本设置</h2>
<ul style="display:block">
<li><a href="info.html" target="right"><span class="icon-caret-right"></span>网站设置</a></li>
<li><a href="pass.html" target="right"><span class="icon-caret-right"></span>修改密码</a></li>
<li><a href="page.html" target="right"><span class="icon-caret-right"></span>单页管理</a></li>
<li><a href="adv.html" target="right"><span class="icon-caret-right"></span>首页轮播</a></li>
<li><a href="book.html" target="right"><span class="icon-caret-right"></span>留言管理</a></li>
<li><a href="column.html" target="right"><span class="icon-caret-right"></span>栏目管理</a></li>
</ul>
<h2><span class="icon-pencil-square-o"></span>栏目管理</h2>
<ul>
<li><a href="list.html" target="right"><span class="icon-caret-right"></span>内容管理</a></li>
<li><a href="add.html" target="right"><span class="icon-caret-right"></span>添加内容</a></li>
<li><a href="cate.html" target="right"><span class="icon-caret-right"></span>分类管理</a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".leftnav h2").click(function(){
$(this).next().slideToggle(200);
$(this).toggleClass("on");
})
$(".leftnav ul li a").click(function(){
$("#a_leader_txt").text($(this).text());
$(".leftnav ul li a").removeClass("on");
$(this).addClass("on");
})
});
</script>
<ul class="bread">
<li><a href="{:U('Index/info')}" target="right" class="icon-home"> 首页</a></li>
<li><a href="##" id="a_leader_txt">网站信息</a></li>
<li><b>当前语言:</b><span style="color:red;">中文</php></span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;切换语言:<a href="##">中文</a> &nbsp;&nbsp;<a href="##">英文</a> </li>
</ul>
<div class="admin">
<iframe scrolling="auto" rameborder="0" src="info.jsp" name="right" width="100%" height="100%"></iframe>
</div>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>

register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.js"></script>
<script src="js/pintuer.js"></script>
<!--声明js代码域 -->
<script type="text/javascript">
$(function(){
//给男添加单击事件
$("#man").click(function(){ //将男的选择状态加上
$("#manSpan").addClass("icon-check");
//给女的span删除选择样式
$("#womanSpan").removeClass("icon-check");
}) //给女添加单击事件
$("#woman").click(function(){
//给女的span添加选择样式
$("#womanSpan").addClass("icon-check");
//将男的选择状态去掉
$("#manSpan").removeClass("icon-check");
})
})
</script>
</head>
<body>
<div class="panel admin-panel">
<div class="panel-head">
<strong><span class="icon-key"></span>用户注册</strong>
</div>
<div class="body-content">
<form method="post" class="form-x" action="data">
<!--声明请求的方法名 -->
<input type="hidden" name="method" value="userReg" />
<div class="form-group">
<div class="label">
<label for="sitename">用户名:</label>
</div>
<div class="field">
<input type="text" class="input w50" id="mpass" name="uname"
size="50" placeholder="请输入用户名" data-validate="required:请输入用户名" />
</div>
</div>
<div class="form-group">
<div class="label">
<label for="sitename">新密码:</label>
</div>
<div class="field">
<input type="password" class="input w50" name="pwd" size="50"
placeholder="请输入新密码"
data-validate="required:请输入新密码,length#>=5:新密码不能小于5位" />
</div>
</div>
<div class="form-group">
<div class="label">
<label for="sitename">确认新密码:</label>
</div>
<div class="field">
<input type="password" class="input w50"
size="50" placeholder="请再次输入新密码"
data-validate="required:请再次输入新密码,repeat#pwd:两次输入的密码不一致" />
</div>
</div>
<!-- 性别 -->
<div class="form-group">
<div class="label">
<label>性别:</label>
</div>
<div class="field">
<div class="button-group radio"> <label class="button active">
<span class="icon-check" id="manSpan"></span>
<input name="sex" value="1" id="man" type="radio" checked="checked">男
</label> <label class="button active" ><span class="" id="womanSpan"></span>
<input name="sex" value="0" id="woman" type="radio">女
</label>
</div>
</div>
</div>
<!-- 年龄 -->
<div class="form-group">
<div class="label">
<label for="sitename">用户年龄:</label>
</div>
<div class="field">
<input type="text" class="input w50" id="mpass" name="age"
size="50" placeholder="请输入年龄" data-validate="required:请输入年龄" />
</div>
</div>
<!--出生日期 -->
<div class="form-group">
<div class="label">
<label for="sitename">出生日期:</label>
</div>
<div class="field">
<input type="date" class="input w50" id="mpass" name="birthday"
size="50" />
</div>
</div>
<div class="form-group">
<div class="label">
<label></label>
</div>
<div class="field">
<button class="button bg-main icon-check-square-o" type="submit">
提交</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
上一篇:An Assembly Language


下一篇:fuzz实战之honggfuzz