【商城实战(4)】项目初始化：前后端框架搭建与目录结构规划

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102 章内容层层递进。无论是想深入钻研技术细节，还是探寻商城运营之道，本专栏都能提供从 0 到 1 的系统讲解，助力你打造独具竞争力的电商平台，开启电商实战之旅。

一、引言

项目初始化与目录结构规划作为商城开发的起始环节，就如同建造高楼时打下的地基，其重要性不言而喻。合理的初始化工作能够确保项目在后续开发过程中顺利推进，减少因环境配置、依赖管理等问题带来的阻碍。而清晰、有条理的目录结构规划则有助于提高代码的可读性、可维护性，方便团队成员协作开发，提升开发效率。接下来，让我们深入探讨如何进行商城项目的初始化与目录结构规划。

二、商城前端搭建

2.1 买家 PC 端、商家 PC 端以及管理端

在商城前端开发中，买家 PC 端需要为用户提供简洁直观的商品展示、便捷的购物流程以及个性化的用户体验；商家 PC 端要满足商家对商品管理、订单处理、店铺运营等功能需求；管理端则侧重于对整个商城系统的管理与监控，包括用户管理、数据统计分析等。

Element Plus 作为一款基于 Vue 3 开发的桌面端组件库，具有丰富的组件库，涵盖了按钮、表格、表单、导航栏等各类常见的界面元素，能够满足商城前端不同功能模块的开发需求，大大提高开发效率。同时，它遵循一致性设计原则，拥有简洁美观的 UI 风格，有助于打造统一、专业的商城界面，提升用户体验。此外，Element Plus 还具备良好的可定制性，方便开发者根据项目需求进行个性化定制。

2.2 技术选型解析

webpack：作为前端项目工程化的具体解决方案，webpack 提供了友好的前端模块化开发支持。它能够将各种资源（如 JavaScript、CSS、图片等）视为模块，并处理它们之间的依赖关系，使得模块的管理和复用更加便捷。同时，webpack 具备强大的打包优化功能，如代码分割、懒加载、缓存等，可以减小打包文件的体积，提高页面加载速度，优化用户体验。其丰富的插件系统还能满足各种不同的项目需求，例如通过插件实现代码压缩混淆、处理浏览器 JavaScript 的兼容性等。
ES6：即 ECMAScript 2015，为 JavaScript 带来了众多新特性。箭头操作符简化了函数的书写，使代码更加简洁易读；类的支持让对象的创建和继承更加直观，父类方法的调用、实例化、静态方法和构造函数等概念也更加形象化，有助于编写大型、复杂的应用程序；字符串模板允许使用反引号创建字符串，里面可以包含由美元符号加花括号包裹的变量，方便进行字符串拼接和插值操作；let 和 const 关键字具有块级作用域，相比于 ES5 中的 var 关键字，能更好地控制变量的作用范围，避免变量提升和意外的全局变量污染。
Vue.js：这是一个用于构建用户界面的渐进式 JavaScript 框架，其核心库只关注视图层，易于与其它库或已有项目整合。Vue.js 采用组件化的开发模式，将页面拆分成一个个独立的组件，每个组件都有自己的逻辑和视图，使得代码的可维护性和可复用性大大提高。同时，Vue.js 具备响应式数据绑定和指令系统，能够自动追踪数据的变化并更新 DOM，开发者只需关注业务逻辑，无需手动操作 DOM，提高了开发效率。
Dplayer：作为一款优秀的视频播放器，Dplayer 具有简洁的界面设计和丰富的功能。它支持多种视频格式，如 MP4、FLV、HLS 等，能够满足商城中可能出现的各种视频播放需求。同时，Dplayer 还提供了弹幕、播放列表、视频截图等功能，为用户带来更好的视频观看体验，适用于商城中商品视频展示等场景。
Vue Router：Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 深度集成，能够轻松实现单页应用（SPA）的路由功能。通过 Vue Router，可以定义不同的路由路径和对应的组件，实现页面的按需加载和切换。它还支持嵌套路由、动态路由、路由守卫等功能，方便进行页面导航控制和权限验证，确保商城前端页面的正确展示和用户操作的合法性。
Vuex：Vuex 是 Vue.js 的状态管理模式，用于集中管理应用的状态。在商城开发中，涉及到大量的共享状态，如用户登录状态、购物车信息、商品列表等，使用 Vuex 可以将这些状态集中管理，使得状态的更新和获取更加方便、可预测。Vuex 遵循单向数据流原则，通过 mutation 和 action 来修改和处理状态，提高了代码的可维护性和可调试性，方便团队协作开发。
Element Plus：前面已介绍其在组件库方面的优势，这里补充其在开发便捷性上的特点。Element Plus 提供了详细的文档和教程，即使是初次接触的开发者也能快速上手。同时，它与 Vue 3 的深度集成，使得在 Vue 项目中使用 Element Plus 组件变得非常简单，只需按照文档进行引入和配置即可，大大缩短了开发周期。
axios：axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。在商城前端开发中，axios 主要用于网络请求，它具有简洁易用的 API，支持 Promise 链式调用，方便进行异步操作。axios 还具备自动转换 JSON 数据、请求和响应拦截器等功能，可以在请求发送前和响应接收后进行一些自定义处理，如添加请求头、处理错误信息等，确保网络请求的稳定性和安全性。

