秒杀基本功能开发(显示商品列表和商品详情)

文章目录

    • 1.数据库表设计
        • 1.商品表
        • 2.秒杀商品表
        • 3.修改一下秒杀时间为今天到明天
    • 2.pojo和vo编写
        • 1.com/sxs/seckill/pojo/Goods.java
        • 2.com/sxs/seckill/pojo/SeckillGoods.java
        • 3.com/sxs/seckill/vo/GoodsVo.java
    • 3.Mapper编写
        • 1.GoodsMapper.java
        • 2.GoodsMapper.xml
        • 3.分别编写SeckillGoodsMapper.java和SeckillGoodsMapper.xml
    • 4.Service编写
        • 1.GoodsService.java
        • 2.GoodsServiceImpl.java
        • 3.分别编写SeckillGoodsService.java和SeckillGoodsServiceImpl.java
    • 5.Controller编写
        • 1.GoodsController.java
    • 6.展示商品列表页
        • 1.goodsList.html
        • 2.测试使用
          • 1.报错,GoodsService没被注入
          • 2.加一下Service注解即可
          • 3.登录成功
          • 4.访问 http://localhost:9092/seckill/goods/toList 没有图片
          • 5.把图片放到imgs下即可
          • 6.重新访问
        • 3.调整templates/login.html 登录成功后直接跳转到商品列表页
          • 1.新增超链接
          • 2.登录成功后自动跳转
    • 7.商品详情页
        • 1.Mapper编写 根据商品id获取商品详情
          • 1.GoodsMapper.java
          • 2.GoodsMapper.xml
        • 2.Service编写
          • 1.GoodsService.java
          • 2.GoodsServiceImpl.java
        • 3.Controller编写
          • GoodsController.java
        • 4.前端界面编写
          • 1.goodsList.html 修改请求(使用环境变量+资源路径的形式)
          • 2.goodsDetail.html 商品详情页
        • 5.测试
          • 1.点击查看详情
          • 2.数据正常展示

1.数据库表设计

1.商品表
use seckill;

DROP TABLE IF EXISTS `t_goods`;
CREATE TABLE `t_goods`
(
    `id`           BIGINT(20)  NOT NULL AUTO_INCREMENT COMMENT '商品 id',
    `goods_name`   VARCHAR(16) not null DEFAULT '',
    `goods_title`  VARCHAR(64) not null DEFAULT '' COMMENT '商品标题',
    `goods_img`    VARCHAR(64) not null DEFAULT '' COMMENT '商品图片',
    `goods_detail` LONGTEXT    not null COMMENT '商品详情',
    `goods_price`  DECIMAL(10, 2)       DEFAULT '0.00' COMMENT '商品价格',
    `goods_stock`  INT(11)              DEFAULT '0' COMMENT '商品库存',
    PRIMARY KEY (`id`)
) ENGINE = INNODB
  AUTO_INCREMENT = 3
  DEFAULT CHARSET = utf8mb4;

INSERT INTO `t_goods`
VALUES ('1', '整体厨房设计-套件', '整体厨房设计-套件', '/imgs/kitchen.jpg', '整体厨房设计-套件', '15266.00', '100');
INSERT INTO `t_goods`
VALUES ('2', '学习书桌-套件', '学习书桌-套件', '/imgs/desk.jpg', '学习书桌-套件', '5690.00', '100');

select * from t_goods;
2.秒杀商品表
use seckill;

DROP TABLE IF EXISTS `t_seckill_goods`;
CREATE TABLE `t_seckill_goods`
(
    `id`            BIGINT(20) NOT NULL AUTO_INCREMENT,
    `goods_id`      BIGINT(20)     DEFAULT 0,
    `seckill_price` DECIMAL(10, 2) DEFAULT '0.00',
    `stock_count`   INT(10)        DEFAULT 0,
    `start_date`    DATETIME       DEFAULT NULL,
    `end_date`      DATETIME       DEFAULT NULL,
    PRIMARY KEY (`id`)
) ENGINE = INNODB
  AUTO_INCREMENT = 3
  DEFAULT CHARSET = utf8mb4;

