秒杀项目之普通商品展示及增删改查

续上期内容

 

一、框架搭建

1、页面跳转方法

login.js文件：

           success(e){
               // 成功的回调函数
            layer.msg(e.message,{icon: 6},()=>{
                if(e.code===200){
                    location.href="goods/goodsList"
                }
            });
           }

layui.use(["jquery","layer"],()=>{
    // 得到layui中封装的jquery
    let $=layui.jquery
    let layer=layui.layer
    // 给登录按钮设置事件
    $(login).click(()=>{
        // 取到表单的值
        let mobile = $("#mobile").val();
        let password=$("#password").val();
        // 前端加密的盐
        let salt= "f1g2h3j4";
        if(password){
            // 将密码和盐混在一起
            password=salt.charAt(1) + "" + salt.charAt(5) + password + salt.charAt(0) + "" + salt.charAt(3);
            // 进行MD5加密
            password=md5(password)
        }
        console.log(password)
        // 将数据给后台（前后端分离axios,普通开发ajax）
        $.ajax({
            url:"/user/login",//后台登录接口
            data:{
                // 需要携带的数据
                mobile,
                password
            },
            datatype: "json",//后端给你的数据类型
            success(e){
                // 成功的回调函数
                layer.msg(e.message,{icon: 6},()=>{
                    if (e.code===200){
                        location.href="goods/goodsList"
                    }
                });
            },
            // error(e){
            //     // 报错的回调函数
            //
            // }

        })
    })
})

2、进入layui网站，设置首页的样式

Tab选项卡 - 页面元素 - Layui

新建goodsList.js文件，暂未写内容

goodsList.ftl:

    <#include "../common/head.ftl">
    
 



    

        
普通商品
        
秒杀商品
    
    

        

            
        
        
内容2
    

<#--引入js-->

  3、后台生成器生成goods数据

在goodsMapper中加入注解

@Repository

 4、PageBean 

package com.zxy.seckill.util;
 
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
 
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
 
 
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean {
 
    private int total;
    private int page = 1;
    private int rows = 5;
    private boolean pagination = true;
    private String url;
    private Map ms;
 
    public void setMs(Map ms) {
        this.ms = ms;
    }
 
    public int calcStartIndex() {
        return (page - 1) * rows;
    }
 
    public int calcMaxPage() {
        return total % rows == 0 ? total / rows : total / rows + 1;
    }
 
    public int nextPage() {
        return Math.min(page + 1, calcMaxPage());
    }
 
    public int prevPage() {
        return Math.max(page - 1, 1);
    }
 
    public void setRequest(HttpServletRequest req) {
        setUrl(req.getRequestURL().toString());
        setMs(req.getParameterMap());
        String page = req.getParameter("page");
        if (page == null) {
            setPage(1);
        } else {
            setPage(Integer.parseInt(page));
        }
        String rows = req.getParameter("rows");
        if (rows == null) {
            setRows(5);
        } else {
            setRows(Integer.parseInt(rows));
        }
        String pagination = req.getParameter("pagination");
        if ("false".equals(pagination)) {
            setPagination(false);
        }
    }
 
}

5、Mybatis Plus02中的分页配置

MybatisPlusConfig ：

package com.zxy.seckill.config;
 
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
 
@Configuration
public class MybatisPlusConfig {
        @Bean
        public MybatisPlusInterceptor mybatisPlusInterceptor() {
            MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
//            加入分页拦截器
            interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.H2));
            return interceptor;
        }
}