图书商城 --- 代码回溯2

前端显示界面

左侧书籍列表

因为我们的所有分类都是要从后台添加的分类所拿到，所以同理要先进入到相应的servlet，然后转发请求,图书显示也同理

<%@include file="top.jsp" %>

    

        
    
    

        
    

这里要注意因为使用的是动态引入，而且引入的是servlet链接，所以后面的请求转发应写include而不是forword

  
@WebServlet(name = "catagoryshow",urlPatterns = "/category")
public class catagoryshow extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        CategoryService cs = new CategoryServiceImpl();
        List lc = cs.ShowAllCategory();
        req.setAttribute("category",lc);
        req.getRequestDispatcher("/FontMain/categoryleft.jsp").include(req,resp);
    }
}

• 显示图书

    
        

            
书名：${book.name}
            

                

                    
                
                

                    

                        
书名：${book.name}
                        
作者：${book.author}
                        
描述：${book.description}
                        
价格${book.price}
                    
                
            
            
            
${book.id}
        
    

效果

image.png

用户登录注册

前端页面

• 登录以及注册

   

        

            
            

                账号
                
            
            

                密码
                
            

            登录
            
            
                
用户名或密码错误
            

        
    
    

        

            
            

                账号
                
            
            

                密码
                
            
            

                确认密码
                
            
            

                邮箱地址
                
            
            注册
            
            
                
已注册成功
            
        
    

• 遮罩层

-js

  if(document.getElementById("myname")){
        document.getElementById("loginbutton").style.display = "none";
        document.getElementById("registerbutton").style.display = "none";

    }
    function Toactive(obj) {
        obj.classList.add("active");
        console.log(obj);
    }
    document.getElementById("loginbutton").onclick = function () {
        var mini_login = document.getElementsByClassName("login")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_login.style.display = "block";
        cover.style.display = "block";
    }
    document.getElementById("registerbutton").onclick = function () {
        var mini_register = document.getElementsByClassName("register")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_register.style.display = "block";
        cover.style.display = "block";
    }
   document.getElementsByClassName("exit")[0].onclick = function () {
        var mini_login = document.getElementsByClassName("login")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_login.style.display = "none";
        cover.style.display = "none";
    }
    document.getElementsByClassName("exit")[1].onclick = function () {
        var mini_register = document.getElementsByClassName("register")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_register.style.display = "none";
        cover.style.display = "none";
    }

完成效果图

denglx.gif

登录servlet

同样 我们将其封装成了函数

  private void Login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("登录函数运行");
        String luname = req.getParameter("luname");
        String lpwd = req.getParameter("lpwd");
        if(luname.equals("admin")&&lpwd.equals("admin")){
            req.getRequestDispatcher("/BackMain/AddCategory.jsp").forward(req,resp);
        }
        User u = new User();
        u.setUname(luname);
        u.setPwd(lpwd);
        System.out.println(u);
        User nu = us.CheckUser(u);
        if(nu !=null){
            HttpSession hs=req.getSession();
            hs.setAttribute("user",nu);
            resp.sendRedirect("/FontMain/Index.jsp");
        }else{
            req.setAttribute("message2",0);
            req.getRequestDispatcher("/FontMain/Index.jsp").forward(req,resp);
        }
    }

如果登录成功就将用户信息 存储到session中,并在前台隐藏掉登录和删除，然后显示用户名

 
                    欢迎     
                    ${sessionScope.user.uname}
                    退出
                

否则就传一个message到前台表示登录不成功

 
                
用户名或密码错误
            

购物车设计

为了防止购物车单项重复 并且 方便删除项目
我们新建一个购物车item表示购物车单项

cartitem

public class CartItem {
    private Book book;
    private int number;
    private float price;

//各种get set
}

cart

public class Cart {
    private Map mc = new HashMap<>();
    //书籍id 和 购物项
    private float allprice;

    public void AddBook(Book book){
        CartItem cartItem = mc.get(book.id);
        if(cartItem ==null){
            cartItem = new CartItem();
            cartItem.setBook(book);
            cartItem.setNumber(1);
            mc.put(book.id,cartItem);
        }else{
            int currentnum =  cartItem.getNumber();
            cartItem.setNumber(++currentnum);
        }
    }

    public void DeleteItem(int bookid){
     mc.remove(bookid);
    }