2.3 使用 Element Plus 搭建前端框架步骤

环境准备：

首先需要安装 Node.js，Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许在服务器端运行 JavaScript 代码。可以从 Node.js 官方网站（https://nodejs.org/）下载适合自己操作系统的安装包进行安装。安装完成后，打开命令行工具，输入node -v和npm -v命令，查看 Node.js 和 npm（Node Package Manager，Node.js 的包管理工具）的版本号，确认是否安装成功。
npm 会随着 Node.js 一起安装，它用于管理项目的依赖包。如果觉得 npm 下载速度慢，可以考虑安装 cnpm（淘宝 npm 镜像），在命令行中输入npm install -g cnpm --registry=https://registry.npm.taobao.org进行安装。

项目创建：

使用 vue - cli 创建 Vue 项目，vue - cli 是 Vue.js 官方提供的脚手架工具，用于快速搭建 Vue 项目。首先确保全局安装了 vue - cli，在命令行中输入npm install -g @vue/cli进行安装。
安装完成后，在命令行中执行vue create element - plus - project，按照提示选择项目配置，如选择 Vue 3 版本、是否使用 TypeScript 等，这里我们选择 JavaScript 版本。
进入项目目录cd element - plus - project，安装 Element Plus，执行npm install element-plus。

全局配置：

在项目的src/main.js文件中引入 Element Plus 及相关样式。首先导入 Element Plus 和其样式文件：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element - plus'
import 'element - plus/lib/theme - chalk/index.css'

然后使用createApp创建 Vue 应用实例，并使用 Element Plus：

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

如果需要使用 Element Plus 的图标，还需要额外引入图标库。在main.js中继续添加：

import * as ElementPlusIconsVue from '@element - plus/icons - vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

组件使用示例：

导航栏组件：在src/App.vue文件中添加导航栏组件示例：

<template>
  <div id="app">
    <el - container>
      <el - header>
        <el - row>
          <el - col :span="4">
            <img src="./logo.png" alt="商城logo" style="height: 40px;">
          </el - col>
          <el - col :span="16">
            <el - menu :default - active="activeIndex" mode="horizontal">
              <el - menu - item index="1">首页</el - menu - item>
              <el - menu - item index="2">商品列表</el - menu - item>
              <el - menu - item index="3">购物车</el - menu - item>
              <el - menu - item index="4">个人中心</el - menu - item>
            </el - menu>
          </el - col>
          <el - col :span="4">
            <el - button type="primary">登录</el - button>
            <el - button type="success">注册</el - button>
          </el - col>
        </el - row>
      </el - header>
      <el - main>
        <!-- 主要内容区域 -->
      </el - main>
    </el - container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  }
}
</script>

<style scoped>
el - header {
  background - color: #333;
  color: #fff;
  display: flex;
  justify - content: space - between;
  align - items: center;
}

el - menu {
  line - height: 40px;
}
</style>

表格组件：在src/views/GoodsList.vue文件中添加表格组件示例，用于展示商品列表：

<template>
  <div>
    <el - table :data="goodsList" border stripe>
      <el - table - column prop="name" label="商品名称"></el - table - column>
      <el - table - column prop="price" label="价格"></el - table - column>
      <el - table - column prop="stock" label="库存"></el - table - column>
      <el - table - column label="操作">
        <template #default="scope">
          <el - button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el - button>
          <el - button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el - button>
        </template>
      </el - table - column>
    </el - table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [
        { name: '商品1', price: 100, stock: 10 },
        { name: '商品2', price: 200, stock: 5 },
        { name: '商品3', price: 150, stock: 8 }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      console.log('编辑商品', row);
    },
    handleDelete(row) {
      console.log('删除商品', row);
    }
  }
}
</script>

通过以上步骤，就可以初步搭建起基于 Element Plus 的商城前端框架，并使用其组件进行页面开发。

三、商城移动端搭建

3.1 使用 Uniapp 搭建前端框架

在商城移动端开发中，Uniapp 凭借其独特的优势成为理想之选。Uniapp 基于 Vue.js 框架，实现了一套代码多端运行，这意味着开发者能够同时开发 iOS、Android、H5 以及各类小程序等多个平台的应用。例如，当我们开发商城移动端时，利用 Uniapp 只需编写一次核心代码，就能将其编译成不同平台版本的应用，大大节省了开发时间和成本。其跨平台特性还能确保在不同平台上拥有一致的用户体验，无论用户是通过手机 APP 还是小程序访问商城，都能享受到相同的功能和界面风格，提升了用户满意度和品牌形象。此外，Uniapp 拥有丰富的组件库和插件生态系统，开发者可以快速调用这些组件和插件来实现各种功能，如商品展示、购物车、支付等模块的开发，进一步提高了开发效率。

3.2 技术选型解析