INSERT INTO `t_seckill_goods`
VALUES ('1', '1', '5266.00', '10', '2022-11-18 19:36:00', '2022-11-19 09:00:00');
INSERT INTO `t_seckill_goods`
VALUES ('2', '2', '690.00', '10', '2022-11-18 08:00:00', '2022-11-19 09:00:00');

select * from t_seckill_goods;
3.修改一下秒杀时间为今天到明天

image-20240507154440938

2.pojo和vo编写

1.com/sxs/seckill/pojo/Goods.java
package com.sxs.seckill.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;
import java.math.BigDecimal;

/**
 * Description:
 *
 * @Author sun
 * @Create 2024/5/7 15:47
 * @Version 1.0
 */
@Data
@TableName("t_goods")
public class Goods implements Serializable {
    private static final long serialVersionUID = 1L;
    /**
     * 商品 id
     */
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;
    private String goodsName;
    /**
     * 商品标题
     */
    private String goodsTitle;
    /**
     * 商品图片
     */
    private String goodsImg;
    /**
     * 商品详情
     */
    private String goodsDetail;
    /**
     * 商品价格
     */
    private BigDecimal goodsPrice;
    /**
     * 商品库存
     */
    private Integer goodsStock;
}
2.com/sxs/seckill/pojo/SeckillGoods.java
package com.sxs.seckill.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Date;

/**
 * Description:
 *
 * @Author sun
 * @Create 2024/5/7 15:48
 * @Version 1.0
 */
@Data
@TableName("t_seckill_goods")
public class SeckillGoods implements Serializable {
    private static final long serialVersionUID = 1L;
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;
    private Long goodsId;
    private BigDecimal seckillPrice;
    private Integer stockCount;
    private Date startDate;
    private Date endDate;
}

3.com/sxs/seckill/vo/GoodsVo.java
package com.sxs.seckill.vo;

import com.sxs.seckill.pojo.Goods;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.math.BigDecimal;
import java.util.Date;

/**
 * Description:
 *
 * @Author sun
 * @Create 2024/5/7 16:05
 * @Version 1.0
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class GoodsVo extends Goods {
    private BigDecimal seckillPrice;
    private Integer stockCount;
    private Date startDate;
    private Date endDate;
}

3.Mapper编写

1.GoodsMapper.java
package com.sxs.seckill.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.sxs.seckill.pojo.Goods;
import com.sxs.seckill.vo.GoodsVo;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

/**
 * Description:
 *
 * @Author sun
 * @Create 2024/5/7 17:00
 * @Version 1.0
 */
@Mapper
public interface GoodsMapper extends BaseMapper<Goods> {
    /**
     * 获取商品列表
     * @return
     */
    List<GoodsVo> findGoodsVo();
}

2.GoodsMapper.xml
  • resultType为GoodsVo,则可以自动按照驼峰命名法进行匹配
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.sxs.seckill.mapper.GoodsMapper">
    <select id="findGoodsVo" resultType="com.sxs.seckill.vo.GoodsVo">
        select g.id,
               g.goods_name,
               g.goods_title,
               g.goods_img,
               g.goods_detail,
               g.goods_price,
               g.goods_stock,
               t_seckill_goods.seckill_price,
               t_seckill_goods.stock_count,
               t_seckill_goods.start_date,
               t_seckill_goods.end_date
        from t_goods g
                 left join t_seckill_goods on g.id = t_seckill_goods.goods_id;
    </select>
</mapper>
3.分别编写SeckillGoodsMapper.java和SeckillGoodsMapper.xml

4.Service编写

1.GoodsService.java
package com.sxs.seckill.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.sxs.seckill.pojo.Goods;
import com.sxs.seckill.vo.GoodsVo;

import java.util.List;

/**
 * Description:
 *
 * @Author sun
 * @Create 2024/5/7 17:23
 * @Version 1.0
 */
public interface GoodsService extends IService<Goods> {
    /*
     * 查询商品列表
     */
    List<GoodsVo> findGoodsVo();
}

2.GoodsServiceImpl.java
package com.sxs.seckill.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.sxs.seckill.mapper.GoodsMapper;
import com.sxs.seckill.pojo.Goods;
import com.sxs.seckill.service.GoodsService;
import com.sxs.seckill.vo.GoodsVo;

import javax.annotation.Resource;
import java.util.List;

