MVC簡單的登陸註冊

時間 2019-12-11

標籤 mvc 簡單登陸註冊简体版

原文原文鏈接

MVC：模型（model）-視圖（view）-控制器（Controller）javascript

1.model : 處理數據邏輯部分，對數據庫進行操做，業務邏輯css

2.view : 數據顯示部分，用戶操做html

3.controller : 從視圖層讀取數據，經過模型層完成操做前端

效果圖：java

該項目採用MVC模式，前端頁面用到了Bootstrap及Jquerymysql

項目結構：jquery

首頁index.jsp,註冊頁面採用的Bootstrap的模態框sql

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登陸頁面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css"
    href="./bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="./jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<style>
#re {
    margin-top: 10px;
    float: right;
}
</style>
<script type="text/javascript">
    
    function vform(){
    var name = $("#na").val();
    var password = $("#pw").val();
    if(name == ""){
        alert("請輸入用戶名");
        return false;
    }
    if(password == ""){
        alert("請輸入密碼");
        return false;
    }
        return true;
    }
</script>
<body>
    <div class="container">


        <!--模態框，點擊註冊按鈕彈窗-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">用戶註冊</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" action="Register" method="post" onsubmit="return vform()">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">賬號</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="un"
                                        name="username" placeholder="請輸入賬號">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">密碼</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="pw"
                                        name="password" placeholder="Password">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-default">提交</button>
                                    <font color="red">${error}</font>

                                </div>
                            </div>

                        </form>

                    </div>
                    
                </div>
            </div>
        </div>
        <!-- ============================================================================= -->
        <button class="btn btn-default" id="re"
            data-toggle="modal" data-target="#myModal">註冊</button>
        <center>
            <h1>用戶登陸</h1>
        </center>
        <hr>
        <form class="form-horizontal" action="LoginServlet" method="post">

            <div class="form-group">
                <label class="col-sm-2 control-label">賬號</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username"
                        name="username" value="${username}" placeholder="請輸入賬號">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">密碼</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password"
                        name="password" value="${password}" placeholder="Password">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">登陸</button>
                    <font color="red">${error}</font>

                </div>
            </div>
        </form>

    </div>
</body>

</html>

main.jsp數據庫

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%-- <%@ page language="java" import="com.login.model.*" pageEncoding="utf-8" %> --%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>用戶列表</title>
<link rel="stylesheet" type="text/css"
    href="./bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="./jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<style>
h4 {
    float: right;
}
</style>

<body>
    <div class="container">
        <h4>歡迎你:${currentUser.username}</h4>
        <center>
            <h1>員工信息列表</h1>
        </center>

        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">新增</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <table class="table table-condensed">
                    <tr>
                        <td>ID</td>
                        <td>姓名</td>
                        <td>性別</td>
                        <td>郵箱</td>
                        <td>出生年月</td>
                        <td>操做</td>
                    </tr>
                    <c:forEach var="list" items="${list}">
                        <tr>
                            <td>${list.id}</td>
                            <td>${list.name}</td>
                            <td><c:if test="${list.gender eq 0 }">男</c:if> 
                                <c:if test="${list.gender eq 1 }">女</c:if>
                            </td>
                            <td>${list.email}</td>
                            <td>${list.birthday}</td>
                            <td><button class="btn btn-primary">編輯</button>
                                <button class="btn btn-danger">刪除</button>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

數據庫鏈接代碼：DbUtil.javabootstrap

package com.login.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DbUtil {
        private String url="jdbc:mysql://localhost:3306/ssm";
        private String driver="com.mysql.jdbc.Driver";
        private String user="root";
        private String password="123";
        
        public Connection getCon() throws Exception{
            Class.forName(driver);
            Connection con=DriverManager.getConnection(url,user,password);
            return con;
        }
        public static void getClose(Connection con) throws SQLException{
            if(con!=null){
                con.close();
            }
        }
}

實體類：User.java

package com.login.model;

public class User {
        private int id;
        private String username;
        private String password;
        
        public User() {
            super();
        }
        public User(String username, String password) {
            super();
            this.username = username;
            this.password = password;
        }
        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;
        }
        
}

Employee.java

package com.login.model;

import java.util.Date;

public class Employee {
        private int id;
        private String name;
        private String password;
        private int gender;
        private String email;
        private Date birthday;
        
        
        
