带新手玩转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/服务器