uView ui：这是一个全面兼容 nvue 的 uni-app 生态框架，为移动端开发提供了丰富的组件和便捷的工具。它拥有超过 60 种精心设计的组件，涵盖了基础布局、表单、导航、提示等各类常用组件，开发者可以根据需求快速集成所需组件，减少了从 0 开始编写组件的工作量，从而显著提高开发效率。uView ui 还提供了统一的设计规范，使得项目界面风格一致，降低了维护成本。例如，在商城移动端开发中，使用 uView ui 的商品列表组件，可以轻松展示商品的图片、名称、价格等信息，并且组件在不同平台上都能保持良好的兼容性和显示效果。
uni - app：作为基于 Vue.js 的跨平台开发框架，uni - app 允许开发者使用 Vue.js 的语法和生态工具进行开发，对于熟悉 Vue.js 的开发者来说，学习成本极低。它的多端兼容能力是其核心优势，支持将应用编译到 iOS、Android、小程序、H5 以及快应用等多个平台，实现了一次开发，多端部署。同时，uni - app 提供了丰富的 API，方便开发者进行网络请求、文件操作、设备信息获取等操作，满足商城移动端复杂的业务需求。
scss：SCSS（Syntactically Awesome Style Sheets）是 CSS 预处理器的一种，在商城移动端开发中，它为样式管理和布局设计带来了极大的便利。SCSS 支持变量定义，例如可以定义商城主题颜色、字体大小等变量，在不同的样式文件中统一引用，方便后期修改和维护。它还支持嵌套规则，允许在一个选择器中嵌套另一个选择器，使样式代码结构更加清晰，减少重复代码。例如：

.container {
  width: 100%;
  height: auto;
  background - color: #f5f5f5;
  .title {
    font - size: 20px;
    color: #333;
  }
  .content {
    font - size: 16px;
    color: #666;
  }
}

此外，SCSS 还具备混合（Mixin）、继承（Extend）、函数等功能，能够提高样式代码的复用性和开发效率。

amap：即高德地图，在商城移动端开发中，当涉及到位置相关的功能时，高德地图提供了强大的支持。例如，在商城中实现附近门店查询功能，利用高德地图的定位和地图展示功能，能够获取用户位置，并在地图上标记出附近的门店位置，方便用户查找。高德地图还提供了路径规划、地图搜索等功能，这些功能可以为商城的配送服务、用户导航到门店等场景提供支持，提升用户体验。同时，高德地图的 SDK 具有良好的性能和稳定性，能够在移动端高效运行。

3.3 利用 uniapp cli 初始化前端项目并设置基础配置

安装 uniapp cli：

首先确保已经安装了 Node.js 环境，Node.js 是运行 uni - app 项目的基础。可以在命令行中输入node -v检查 Node.js 是否安装以及查看其版本号。如果未安装，前往 Node.js 官方网站（https://nodejs.org/）下载并安装。
使用 npm（Node Package Manager）安装 uniapp cli，在命令行中执行npm install -g @vue/cli - uni。这里的-g参数表示全局安装，安装过程中可能会下载一些依赖包，根据网络情况，安装时间可能会有所不同。安装完成后，可以通过vue - uni --version命令查看 uniapp cli 的版本号，确认是否安装成功。在安装过程中，如果遇到权限问题（如在 Linux 或 macOS 系统中），可能需要使用sudo命令获取管理员权限进行安装，但在使用sudo时要谨慎操作，确保安装来源的可靠性。

初始化项目：

打开命令行工具，切换到合适的目录（例如项目存放的文件夹），执行vue - uni create uni - mall - project，这里uni - mall - project是项目名称，可以根据实际情况进行修改。
执行命令后，会出现一系列选项让用户选择。例如，可以选择项目模板，通常有默认模板、自定义模板等。对于商城项目，我们可以选择默认模板，它包含了基本的项目结构和配置，方便后续开发。还可以选择是否使用 TypeScript，这里我们选择 JavaScript 版本，因为 JavaScript 在前端开发中应用广泛，且对于大多数开发者来说更加熟悉。选择完成后，uniapp cli 会根据选择的模板和配置创建项目，并自动安装项目所需的依赖包。

配置文件说明：

manifest.json：这是 uni - app 项目的配置文件，用于配置应用的名称、图标、版本号、权限、平台相关设置等重要信息。例如，在app-plus节点下可以配置应用在 Android 和 iOS 平台上的一些特有设置，如启动图、状态栏样式等。在mp - weixin节点下可以配置微信小程序相关的 appid、页面路径等信息。通过修改这个文件，可以适配不同平台的需求，确保应用在各个平台上都能正常运行并展示良好的效果。
pages.json：该文件用于配置页面路径、页面样式、导航栏等信息。在商城项目中，我们可以在pages数组中定义各个页面的路径和页面名称，如首页、商品列表页、商品详情页、购物车页、个人中心页等。例如：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "商城首页"
      }
    },
    {
      "path": "pages/goodsList/goodsList",
      "style": {
        "navigationBarTitleText": "商品列表"
      }
    },
    // 其他页面配置
  ]
}

同时，还可以在globalStyle节点下设置全局的页面样式，如背景颜色、字体大小等，这些设置会应用到所有页面。通过合理配置pages.json，可以实现页面的有序管理和良好的用户界面展示。

