java web 簡單版網上書城-註冊登錄

java web 簡單版網上書城-註冊登錄

利用Java web 做一個簡單的網上商城

環境搭建

1. 導入基本項目

項目基礎地址：
https://github.com/LGH-cmd/booksystem

找到wei-xhh-booksystem-basic導入eclipse

如圖

運行首頁

基本導入成功，接下來在這個的基礎上進行

2. 數據庫環境搭建

• 新建數據庫booksystem
  

• 建用戶表

在項目地址中文件夾booksystem-basic-data中有sql文件

Mysql Workerbench中 File ->Run SQL Script,選擇對應的sql地址

點記Run 刷新

項目基礎搭建完成

完成用戶註冊

1. 在model包創建用戶實體類User

public class User {

     private int id; // 編號
     private String username; // 用戶名
     private String password; // 密碼
     private String email; // 郵箱
     private String gender; // 性別
     public User() {

     }

     public int getId() {
           return id;
     }
     public void setId(int id) {
           this.id = id;
     }
     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 getEmail() {
           return email;
     }
     public void setEmail(String email) {
           this.email = email;
     }
     public String getGender() {
           return gender;
     }
     public void setGender(String gender) {
           this.gender = gender;
     }
}

2. 在util包中創建JdbcUtil類

我的MySQL是8.0的，連接的jar包也爲8.0，註冊驅動時與5.0稍有改動，不過可以看相應的jar包裏面的文件夾，我們要找Driver,如圖

找到該類右鍵，Copy Qualified Name 複製改路徑

public class JdbcUtil {
     public static Connection getConnection() throws Exception {
           //註冊驅動
           Class.forName("com.mysql.cj.jdbc.Driver.class");
           //創建連接
           String url = 
"jdbc:mysql://localhost:3306/booksystem?serverTimezone=UTC&characterEncoding=utf-8";
           Connection conn = DriverManager.getConnection(url, 
"root", "025431");
           return conn;

     }

}

3. dao包中創建UserDao類

註冊用戶：即需要在數據庫創建用戶信息
編寫註冊方法

public void register(User user) throws Exception {
           //獲取連接
           Connection conn = JdbcUtil.getConnection();
           //插入用戶數據
           String sql = "insert into t_user(username, password, 
email, gender) values(?,?,?,?)";

           PreparedStatement prps = conn.prepareStatement(sql);
           prps.setString(1, user.getUsername());
           prps.setString(2, user.getPassword());
           prps.setString(3, user.getEmail());
           prps.setString(4, user.getGender());
           prps.execute();
           //關閉連接
           conn.close();

     }

4. 在web包中創建user包，並創建RegisterServlet類

@WebServlet("/registerServlet")

public class <u>RegisterServlet</u> extends HttpServlet {
     private UserDao userDao = new UserDao();
     @Override
     protected void doGet(HttpServletRequest req, 
HttpServletResponse resp) throws ServletException, IOException {
           // TODO Auto-generated method stub
           this.doPost(req, resp);

     }



     @Override
     protected void doPost(HttpServletRequest req, 
HttpServletResponse resp) throws ServletException, IOException {
           // TODO Auto-generated method stub
           req.setCharacterEncoding("UTF-8");
           //獲得註冊數據
           String userName = req.getParameter("username");
           String passWord = req.getParameter("password");
           String email = req.getParameter("email");
           String gender = req.getParameter("gender");

           //封裝到User
           User user = new User();
           user.setUsername(userName);
           user.setPassword(passWord);
           user.setEmail(email);
           user.setGender(gender);
           //註冊
           try {
                userDao.register(user);
                //註冊成功後跳轉到登錄頁面
                resp.sendRedirect(req.getContextPath() + 
"/login.jsp");
           } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                resp.setContentType("text/html;charset=utf-8");
                resp.getWriter().write("系統異常，請聯繫管理員 
10086");
           }
     }

 

記得在註冊頁面中表單跳轉action

註冊功能完成

註冊的表單驗證

註冊要求：

1 用戶名必填，且不能重複

2 密碼不能小於6位

3 確認密碼要和原始密碼一致

4 郵箱地址必填，必須是正確的郵箱格式

在register.jsp頁面添加註冊校驗規則

使用了表單校驗插件
在項目地址中文件夾booksystem-basic-data中有對應js文件,將兩個js文件放入js文件夾中
(jquery.validate.js,messages_zh.js)

<!-- 表單校驗插件 -->
<script type="text/javascript" 
src="js/jquery.validate.js"></script>
<!-- 中文提示插件 -->
<script type="text/javascript" src="js/messages_zh.js"></script>
<script type="text/javascript">

$(function(){
     $("#signupForm").validate({
           //校驗規則
           rules:{
                username:{
                      required:true,//必填
                },
                password:{
                      required:true,
                      minlength :6 //最小長度爲6
                },
                confirmPwd:{
                      equalTo:"#password" //與id爲password的輸入框的值一樣
                },
                email:{
                      required:true,
                      email:true //校驗郵箱格式
                },
           },
           //錯誤提示信息（mesages也可以不寫，使用默認的提示信息）
           messages:{
                username:{
                      required:"請輸入用戶名",
                },
                password:{
                      required:"請輸入密碼",
                      minlength :"密碼長度不能小於6位" //最小長度爲6
                },
                confirmPwd:{
                      equalTo:"兩次輸入密碼不一致" //與id爲password的輸入框的值一樣
                },
                email:{
                      required:"請輸入郵箱地址",
                      email:"郵箱格式不正確" //校驗郵箱格式
                }
           }
     })

})

</script>

用戶名重複校驗

1. 在UserDao中新增方法，判斷用戶名是否重複

