Spring Boot快速搭建一个简易商城项目【一展示商城首页篇】

平顶山大师2023-12-28 17:43

前言：今天我来使用Spring Boot快速搭建一个简易商城项目以下是相关的思路流程，如果有更好的思路，欢迎大佬评论留言！！！

一，实现思路：

  1. 创建 Spring Boot 项目 ： 使用 Spring Initializr（https://start.spring.io/）创建一个新的 Spring Boot 项目，添加 Web、JPA、freemack（或其他模板引擎Thymeleaf）、MySQL（或其他数据库）的依赖。

  2. 设计数据库结构： 设计商城所需的数据库表，比如商品表、订单表、用户表等。使用 JPA 或者 MyBatis 等持久层框架来实现对数据库的访问与操作。

  3. 创建实体类： 根据数据库设计创建对应的实体类，并使用注解来映射到数据库表，同时定义实体之间的关联关系。

  4. 编写业务逻辑： 创建服务类来处理商城的业务逻辑，比如商品的增删改查，用户的注册登录，订单的生成与支付等。

  5. 创建控制器： 编写控制器来响应前端页面的请求，接收参数并调用服务层完成相应的业务逻辑处理，然后返回结果给前端页面。

  6. 创建前端页面： 使用 Thymeleaf 或其他前端模板引擎创建商城的前端页面，包括商品展示页、购物车、订单页面等。

  7. 测试与调试： 对整个项目进行测试与调试，确保各项功能正常运行。

  8. 部署与发布： 将项目打包成可执行的 JAR 包，部署到服务器上并启动项目。

以上是一个简单的商城项目的搭建流程。在实际开发中，还需要考虑安全性、性能优化、异常处理等方面的内容。希望这些步骤能够对你有所帮助！如果还有其他问题，请随时提问。

二，使用到的相关技术点：

  1. Spring Boot：作为基础框架，用于快速构建应用程序的后端。

  2. MySQL（或其他数据库）：作为数据存储后端，用于存储商品、订单、用户等信息。

  3. Spring Web：用于构建 Web 应用程序，处理 HTTP 请求和响应。

  4. Freemack：用于创建商城的前端页面，实现页面与后端数据的交互。

  5. Spring Security：用于处理用户认证、授权等安全相关的功能。

  6. RESTful API：如果你打算提供给其他应用程序使用的接口，可以考虑使用 RESTful 风格的 API。

  7. Swagger：用于生成 API 文档，方便前端开发人员了解后端接口的使用方法。

  8. Lombok：简化 Java 代码的开发，通过注解的方式来减少冗长的代码。

  9. Log4j/Logback：用于日志记录，方便排查问题和追踪应用程序运行状态。

三，具体步骤：

pom文件：

复制代码 
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.lya</groupId>
    <artifactId>lyaspshop</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>lyaspshop</name>
    <description>lyaspshop</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.7.6</spring-boot.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
<!--    热加载-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
<!--        test-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
<!--      mybatis-plus  -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.2</version>
        </dependency>
<!--        集合分割-->
        <dependency>
            <groupId>com.google.guava</groupId>
            <artifactId>guava</artifactId>
            <version>20.0</version>
        </dependency>
        <!-- Druid 数据库连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>

    </dependencies>


    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>${spring-boot.version}</version>
                <configuration>
                    <mainClass>com.lya.lyaspshop.LyaspshopApplication</mainClass>
                    <skip>true</skip>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

配置：application.yml文件：都有注释放心引用：

复制代码 
server:
  port: 8080