/**
 * Description:
 *
 * @Author sun
 * @Create 2024/5/7 17:24
 * @Version 1.0
 */
public class GoodsServiceImpl extends ServiceImpl<GoodsMapper, Goods> implements GoodsService {
    @Resource
    private GoodsMapper goodsMapper;

    @Override
    public List<GoodsVo> findGoodsVo() {
        return goodsMapper.findGoodsVo();
    }
}

3.分别编写SeckillGoodsService.java和SeckillGoodsServiceImpl.java

5.Controller编写

1.GoodsController.java

image-20240508093009972

6.展示商品列表页

1.goodsList.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
    <script type="text/javascript"
            th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "Open Sans", sans-serif;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 11px;
        }

        body {
            background: #c9302c;
        }

        .main-header {
            width: 100%;
            height: 100px;
            background: whitesmoke;
            display: block;
        }

        .navbar {
            display: inline-block;
            float: right;
            margin-right: 50px;
            margin-top: 30px;
        }

        .logo {
            display: inline-block;
            margin-top: 30px;
            margin-left: 30px;
            text-decoration: none;
        }

        .logo-lg {
            font-size: 20px;
            font-weight: lighter;
            color: #232324;
        }

        .logo-lg > b {
            font-size: 20px;
            font-weight: lighter;
            color: #232324;
        }

        .container {
            background: #FFFFFF;
        }

        .add-good {
            padding-top: 12px;
            padding-bottom: 20px;
            border-radius: 10px;
            outline: none;
            display: block;
            margin-right: 30px;
            background: #f6f6f6;
            color: #ce7d88;
            border: solid 1px #eac7cc;
        }
    </style>
</head>
<body>
<!--抽取头部公共页面-->
<header id="site-header" class="main-header">
    <!-- Logo -->
    <a class="logo" th:href="@{/goods/toList}">
        <span class="logo-lg"><b>商品抢购</b></span></a>
    <nav class="navbar navbar-static-top">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img class="user-image" src="/imgs/user.png" height="42" alt="User
Image">
                        <span class="hidden-xs"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- User image -->
                        <li class="user-header">
                            <img class="img-circle" alt="User Image">
                            <p>
                                Hello ABC - Hello ABC
                                <small>Hello ABC</small>
                            </p>
                        </li>
                        <!-- Menu Body -->
                        <li class="user-body">
                        </li>
                        <li class="user-footer">
                            <div class="pull-middle">
                                <a th:href="@{/login/out}" class="btn btn-lg btn-default
btn-block">退出系统</a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>
<div class="container">
    <div class="panel-heading">秒杀商品列表</div>
    <table class="table" id="goodslist">
        <tr>
            <td>名称</td>
            <td>图片</td>
            <td>原价</td>
            <td>秒杀价</td>
            <td>库存</td>
            <td>详情</td>
        </tr>
        <tr th:each="goods,goodstStat : ${goodsList}">
            <td th:text="${goods.goodsName}"></td>
            <td><img th:src="@{${goods.goodsImg}}" width="100" height="100"/>
            </td>
            <td th:text="${goods.goodsPrice}"></td>
            <td th:text="${goods.seckillPrice}"></td>
            <td th:text="${goods.stockCount}"></td>
            <td><a th:href="'/goods/toDetail/'+${goods.id}">查看详情</a></td>
        </tr>
    </table>
</div>
<script>
</script>
2.测试使用
1.报错,GoodsService没被注入

image-20240508093322068

2.加一下Service注解即可

image-20240508093403627

3.登录成功

image-20240508094107275

4.访问 http://localhost:9092/seckill/goods/toList 没有图片

image-20240508094252775

5.把图片放到imgs下即可

image-20240508094501495

6.重新访问

image-20240508094532067

3.调整templates/login.html 登录成功后直接跳转到商品列表页
1.新增超链接

image-20240508095100810

2.登录成功后自动跳转

image-20240508095226979

7.商品详情页

1.Mapper编写 根据商品id获取商品详情
1.GoodsMapper.java
    /**
     * 获取商品详情
     * @param goodsId
     * @return
     */
    GoodsVo findGoodsVoByGoodsId(Long goodsId);
