MVC+Servlet+JSP案例(上)

带新手玩转MVC——不讲道理就是干（上）

前言：这几天更新了几篇博客，都是关于Servlet、JSP的理解，后来又写了两种Web开发模式，发现阅读量还可以，说明JSP还是受关注的，之前有朋友评论说JSP都过时了，谁还学这些东西，甚至还有朋友说学Servlet没用。。。。。。好吧，首先，我觉得任何东西存在就有价值，不说那些知识有没有过时，就算是有新的东西，大家都喜欢用新的技术，比如说SpringBoot，用起来很方便，上手也很快，还能跟别人吹吹牛逼啥的，但是这玩意一旦出现问题，你就无从下手，不知道如何去解决。最主要的是你要知道，这些新的框架新的技术都是从那些底层的知识一步一步封装改变来的，万变不离其宗，说技术新，那它新在哪，说技术过时了， 那它为什么过时了，这些都需要你自己亲身去体验，形成自己的知识体系，这样你才能提升。还有那些说学Servlet没用的朋友，项目里面的controller层难道不是servlet吗？天天跟servlet打交道，却说Servlet没用，我竟无言以对。

案例前言：

此案例是我整合Servlet,JSP，以及MVC模式，做的完整的案例，我觉得对刚学完Servlet和JSP以及理解MVC模式 的新手朋友很适合，新手缺练，但想练的时候却没有适合的案例，有的案例很复杂，不利于新手理解，此案例专为新手打造，希望对有需求的朋友有所帮助。

 

案例简介

这是一个Web注册登录案例，用MVC设计模式实现Web案例，我把此篇案例分为上下两篇，上篇实现注册功能，下篇实现登录功能。

 

案例（上）演示

 

 

 

 

 

 

 

 

注：此篇只实现注册板块，下篇实现登录板块。

案例准备和结构

环境准备

我用的开发工具是IDEA，如果有不会用IDEA的朋友可以看之前写过的博客《IDEA新手使用教程》https://www.cnblogs.com/zyx110/p/10666082.html，我建的这是一个Maven项目，如果有朋友不知道Maven，可以先看一下我之前写的介绍Maven的博客《Maven》https://www.cnblogs.com/zyx110/p/10619148.html,不知道如何配置Maven环境的可以看《Maven的安装与配置》https://www.cnblogs.com/zyx110/p/10801666.html不知道如何在IDEA中建Maven项目的朋友可以看《IDEA为新手专业打造》https://www.cnblogs.com/zyx110/p/10802098.html，此案例还会用到Tomcat,同样，不会在IDEA中配置Tomcat的朋友可以看《IDEA为新手专业打造》https://www.cnblogs.com/zyx110/p/10802098.html，好，完成这些，就可以开始敲代码了。

 

案例结构

 

案例代码

pom.xml

 

 

 

<dependencies>

  <dependency>

    <groupId>junit</groupId>

    <artifactId>junit</artifactId>

    <version>4.11</version>

    <scope>test</scope>

  </dependency>

  <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->

  <dependency>

    <groupId>javax.servlet</groupId>

    <artifactId>javax.servlet-api</artifactId>

    <version>3.1.0</version>

    <scope>provided</scope>

  </dependency>

  <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->

  <dependency>

    <groupId>commons-fileupload</groupId>

    <artifactId>commons-fileupload</artifactId>

    <version>1.3.1</version>

  </dependency>

  <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->

  <dependency>

    <groupId>commons-io</groupId>

    <artifactId>commons-io</artifactId>

    <version>2.4</version>

  </dependency>



</dependencies>

实体类

package domain;
/*
* 用户的实体类
* */
public class User {
    private String username;//用户名
    private String password;//密码
    private String nickname;//昵称
    private String sex;//性别
    private String hobby;//爱好
    private String path;//路径