uni.scss：这是 uni - app 项目的全局样式文件，主要用于定义全局的 SCSS 变量、混合宏、函数等。在商城项目中，可以在这个文件中定义商城的主题颜色、字体样式、常用的边距和间距等变量，例如：

// 定义主题颜色
$primaryColor: #FF5722;
// 定义字体大小
$fontSizeBase: 14px;
// 定义常用边距
$marginBase: 10px;

然后在各个页面的 SCSS 文件中可以直接引用这些变量，实现样式的统一管理和快速修改。如果需要添加一些全局的混合宏或函数，也可以在这个文件中定义，方便在项目中复用。

四、后端搭建

4.1 使用 Spring Boot 搭建框架

在后端开发中，Spring Boot 凭借其显著的优势成为众多开发者的首选框架。Spring Boot 的快速开发特性极大地提高了开发效率，它提供了大量的开箱即用的功能模块，开发者只需添加相关的 Starter 依赖，就能快速集成如 Web 开发、数据库访问、安全性等功能，无需花费大量时间在繁琐的配置上。例如，在开发商城的用户登录功能时，通过添加 Spring Security Starter 依赖，就能快速实现用户认证和授权功能，而不需要从头编写复杂的安全认证代码。

其自动配置功能是一大亮点，它能够根据项目的依赖自动配置应用程序。当项目中引入了 MySQL 依赖时，Spring Boot 会自动配置数据源、数据库连接池等相关配置，大大减少了手动配置的工作量，降低了出错的概率。同时，Spring Boot 还支持多种部署方式，可方便地部署到云平台、服务器等环境中，并且能够轻松与其他框架和技术进行集成，如 Spring Cloud 用于构建分布式系统，MyBatis - Plus 用于数据库操作等，为商城后端的开发提供了强大的技术支持。

4.2 技术选型解析

Spring Boot：作为基础框架，它提供了快速开发和自动配置的能力，通过约定大于配置的原则，让开发者专注于业务逻辑的实现。例如在商城项目中，使用 Spring Boot 可以快速搭建起项目的基本架构，配置好各种基础组件，如日志、数据库连接等，减少了开发的前期准备工作。
Spring MVC：作为 MVC 框架，负责处理 Web 请求和响应。在商城中，它接收用户的各种请求，如商品查询、订单提交等，将请求映射到相应的控制器方法进行处理，并返回响应结果给用户。例如，当用户在商城中点击 “搜索商品” 按钮时，Spring MVC 会将该请求转发到对应的商品搜索控制器方法，该方法调用业务逻辑层获取商品数据，然后将数据返回给用户展示。
Mybatis - Plus：持久框架，在商城中用于与数据库进行交互。它在 MyBatis 的基础上进行了增强，提供了通用的 CRUD 方法、代码生成器、分页插件等功能。例如，在商城的商品管理模块中，可以使用 Mybatis - Plus 的通用 CRUD 方法快速实现商品的添加、删除、修改和查询操作，通过代码生成器自动生成实体类、Mapper 接口和 XML 映射文件，提高开发效率。
Maven：作为程序构建工具，用于管理项目的依赖和构建过程。在商城项目中，Maven 可以方便地引入各种依赖库，如 Spring Boot 的相关依赖、数据库驱动等，并且能够根据配置文件（pom.xml）自动下载依赖包，同时还可以进行项目的编译、测试、打包等操作，确保项目的构建过程自动化和规范化。
MySQL：作为关系型数据库，用于存储商城的各种数据，如用户信息、商品信息、订单信息等。其具备强大的数据存储和管理能力，支持事务处理，能够保证数据的完整性和一致性。例如，在处理商城的订单时，通过事务确保订单信息和库存信息的同步更新，防止出现数据不一致的情况。
RocketMQ：作为消息中间件 AMQP，在商城中用于实现异步通信和解耦。当用户下单后，订单信息可以通过 RocketMQ 发送到消息队列中，由其他服务异步处理订单的后续流程，如库存扣减、订单状态更新等，这样可以提高系统的响应速度和吞吐量，同时也降低了各个服务之间的耦合度。
Redis：作为缓存，主要用于存储频繁访问的数据，如热门商品信息、用户登录状态等。由于 Redis 具有快速读写的特点，能够将这些数据存储在内存中，大大提高数据的读取速度，减少数据库的压力。例如，在商城首页展示热门商品时，可以先从 Redis 中获取商品数据，如果没有再从数据库中查询并缓存到 Redis 中。
MongoDB：同样作为缓存，适用于存储一些非结构化或半结构化的数据，如商品的描述信息、用户的评论等。MongoDB 具有高扩展性和灵活的数据模型，能够很好地适应这些数据的存储和查询需求。例如，对于商品的详细描述信息，可能包含图片、文字等多种格式的数据，使用 MongoDB 可以方便地进行存储和管理。
Elasticsearch：作为搜索引擎，用于实现商城的商品搜索功能。它具备高效的全文搜索能力，能够对商品的名称、描述、属性等进行快速搜索，并根据相关性进行排序。例如，当用户在商城中输入关键词搜索商品时，Elasticsearch 可以快速返回相关的商品列表，提升用户的购物体验。
Spring Security：作为安全框架，用于保障商城的安全。它提供了用户认证和授权功能，确保只有合法用户才能访问商城的资源。例如，在用户登录商城时，Spring Security 会对用户输入的用户名和密码进行验证，验证通过后根据用户的角色和权限，授予相应的访问权限，防止非法访问和数据泄露。
Druid：作为数据库连接池，负责管理数据库连接。它具有高效的连接管理和性能监控功能，能够提高数据库访问的效率和稳定性。在商城高并发的场景下，Druid 可以快速为请求分配数据库连接，并且监控连接的使用情况，及时释放空闲连接，避免资源浪费。
sharding：用于数据库分库分表，随着商城业务的发展，数据量不断增大，单库单表可能无法满足性能需求。通过 sharding 技术，可以将数据按照一定的规则分布到多个数据库和表中，提高数据的存储和查询性能。例如，可以按照用户 ID 或订单时间等规则进行分库分表，将不同用户或不同时间段的数据存储到不同的库表中。
xxl - job：作为定时任务框架，在商城中用于执行一些定时任务，如定时更新商品库存、统计订单数据等。它提供了简单易用的任务调度和管理功能，开发者可以方便地配置任务的执行时间、执行频率等参数，确保任务按时执行。
Nginx：作为负载均衡器，用于将用户请求分发到多个后端服务器上，实现负载均衡。在商城高并发的情况下，Nginx 可以根据服务器的负载情况，将请求合理地分配到不同的服务器上，提高系统的整体性能和可用性，防止单个服务器因负载过高而崩溃。
阿里云 OSS：用于存储商城的静态资源，如商品图片、CSS 文件、JavaScript 文件等。阿里云 OSS 具有高可靠性、高扩展性和低成本的特点，能够保证静态资源的快速访问和稳定存储，并且提供了丰富的 API，方便与商城系统进行集成。
阿里云短信：在商城中用于发送短信验证码、订单通知等短信服务。阿里云短信具有高效、稳定、安全的特点，能够确保短信及时准确地发送到用户手机上，为用户提供良好的服务体验，同时也保障了商城业务的正常开展，如用户注册时发送短信验证码进行身份验证。
JWT：作为认证方式，用于用户身份认证。用户登录成功后，服务器会生成一个包含用户信息的 JWT 令牌，用户在后续请求中携带该令牌，服务器通过验证令牌的有效性来确认用户身份。这种方式具有无状态、可扩展性强的特点，适用于分布式系统中，减少了服务器对用户状态的存储和管理。
Log4j：用于日志处理，在商城开发和运行过程中，记录系统的运行日志、错误日志等。通过 Log4j 可以方便地配置日志的输出级别、输出格式和输出位置等，帮助开发者进行问题排查和系统监控，例如在商城出现异常时，可以通过查看日志快速定位问题所在。
RESTful：作为接口规范，定义了商城前后端交互的接口风格。它使用 HTTP 协议的标准方法（GET、POST、PUT、DELETE 等）来操作资源，具有简洁、易理解、可扩展性强的特点，方便前后端开发人员进行协作，提高开发效率。例如，获取商品列表可以使用 GET 请求，添加商品可以使用 POST 请求等。