2.GoodsMapper.xml
    <select id="findGoodsVoByGoodsId" resultType="com.sxs.seckill.vo.GoodsVo">
        select g.id,
               g.goods_name,
               g.goods_title,
               g.goods_img,
               g.goods_detail,
               g.goods_price,
               g.goods_stock,
               t_seckill_goods.seckill_price,
               t_seckill_goods.stock_count,
               t_seckill_goods.start_date,
               t_seckill_goods.end_date
        from t_goods g
                 left join t_seckill_goods on g.id = t_seckill_goods.goods_id
        where g.id = #{goodsId};
    </select>
2.Service编写
1.GoodsService.java
    /**
     * 获取商品详情
     * @param goodsId
     * @return
     */
    GoodsVo findGoodsVoByGoodsId(Long goodsId);
2.GoodsServiceImpl.java
    @Override
    public GoodsVo findGoodsVoByGoodsId(Long goodsId) {
        return goodsMapper.findGoodsVoByGoodsId(goodsId);
    }
3.Controller编写
GoodsController.java
    // 进入到商品详情页
    @RequestMapping("/toDetail/{goodsId}")
    public String toDetail(Model model, User user, @PathVariable Long goodsId) {
        // 判断是否有用户信息
        if (null == user) {
            return "login";
        }
        // 查询商品详情
        model.addAttribute("goods", goodsService.findGoodsVoByGoodsId(goodsId));
        // 将用户信息存入model中,返回到前端
        model.addAttribute("user", user);
        return "goodsDetail";
    }
4.前端界面编写
1.goodsList.html 修改请求(使用环境变量+资源路径的形式)

image-20240508135716537

2.goodsDetail.html 商品详情页
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <!--jquery-->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "Open Sans", sans-serif;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 11px;
        }

        body {
            /*background: #cbc0d3;*/
            background: #c9302c;
        }

        .main-header {
            width: 100%;
            height: 100px;
            /*background: #eac7cc;*/
            background: whitesmoke;
            display: block;
        }

        .navbar {
            display: inline-block;
            float: right;
            margin-right: 50px;
            margin-top: 30px;
        }

        .logo {
            display: inline-block;
            margin-top: 30px;
            margin-left: 30px;
            text-decoration: none;
        }

        .logo-lg {
            font-size: 20px;
            font-weight: lighter;
            color: #232324;
        }

        .logo-lg > b {
            font-size: 20px;
            font-weight: lighter;
            color: #232324;
        }

        .container {
            background: #FFFFFF;
            margin-right: auto;
            margin-left: auto;
            width: 900px;
        }

        .captcha {
            display: none;
        }

        .captchaImg {
            display: none;
            width: 130px;
            height: 32px;
        }
    </style>
</head>
<body>
<!--抽取头部公共页面-->
<header id="site-header" class="main-header">
    <!-- Logo -->
    <a class="logo" onclick="toList()">
        <span class="logo-lg"><b>商品抢购</b></span>
    </a>
    <nav class="navbar navbar-static-top">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img class="user-image" src="/imgs/user.png" height="32" alt="User
Image">
                        <span class="hidden-xs"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- User image -->
                        <li class="user-header">
                            <img class="img-circle" alt="User Image">
                            <p>
                                Hello ABC - Hello ABC
                                <small>Hello ABC</small>
                            </p>
                        </li>
                        <!-- Menu Body -->
                        <li class="user-body">
                        </li>
                        <li class="user-footer">
                            <div class="pull-middle">
                                <a onclick="toOut()" class="btn btn-lg btn-default btn-block">退
                                    出系统</a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>
<div class="panel panel-default">
    <div class="panel-heading" style="background: #c9302c;color: white">秒杀商品详情</div>
    <div class="panel-body">
        <span th:if="${user eq null}"> 您还没有登录,请登陆后再操作<br/></span>
        <span>production 参数</span>
    </div>
    <div class="container">
        <table class="table" id="good">
            <tr>
                <td>名称</td>
                <td colspan="3" id="goodName" th:text="${goods.goodsName}"></td>
            </tr>
            <tr>
                <td>图片</td>
                <td colspan="3"><img id="goodImg" th:src="@{${goods.goodsImg}}" width="200" heights="200"/></td>
            </tr>
            <tr>
                <td>秒杀价</td>
                <td id="secKillPrice" th:text="${goods.seckillPrice}"></td>
                <td>
                    <img id="captchaImg" class="captchaImg"/></td>
                <td>
                    <input id="captcha" class="captchaImg"/>
                    <input type="button" id="captchabtn" onclick="verifyCaptcha()" value="验证
