商城 用戶登陸、註冊、註銷，購物車。

時間  2019-11-11
標籤 商城 用戶 登陸 註冊 註銷 購物車 简体版
原文   原文鏈接

以前作了一個簡單的用戶登陸系統，如今來學習，實現商城項目的部分功能。css

先展現幾個基本的效果圖html

1.商城首頁java

2.登陸界面數據庫

3.註冊界面session

4.登陸成功後顯示的  歡迎提示  點擊便可進入我的主頁  只實現了購物車和  註銷的功能jsp

5.查看購物車ide

 

一，用戶登陸 post

login.jsp  學習

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<!DOCTYPE HTML >
<html>
  <head>
    <base href="<%=basePath%>">
    
        <title>登陸 - 貴美·商城</title>
        <link rel="stylesheet" type="text/css" href="css/login.css"/>
    </head>
    <body>
        
        <div class="wrap">
            <div class="guimeilogo"></div>
            
            <div class="login">
            
                <div class="top">
                    <h1>貴美商城</h1>
                    <a href="">新用戶註冊</a>
                </div>
                
                <div class="mid">
                    <%--登陸界面jsp  跳轉到servlet  --%>
                    <div style="color: red">${error}</div>
                    <form action="/shop/login" method="post">
                    <input type="text" name="username" id="username" placeholder="用戶名" required="required" />
                    <input type="password" name="password" id="password" placeholder="密碼" required="required" />
                    <input type="submit" id="submit" value="當即登陸"/>
                    </form>
                </div>
                
            </div>
            
        </div>
    </body>
</html>

loginservletui

package com.aaa.servlet;

import com.aaa.dao.IUserDAO;
import com.aaa.dao.Impl.UserDAOImpl;

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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.Map;

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //獲取參數 用戶輸入的密碼
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        //驗證密碼
        IUserDAO dao=new UserDAOImpl();
        Map<String, Object> user=dao.isLogin(username, password);
        //不正確？  請求轉發到 login.jsp  頁面
        if (user == null){
            req.setAttribute("error","帳號密碼錯誤");
            req.getRequestDispatcher("/views/login.jsp").forward(req,resp);
    }else{
            //正確 就重定向到  home servlet
            HttpSession session = req.getSession();
            session.setAttribute("user",user);
           resp.sendRedirect("/shop/home");
        }
    }
}

homeservlet

package com.aaa.servlet;

import com.aaa.dao.IProductDAO;
import com.aaa.dao.Impl.ProductDAOImpl;

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.List;
import java.util.Map;

