帶新手玩轉MVC——不講道理就是幹（上）

泰斗賢若如發表於2019-07-26

帶新手玩轉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/

轉載請說明出處

我不能保證我所說的都是對的，但我能保證每一篇都是用心去寫的，我始終認同“分享的越多，你的價值增值越大”，歡迎大家關注我的技術分享“Java匹馬行天下”和學習心得分享“匹馬行天下”，在分享中進步，越努力越幸運，期待我們都有美好的明天！

支援我的朋友們記得點波推薦哦，您的肯定就是我進步的動力。

帶新手玩轉MVC——不講道理就是幹（下）
2019-07-26
MVC
2022年那些不講道理的爆款新“遊”
2022-11-17
20分鐘能幹嘛?帶你玩轉智慧園區應用框架MainPortal
2021-04-02
框架AI
新手如何玩轉NFT區塊鏈？
2022-05-23
區塊鏈
帶你重新“玩轉”Flutter
2021-01-12
Flutter
Android Sunflower 帶您玩轉 Jetpack
2018-08-28
AndroidJetpack
【簡歷】不帶簡歷就是瀟灑？醒醒吧
2018-06-05
玩轉Redis叢集（上）
2018-10-08
Redis
手摸手帶你玩轉Xcode Extensions
2019-03-04
XCode
CryptAssist-帶你玩轉幣圈
2018-07-26
手把手帶你玩轉Linux
2023-03-09
Linux
玩轉python字典與列表（上）
2018-05-26
Python
react與typescript搭配幹活就是不累(譯)
2019-02-18
ReactTypeScript
純乾貨：21天帶你玩轉容器
2018-11-21
老司機帶你玩轉Radare2
2019-03-01
架構師帶你玩轉分散式鎖
2018-08-28
架構分散式
EasyNLP帶你玩轉CLIP圖文檢索
2022-06-14
帶你玩轉RabbitMQ的五種佇列
2022-03-25
MQ佇列
玩轉 iOS 10 推送 —— UserNotifications Framework（上）
2019-02-19
iOSFramework
雲ERP真的已經玩不轉了嗎？
2021-06-07
擺事實講道理，什麼是快取擊穿？
2019-01-08
快取
講道理，能不能問個好點的問題？
2019-04-18
三步帶你玩轉前端裝飾器
2021-11-02
前端
Vue3釋出半年我不學，摸魚爽歪歪，哎~就是玩兒
2021-04-26
Vue
超強劇透 | 帶你玩轉Smartbi新品線上交流會，10月21日不見不散
2021-10-19
【轉】Android三種姿勢帶你玩轉360度全景圖功能
2018-04-15
Android
Spring系列第六講玩轉bean scope，避免跳坑裡！
2020-10-29
SpringBean
講道理，React中，我們為什麼需要寫 super(props)？
2019-03-04
React
自媒體新手怎麼入門？這些乾貨告訴你新手如何玩轉自媒體
2022-05-19
帶你7天玩轉視覺化建站平臺
2020-05-18
視覺化
七天帶你玩轉MySQL之SQL語句
2024-10-03
MySql
【12月11日】真香現場，帶你玩轉 EKS！
2021-12-02
程式設計師大殺器？帶你玩轉ChatGPT
2023-02-08
程式設計師ChatGPT
dart系列之:數學什麼的就是小意思,看我dart如何玩轉它
2021-12-09
Dart
狗汪汪玩轉無線電 -- GPS Hacking (上）
2020-08-19
面試官：不會sql優化？出門右轉順便帶上門，謝謝
2021-03-06
面試SQL優化
大牛帶你玩轉 CSS3 3D 技術
2019-03-10
CSSS33D
帶你玩轉七牛雲端儲存——高階篇
2018-06-19

帶新手玩轉MVC——不講道理就是幹（上）

帶新手玩轉MVC——不講道理就是幹（上）

案例前言：

案例簡介

案例（上）演示

案例準備和結構

環境準備

案例結構

案例程式碼

pom.xml

實體類

InitServlet類

RegistServlet類

檔案上傳的工具類UploadUtils

頁面顯示部分

regist.jsp

login.jsp

CSS

login.css

reg.css

img

案例結束

相關文章