4.3 手把手教你使用 Spring Initializr 快速创建 Spring Boot 项目

打开 Spring Initializr：
通过 Web 浏览器访问https://start.spring.io/ ，即可打开 Spring Initializr 工具。这是一个基于 Web 的在线工具，无需额外安装，方便快捷。在打开页面时，可能会因为网络状况而稍有延迟，确保网络连接稳定即可顺利访问。该页面简洁明了，提供了各种配置选项，用于生成 Spring Boot 项目的基本结构和配置文件。
项目配置：

选择项目类型：在 “Project” 选项中，选择 “Maven Project”，Maven 是一个广泛使用的项目管理工具，它通过 pom.xml 文件来管理项目的依赖和构建过程，具有强大的依赖管理和项目构建功能，方便我们在商城项目中引入各种所需的依赖库。
选择语言：“Language” 选择 “Java”，Java 语言具有跨平台、面向对象、安全性高等特点，是后端开发中非常流行的编程语言，拥有丰富的类库和强大的生态系统，适合开发大型企业级应用，如我们的商城项目。
选择 Spring Boot 版本：根据项目需求和稳定性考虑，选择合适的 Spring Boot 版本，如当前较新且稳定的版本 2.7.9。较新的版本通常会修复一些已知的漏洞和问题，同时可能会带来新的特性和性能优化，但也要注意与其他依赖库的兼容性。
填写项目元数据：在 “Group” 中填写项目的组织标识符，比如 “com.example.mall”，它通常与公司域名相关，用于唯一标识项目所属的组织或团队；“Artifact” 填写项目的标识符，如 “mall - backend”，这是项目的名称，也是生成的项目根目录的名称；“Name” 可以填写与 Artifact 相同的名称，也可以根据需要自定义，它主要用于在项目构建和展示中标识项目；“Description” 填写项目的描述信息，如 “商城后端项目”，方便团队成员了解项目的功能和用途；“Package name” 默认会根据 Group 和 Artifact 生成，一般无需修改，它定义了项目的基础包结构，用于组织项目的 Java 类文件。
添加依赖：在 “Dependencies” 中，添加 “Spring Web” 依赖，用于构建 Web 应用，它包含了 Spring MVC 等组件，能够处理 HTTP 请求和响应，是商城后端与前端进行交互的关键依赖；添加 “Spring Data JPA” 依赖，用于数据库访问，它提供了一种基于 Java Persistence API（JPA）的方式来操作数据库，简化了数据库操作的代码编写；添加 “MySQL Driver” 依赖，用于连接 MySQL 数据库，这是与 MySQL 数据库进行通信的驱动程序；添加 “Redis” 依赖，用于集成 Redis 缓存，实现数据的快速读写和缓存管理；添加 “Spring Security” 依赖，用于保障商城的安全，实现用户认证和授权功能。可以在搜索框中输入依赖名称进行快速查找和添加，也可以在完整依赖列表中进行选择。

