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) 或者给参数设置默认值来指定它是可选的。

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

相关推荐
一只叫煤球的猫4 小时前
写代码很6，面试秒变菜鸟？不卖课，面试官视角走心探讨
前端·后端·面试
bobz9654 小时前
tcp/ip 中的多路复用
后端
bobz9654 小时前
tls ingress 简单记录
后端
皮皮林5515 小时前
IDEA 源码阅读利器，你居然还不会？
java·intellij idea
你的人类朋友6 小时前
什么是OpenSSL
后端·安全·程序员
bobz9656 小时前
mcp 直接操作浏览器
后端
前端小张同学8 小时前
服务器部署 gitlab 占用空间太大怎么办，优化思路。
后端
databook8 小时前
Manim实现闪光轨迹特效
后端·python·动效
武子康9 小时前
大数据-98 Spark 从 DStream 到 Structured Streaming：Spark 实时计算的演进
大数据·后端·spark
该用户已不存在9 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南0346个Nano-banana 精选提示词，持续更新中04Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程08Spec-Kit 使用指南09解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题10KGG转MP3工具|非KGM文件|解密音频