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

作者：你好赵伟 | 2024-07-21 07:36:45

踩

springboot电脑商城项目

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

一，实现思路：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 注解的基本用法：

在接口方法中使用 @Param 注解：
```
public interface UserMapper { User selectUserById(@Param("userId") int userId); }
```
在这个例子中，@Param 注解用于给参数 userId 起了一个别名 "userId"。
在 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 注解的基本用法：

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

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

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

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

GET /users/123

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

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

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

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

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】