   返回true表示校驗通過，可以註冊

   返回false表示校驗失敗，用戶名重複，不能註冊

2. 在register.jsp頁面添加檢查用戶名重複的校驗規則

3. 在user包中創建CheckNameServlet類

@WebServlet("/checkNameServlet")

public class <u>CheckNameServlet</u> extends HttpServlet {

     private UserDao userDao = new UserDao();
     @Override
     protected void doGet(HttpServletRequest req, 
HttpServletResponse resp) throws ServletException, IOException {
           // TODO Auto-generated method stub
           this.doPost(req, resp);
     }
     @Override
     protected void doPost(HttpServletRequest req, 
HttpServletResponse resp) throws ServletException, IOException {
  
           //獲取請求的用戶名
           String userName = req.getParameter("username");
           try {
                boolean flag = userDao.checkName(userName);
                if(flag){
                      resp.getWriter().write("true"); //校驗通過
                }else{
                      resp.getWriter().write("false"); //校驗失敗，需要更換用戶名註冊
                }
           } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                resp.getWriter().write("false");
           }
     }
}

用戶註冊後當然就登錄了

用戶登錄

1. 在UserDao類中添加方法

	//登錄，賬號密碼正確
     public User login(String userName, String password) throws 
Exception {
           Connection conn = JdcUtil.getConnection();
           String sql = "select * from t_user where username=? 
and password=?";

           PreparedStatement prps = conn.prepareStatement(sql);
           prps.setString(1, userName);
           prps.setString(2, password);
           
           ResultSet set = prps.executeQuery();
           if(set.next()){
                //說明登錄成功，封裝查詢結果到User對象中，並返回對象
                User u = new User();
                //獲取查詢到的一行數據中的每一列的值
                int id = set.getInt("id");
                String name = set.getString("username");
                String pwd = set.getString("password");
                String email = set.getString("email");
                String gender = set.getString("gender");
                //設置查詢結果到user對象中
                u.setId(id);
                u.setUsername(name);
                u.setPassword(pwd); 
                u.setEmail(email);
                u.setGender(gender);
                //返回對象
                return u;

           }
           //查詢不到數據，返回null
           return null;
     }

2. 在user包中創建LoginServlet類

@WebServlet("/loginServlet")

public class <u>LoginServlet</u> extends HttpServlet {

     private UserDao userDao = new UserDao();
     @Override
     protected void doGet(HttpServletRequest req, 
HttpServletResponse resp) throws ServletException, IOException {
           // TODO Auto-generated method stub
           this.doPost(req, resp);
     }



     @Override
     protected void doPost(HttpServletRequest req, 
HttpServletResponse resp) throws ServletException, IOException {
           // TODO Auto-generated method stub
           req.setCharacterEncoding("UTF-8");
           String username = req.getParameter("username");
           String password = req.getParameter("password");
           try {
                User user = userDao.login(username, password);
                if(user!=null) {
                      //成功時重定向到index.jsp頁面
                	resp.sendRedirect(req.getContextPath()+"/index.jsp");
                }else {
                      //失敗時轉發回登錄頁面，給出提示信息
                      req.setAttribute("error", "用戶名或密碼錯誤");
                      req.getRequestDispatcher("login.jsp").forward(req, resp);
                }

           } catch (Exception e) {

                // TODO Auto-generated catch block
                e.printStackTrace();
                resp.setContentType("text/html;charset=utf-8");
                resp.getWriter().write("系統異常，請聯繫管理員 
10086");

           }

     }

     

}

在login.jsp中添加如圖
完整流程

暫時做到這裏