下载与导入项目：

完成上述配置后，点击 “Generate” 按钮，Spring Initializr 会根据配置生成一个 ZIP 文件，文件中包含了 Spring Boot 项目的基本结构和配置文件。下载完成后，解压该 ZIP 文件。
以 IntelliJ IDEA 为例导入项目：打开 IntelliJ IDEA，选择 “File” -> “New” -> “Project from Existing Sources”，在弹出的文件选择框中，找到解压后的项目目录，点击 “OK”。然后 IntelliJ IDEA 会自动识别项目是 Maven 项目，并加载项目的相关配置和依赖。在加载过程中，可能会因为下载依赖包而花费一些时间，根据网络状况不同，时间会有所差异，耐心等待即可。加载完成后，项目就成功导入到 IntelliJ IDEA 中。

创建简单 REST 端点测试：
在项目的src/main/java/com/example/mall目录下（根据之前配置的 Package name 确定具体目录），创建一个controller包，在该包下创建HelloController.java文件。代码如下：

package com.example.mall.controller;

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

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot Mall!";
    }
}

在这个代码中，@RestController注解表示这是一个 RESTful 风格的控制器，@GetMapping(“/hello”)注解表示当接收到 HTTP GET 请求到 “/hello” 路径时，会调用hello方法。hello方法返回一个字符串 “Hello, Spring Boot Mall!”。
运行项目，在 IntelliJ IDEA 中，找到项目的主启动类（通常是与com.example.mall包同名且包含main方法的类，如MallBackendApplication），右键点击选择 “Run ‘MallBackendApplication’”，启动 Spring Boot 项目。启动过程中，控制台会输出项目的启动信息，包括加载的配置、启动的服务等。启动成功后，打开浏览器，访问 “http://localhost:8080/hello”（默认端口是 8080，如果在配置中修改了端口，则访问修改后的端口），浏览器会显示 “Hello, Spring Boot Mall!”，这表明我们创建的简单 REST 端点测试成功，Spring Boot 项目能够正常接收和处理 HTTP 请求。

五、前后端目录结构规划

5.1 前端目录结构

买家 PC 端、商家 PC 端、管理端：

src 目录：项目的源代码目录，是前端开发的核心目录。
- components：存放可复用的 Vue 组件，这些组件具有较小的粒度，专注于实现特定的功能或界面元素。例如，Button.vue组件用于定义各种样式的按钮，在多个页面中都可复用；Dialog.vue组件实现弹出框功能，方便在不同业务场景下展示提示信息或操作确认框。
- views：主要存放页面级别的 Vue 组件，每个组件代表一个特定的页面，与路由相对应。比如Home.vue代表商城的首页，包含商品推荐、热门分类展示等功能模块；GoodsList.vue是商品列表页，用于展示各类商品的列表信息，并提供筛选、排序等操作。
- router：用于配置路由相关的文件，主要是index.js。在这个文件中，定义了各个页面的路由路径和对应的组件，实现页面的跳转和导航功能。例如：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import GoodsList from '@/views/GoodsList.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/goodsList',
      name: 'goodsList',
      component: GoodsList
    }
    // 其他路由配置
  ]
});

store：用于存放 Vuex 相关的文件，管理应用的状态。index.js是 Vuex 的入口文件，在这里定义了状态（state）、 mutations（用于修改状态的方法）、 actions（处理异步操作或复杂业务逻辑的方法）和 getters（用于获取状态的计算属性）。例如，在商城中，用户登录状态可以存放在 state 中，通过 mutation 来修改登录状态，action 来处理登录的异步请求。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userInfo: null,
    cartList: []
  },
  mutations: {
    SET_USER_INFO(state, user) {
      state.userInfo = user;
    },
    ADD_TO_CART(state, goods) {
      state.cartList.push(goods);
    }
  },
  actions: {
    async login({ commit }, user) {
      // 模拟异步登录请求
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(user)
      });
      const data = await response.json();
      if (data.success) {
        commit('SET_USER_INFO', data.user);
      }
    }
  },
  getters: {
    getCartTotalPrice(state) {
      return state.cartList.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  }
});