    @Override
    public String toString() {
        return "User{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", nickname='" + nickname + '\'' +
                ", sex='" + sex + '\'' +
                ", hobby='" + hobby + '\'' +
                ", path='" + path + '\'' +
                '}';
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getHobby() {
        return hobby;
    }

    public void setHobby(String hobby) {
        this.hobby = hobby;
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }
}

InitServlet类

简介：我在这用集合来模拟数据库，把用户注册的信息保存到ServletContext中，这个类的作用就是开了服务器后先访问这个InitServlet执行它里面的init()方法，加载init()里面的集合。

 

package servlet;



import domain.User;



import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

@WebServlet("/initServlet")

public class InitServlet extends HttpServlet {

    @Override

    public void init() throws ServletException {

        //创建一个List集合用于保存用户注册的信息

        List<User> list = new ArrayList<User>();

        //讲list保存到ServletContext域中

        this.getServletContext().setAttribute("list",list);

        System.out.println("init启动了");

    }



    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setCharacterEncoding("utf-8");

        resp.setContentType("text/html");

        resp.getWriter().println("初始化完成");

    }

}

RegistServlet类

简介：这里面的难点在于有文件上传项，提交表单信息后不能再像以前那样用request.getParameter()接收参数了，想要实现文件上传，就要用第三方文件上传的一个组件fileupload，用fileupload里面的一些方法来接收表单的参数。
 
  1 package servlet;
  2 
  3 
  4 
  5 import domain.User;
  6 
  7 import org.apache.commons.fileupload.FileItem;
  8 
  9 import org.apache.commons.fileupload.FileUploadException;
 10 
 11 import org.apache.commons.fileupload.disk.DiskFileItemFactory;
 12 
 13 import org.apache.commons.fileupload.servlet.ServletFileUpload;
 14 
 15 import utils.UploadUtils;
 16 
 17 
 18 
 19 import javax.naming.Name;
 20 
 21 import javax.servlet.ServletContext;
 22 
 23 import javax.servlet.ServletException;
 24 
 25 import javax.servlet.annotation.WebServlet;
 26 
 27 import javax.servlet.http.HttpServlet;
 28 
 29 import javax.servlet.http.HttpServletRequest;
 30 
 31 import javax.servlet.http.HttpServletResponse;
 32 
 33 import java.io.FileOutputStream;
 34 
 35 import java.io.IOException;
 36 
 37 import java.io.InputStream;
 38 
 39 import java.io.OutputStream;
 40 
 41 import java.util.ArrayList;
 42 
 43 import java.util.HashMap;
 44 
 45 import java.util.List;
 46 
 47 import java.util.Map;
 48 
 49 
 50 
 51 @WebServlet("/registServlet")
 52 
 53 public class RegistServlet extends HttpServlet {
 54 
 55     /*
 56 
 57     * 用户注册的Servlet
 58 
 59     * */
 60 
 61     @Override
 62 
 63     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 64 
 65         //数据的接收
 66 
 67         //文件上传基本操作
 68 
 69 
 70 
 71         try {
 72 
 73             //定义一个Map集合用于保存接收到的数据
 74 
 75             Map<String,String> map = new HashMap<String, String>();
 76 
 77             //1、创建一个磁盘文件项工厂对象
 78 
 79             DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
 80 
 81 
 82 
 83             //2、创建一个核心解析类
 84 
 85             ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
 86 
 87             //3、解析request请求，返回的是List集合， List集合中存放的是FileItem对象
 88 
 89             List<FileItem> list = servletFileUpload.parseRequest(req);
 90 
 91             //定义一个List集合，用于保存兴趣爱好数据
 92 
 93             List<String> hobbyList = new ArrayList<String>();
 94 
 95             //4、遍历集合，获得每个FileItem，判断是表单项还是文件上传项
 96 
 97             String url = null;
 98 
 99             for (FileItem fileItem:list){
100 
101                 //判断是表单项还是文件上传项
102 
103                 if (fileItem.isFormField()){
104 
105                     //普通表单项
106 
107                     //接收表单项参数的值
108 
109                     String name = fileItem.getFieldName();//获得表单项name属性的值
110 
111                     String value = fileItem.getString("utf-8");//获得表单项的值
112 
113                     System.out.println(name+"   "+value);
114 
115                     //接收复选框的数据
116 
117                     if ("hobby".equals(name)){
118 
119                         String hobbyValue = fileItem.getString("utf-8");
120 
121                         //接收到一个值，将值存入到hobbyList中
122 
123                         hobbyList.add(hobbyValue);
124 
125                         hobbyValue = hobbyList.toString().substring(1,hobbyList.toString().length()-1);
126 
127                         System.out.println(name +"  "+hobbyValue);
128 
129                         //将爱好的数据存入到Map集合中
130 
131                         map.put(name,hobbyValue);
132 
133                     }else {
134 
135                         //将数据存入到Map集合中
136 
137                         map.put(name,value);
138 
139                     }
140 
141                 }else {
142 
143                     //文件上传项
144 
145                     //文件上传功能
146 
147                     //获得文件上传的名称
148 
149                     String fileName = fileItem.getName();
150 
151                     if (fileName!=null&&!"".equals(fileName)){
152 
153                         //通过工具类获得唯一文件名
154 
155                         String uuidFileName = UploadUtils.getUUIDFileName(fileName);
156 
157                         //获得文件上传的数据
158 
159                         InputStream is = fileItem.getInputStream();
160 
161                         //获得文件上传的路径
162 
163                         String path = this.getServletContext().getRealPath("/img");
164 
165                         //将输入流对接到输出流就可以了
166 
167                         url = path+"//"+uuidFileName;
168 
169                         OutputStream os = new FileOutputStream(url);
170 
171                         int len = 0;
172 
173                         byte[] b = new byte[1024];
174 
175                         while ((len=is.read(b))!=-1){
176 
177                             os.write(b,0,len);
178 
179                         }
180 
181                         is.close();
182 
183                         os.close();
184 
185 
186 
187                     }
188 
189 
190 
191                 }
192 
193             }
194 
195             System.out.println(map);
196 
197             //获得ServletContext对象
198 
199             ServletContext servletContext = this.getServletContext();
200 
201             List<User> userList = (List<User>) servletContext.getAttribute("list");
202 
203             //校验用户名：
204 
205             for (User u:userList){
206 
207                 if (u.getUsername().equals(map.get("username"))){
208 
209                     req.setAttribute("msg","用户名已经存在！");
210 
211                     req.getRequestDispatcher("/regist.jsp").forward(req,resp);
212 
213                 }
214 
215             }
216 
217             //封装数据到User中
218 
219             User user = new User();
220 
221             user.setUsername(map.get("username"));
222 
223             user.setPassword(map.get("password"));
224 
225             user.setSex(map.get("sex"));
226 
227             user.setNickname(map.get("nickname"));
228 
229             user.setHobby(map.get("hobby"));
230 
231             user.setPath(url);
232 
233             //将注册用户的信息存入到List集合中
234 
235 
236 
237             userList.add(user);
238 
239             for (User u : userList){
240 
241                 System.out.println(u);
242 
243             }
244 
245             servletContext.setAttribute("list",userList);
246 
247             //注册成功，跳转到登录页面
248 
249             req.getSession().setAttribute("username",user.getUsername());
250 
251             resp.sendRedirect(req.getContextPath()+"/login.jsp");
252 
253         } catch (FileUploadException e) {
254 
255             e.printStackTrace();
256 
257         }
258 
259 
260 
261 
262 
263 
264 
265 
266 
267     }
268 
269 
270 
271     @Override
272 
273     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
274 
275         doGet(req, resp);
276 
277     }
278 
279 }

