11、前台系统-搭建环境

本章讲解尚品甄选H5端介绍。

1.1 业务功能介绍

首页、商品分类查询、关键字查询、商品详情、注册、登录、购物车模块、用户收货地址管理、订单模块、支付...

项目演示地址：http://spzx.atguigu.cn/

1.2 系统架构

服务器端架构：SpringBoot3 + Spring Cloud + Spring Cloud Alibaba(Nacos/Sentinel) + MyBatis + Redis

前端架构：uni-app

1.3 前端H5开发说明

前端H5部分我们不需要开发，我们只需要根据接口文档开发微服务接口，然后对接到写好的前端H5即可

导入课程资料：h5

部署spzx-h5:

1、docker部署nignx

#拉取镜像
docker pull nginx:latest

#运行nginx镜像
docker run -d -p 80:80 \
--name nginx-spzx \
-v nginx_html:/usr/share/nginx/html \
-v nginx_conf:/etc/nginx/ \
-v nginx_logs:/var/log/nginx  nginx

# nginx-spzx容器的管理命令
docker start nginx-spzx			# 启动容器
docker stop nginx-spzx			# 关闭容器
docker rm nginx-spzx			# 删除容器

#使用浏览器访问测试：http://ip

2、部署spzx-h5

删除/var/lib/docker/volumes/nginx_html/_data目录下的文件，将h5目录下的文件上传到该目录下。

浏览器访问：http://ip，打开手机模式

3、H5调用本地接口设置

我的 => 设置 =》 接口base路径，改为本地网关地址：http://IP:端口

注意：http://139.198.163.91:8400 为云服务接口地址