assets：存放静态资源文件，如图片、字体、CSS 文件等。例如，商城的 logo 图片logo.png可以放在此目录下，样式文件global.css用于定义全局的样式，如字体、颜色、布局等。
main.js：Vue 应用的入口文件，在这个文件中，创建 Vue 实例，引入并使用 Element Plus、Vue Router、Vuex 等插件，挂载应用到 DOM 元素上。例如：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import router from './router';
import store from './store';

const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.use(store);
app.mount('#app');

App.vue：根组件，是整个应用的顶层组件，包含了应用的整体布局和结构，通常会包含<router - view>组件，用于展示当前路由对应的页面组件。例如：

<template>
  <div id="app">
    <el-container>
      <el-header>
        <!-- 头部导航栏 -->
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 侧边栏 -->
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style scoped>
/* 全局样式 */
</style>

商城移动端（基于 Uniapp）：

src 目录：
- components：与 PC 端类似，存放可复用的组件，但这些组件更侧重于移动端的交互和展示。例如，TabBar.vue组件用于实现底部导航栏，方便用户在不同功能页面之间切换；Swiper.vue组件实现轮播图效果，常用于展示商城的广告和推荐商品。
- pages：存放业务页面文件，每个页面是一个独立的 Vue 组件。如Home.vue是移动端商城的首页，展示适合移动端浏览的商品推荐、快捷入口等；GoodsDetail.vue是商品详情页，详细展示商品的图片、描述、规格、评论等信息，并且提供加入购物车、收藏等操作按钮。
- static：存放应用引用的本地静态资源，如图片、视频等。这些资源在打包时会被直接复制到输出目录，在移动端应用中，通常会存放商品图片、用户头像等静态文件，以减少网络请求，提高应用的加载速度。
- main.js：Vue 初始化入口文件，创建 Vue 实例，引入相关插件和配置。例如：

import Vue from 'vue';
import App from './App.vue';
import uView from '@/uni_modules/uview-ui';

Vue.use(uView);
Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
  ...App
});
app.$mount();

App.vue：应用配置文件，用于配置 App 全局样式以及监听应用生命周期。例如，可以在App.vue中设置全局的背景颜色、字体样式，监听应用的启动、暂停、恢复等生命周期事件，进行一些初始化操作或数据更新。

<template>
  <view :style="{ backgroundColor: '#f5f5f5' }">
    <router-view></router-view>
  </view>
</template>

<script>
export default {
  onLaunch: function() {
    // 应用启动时执行的代码，如获取用户信息、初始化缓存等
  },
  onShow: function() {
    // 应用显示时执行的代码，如更新页面数据、检查网络状态等
  }
};
</script>

<style lang="scss">
/* 全局样式 */
</style>

manifest.json：配置应用名称、appid、logo、版本等打包信息，同时还可以配置应用在不同平台（如 iOS、Android、小程序）上的特有设置，如权限申请、启动图设置等。例如：

{
  "name": "商城移动端",
  "appid": "1234567890",
  "icons": {
    "android": "static/icons/android.png",
    "ios": "static/icons/ios.png"
  },
  "versionName": "1.0.0",
  "versionCode": 1,
  "app-plus": {
    "permissions": ["CAMERA", "LOCATION"],
    "splashscreen": {
      "alwaysShowBeforeRender": true,
      "autoclose": true,
      "delay": 3000
    }
  },
  "mp-weixin": {
    "appid": "wx1234567890abcdef",
    "setting": {
      "urlCheck": false
    }
  }
}

pages.json：配置页面路由、导航条、选项卡等页面类信息。在这个文件中，定义了各个页面的路径、页面标题、导航栏样式等。例如：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "商城首页",
        "navigationBarBackgroundColor": "#FF5722",
        "navigationBarTextStyle": "white"
      }
    },
    {
      "path": "pages/goodsList/goodsList",
      "style": {
        "navigationBarTitleText": "商品列表",
        "enablePullDownRefresh": true
      }
    }
    // 其他页面配置
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "商城",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#FF5722",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/icons/home.png",
        "selectedIconPath": "static/icons/home - selected.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/icons/cart.png",
        "selectedIconPath": "static/icons/cart - selected.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/icons/user.png",
        "selectedIconPath": "static/icons/user - selected.png"
      }
    ]
  }
}

5.2 后端目录结构

src/main/java：存放 Java 源代码的目录，是后端开发的核心目录。
- com.example.mall（根据实际项目包名而定）：项目的基础包，所有的 Java 类文件都在这个包及其子包下。
- - controller：该包下存放控制器类，用于处理 HTTP 请求。每个控制器类通常对应一个业务模块，通过注解（如@RestController、@RequestMapping等）来映射请求路径和处理方法。例如，UserController类负责处理与用户相关的请求，如用户登录、注册、信息查询等：

package com.example.mall.controller;

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/user")
public class UserController {

    @PostMapping("/login")
    public String login(@RequestBody User user) {
        // 处理用户登录逻辑，返回登录结果
    }

    @PostMapping("/register")
    public String register(@RequestBody User user) {
        // 处理用户注册逻辑，返回注册结果
    }

    @GetMapping("/{userId}")
    public User getUserById(@PathVariable Long userId) {
        // 根据用户ID查询用户信息，返回用户对象
    }
}

