苍穹外卖（sky-delivery）: 苍穹外卖是一个全面的在线餐饮服务平台，项目包含，用户小程序端、商家管理后台、以及两个的后端。

# 苍穹外卖项目介绍文档
项目描述：苍穹外卖是一个全面的在线餐饮服务平台。该项目包含用户微信小程序端、后台管理端以及两者的后端项目。

## 一、技术选型

技术选型：展示项目中使用到的技术框架和中间件等

![](README.assets/image-20240812101809959.png)

### 1 、本人开发环境

JDK17、SpringBoot 3.1 、Redis3.2、Node20.11、Nginx1.24、MySQL5.7、Vue3。

##  二、项目结构和数据库表

### 1、后端项目结构

![image-20241103152252123](README.assets/image-20241103152252123.png)

| 名称         | 说明                                                         |
| ------------ | ------------------------------------------------------------ |
| sky-take-out | maven父工程，统一管理依赖版本，聚合其他子模块                |
| sky-common   | 子模块，存放公共类，例如：工具类、常量类、异常类等           |
| sky-pojo     | 子模块，存放实体类、VO、DTO等                                |
| sky-server   | 子模块，后端服务，存放配置文件、Controller、 Service、 Mapper、启动类等 |

#### 1.1  子模块（sky-common）

> 用于存放一些公共类、异常处理类等。

![image-20241103152718633](README.assets/image-20241103152718633.png)

#### 1.2 子模块（sky-pojo）

> 用于存放一些实体类、DTO、VO等

![image-20241103153120819](README.assets/image-20241103153120819.png)

#### 1.3 子模块（sky-server）

> 存放的是配置文件、配置类，拦截器、controller、service、 mapper、启动类等

![image-20241103153238695](README.assets/image-20241103153238695.png)

### 2、数据库表

> 文件中已提供对应的sky-take-out.sql文件。

![image-20241103155236991](README.assets/image-20241103155236991.png)

| 序号 | 表名         | 说明           |
| ---- | ------------ | -------------- |
| 1    | employee     | 员工表         |
| 2    | category     | 分类表         |
| 3    | dish         | 菜品表         |
| 4    | dish_flavor  | 菜品口味表     |
| 5    | setmeal      | 套餐表         |
| 6    | setmeal_dish | 套餐菜品关系表 |
| 7    | user         | 用户表         |
| 8    | address_book | 地址表         |
| 9    | shopping_car | 购物车表       |
| 10   | order        | 订单表         |
| 11   | order_detail | 订单明细表     |

## 三、启动项目说明

### 1、后端项目启动

通过Idea将项目打开，注意更改对应的JDK版本和自己的Maven

#### 1.1 MySql

1. 创建一个名为 sky-take-out 的数据库。

2. 将项目中提供的sky-take-out.sql文件导入到数据库中。

3. 刷新表，查看是否导入成功。

4. 根据自己数据库信息修改配置文件：`sky-server`子模块的`application-dev.yml`文件中。

```yml
   sky:
     datasourec:
       driver-class-name: com.mysql.cj.jdbc.Driver
       url: jdbc:mysql://localhost:3306/sky-take-out?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
       database: sky-take-out     # 数据库名
       username: root            # 用户名
       password: 123456           # 密码
   ```

#### 1.2 Redis

如果对Redis不熟可看：https://blog.csdn.net/qq_57340195/article/details/143018035?spm=1001.2014.3001.5502

1. 启动Redis

```bash
   redis-server.exe   redis.windows.conf
   ```

2. 根据自己的Redis修改配置文件：`sky-server`子模块的`application-dev.yml`文件中。

```yml
     redis:
       host: localhost     # redis服务器地址
       port: 6379          # redis服务器端口号
       password: 123456     # redis服务器密码
       database: 10         # redis数据库选择（默认为0）
   ```

#### 1.3 OSS

阿里云对象存储服务（Object Storage Service，简称OSS）为您提供基于网络的数据存取服务。使用OSS，您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种非结构化数据文件。
阿里云OSS将数据文件以对象（object）的形式上传到存储空间（bucket）中。

> 开通OSS服务

1. 打开https://www.aliyun.com/ ，申请阿里云账号并完成实名认证。

2. 开通OSS，直接在搜索框中搜索oss ，找到对象存储OSS

![image-20241103170841841](README.assets/image-20241103170841841.png)

3. 在OSS产品详情页中的单击立即开通

> 注意：个人的项目练习，这费用可以不计（几分钱）
   >
   > 1.假设你开通了对象存储OSS，开通OSS是不收费的;
   >
   > 2.你在对象存储OSS上创建了Bucket,创建Bucket是不收费的; 
   >
   > 3.你在Bucket中上传了文件,该文件存储是收费的，需要支付存储费;
   >
   > 4.上传文件到Bucket中产的流量是不收费的;
   >
   > 5.假设你通过外网下载Bucket中的文件到本地，外网出流量是收费的，需要支付流量费;
   >
   > 6.假设你开通了OSS传输加速功能,开通功能是不收费的;
   >
   > 7.假设你上传或下载使用了传输加速，产生的传输加速流量是收费的。

4. 开通后进入OSS管理控制台界面-创建bucket（桶）

![image-20241103172858073](README.assets/image-20241103172858073.png)

创建成功后可以在列表中查看到，并且可以点击自己设置的名称进行管理