文件上传的工具类UploadUtils

package utils;



import java.util.UUID;



/*

* 文件上传的工具类

* */

public class UploadUtils {

    /*

    * 生成唯一的文件名

    * */

    public static String getUUIDFileName(String fileName){

        int idx = fileName.lastIndexOf(".");

        String extention = fileName.substring(idx);

        String uuidFileName = UUID.randomUUID().toString().replace("-","")+extention;

        return uuidFileName;

    }



//    public static void main(String[] args) {

//        System.out.println(getUUIDFileName("1.jpg"));

//    }

}

页面显示部分

regist.jsp

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2 
  3    pageEncoding="UTF-8"%>
  4 
  5 <!DOCTYPE html>
  6 
  7 <html>
  8 
  9 <head>
 10 
 11 <meta charset="UTF-8">
 12 
 13 <title>注册</title>
 14 
 15 <link rel="stylesheet" href="./css/reg.css">
 16 
 17 </head>
 18 
 19 <body>
 20 
 21    <div class="reg">
 22 
 23       <div class="header">
 24 
 25          <h1>
 26 
 27             <a href="/login.jsp">登录</a> <a href="/regist.jsp">注册</a>
 28 
 29          </h1>
 30 
 31       </div>
 32 
 33       <!-- 
 34 
 35          文件上传的条件
 36 
 37          * 表单必须是post提交方式
 38 
 39          * 表单中必须有文件上传项，文件上传项必须有name属性和值
 40 
 41          * 表单的enctype属性必须设置为multipart/form-data
 42 
 43        -->
 44 
 45       <%
 46 
 47          String msg = "";
 48 
 49          if(request.getAttribute("msg")!=null){
 50 
 51             msg = (String)request.getAttribute("msg");
 52 
 53          }
 54 
 55       %>
 56 
 57       <h3><%= msg %></h3>
 58 
 59       <form action="/registServlet" method="post" enctype="multipart/form-data">
 60 
 61          <table>
 62 
 63             <tr>
 64 
 65                <td class="td1">用户名</td>
 66 
 67                <td><input type="text" class="input1" name="username"></td>
 68 
 69             </tr>
 70 
 71             <tr>
 72 
 73                <td class="td1">密码</td>
 74 
 75                <td><input type="password" class="input1" name="password"></td>
 76 
 77             </tr>
 78 
 79             <tr>
 80 
 81                <td class="td1">昵称</td>
 82 
 83                <td><input type="text" class="input1" name="nickname"></td>
 84 
 85             </tr>
 86 
 87             <tr>
 88 
 89                <td class="td1">性别</td>
 90 
 91                <td>
 92 
 93                   <input type="radio" name="sex" value="man">男
 94 
 95                   <input type="radio" name="sex" value="women">女
 96 
 97                </td>
 98 
 99             </tr>