输入的验证码是否正确">
                </td>
            </tr>
            <tr>
                <td>原价</td>
                <td colspan="3" id="goodPrice" th:text="${goods.goodsPrice}"></td>
            </tr>
            <tr>
                <td>库存</td>
                <td colspan="3" id="stockCount" th:text="${goods.stockCount}"></td>
            </tr>
        </table>
    </div>
</div>
</body>
<script>
</script>
</html>
5.测试
1.点击查看详情

image-20240508135919809

2.数据正常展示

image-20240508135933746

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/669534.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JCR一区级 | Matlab实现TCN-LSTM-MATT时间卷积长短期记忆神经网络多特征分类预测

JCR一区级 | Matlab实现TCN-LSTM-MATT时间卷积长短期记忆神经网络多特征分类预测 目录 JCR一区级 | Matlab实现TCN-LSTM-MATT时间卷积长短期记忆神经网络多特征分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.JCR一区级 | Matlab实现TCN-LSTM-MATT时间卷积长短…

用户画像知识点补充——多数据源

引入 针对用户画像项目来说&#xff08;产品&#xff09;必须要支持从多种数据源加载业务数据&#xff0c;构建用户标签。 在之前的标签模型开发中&#xff0c;主要是为了简化开发复杂度&#xff0c;业务数据统一存储到HBase表中。 数据源包含如下几个方面&#xff1a; 存储H…

民国漫画杂志《时代漫画》第38期.PDF

时代漫画38.PDF: https://url03.ctfile.com/f/1779803-1248636380-dd7daa?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!

R19 NR移动性增强概况

随着5G/5G-A技术不断发展和业务需求的持续增强&#xff0c;未来网络的部署将不断向高频演进。高频小区的覆盖范围小&#xff0c;用户将面临更为频繁的小区选择、重选、切换等移动性过程。 为了提升网络移动性能和保障用户体验&#xff0c;移动性增强一直是3GPP的热点课题。从NR…

11.1 排序算法

目录 11.1 排序算法 11.1.1 评价维度 11.1.2 理想排序算法 11.1 排序算法 排序算法&#xff08;sorting algorithm&#xff09;用于对一组数据按照特定顺序进行排列。排序算法有着广泛的应用&#xff0c;因为有序数据通常能够被更高效地查找、分析和处理。 如图 1…

修改element-ui el-radio颜色

修改element-ui el-radio颜色 需求效果图代码实现 小结 需求 撤销扣分是绿色&#xff0c;驳回是红色 效果图 代码实现 dom <el-table-columnlabel"操作"width"200px"><template v-slot"scope"><el-radio-group v-model"s…

短剧源码系统深层次解析:技术架构与实现

短剧源码系统作为短视频内容生产与分发的核心技术&#xff0c;其技术实现对于开发者和运营者至关重要。本文将深入探讨短剧源码系统的关键技术架构&#xff0c;特别是前端框架uni-app和Vue&#xff0c;以及后端框架ThinkPHP5和Workerman的应用。 前端框架&#xff1a;uni-app与…

Unity打包Webgl端进行 全屏幕自适应

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一&#xff1a;修改 index.html二&#xff1a;将非移动端设备&#xff0c;canvas元素的宽度和高度会设置为100%。三&#xff1a;修改style.css总结 下载地址&#x…

用开源模型MusicGen制作六一儿童节专属音乐

使用的是开源模型MusicGen&#xff0c;它可以根据文字描述或者已有旋律生成高质量的音乐(32kHz)&#xff0c;其原理是通过生成Encodec token然后再解码为音频&#xff0c;模型利用EnCodec神经音频编解码器来从原始波形中学习离散音频token。EnCodec将音频信号映射到一个或多个并…

构建基础网站的入门指南

在数字时代&#xff0c;网站已经成为展示个人、企业或组织信息的重要平台。了解如何通过编写代码来创建一个网站是非常有用的技能。在本文中&#xff0c;我们将了解构建一个基础网站所需的步骤和代码知识。第一步&#xff1a;了解网站的基本组成 一个基本的网站通常包含HTML&a…