spring:
  freemarker:
    # 设置模板后缀名
    suffix: .html
    # 设置文档类型
    content-type: text/html
    # 设置页面编码格式
    charset: UTF-8
    # 设置页面缓存
    cache: false
    # 设置ftl文件路径
    template-loader-path: classpath:/templates
  # 设置静态文件路径，js,css等
  mvc:
    static-path-pattern: /static/**
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/lyaspshop
    druid:
      filter:
        stat:
          merge-sql: true                          # 合并 SQL 语句
          slow-sql-millis: 5000                    # 慢查询阈值，单位为毫秒
      initial-size: 5                              # 初始连接数
      max-active: 20                               # 最大活跃连接数
      max-pool-prepared-statement-per-connection-size: 20  # 每个连接上缓存的 PreparedStatement 数量
      max-wait: 60000                              # 获取连接的最大等待时间，单位为毫秒
      min-evictable-idle-time-millis: 30000         # 连接在池中最小空闲时间，超过该时间会被销毁，单位为毫秒
      min-idle: 5                                  # 最小空闲连接数
      pool-prepared-statements: true               # 启用预编译语句缓存
      stat-view-servlet: # Druid 的监控页面配置
        allow: 127.0.0.1                          # 允许访问的 IP 地址
        enabled: true                              # 是否启用监控页面
        login-password: admin                      # 登录密码
        login-username: admin                      # 登录用户名
        reset-enable: true                          # 是否允许重置统计信息
        url-pattern: /druid/*                       # 监控页面的访问路径
      test-on-borrow: true                         # 在连接池中获取连接时，是否进行有效性检测
      test-on-return: false                        # 在连接池中归还连接时，是否进行有效性检测
      test-while-idle: true                        # 在连接池中空闲连接的扫描间隔时间内，是否进行有效性检测
      time-between-eviction-runs-millis: 60000      # 空闲连接的扫描间隔时间，单位为毫秒
      validation-query: SELECT 1 FROM DUAL          # 用于校验连接是否有效的 SQL 查询语句
      web-stat-filter: # Druid 的 Web 统计过滤器配置
        enabled: true                              # 是否启用 Web 统计过滤器
        exclusions: '*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*'  # 排除的资源路径
        session-stat-enable: true                   # 是否记录 Session 的统计信息
        session-stat-max-count: 100                 # 最多同时记录的 Session 数量
        url-pattern: /*                             # 统计过滤器的 URL 匹配模式

mybatis-plus:
  #类型别名
  type-aliases-package: com.lya.lyaspshop.pojo
configuration:
      #驼峰命名法
  map-underscore-to-camel-case: true
logging:
  level:
      com.lya.lyaspshop.mapper: debug

PageController

复制代码 
package com.lya.lyaspshop.controller;

import com.google.common.collect.Lists;
import com.lya.lyaspshop.pojo.Goods;
import com.lya.lyaspshop.service.impl.GoodsServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
public class PageController {

    @Autowired
    private GoodsServiceImpl goodsService;

    @RequestMapping("/")
    public String index(Model model) {
        List<Goods> gs1 = goodsService.queryshopbytypeguava("01", 6);
        List<List<Goods>> ps1 = Lists.partition(gs1, 3);
        List<Goods> gs2 = goodsService.queryshopbytypeguava("07", 12);
        List<List<Goods>> ps2 = Lists.partition(gs2, 4);
        model.addAttribute("ps1", ps1);
        model.addAttribute("ps2", ps2);
        return "index";
    }

    @RequestMapping("/page/{page}")
    public String to(@PathVariable("page") String page) {
        return page.replace(".html", "");
    }

}

商城首页：

复制代码 
<!DOCTYPE html>
<html>
	<head lang="en">
		<#include "common/head.html">
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<!------------------------------head------------------------------>
		<#include "common/top.html">

		<!-------------------------banner--------------------------->
		<div class="block_home_slider">
			<div id="home_slider" class="flexslider">
				<ul class="slides">
					<li>
						<div class="slide">
							<img src="img/banner2.jpg"/>
						</div>
					</li>
					<li>
						<div class="slide">
							<img src="img/banner1.jpg"/>
						</div>
					</li>
				</ul>
			</div>
		</div>
		
		<!------------------------------thImg------------------------------>
		<div class="thImg">
			<div class="clearfix">
				<a href="${ctx}/page/vase_proList.html"><img src="img/i1.jpg"/></a>
				<a href="${ctx}/page/proList.html"><img src="img/i2.jpg"/></a>
				<a href="#2"><img src="img/i3.jpg"/></a>
			</div>
		</div>
		
		<!------------------------------news------------------------------>
		<div class="news">
			<div class="wrapper">
				<h2><img src="img/ih1.jpg"/></h2>
				<div class="top clearfix">
					<a href="${ctx}/page/proDetail.html"><img src="img/n1.jpg"/><p></p></a>
					<a href="${ctx}/page/proDetail.html"><img src="img/n2.jpg"/><p></p></a>
					<a href="${ctx}/page/proDetail.html"><img src="img/n3.jpg"/><p></p></a>
				</div>
				<div class="bott clearfix">
					<a href="${ctx}/page/proDetail.html"><img src="img/n4.jpg"/><p></p></a>
					<a href="${ctx}/page/proDetail.html"><img src="img/n5.jpg"/><p></p></a>
					<a href="${ctx}/page/proDetail.html"><img src="img/n6.jpg"/><p></p></a>
				</div>
				<h2><img src="img/ih2.jpg"/></h2>
				<#list ps1 as ps >
				<div class="flower clearfix tran">
					<#list ps as p >
					<a href="proDetail.html" class="clearfix">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="${p.goodsImg}"/>
								<span class="abr"></span>
							</dt>
							<dd>${p.goodsName}</dd>
							<dd><span>¥ ${p.goodsPrice}</span></dd>
						</dl>
					</a>
					</#list>
				</div>
		</#list>
			</div>
		</div>
		
		<!------------------------------ad------------------------------>
		<a href="#" class="ad"><img src="img/ib1.jpg"/></a>
		
		<!------------------------------people------------------------------>
		<div class="people">
			<div class="wrapper">
				<h2><img src="img/ih3.jpg"/></h2>
				<div class="pList clearfix tran">
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s7.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】不锈钢壁饰墙饰软装</dd>
							<dd><span>￥688.00</span></dd>
						</dl>
					</a>
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s10.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】小城动物木板画壁挂北欧</dd>
							<dd><span>￥188.00</span></dd>
						</dl>
					</a>
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s4.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】玄关假山水壁饰背景墙饰挂件创意</dd>
							<dd><span>￥599.00</span></dd>
						</dl>
					</a>
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s9.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】金属树枝壁饰铜鸟装饰品</dd>
							<dd><span>￥928.00</span></dd>
						</dl>
					</a>
				</div>
				<div class="pList clearfix tran">
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s6.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】金属壁饰创意背景墙面挂件创意</dd>
							<dd><span>￥228.00</span></dd>
						</dl>
					</a>
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s8.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】小城动物木板画壁挂北欧</dd>
							<dd><span>￥199.00</span></dd>
						</dl>
					</a>
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s12.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】欧式复古挂钟创意餐厅钟表家居挂件</dd>
							<dd><span>￥666.00</span></dd>
						</dl>
					</a>
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s1.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】客厅地中海欧式现代相片墙创意</dd>
							<dd><span>￥59.80</span></dd>
						</dl>
					</a>
				</div>
				<div class="pList clearfix tran">
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s5.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】铁艺荷叶壁挂软装背景墙上装饰品</dd>
							<dd><span>￥800.00</span></dd>
						</dl>
					</a>
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s3.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】欧式照片墙 创意组合结婚礼物</dd>
							<dd><span>￥189.00</span></dd>
						</dl>
					</a>
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s2.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】欧式钟表相框墙挂墙创意组合</dd>
							<dd><span>￥148.00</span></dd>
						</dl>
					</a>
					<a href="proDetail.html">
						<dl>
							<dt>
								<span class="abl"></span>
								<img src="img/s11.jpg"/>
								<span class="abr"></span>
							</dt>
							<dd>【最家】小城动物木板画壁挂北欧</dd>
							<dd><span>￥188.00</span></dd>
						</dl>
					</a>
				</div>
			</div>
		</div>

		<#include "common/footer.html"/>

		<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('#home_slider').flexslider({
					animation: 'slide',
					controlNav: true,
					directionNav: true,
					animationLoop: true,
					slideshow: true,
					slideshowSpeed:2000,
					useCSS: false
				});

			});
		</script>
	</body>
</html>

查询首页类型语句：

复制代码 
<select id="queryshopbytypeguava" resultType="goods">
    SELECT
        *
    FROM
        t_goods g,
        t_dict_data t
    WHERE
        g.goods_type = t.dict_value
      AND t.dict_value = #{type} LIMIT #{size}
</select>

访问试用

遇到的报错：

注：

在 MyBatis 中，@Param 注解用于给 SQL 语句中的参数起一个自定义的名称，以便在 XML 映射文件中引用这些参数。在 Java 中使用 @Param 注解可以帮助提高 SQL 语句的可读性和灵活性。以下是 @Param 注解的基本用法：

  1. 在接口方法中使用 @Param 注解：

    复制代码 
    public interface UserMapper { User selectUserById(@Param("userId") int userId); }

    在这个例子中，@Param 注解用于给参数 userId 起了一个别名 "userId"。

  2. 在 XML 映射文件中引用 @Param 注解定义的参数：

    复制代码 
    <select id="selectUserById" resultType="User"> SELECT * FROM user WHERE id = #{userId} </select>

    在这个例子中，我们可以通过 #{userId} 引用接口方法中使用 @Param 注解定义的参数。

通过使用 @Param 注解，我们可以更清晰地表达出每个参数的含义，避免在 XML 文件中直接引用方法参数名带来的歧义。此外，@Param 注解还可以用于解决传递多个参数时的问题，比如在 SQL 语句中引用多个参数。

需要注意的是，在 MyBatis 的 3.4.1 版本之前，如果你使用了 Java 8 及以上版本，MyBatis 会自动支持参数的注解，不需要显式地使用 @Param 注解。但是，为了代码的清晰性和规范性，建议在接口方法中明确地使用 @Param 注解。

总而言之，@Param 注解可以让你在 MyBatis 中更清晰地定义参数，并在 XML 映射文件中引用这些参数，从而提高代码的可读性和维护性。

在 Spring 框架中，@PathVariable 注解用于从 URL 路径中提取参数值，以便在处理请求的方法中使用。它通常与 @RequestMapping 注解一起使用，用于将路径变量与请求的 URL 匹配。

下面是 @PathVariable 注解的基本用法：

  1. 在控制器方法中使用 @PathVariable 注解：

    @Controller @RequestMapping("/users") public class UserController { @GetMapping("/{id}") public String getUserById(@PathVariable("id") int userId) { // 处理逻辑 return "user"; } }

在这个例子中，@PathVariable 注解将 URL 路径中的 {id} 部分提取为 userId 参数，并将其传递给 getUserById 方法。

  1. 在请求的 URL 中使用路径变量：

GET /users/123
在这个例子中，请求的 URL 包含路径变量 123，它会被 @PathVariable("id") 提取并传递给 getUserById 方法的 userId 参数。

通过使用 @PathVariable 注解，我们可以方便地从 URL 中提取路径变量，并在处理请求的方法中使用。这样可以使代码更具可读性和灵活性，并且可以实现根据不同的路径变量执行不同的逻辑。

需要注意的是，@PathVariable 注解默认是必需的，即请求的 URL 中必须包含对应的路径变量。如果路径变量是可选的，可以使用 @PathVariable(required = false) 或者给参数设置默认值来指定它是可选的。

希望对你有所帮助！如果还有其他问题，请随时提问。

相关推荐
getapi5 小时前
shareId 的产生与传递链路
java
桦说编程5 小时前
爆赞！完全认同！《软件设计的哲学》这本书深得我心
后端
thinktik5 小时前
还在手把手教AI写代码么? 让你的AWS Kiro AI IDE直接读飞书需求文档给你打工吧!
后端·serverless·aws
我没想到原来他们都是一堆坏人6 小时前
（未完待续...）如何编写一个用于构建python web项目镜像的dockerfile文件
java·前端·python
沙二原住民6 小时前
提升数据库性能的秘密武器：深入解析慢查询、连接池与Druid监控
java·数据库·oracle
上官浩仁6 小时前
springboot redisson 缓存入门与实战
spring boot·redis·缓存
小小工匠6 小时前
SpringBoot - Spring 资源加载全解析：ResourceLoader 与 ResourceUtils 的正确打开方式
spring boot·spring·resourceloader·resourcutils
Jerry&Grj6 小时前
SpringBoot埋点功能技术实现方案深度解析：架构设计、性能优化与扩展性实践
java·微服务·性能优化·springboot·架构设计·埋点技术
没有bug.的程序员6 小时前
Redis Stream：轻量级消息队列深度解析
java·数据库·chrome·redis·消息队列
热门推荐
01UV安装并设置国内源022025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享，全网首发高质量！！！032025年数学建模国赛C题超详细解题思路04A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程05不再让Windows更新！&Edge游戏助手卸载及关闭自动更新06KGG转MP3工具|非KGM文件|解密音频07UV 工具安装与国内镜像源配置指南08突破百度网盘的下载限速，两种方法教会你【超详细】09Linux下V2Ray安装配置指南10教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员