当前位置: 首页 > news >正文

生活服务行业网站建设学技术网站

生活服务行业网站建设,学技术网站,史上最强大的搜索神器,丹东企业网站建设平台文章目录 1.数据库表设计1.商品表2.秒杀商品表3.修改一下秒杀时间为今天到明天 2.pojo和vo编写1.com/sxs/seckill/pojo/Goods.java2.com/sxs/seckill/pojo/SeckillGoods.java3.com/sxs/seckill/vo/GoodsVo.java 3.Mapper编写1.GoodsMapper.java2.GoodsMapper.xml3.分别编写Seck…

文章目录

    • 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 = INNODBAUTO_INCREMENT = 3DEFAULT 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 = INNODBAUTO_INCREMENT = 3DEFAULT 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_datefrom t_goods gleft 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 {@Resourceprivate GoodsMapper goodsMapper;@Overridepublic 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_datefrom t_goods gleft join t_seckill_goods on g.id = t_seckill_goods.goods_idwhere g.id = #{goodsId};</select>
2.Service编写
1.GoodsService.java
    /*** 获取商品详情* @param goodsId* @return*/GoodsVo findGoodsVoByGoodsId(Long goodsId);
2.GoodsServiceImpl.java
    @Overridepublic 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

http://www.yayakq.cn/news/721362/

相关文章:

  • 建个什么网站吗dw做网站的导航栏怎么做
  • 网站一直被攻击怎么办品牌查询网官网查询
  • 怎么样做国外推广网站长春百度seo代理
  • 南京企业建网站流程渭南建站
  • 如何查公司网站谁家做的沈阳妇科医生哪个好
  • 中国建设银行青浦支行网站闲置服务器做网站
  • 企业网站建设 招标 评分表wordpress桌面应用
  • 网站建设 中企动力 顺德中国空间站有几个舱段
  • 旅游网站推荐排行榜wordpress多站共享授权码
  • 手机版的学习网站工信部icp备案流程
  • 国外免费源码共享网站杭州网站制作模板
  • 手机网站设计要求阿里巴巴logo颜色值
  • qt做网站服务器网站内容页面怎么做外链
  • 手机ftp传网站文件wordpress tag页面优化
  • 深圳网站建设费用大概多少wordpress企业官网主题
  • 网站备案是域名备案还是空间备案网站地图制作软件
  • 接做室内效果图的网站外包app公司不给源代码
  • 上海免费网站建设咨询网站建设后台和前端
  • 怎么做网站生意作文生成器
  • 购物网站网页设计图片网站报价内容
  • 佛山营销网站开发做网站前期预算
  • 西宁市城北区建设网站用node做的网站
  • 在招聘网站做销售技巧整站采集wordpress
  • 做网站镜像步骤常熟市住房和城乡建设局网站
  • wordpress+dux5.0网站优化北京联系电话?
  • 返利淘客网站源码承德平台
  • 手机建造网站选网站建设要注意什么
  • 和网站合作有哪些活动可以做jsp网站开发详解pdf
  • 做封面电脑网站安徽省建设安全协会网站
  • 烟台网站建设 58直播秀场网站开发