LeetCode 2928.给小朋友们分糖果 I:Java提交的运行时间超过了61%的用户

【LetMeFly】2928.给小朋友们分糖果 I&#xff1a;Java提交的运行时间超过了61%的用户 力扣题目链接&#xff1a;https://leetcode.cn/problems/distribute-candies-among-children-i/ 给你两个正整数 n 和 limit 。 请你将 n 颗糖果分给 3 位小朋友&#xff0c;确保没有任何…

微软远程连接工具:Microsoft Remote Desktop for Mac 中文版

Microsoft Remote Desktop 是一款由微软开发的远程桌面连接软件&#xff0c;它允许用户从远程地点连接到远程计算机或虚拟机&#xff0c;并在远程计算机上使用桌面应用程序和文件。 下载地址&#xff1a;https://www.macz.com/mac/5458.html?idOTI2NjQ5Jl8mMjcuMTg2LjEyNi4yMz…

Qt Designer工具如何修改MainWindow窗口的标题

Qt Designer工具如何修改MainWindow窗口的标题 在MainWindow的属性编辑器中选择“windowTitle”后面一栏修改成期望的窗口标题名称即可。 按住“ctrlR”即可查看可视化界面的窗口标题

未见过类型题每周总结(个人向)

1.DP40 小红取数 题目 解析 一道01背包的衍生问题&#xff0c;我们可以按照它的思路定义数组dp[i][j],表示前i个数中%k为j的最大和。为什么设置未%k的最大和呢&#xff1f;是因为当两个数分别%k&#xff0c;如a%kx&#xff0c;b%ky。那么&#xff08;ab&#xff09;%k&#…

锐捷校园网自助服务-字符过滤存在缺陷

锐捷校园网自助服务-字符过滤存在缺陷 漏洞介绍 令人感到十分遗憾的是&#xff0c;锐捷网络安全应急响应中心对漏洞上报似乎缺少了一些奖励&#xff0c;令人对官方上报漏洞失去了些许兴趣​。 该缺陷仅仅打破了安全检查防护&#xff0c;并没有造成实质性危害&#xff0c;至于…

16.Redis之Redis事务

1.MySQL 事务 原子性: 把多个操作,打包成一个整体了 一致性: 事务执行之前,和之后,数据都不能离谱~ 持久性: 事务中做出的修改都会存硬盘 隔离性: 事务并发执行,涉及到的一些问题~~ 2.Redis事务 2.1 认识Redis事务 • 弱化的原⼦性: redis 没有 "回滚机制". …

本地知识库开源框架Fastgpt、MaxKB产品体验

本地知识库开源框架Fastgpt、MaxKB产品体验 背景fastgpt简介知识库共享部署 MaxKB总结 背景 上一篇体验了Quivr、QAnything两个开源知识库模型框架&#xff0c;这次介绍两款小众但是体验比较好的产品。 fastgpt 简介 FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&am…

8-Django项目--登录及权限

目录 templates/login/login.html templates/login/404.html views/login.py utils/pwd_data.py auth.py settings.py 登录及权限 登录 views.py 中间件 auth.py templates/login/login.html {% load static %} <!DOCTYPE html> <html lang"en"&g…

掘金AI 商战 宝典 初级班:如何用AI做文案(实战实操 现学现用 玩赚超值)

未来会用AIE剑客将干掉99.99%不会AI的人! 课程目录&#xff1a; 10-第十讲用AI面试 11-第十一讲用AI写演讲稿 12-第十二讲用AI写工作总结 13-第十三讲用AI写日报周报 14-第十四讲用AI拟定各类合同 15-第十五讲用AI写课程教案 16-第十六讲用AI做商业分析 17-第十七讲用…

20 - grace数据处理 - 地下水储量计算过程分解 - 地下水储量计算

20 - grace数据处理 - 地下水储量计算过程分解 - 地下水储量计算 0 引言1 地下水储量变化计算过程0 引言 由水平衡方程可以将地下水储量的计算过程分解为3个部分,第一部分计算陆地水储量变化、第二部分计算地表水储量变化、第三部分计算冰后回弹改正、第四部分计算地下水储量变…