登录小项目 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(1,uname); ps.setString(2, 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 = 31; int result = 1; result = prime * result + age; result = prime * result + ((birthday == null) ? 0 : birthday.hashCode()); result = prime * result + ((pwd == null) ? 0 : pwd.hashCode()); result = prime * result + ((sex == null) ? 0 : sex.hashCode()); result = prime * result + uid; result = prime * result + ((uname == null) ? 0 : 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>0){ //给注册成功添加标记到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 = -1; try { // 获取连接对象 conn = DBUtil.getConnection(); // 开启事务管理 conn.setAutoCommit(false); // 创建SQL命令对象 ps = conn.prepareStatement(sql); // 给占位符赋值 if(objs!=null){ for(int j=0;j<objs.length;j++){ ps.setObject(j+1,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="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="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> <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> 切换语言：<a href="##">中文</a> <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>
个人学习笔记，记录日常学习，便于查阅及加深，仅为方便个人使用。
