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

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

相关推荐
Amarantine、沐风倩✨10 分钟前
设计一个监控摄像头物联网IOT（webRTC、音视频、文件存储）
java·物联网·音视频·webrtc·html5·视频编解码·七牛云存储
路在脚下@1 小时前
spring boot的配置文件属性注入到类的静态属性
java·spring boot·sql
啦啦右一1 小时前
Spring Boot | （一）Spring开发环境构建
spring boot·后端·spring
森屿Serien1 小时前
Spring Boot常用注解
java·spring boot·后端
苹果醋32 小时前
React源码02 - 基础知识 React API 一览
java·运维·spring boot·mysql·nginx
Hello.Reader3 小时前
深入解析 Apache APISIX
java·apache
盛派网络小助手3 小时前
微信 SDK 更新 Sample，NCF 文档和模板更新，更多更新日志，欢迎解锁
开发语言·人工智能·后端·架构·c#
菠萝蚊鸭3 小时前
Dhatim FastExcel 读写 Excel 文件
java·excel·fastexcel
旭东怪3 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
007php0073 小时前
Go语言zero项目部署后启动失败问题分析与解决
java·服务器·网络·python·golang·php·ai编程
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07构建高效的广告投放系统：应用架构的设计与实现08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10【一文读懂】NTN（非地面网络）技术介绍