- - service：存放服务类，实现业务逻辑。服务类通常依赖于mapper层来获取数据，并对数据进行处理和业务规则的应用。例如，UserService类实现了用户相关的业务逻辑，调用UserMapper获取用户数据，并进行密码验证、权限判断等操作：

package com.example.mall.service;

import com.example.mall.mapper.UserMapper;
import com.example.mall.model.User;
import org.springframework.stereotype.Service;

@Service
public class UserService {

    private final UserMapper userMapper;

    public UserService(UserMapper userMapper) {
        this.userMapper = userMapper;
    }

    public boolean login(String username, String password) {
        User user = userMapper.findByUsername(username);
        if (user != null && user.getPassword().equals(password)) {
            return true;
        }
        return false;
    }

    public void register(User user) {
        userMapper.insert(user);
    }
}

- - mapper：用于存放数据访问层的接口和 XML 映射文件（如果使用 MyBatis - Plus）。接口定义了对数据库的操作方法，XML 映射文件则配置了具体的 SQL 语句。例如，UserMapper接口定义了查询用户、插入用户等方法：

package com.example.mall.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.mall.model.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper extends BaseMapper<User> {

    User findByUsername(String username);
}

对应的UserMapper.xml文件中配置了findByUsername方法对应的 SQL 语句：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mall.mapper.UserMapper">

    <select id="findByUsername" resultType="com.example.mall.model.User">
        SELECT * FROM user WHERE username = #{username}
    </select>

</mapper>

- - model：存放实体类，用于映射数据库表结构。每个实体类对应数据库中的一张表，通过注解（如@Table、@Id等）来标识表名和主键。例如，User实体类对应user表：

package com.example.mall.model;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("user")
public class User {

    private Long id;
    private String username;
    private String password;
    private String email;
    // 其他用户属性
}

- - config：存放配置类，用于配置项目的一些特殊设置，如数据库连接池配置、Spring Security 配置、定时任务配置等。例如，DataSourceConfig类用于配置数据库连接池：

package com.example.mall.config;

import com.alibaba.druid.pool.DruidDataSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import javax.sql.DataSource;

@Configuration
public class DataSourceConfig {

    @Bean
    public DataSource dataSource() {
        DruidDataSource dataSource = new DruidDataSource();
        dataSource.setUrl("jdbc:mysql://localhost:3306/mall?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai");
        dataSource.setUsername("root");
        dataSource.setPassword("123456");
        return dataSource;
    }
}

src/main/resources：
- application.properties 或 application.yml：Spring Boot 应用的配置文件，用于配置项目的各种属性，如数据库连接信息、服务器端口、日志级别、第三方服务配置等。以application.yml为例：

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mall?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    driver - class - name: com.mysql.cj.jdbc.Driver
  redis:
    host: 127.0.0.1
    port: 6379
  security:
    user:
      name: admin
      password: admin123

logging:
  level:
    root: info
    com.example.mall: debug

# 阿里云OSS配置
aliyun:
  oss:
    endpoint: oss-cn - hangzhou.aliyuncs.com
    accessKeyId: yourAccessKeyId
    accessKeySecret: yourAccessKeySecret
    bucketName: yourBucketName

mapper：存放 MyBatis - Plus 的 XML 映射文件（如果在src/main/java的mapper包中没有直接存放），方便管理和维护 SQL 语句。例如，UserMapper.xml文件可以放在这个目录下，与mapper包中的UserMapper接口相对应。
static：存放静态资源文件，如图片、CSS、JavaScript 文件等，这些资源可以通过 Spring Boot 的静态资源映射规则进行访问。在商城项目中，可以存放一些公共的图片资源，如商品分类图标、网站 logo 等。
templates：如果使用模板引擎（如 Thymeleaf、Freemarker），则存放模板文件，用于生成动态页面。在前后端分离的项目中，这个目录可能使用较少，但在一些传统的 Web 项目中，用于生成 HTML 页面并返回给前端。

六、总结

在商城开发的征程中，项目初始化与目录结构规划是至关重要的基石。通过合理的技术选型，如前端使用 Element Plus 搭配 Vue.js 构建 PC 端界面，利用 Uniapp 结合 uView ui 打造移动端应用，后端采用 Spring Boot 整合多种强大的技术栈，我们为项目的顺利开发奠定了坚实基础。在项目初始化过程中，掌握使用 Spring Initializr 创建 Spring Boot 项目以及利用 uniapp cli 初始化前端项目的方法，能够快速搭建起项目框架，提高开发效率。

清晰规范的目录结构更是后续开发和维护的关键。前端目录结构中，合理划分组件、页面、路由、状态管理等模块，使得代码组织有序，易于复用和维护；后端目录结构中，将控制器、服务、数据访问层、实体类和配置类等分别存放，遵循 MVC 架构模式，使得业务逻辑清晰，各模块之间职责明确，便于团队协作开发。

希望大家通过本文对商城项目的初始化与目录结构规划有了深入的理解，为后续商城功能模块的开发做好充分准备。在下一章节中，我们将深入探讨商城用户模块的开发，敬请期待。