帶新手玩轉MVC——不講道理就是幹（上）
前言：這幾天更新了幾篇博客，都是關於Servlet、JSP的理解，後來又寫了兩種Web開發模式，發現閱讀量還能夠，說明JSP仍是受關注的，以前有朋友評論說JSP都過期了，誰還學這些東西，甚至還有朋友說學Servlet沒用。。。。。。好吧，首先，我以爲任何東西存在就有價值，不說那些知識有沒有過期，就算是有新的東西，你們都喜歡用新的技術，好比說SpringBoot，用起來很方便，上手也很快，還能跟別人吹吹牛逼啥的，可是這玩意一旦出現問題，你就無從下手，不知道如何去解決。最主要的是你要知道，這些新的框架新的技術都是從那些底層的知識一步一步封裝改變來的，萬變不離其宗，說技術新，那它新在哪，說技術過期了， 那它爲何過期了，這些都須要你本身親身去體驗，造成本身的知識體系，這樣你才能提高。還有那些說學Servlet沒用的朋友，項目裏面的controller層難道不是servlet嗎？每天跟servlet打交道，卻說Servlet沒用，我竟無言以對。css
案例前言：
此案例是我整合Servlet,JSP，以及MVC模式，作的完整的案例，我以爲對剛學完Servlet和JSP以及理解MVC模式 的新手朋友很適合，新手缺練，但想練的時候卻沒有適合的案例，有的案例很複雜，不利於新手理解，此案例專爲新手打造，但願對有需求的朋友有所幫助。html
案例簡介
這是一個Web註冊登陸案例，用MVC設計模式實現Web案例，我把此篇案例分爲上下兩篇，上篇實現註冊功能，下篇實現登陸功能。java
案例（上）演示
注：此篇只實現註冊板塊，下篇實現登陸板塊。數據庫
案例準備和結構
環境準備
我用的開發工具是IDEA，若是有不會用IDEA的朋友能夠看以前寫過的博客《IDEA新手使用教程》http://www.javashuo.com/article/p-srudzivr-cq.html，我建的這是一個Maven項目，若是有朋友不知道Maven，能夠先看一下我以前寫的介紹Maven的博客《Maven》http://www.javashuo.com/article/p-vmuhqqma-w.html,不知道如何配置Maven環境的能夠看《Maven的安裝與配置》https://www.cnblogs.com/zyx110/p/10801666.html不知道如何在IDEA中建Maven項目的朋友能夠看《IDEA爲新手專業打造》http://www.javashuo.com/article/p-uwlbxbez-cc.html，此案例還會用到Tomcat,一樣，不會在IDEA中配置Tomcat的朋友能夠看《IDEA爲新手專業打造》http://www.javashuo.com/article/p-uwlbxbez-cc.html，好，完成這些，就能夠開始敲代碼了。apache
案例結構
案例代碼
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 //一、建立一個磁盤文件項工廠對象 78 79 DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory(); 80 81 82 83 //二、建立一個核心解析類 84 85 ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory); 86 87 //三、解析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 //四、遍歷集合，得到每一個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>
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>
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 }
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 }
img
案例結束
此篇爲實現註冊功能，欲知登陸如何，請看下回案例。api
*****************************************************************************************************數組
個人博客園地址：https://www.cnblogs.com/zyx110/服務器