前后端分离天天生鲜项目实战：

一、 项目介绍：

        天天生鲜是一个基于Spring Boot和Vue 3开发的在线生鲜购物平台，旨在为用户提供新鲜优质的食材和生鲜产品，方便快捷的购物体验。

项目特点

1. 学习新技术：通过项目开发，您将学习如何使用Spring Boot和Vue 3构建现代化的Web应用程序。

2. 实践项目开发：通过实际的项目开发过程，您将掌握项目规划、架构设计、功能实现等方面的经验。

3. 团队协作：参与项目开发将锻炼您的团队协作能力，与他人合作，共同完成项目目标。

技术栈

• 后端：Spring Boot、Spring Security、MyBatisPlus等
• 前端：Vue3、Pinia、Vue Router等
• 数据库：MySQL
• 其他工具：Git、Maven、Postman等

项目目标

        我们希望通过天天生鲜项目，为广大开发者提供一个实践的机会，让您能够在项目中不断学习、成长，掌握最新的技术和开发方法，为今后的职业发展打下坚实的基础。

学习交流

        在项目开发过程中，我们鼓励开发者之间相互交流、分享经验，共同解决问题，促进学习和进步。无论您是初学者还是有经验的开发者，都可以在项目中找到学习和成长的机会。

二、开发环境准备

Spring Boot 项目开发环境准备

1. Java开发环境

确保已安装Java开发环境，推荐使用JDK 8及以上版本。

jdk安装教程

Mysql安装教程

2. IDE集成开发工具

选择一个适合的集成开发环境，比如IntelliJ IDEA、Eclipse等。

Vue 项目开发环境准备

1. Node.js

确保已安装Node.js，推荐使用LTS版本。

2. npm 或 Yarn

Node.js安装完成后会自带npm，你也可以选择安装Yarn。

3. IDE集成开发工具

选择一个适合的IDE，比如Visual Studio Code、WebStorm等。

三、Springboot后端工程搭建

        这里我们搭建一个SpringBoot多模块项目，有两种方式搭建，一种是通过Spring Initializr，这前几年我觉得这种方式是比较简单好用的，因为直接就可以创建出来一个SpringBoot工程，不用再修改其他东西，但是当我现在在写这个教程的时候，我发现Spring Initializr和几年前我用的时候不一样了，Spring Initializr会一直更新的，更新的越来越陌生。

所以我推荐大家使用第二种方式，MavenArchetype，初学会觉得需要配置的东西挺多，用习惯了会感觉确实不错。而且在女同学面前更能装13哦。

打开idea，点击新建项目

创建一个maven工程

创建完成后，删除不需要的文件，因为这是一个父工程，我们只用他管理依赖即可

鼠标放在项目上，右键点击新建，创建一个模块。

创建新模块，父项是选择刚才我们创建的那个项目

点击创建，项目正在创建中

创建完成以后，控制台显示一个绿色的对号，代表创建完成。下面我们开始对项目接口进行调整

删除app类和test文件夹，我们创建的这个common模块是为了放一些通用文件，工具类，配置文件等，用不着测试类，和执行类，所以我们直接把他删除

继续创建模块，这次我们创建一个web模块，用来接收http请求

创建完成后，我们开始对web模块进行修改。我们这是一个springboot项目，我们需要引入springboot依赖，我们修修改一下父工程项目

<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.qx</groupId>
    <artifactId>ttsx-springboot</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>pom</packaging>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.2.RELEASE</version>
    </parent>

    <!--  模块管理  -->
    <modules>
        <module>ttsx-common</module>
        <module>ttsx-web</module>
    </modules>

    <!--  版本管理  -->
    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <!--  依赖管理器  -->
    <dependencyManagement>
        <dependencies>

        </dependencies>
    </dependencyManagement>

</project>

一般修改完pom文件，idea的右上角会出现一个这样的标志，我们需要点一下，他就会把依赖加载进去。

修改完父工程的pom文件后，我们开始修改ttsx-web工程，找到ttsx-web工程的pom文件，这里我们添加一个web依赖，然后修改一下ttsx-web项目结构，因为我们是通过maven创建的，还不是一个springboot工程。

修改后的ttsx-web的pom文件

<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <!--  依赖父类工程  -->
    <parent>
        <groupId>com.qx</groupId>
        <artifactId>ttsx-springboot</artifactId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    <artifactId>ttsx-web</artifactId>
    <packaging>jar</packaging>

    <properties>
        <java.verson>1.8</java.verson>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <!--  依赖  -->
    <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    </dependencies>