100 
101             <tr>
102 
103                <td class="td1">上传头像</td>
104 
105                <td><input type="file" id="photo" name="upload"></td>
106 
107             </tr>
108 
109             <tr>
110 
111                <td class="td1">兴趣爱好</td>
112 
113                <td><label> 
114 
115                   <input type="checkbox" name="hobby" value="篮球">篮球
116 
117                   <input type="checkbox" name="hobby" value="足球">足球
118 
119                   <input type="checkbox" name="hobby" value="排球">排球 
120 
121                   <input type="checkbox" name="hobby" value="羽毛球">羽毛球
122 
123                </label></td>
124 
125             </tr>
126 
127             <tr>
128 
129                <td colspan="2">
130 
131                   <div class="btn-red">
132 
133                      <input type="submit" value="注册" id="reg-btn">
134 
135                   </div>
136 
137                </td>
138 
139             </tr>
140 
141          </table>
142 
143       </form>
144 
145    </div>
146 
147 </body>
148 
149 </html>
View Code

login.jsp

  1 <%@page import="utils.CookieUtils"%>
  2 
  3 <%@ page language="java" contentType="text/html; charset=UTF-8"
  4 
  5    pageEncoding="UTF-8"%>
  6 
  7 <!DOCTYPE html>
  8 
  9 <html>
 10 
 11 <head>
 12 
 13 <meta charset="UTF-8">
 14 
 15 <title>登录页面</title>
 16 
 17 <link rel="stylesheet" href="./css/login.css">
 18 
 19 </head>
 20 
 21 <body>
 22 
 23    <div class="login">
 24 
 25       <div class="header">
 26 
 27          <h1>
 28 
 29             <a href="/login.jsp">登录</a> <a href="/regist.jsp">注册</a>
 30 
 31          </h1>
 32 
 33 
 34 
 35       </div>
 36 
 37       <%
 38 
 39          String username="";
 40 
 41          // 获得从客户端携带过来的所有的Cookie
 42 
 43 //       Cookie[] cookies = request.getCookies();
 44 
 45 //       // 从Cookie的数组中查找指定名称的Cookie
 46 
 47 //       Cookie cookie = CookieUtils.findCookie(cookies, "username");
 48 
 49 //       if(cookie != null){
 50 
 51 //          username = cookie.getValue();
 52 
 53 //       }
 54 
 55          
 56 
 57          if(session.getAttribute("username")!=null){
 58 
 59             username = (String)session.getAttribute("username");
 60 
 61          }
 62 
 63          
 64 
 65          String msg = "";
 66 
 67          if(request.getAttribute("msg")!=null){
 68 
 69             msg = (String)request.getAttribute("msg");
 70 
 71          }
 72 
 73          
 74 
 75       %>
 76 
 77       <h3><%=msg %></h3>
 78 
 79       <form action="/reg_login/LoginServlet" method="post">
 80 
 81          <table>
 82 
 83             <tr>
 84 
 85                <td class="td1">用户名</td>
 86 
 87                <td><input type="text" class="input1" name="username" value="<%=username %>"></td>
 88 
 89             </tr>
 90 
 91             <tr>
 92 
 93             <td class="td1">密码</td>
 94 
 95             <td><input type="password" class="input1" name="password"></td>
 96 
 97             </tr>
 98 
 99             <tr>