![image-20241103174351896](README.assets/image-20241103174351896.png)

5. 测试：可以自己上传一些图片进行测试

![image-20241103173304323](README.assets/image-20241103173304323.png)

![image-20241103173446843](README.assets/image-20241103173446843.png)

6. 将存储空间名称（捅名）和外网的访问链接进行复制下来，在项目配置文件中进行配置：`sky-server`子模块的`application-dev.yml`文件中。

![image-20241103173919799](README.assets/image-20241103173919799.png)

```yml
   #将信息替换成自己的  
     aliyun:
       oss:
         endpoint: https://oss-cn-beijing.aliyuncs.com   # 阿里云oss地址
         bucket-name: yhzy-bucket                     # 阿里云oss存储空间名称
   ```

#### 1.4 微信小程序开通

> 选择个人注册就行，下面是注册流程
>
> 注意：如果你用的邮箱注册了微信公众号或其它腾讯平台服务，就不能用同一个邮箱注册小程序了，因为也要开通微信公众号。

![image-20240903165204023](README.assets/image-20240903165204023.png)

> 注册登录网址：https://mp.weixin.qq.com/?token=&lang=zh_CN

![image-20241103180025637](README.assets/image-20241103180025637.png)

> 注册成功后，可绑定微信号，通过第一次图的界面进行微信扫码登录，完成小程序信息。

![image-20241103180928176](README.assets/image-20241103180928176.png)

> 在小程序信息中，滚动条往下滑动，可查看小程序ID

![image-20241103181150621](README.assets/image-20241103181150621.png)

> 在微信公众号中的开发中心获取到secret ，和可以获取AppID（小程序ID），我这里是已经获取过来，所有是重置，如果首次使用应该是获取。

![image-20241103182730554](README.assets/image-20241103182730554.png)

> 在项目配置文件中进行配置：`sky-server`子模块的`application-dev.yml`文件中。将信息替换成自己的

```yml
  wechat:
    appid: 123456789      # 公众号appid
    secret: 123456789  #公众号secret
```

#### 1.5、启动后端项目并测试

1. 在`sky-server`子模块，找到启动类，启动项目。

2. 启动成功，去访问Swagger接口文档：http://localhost:9091/doc.html#/home

![image-20241103183757632](README.assets/image-20241103183757632.png)

3. 可测试接口是否正常，注意测试前要先登录，获取token，再对接口测试。

![image-20241103183850006](README.assets/image-20241103183850006-17307034033732.png)

### 2、前端项目启动-管理员端

#### 2.1  Nginx配置

> 代理配置

#### 4.2、Nginx反向代理

> 代理：前端请求的地址通过Nginx来转发到后端的Tomcat上，可以实现前端的请求地址与后端的接口地址不一致。
>
> 配置文件：在Nginx的nginx.conf文件中配置
>
> 优点：提高访问速度、进行负载均衡、保证后端服务安全。
>
> 下图匹配规则：如果前端请求路径包含“/api/” 那么就会请求代理的地址，并且将 “/api/”  后的地址拼接到代理的地址后再发起请求。

![image-20240815212635276](README.assets/image-20240815212635276.png)

> 这里是我的配置
>

```java

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;

#upstream webservers{
	#  server 127.0.0.1:9091;
	 # #server 127.0.0.1:8088 weight=10 ;
	#}

server {
        listen       81;
        server_name  localhost;

location / {
            root   html;
            index  index.html index.htm;
        }

error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

# 反向代理,处理管理端发送的请求
        location /api/ {
	proxy_pass   http://localhost:9091/admin/;
        }
		
      #反向代理,处理用户端发送的请求
       location /user/ {
          proxy_pass   http://localhost:9091/user/;
       } 
      #反向代理,处理用户端发送的请求
       location /wb/ {
          proxy_pass   http://localhost:9091/ws/;
       } 
    }
}

```

启动命令（进入安装的目录的cmd）：start  nginx.exe 或者 nginx.exe

停止命令：①tasklist | findstr nginx.exe  （查看nginx进程）②taskkill /F /IM nginx.exe（停止nginx）

重启：先停止，再启动。

访问：http://localhost:81 ，能访问就代表启动成功！

![image-20241103185437379](README.assets/image-20241103185437379.png)

#### 4.3 下载依赖启动项目

> 在前端项目管理端（project-sky-admin-vue-ts）目录的cmd中

```bash
npm install   #下载依赖
#如果你遇到 npm ERR! code ERESOLVE错误，这通常意味着依赖关系冲突。你可以尝试使用npm install --force或npm install --legacy-peer-deps 来强制安装，尽管这可能会接受一些可能不正确的依赖解析。

npm run serve    #启动项目
```

启动成功访问：http://localhost:8888/

### 3、前端项目启动-用户小程序端

> 微信小程序开发工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

1. 登录开发工具
2. 设置对应的AppID与之前查看的要一致
3. 将项目导入到开发工具中
4. 开发模式：选择小程序
5. 后端服务：选择不使用云服务
6. 模板选择：选择不使用模板
7. 编译项目，就运行了

永恒之月/苍穹外卖（sky-delivery）

简介

发行版

贡献者

近期动态

永恒之月/苍穹外卖（sky-delivery） .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

永恒之月/苍穹外卖（sky-delivery）