</project>

删除app类，我们要创建一个springboot的启动类

package com.qx;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class TtsxApplication {
    
    public static void main(String[] args) {
        SpringApplication.run(TtsxApplication.class, args);
    }

}

启动类创还能完成后，我们点击启动试一下

控制台日志打印这个就是启动成功了，但是我们还没办法验证，我们创建一个控制类，然后通过浏览器请求一下试试。

com.qx文件夹下，我们创建一个controller文件夹，然后创建TestController文件

目前看到一条报错消息，是test文件夹下的报错，我们直接把test文件夹下的文件删除就行，我们以后会引入一个junit的包，然后自己创建一个测试类使用

删除完成后，我们继续编辑controller文件夹下的TestController，我们先通过后台返回给浏览器一个"Hello World"

package com.qx.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestController {


    @GetMapping("/test")
    public String test() {
        return "Hello world";
    }

}

我们修改后的testcontroller就是这样子，然后我们重启项目，在浏览器上访问一下

springboot默认用的是8080端口，那么我们在浏览器上访问一下试试

127.0.0.1:8080/test

通过浏览器访问，后台给我们返回了HelloWorld，这说明我们这一步骤是成功的。

接下来，有的的小伙伴就开始问了，我不想使用8080端口那应该怎么办？

接下来我就带大家引入配置文件，鼠标在src上右键，新建，目录

idea很智能的推断出我们要创建resources文件夹，我们双击这个文件夹就创建出来一个resources文件夹

接下来我们在resources文件夹下创建几个配置文件，

• application.yml                公共配置
• application-dev.yml        开发环境
• application-prod.yml      正式环境
• application-test.yml        测试环境

注意：正确的创建完成后，这个配置文件是带有图标的，一个绿色小树叶的样子

创建完成后，我们在application.yml文件里编写配置文件，其他几个我们暂时不用，

把服务端口配置成9090试一下，配置完成后我们重启服务，然后在重新在浏览器上访问试一下

不出意外的话出意外了，访问结果是无法访问，我们在看一下配置文件。

我竟然把配置写到了test环境的配置文件里，怪不得访问不到，既然这样我们就在application.yml里面引用一下test的配置文件吧。

修改application.yml里的配置文件为这个，然后我们在重启一下服务，通过浏览器访问一下试试

通过控制台打印的日志我们可以看到配置文件生效了

然后我们通过浏览器访问一下

127.0.0.1:9090/test

后台返回Hello world说明配置文件已经生效

封装返回对象

我们在common模块下，创建一个utils包，用来存放工具类

utils文件夹里新建JsonResult类

public class JsonResult {

    private Integer code;
    private String msg;
    private Object data;

}

接下来我们引入一个插件，lombok，这款插件可以帮我们省去写get，set方法，使代码能美观简洁。

在父工程的pom文件中引入

    <!--  版本管理  -->
    <properties>
        ...
        <lombokv>1.18.10</lombokv>
    </properties>


    <!--  依赖管理器  -->
    <dependencyManagement>
        <dependencies>
    <!--  lombok  -->
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>${lombokv}</version>
            </dependency>

        </dependencies>
    </dependencyManagement>

在父工程引入完我们还不能直接使用，因为我们是把依赖放到了<dependencyManagement>依赖管理器中，我们的子模块common需要用的时候还需要再引入一下

common模块引入lombok，在pom文件中加上一下内容

    <dependencies>
        ...
   <!--  引入lombok依赖，这里不需要填写版本。会自动从父项目中继承版本号  -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>

引入完lombok以后，我们改造一下JsonResult类

@Data
public class JsonResult {
    private Integer code;
    private String msg;
    private Object data;
}

这样我们自己封装的返回类就完成了。现在返回类中还是比较空的，我会带领大家一步一步的往里面添加方法，让大家知道为什么要写这么一个方法。

2024-04-26

下一章，配置全局异常处理器

下一章，配置数据校验

文章还没有结束，博主要去工作了，大家先关注一下，期待后面继续更新！！！

前面编辑的文档有错误或者不合适的地方，大家评论区指出，本文档长期持续更新至项目结束，手把手教你项目实战，从0开始一步一步的往项目里添加代码，直至项目成型。