带新手玩转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;//路径@Overridepublic 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 {@Overridepublic void init() throws ServletException {//创建一个List集合用于保存用户注册的信息List<User> list = new ArrayList<User>();//讲list保存到ServletContext域中this.getServletContext().setAttribute("list",list);System.out.println("init启动了");}@Overrideprotected 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/

转载请说明出处

我不能保证我所说的都是对的，但我能保证每一篇都是用心去写的，我始终认同“分享的越多，你的价值增值越大”，欢迎大家关注我的技术分享“Java匹马行天下”和学习心得分享“匹马行天下”，在分享中进步，越努力越幸运，期待我们都有美好的明天！

支持我的朋友们记得点波推荐哦，您的肯定就是我进步的动力。

转载于:https://www.cnblogs.com/zyx110/p/11249481.html