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

小滦不秃头‍♂️

已于 2022-03-28 18:55:47 修改

阅读量901

点赞数

文章标签： java 开发语言

于 2022-03-23 17:20:45 首次发布

本文链接：https://blog.csdn.net/zxy15974062965/article/details/123640672

版权

本文介绍了使用layui前端框架进行页面跳转和样式设置，以及利用js处理登录表单数据，通过Ajax与后台接口交互实现登录功能。同时，展示了如何使用MybatisPlus的分页配置及生成器来处理goods数据。此外，还涉及了PageBean类用于处理分页请求。

摘要由CSDN通过智能技术生成

续上期内容

一、框架搭建

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <#include "../common/head.ftl">
    <style>
        .layui-this{
            background: deepskyblue !important;
        }
    </style>
 
</head>
<body class="layui-container layui-bg-orange">
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">普通商品</li>
        <li>秒杀商品</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table id="normal_goods" lay-filter="normal_goods"></table>
        </div>
        <div class="layui-tab-item">内容2</div>
    </div>
</div>
<#--引入js-->
<script src="/static/asset/js/project/goodsList.js"></script>
</body>
</html>

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<String, String[]> ms;
 
    public void setMs(Map<String, String[]> 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;
        }
}

小滦不秃头‍♂️

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
秒杀项目之普通商品展示及增删改查

续上期内容一、框架搭建1、页面跳转方法login.js文件： success(e){ // 成功的回调函数 layer.msg(e.message,{icon: 6},()=>{ if(e.code===200){ location.href="goods/goodsList" } }
复制链接

扫一扫