@WebServlet("/home")
public class HomeServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        /*
            home servlet 首頁 獲取數據  並展現

         */
        IProductDAO dao=new ProductDAOImpl();
        List<Map<String, Object>> allProduct = dao.getAllProduct();

        req.setAttribute("allProduct",allProduct);
        req.getRequestDispatcher("/views/index.jsp").forward(req,resp);
    }
}

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<!DOCTYPE HTML>
<html>
  <head>
        <base href="<%=basePath%>">
         <link rel="icon" href="img/icon.png" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/base-aa24246264.css"/>
        <link rel="stylesheet" type="text/css" href="css/welcome-fc9359d842.css"/>
        <link rel="stylesheet" type="text/css" href="css/sidebar.css"/>
        <link rel="stylesheet" type="text/css" href="css/content.css"/>
        <title>貴美·商城</title>

  </head>
  <style>
      #wrap{
          margin: 0 auto;
      }
  </style>
  
  <body>
        <!-- 頭部導航 -->
        <jsp:include page="/views/header.jsp"></jsp:include>
       
        <!--搜索框-->
        <div class="logo"></div>
        <div id="com-search">
             <div class="search">    
            
            <div class="search-tab">                
                <span class="active">寶貝</span><span class="">店鋪</span>            </div>        
                <div class="search-box">                
                        <input class="search-txt" placeholder="" type="text">                
                        <span class="search-btn"></span>            
                        <div class="suggest-box" style="display: none;"></div>            
                </div>            
                <div class="hotword">
                    <a target="_blank" href="#" style="color:#FF3366">連衣裙</a>
                    <a target="_blank" href="#" style="color:#666666">運動鞋</a>
                    <a target="_blank" href="#" style="color:#FF3366">雪紡衫</a>
                    <a target="_blank" href="#" style="color:#FF3366">襯衫</a>
                    <a target="_blank" href="#" style="color:#666666">薄外套</a>
                    <a target="_blank" href="#" style="color:#666666">T恤</a>
                    <a target="_blank" href="#" style="color:#666666">套裝</a>
                    <a target="_blank" href="#" style="color:#666666">牛仔褲</a>
                    <a target="_blank" href="#" style="color:#FF3366">小白鞋</a>
                    <a target="_blank" href="#" style="color:#666666">風衣</a>
                    <a target="_blank" href="#" style="color:#FF3366">綁帶涼鞋</a>
                    <a target="_blank" href="#" style="color:#666666">粗跟單鞋</a>
                </div>        
        </div>
        </div>
        
        <!--導航 -->
        <div id="nav">
            <ul>
                <li>
                    <a href="#" class="selected">首頁</a>
                </li>
                <li>
                    <a href="#">上衣</a>
                </li>
                <li>
                    <a href="#">裙子</a>
                </li>
                <li>
                    <a href="#">褲子</a>
                </li>
                <li>
                    <a href="#">女鞋</a>
                </li>
                <li>
                    <a href="#">包包</a>
                </li>
                <li>
                    <a href="#">配飾</a>
                </li>
                <li>
                    <a href="#">美妝</a>
                </li>
            </ul>
        </div>
        <hr />
        
        <!--廣告輪播圖-->
        <div class="ad">
            <div class="inner">
                <img src="img/ad1.jpg"/>
                <img src="img/ad2.jpg"/>
                <img src="img/ad1.jpg"/>
            </div>
        </div>
        
        <!--商品展現-->
        <h2>貴美優選</h2>
        
        <div id="wrap">
        
        
        <!-- 商品信息  -->
        <c:forEach var="p" items="${allProduct}">
        <div class="products">
                   <!--商品圖片-->
            <a   href="/shop/detail?pid=${p.pid}" class="pimg" style="background-image: url(${p.pimage});"></a>
            <div class="info"> 
                <div class="part"> 
                    <!--商品價格-->
                    <div class="price">￥${p.shopPrice}</div>
                    <div class="collect">
                        <!--商品收藏-->
                        <i class="icon-star"></i>${p.collect}
                    </div> 
                </div> 
                <i class="icon-select">    
                        <!--商品簡介-->
                </i>${p.pname}
            </div> 
        </div>
        </c:forEach>


        </div>
        
        
        <!-- 底部導航 -->
        <jsp:include page="/views/footer.jsp"></jsp:include>
        
        
    </body>
  </body>
</html>

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

    <link rel="stylesheet" type="text/css" href="css/header.css"/>
 <!--頭部-->
<%--
        1.實現用戶的登陸 ？
        點節登陸是須要一個  登陸界面展現給用戶  就是login.jsp
        經過header.jsp的超連接 跳轉到  login.jsp  登陸界面的jsp
        在login.jsp中  進行用戶登陸  經過超連接   跳轉到 login servlet進行業務操做

--%>
 
        <div class="header_wrap">            
            <ul>
            <c:choose>
                <c:when test="${empty user}">
                    <li><a href="/shop/views/login.jsp">登陸</a></li>
                    <li><a href="/shop/views/register.jsp">註冊</a></li>
                </c:when>
                <c:otherwise>
                    <li>歡迎尊敬的VIP:<a href="/shop/views/persional.jsp">${user.nickname}  我的主頁</a></li>
                </c:otherwise>

            </c:choose>

                <li><a href="#">個人收藏</a></li>
                <li><a href="#">個人購物車</a></li>
                <li><a href="#">個人訂單</a></li>
                <li><a href="#">幫助中心</a></li>
                <li><a href="#">商家後臺</a></li>
                
            </ul>
        </div>