    public Map getMc() {
        return mc;
    }

    public void setMc(Map mc) {
        this.mc = mc;
    }

    public float getPrice(){
          allprice = 0;
        for(int i:mc.keySet()){
           CartItem ci = mc.get(i);
           allprice += ci.getPrice();
        }
        return allprice;
    }

}

加入购物车操作

当我们在前台单击加入购物车的时候，我们用ajax将数据传入到bussiness servlet

bussiness servlet

加入购物车前 我们需要判断用户是否登录
如果没有登录 就在前台传回一个message

   HttpSession hs = req.getSession();
        User user  = (User)hs.getAttribute("user");
        if(user ==null){
            req.setAttribute("message","请先登录后购买");
            req.getRequestDispatcher("/FontMain/Mycart.jsp").forward(req,resp);
        }

加入操作

 private void AddItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession hs = req.getSession();
        Cart ct = (Cart)hs.getAttribute("cart");
        if( ct== null){
            ct = new Cart();
        }

        int bookid =  Integer.parseInt(req.getParameter("bookid"));
        BookService bs = new BookServiceImpl();
        Book book = bs.FindBook(bookid);
        ct.AddBook(book);

        hs.setAttribute("cart",ct);
    }

为了方便这里我们就不建数据库了 ，直接将购物车的内容放发到了session中，缺点是如果退出登录购物车里的内容就会消失，优点是:可以少写一个dao层
所以用户务必在退出的时候生成订单 ，某种情况下可以促进消费

购物车显示

        
            

                

                    
                
                

                    

                        
书名：${cartitem.value.book.name}
                        
作者：${cartitem.value.book.author}
                        
数量：${cartitem.value.number}
                        
价钱：${cartitem.value.price}
                    
                
                

                    
                    
${cartitem.value.book.id}
                
            
        

删除操作

这里我们类比后台删除图书,同样用ajax完成

 private void DeleteItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession hs = req.getSession();
        Cart ct = (Cart)hs.getAttribute("cart");

        int itemid = Integer.parseInt(req.getParameter("itemid"));

        ct.DeleteItem(itemid);
        hs.setAttribute("cart",ct);
        resp.getWriter().write("总价："+String.valueOf(ct.getPrice()));
    }

gouwuche.gif

订单

OrderItem

public class CartItem {
    private Book book;
    private int number;
    private float price;

    public Book getBook() {
        return book;
    }

    public void setBook(Book book) {
        this.book = book;
    }

    public int getNumber() {
        return number;
    }

    public void setNumber(int number) {
        this.number = number;
    }

    public float getPrice() {
        return number*book.getPrice();
    }

    public void setPrice(float price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "CartItem{" +
                "book=" + book +
                ", number=" + number +
                ", price=" + price +
                '}';
    }

    public CartItem() {
    }

    public CartItem(Book book, int number, float price) {
        this.book = book;
        this.number = number;
        this.price = price;
    }
}

表示购物车每一项

Order

public class Order {
    int id;
    private Date date;
    private float price;
    private boolean state;
    private int user_id;
    private Set so = new HashSet<>();
//设置一个 Set
}

生成订单

private void AddOrder(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession hs = req.getSession();
        //拿到用户id
        int user_id = Integer.parseInt(req.getParameter("user_id"));
        //从session中拿到购物车的数据
        Cart ct = (Cart)hs.getAttribute("cart");
        //拿到购物车中具体map数据
        Map cartitems = ct.getMc();
       //设置Set order
        Set so = new HashSet<>();
//        Order order = new Order(0,new Date(),ct.getPrice(),false,user_id);
        Order order = new Order();
        order.setId(0);
        for(int i:cartitems.keySet()){
            CartItem ci = cartitems.get(i);
            OrderItem ot = new OrderItem(0,ci.getBook().getId(),order.getId(),ci.getNumber(),ci.getPrice());
            so.add(ot);
        }
        order.setSo(so);
        order.setDate(new Date());
        order.setPrice(ct.getPrice());
        order.setState(false);
        order.setUser_id(user_id);

        //将order放入od
        od.AddOrder(order);
        List lo = od.FindUserOrder(user_id);
        hs.setAttribute("orders", lo);
        resp.sendRedirect("/FontMain/MyOrder.jsp");
    }