100 
101             <td class="td1" colspan="2">
102 
103                <input type="checkbox" name="remember" value="true" checked="checked">记住用户名</td>
104 
105             </tr>
106 
107             <tr>
108 
109                <td colspan="2">
110 
111                   <div class="btn-red">
112 
113                      <input type="submit" value="登录" id="login-btn">
114 
115                   </div>
116 
117                </td>
118 
119             </tr>
120 
121          </table>
122 
123 
124 
125       </form>
126 
127    </div>
128 
129 </body>
130 
131 </html>
View Code

CSS

login.css
  1 *{
  2 
  3            margin:0px;
  4 
  5            padding:0px;
  6 
  7        }
  8 
  9        a{
 10 
 11            text-decoration: none;
 12 
 13        }
 14 
 15        ul{
 16 
 17            list-style: none;
 18 
 19        }
 20 
 21        body{
 22 
 23            background:rgba(238,238,238,0.5);
 24 
 25            position:relative;
 26 
 27            font-family: 微软雅黑;
 28 
 29            background-color: lightblue;
 30 
 31        }
 32 
 33        img{
 34 
 35            width:225px;height:220px;
 36 
 37        }
 38 
 39        .content{
 40 
 41            width: 240px;
 42 
 43            height: 270px;
 44 
 45            background-color:burlywood;
 46 
 47            margin-left: 105px;
 48 
 49            margin-top: 20px;
 50 
 51        }
 52 
 53        .login{
 54 
 55            width:450px;
 56 
 57            height:380px;
 58 
 59            background: white;
 60 
 61            position:absolute;
 62 
 63            top:50%;
 64 
 65            left:50%;
 66 
 67            margin-left:-225px;
 68 
 69            /*margin-top:-225px;*/
 70 
 71            margin-top:100px;
 72 
 73            padding:5px 15px;
 74 
 75        }
 76 
 77        .login>.header{
 78 
 79            width:100%;
 80 
 81            padding:10px 0px;
 82 
 83            border-bottom: 1px solid #ccc;
 84 
 85            overflow: hidden;
 86 
 87        }
 88 
 89        .login>.header>h1{
 90 
 91            font-size:18px;
 92 
 93            font-weight: normal;
 94 
 95            float:left;
 96 
 97        }
 98 
 99        .login>.header>h1>a{
100 
101            padding:5px;
102 
103            margin-left:10px;
104 
105            color:black;
106 
107        }
108 
109        .login>.header>h1>a:first-child{
110 
111            margin-left:50px;
112 
113            color:#2C689B;
114 
115        }
116 
117        .div1{
118 
119            width: 100px;
120 
121        }
122 
123       
124 
125        .login>form{
126 
127            margin-top:30px;
128 
129            padding:0 50px;
130 
131        }
132 
133        .input1{
134 
135            width:250px;
136 
137            height:40;
138 
139            line-height: 40px;
140 
141            padding-left: 5px;
142 
143            border:1px solid #d0d6d9;
144 
145            background: #F9F9F9;
146 
147        }
148 
149        .td1{
150 
151            height: 40px;
152 
153            width: 100px;
154 
155        }
156 
157        table{
158 
159            padding: 0px;
160 
161            margin:0px;
162 
163        }
164 
165        td{
166 
167            padding:5px; 
168 
169            margin:10px;
170 
171        }
172 
173        .login>form>div>p{
174 
175            width:350px;
176 
177            height:25px;
178 
179            line-height: 25px;
180 
181            font-size: 12px;
182 
183        }
184 
185        .login>form>div.idcode>input{
186 
187            width:150px;
188 
189            margin-right:30px;
190 
191            float: left
192 
193        }
194 
195        .login>form>div.idcode>span{
196 
197            float:right;
198 
199            width:80px;
200 
201            height:30px;
202 
203            margin-top:10px;
204 
205            border:1px solid #ccc;
206 
207 
208 
209        }
210 
211        .login>form>div.idcode>a{
212 
213            float: right;
214 
215            color: black;
216 
217            font-size: 12px;
218 
219            margin-top:25px;
220 
221            margin-left: 5px;
222 
223        }
224 
225        .clear{
226 
227            clear:both;
228 
229        }
230 
231        .login>form>.autoLogin{
232 
233            margin-top:20px;
234 
235            font-size:14px;
236 
237            line-height:15px;
238 
239            color:#999;
240 
241            height: 15px;
242 
243        }
244 
245        .login>form>.autoLogin>label>input{
246 
247            margin-right:5px;
248 
249        }
250 
251        .login>form>.autoLogin>label{
252 
253            float:left;
254 
255        }
256 
257        .login>form>.autoLogin>a{
258 
259            float:right;
260 
261            color:#666;
262 
263            font-size:14px;
264 
265        }
266 
267        .btn-red{
268 
269            margin:20px 0px;
270 
271        }
272 
273        #login-btn{
274 
275            width:100%;
276 
277            height:50px;
278 
279            background:#2C689B;
280 
281            border-color:#2C689B;
282 
283            text-align: center;
284 
285            line-height:50px;
286 
287            color:#fff;
288 
289            font-size: 17px;
290 
291        }
292 
293        #login-btn:hover{
294 
295            cursor:pointer;
296 
297        }
View Code
reg.css
  1 *{
  2 
  3            margin:0px;
  4 
  5            padding:0px;
  6 
  7        }
  8 
  9        a{
 10 
 11            text-decoration: none;
 12 
 13        }
 14 
 15        ul{
 16 
 17            list-style: none;
 18 
 19        }
 20 
 21        body{
 22 
 23            background:rgba(238,238,238,0.5);
 24 
 25            position:relative;
 26 
 27            font-family: 微软雅黑;
 28 
 29            background-color: lightblue;
 30 
 31        }
 32 
 33 
 34 
 35        .input1{
 36 
 37            width:250px;
 38 
 39            height:40;
 40 
 41            line-height: 40px;
 42 
 43            padding-left: 5px;
 44 
 45            border:1px solid #d0d6d9;
 46 
 47            background: #F9F9F9;
 48 
 49        }
 50 
 51        .td1{
 52 
 53            height: 40px;
 54 
 55            width: 100px;
 56 
 57        }
 58 
 59        table{
 60 
 61            padding: 0px;
 62 
 63            margin:0px;
 64 
 65        }
 66 
 67        td{
 68 
 69            padding:5px; 
 70 
 71            margin:10px;
 72 
 73        }
 74 
 75        .reg{
 76 
 77            width:450px;
 78 
 79            height:500px;
 80 
 81            background: white;
 82 
 83            position:absolute;
 84 
 85            top:50%;
 86 
 87            left:50%;
 88 
 89            margin-left:-225px;
 90 
 91            /*margin-top:-225px;*/
 92 
 93            margin-top:100px;
 94 
 95            padding:5px 15px;
 96 
 97        }
 98 
 99        .reg>.header{
100 
101            width:100%;
102 
103            padding:10px 0px;
104 
105            border-bottom: 1px solid #ccc;
106 
107            overflow: hidden;
108 
109        }
110 
111        .reg>.header>h1{
112 
113            font-size:18px;
114 
115            font-weight: normal;
116 
117            float:left;
118 
119        }
120 
121        .reg>.header>h1>a{
122 
123            padding:5px;
124 
125            margin-left:10px;
126 
127            color:black;
128 
129        }
130 
131        .reg>.header>h1>a:first-child{
132 
133            margin-left:50px;
134 
135        }
136 
137          .reg>.header>h1>a:last-child{
138 
139            color:#2C689B;
140 
141        }
142 
143        
144 
145        
146 
147        .reg>form{
148 
149            margin-top:30px;
150 
151            padding:0 50px;
152 
153        }
154 
155        .reg>form>div>input{
156 
157            width:350px;
158 
159            height:40;
160 
161            line-height: 40px;
162 
163            padding-left: 5px;
164 
165            border:1px solid #d0d6d9;
166 
167            background: #F9F9F9;
168 
169        }
170 
171        .reg>form>div>p{
172 
173            width:350px;
174 
175            height:25px;
176 
177            line-height: 25px;
178 
179            font-size: 12px;
180 
181        }
182 
183        .reg>form>div.idcode>input{
184 
185            width:150px;
186 
187            margin-right:30px;
188 
189            float: left
190 
191        }
192 
193        .reg>form>div.idcode>span{
194 
195            float:right;
196 
197            width:80px;
198 
199            height:30px;
200 
201            margin-top:10px;
202 
203            border:1px solid #ccc;
204 
205 
206 
207        }
208 
209        .reg>form>div.idcode>a{
210 
211            float: right;
212 
213            color: black;
214 
215            font-size: 12px;
216 
217            margin-top:25px;
218 
219            margin-left: 5px;
220 
221        }
222 
223        .clear{
224 
225            clear:both;
226 
227        }
228 
229        .btn-red{
230 
231            margin:20px 0px;
232 
233        }
234 
235        #reg-btn{
236 
237            width:100%;
238 
239            height:50px;
240 
241            background:#2C689B;
242 
243            border-color:#2C689B;
244 
245            text-align: center;
246 
247            line-height:50px;
248 
249            color:#fff;
250 
251            font-size: 17px;
252 
253        }
254 
255        #reg-btn:hover{
256 
257            cursor:pointer;
258 
259        }
View Code

img

 

案例结束

此篇为实现注册功能，欲知登录如何，请看下回案例。

*****************************************************************************************************

我的博客园地址：https://www.cnblogs.com/zyx110/

posted @ 2019-07-26 12:12  泰斗贤若如  阅读(1993)  评论(5)  编辑  收藏  举报