2、用戶註冊

register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>註冊 - 貴美·商城</title>
        <base href="<%=basePath%>">
         <link rel="icon" href="img/icon.png" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/register.css"/>
    </head>
    <body>
        <div class="wrap">
            <div class="guimeilogo"></div>
            <div class="register">
                <div class="top">
                    <h1>新用戶註冊</h1>
                    <a href="/shop/views/login.jsp">已有帳號</a>
                </div>
                <div class="mid">
                    <div style="color: red">${error}</div>
                    <form action="/shop/register" method="post">
                    <input type="text" name="username" id="username" placeholder="用戶名" required="required"/>
                    <div class="sec">
                        <input type="text" name="code" id="code" placeholder="驗證碼" required="required" />
                        <a  class="send" onclick="send()"> 發送驗證碼 </a>
                        <script>
                            function send(){
                                  
                                 return false;
                            }
                        </script>
                    </div> 
                    
                    <input type="password" name="password" id="password" placeholder="密碼" required="required" />
                    
                    <input type="password" name="reppw" id="reppw" placeholder="重複密碼" required="required" />

                        <input type="text" name="telephone" id="telephone" placeholder="手機號" required="required"/>
                    <input type="text" name="nickname" id="nickname" placeholder="親，您的暱稱" required="required" />
                        <input type="text" name="email" id="email" placeholder="親，您的郵箱" required="required"/>
                    <input type="submit" id="submit" value="註冊"/>
                    
                    </form>
                </div>
            </div>
        </div>
    <script>
        if ("${success}"=="註冊成功"){
            if(confirm("註冊成功，是否登陸？")){
                window.location.href="/shop/views/login.jsp";
            }
        }
    </script>
    </body>
</html>

registerservlet

package com.aaa.servlet;

import com.aaa.dao.IUserDAO;
import com.aaa.dao.Impl.UserDAOImpl;
import com.aaa.entity.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;

/*
    註冊的 servlet  register

 */
@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //設置編碼格式
        req.setCharacterEncoding("UTF-8");
        //獲取請求參數
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String telephone = req.getParameter("telephone");
        String nickname = req.getParameter("nickname");
        String email = req.getParameter("email");
        //驗證 用戶名是否已經被註冊 ？ 惟一性校驗
        IUserDAO dao=new UserDAOImpl();
        boolean exist = dao.isExist(username);
        if (exist){
            //用戶名已經被註冊  提示用戶 已被註冊
            req.setAttribute("error","此用戶名已經被註冊過");
        }else{
            //沒有被註冊過  就將用戶信息添加到數據庫中
            User user = new User(0, username,password,nickname,email,telephone);
            dao.addUser(user);
            req.setAttribute("success","註冊成功");
        }
        //請求轉發到 註冊頁面
        req.getRequestDispatcher("/views/register.jsp").forward(req,resp);
    }
}

3、用戶註銷

personal.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/4/22
  Time: 20:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的主頁</title>
    <style>
        ul,iframe{
            float: left;
        }
        ul{
            width: 15%;
        }
        iframe{
            width: 80%;
        }
    </style>
</head>
<body>
    <h1>歡迎您。尊敬的VIP:${user.nickname}</h1>
    <div>
        <ul>
            <li><a href="/shop/" target="show">個人訂單</a></li>
            <li><a href="/shop/" target="show">收藏</a></li>
            <li><a href="/shop/addCart" target="show">購物車</a></li>
            <li><a href="/shop/" target="show">足跡</a></li>
            <li><a href="/shop/" target="show">評價</a></li>
            <li><a href="/shop/" target="show">錢包</a></li>
            <li><a href="/shop/logout" >註銷</a></li>
        </ul>
        <iframe name="show" height="800px"></iframe>
    </div>
</body>
</html>

lougoutserv

package com.aaa.servlet;

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;

@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //銷燬session  銷燬以後 至關於 將登陸信息所有清除
        req.getSession().invalidate();
        resp.sendRedirect("/shop/home");
    }
}

4、購物車  雖然實現了，可是有些問題  ，明天更。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程