        public Employee() {
            super();
        }
        public Employee(int id, String name, String password, int gender,
                String email, Date birthday) {
            super();
            this.id = id;
            this.name = name;
            this.password = password;
            this.gender = gender;
            this.email = email;
            this.birthday = birthday;
        }
        public int getId() {
            return id;
        }
        public void setId(int id) {
            this.id = id;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public String getPassword() {
            return password;
        }
        public void setPassword(String password) {
            this.password = password;
        }
        public int getGender() {
            return gender;
        }
        public void setGender(int gender) {
            this.gender = gender;
        }
        public String getEmail() {
            return email;
        }
        public void setEmail(String email) {
            this.email = email;
        }
        public Date getBirthday() {
            return birthday;
        }
        public void setBirthday(Date birthday) {
            this.birthday = birthday;
        }
        
        
}

UserDao.java

package com.login.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import com.login.model.User;

public class UserDao {

    // 登陸
    public User login(Connection con, User user) throws SQLException {
        User resultUser = null;
        String sql = "select * from user where username=? and password=?";
        PreparedStatement ps = con.prepareStatement(sql);
        ps.setString(1, user.getUsername());
        ps.setString(2, user.getPassword());
        ResultSet rs = ps.executeQuery();
        if (rs.next()) {
            resultUser = new User();
            resultUser.setUsername(rs.getString("username"));
            resultUser.setPassword(rs.getString("password"));
        }
        return resultUser;
    }
// 顯示全部信息
    public User getAll(Connection con, User user) throws SQLException {
        User resultUser = null;
        String sql = "select * from user ";
        PreparedStatement ps = con.prepareStatement(sql);
        ResultSet rs = ps.executeQuery();
        if (rs.next()) {
            resultUser = new User();
        }
        return resultUser;
    }

    // 註冊
    public boolean insert(Connection con, User user) {
        String sql = "insert into user(username,password) values(?,?)";
        boolean flag = false;
        try {
            PreparedStatement psta = con.prepareStatement(sql);//
            psta.setString(1, user.getUsername());
            psta.setString(2, user.getPassword());
            flag = psta.executeUpdate() > 0;
        } catch (Exception e) {
            e.printStackTrace();
        }
        try {
            con.close();
        } catch (SQLException e) {

            e.printStackTrace();
        }
        return flag;
    }
}

LoginServlet.java

package com.login.servlet;

import java.io.IOException;

import java.sql.Connection;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.login.dao.UserDao;
import com.login.model.User;
import com.login.util.DbUtil;

public class LoginServlet extends HttpServlet {
    /**
     * 
     */
    private static final long serialVersionUID = 1063251913450385726L;
    DbUtil db = new DbUtil();
    UserDao userDao = new UserDao();

    public LoginServlet() {
        super();
    }

    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String username = request.getParameter("username");
        String password = request.getParameter("password");
        Connection con = null;
        try {
            User user = new User(username,password);
            con = db.getCon();
            User currentUser=userDao.login(con, user);
            if(currentUser == null){
                request.setAttribute("error", "用戶名或密碼錯誤");
                request.setAttribute("username", username);
                request.setAttribute("password", password);
                request.getRequestDispatcher("index.jsp").forward(request, response);
            }else{
                    //使用request對象的getSession()獲取session，若是session不存在則建立一個
                    HttpSession session = request.getSession();
                     //將數據存儲到session中
                     session.setAttribute("currentUser",currentUser);
                     ArrayList<Employee> list = userDao.selectNotDeleteList();
          　　　　　　  if (list != null) {
             　　　　   HttpSession session1 = request.getSession();
              　　　　　　  // 將數據存儲到session中
              　　　　  session1.setAttribute("list", list);
               　　　　 response.sendRedirect("main.jsp");
            }
                }
                
            }
         catch (Exception e) {

            e.printStackTrace();
        }

    }

    
    public void init() throws ServletException {

    }

}

package com.login.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.login.dao.UserDao;
import com.login.model.User;
import com.login.util.DbUtil;

public class Register extends HttpServlet {

    private static final long serialVersionUID = -6373590750212315505L;
     DbUtil db=new DbUtil();
     UserDao userDao=new UserDao();
    public Register() {
        super();
    }

    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            String username=request.getParameter("username");
            String password=request.getParameter("password");
            Connection con=null;
            
            User user=new User(username,password);
            try{
                con=db.getCon();
                
            }catch(Exception e){
                e.printStackTrace();
            }
            boolean current=userDao.insert(con, user);
            if(current){
                request.setAttribute("error", "註冊成功,請登陸");
                request.getRequestDispatcher("index.jsp").forward(request, response);
            }else{
                request.setAttribute("error", "註冊失敗");
                request.getRequestDispatcher("regist.jsp").forward(request, response);
            }
        
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            this.doGet(request, response);
    }

    public void init() throws ServletException {
        // Put your code here
    }

}

小總結：前一個多月都花時間在SSM上面了，對於Servlet和Jsp的基礎不怎麼樣，因此如今仍是開始把基礎打好，再去研究其餘框架。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。