乐优商城（01）--项目启动

乐优商城（01）–项目启动

一、项目介绍

• 乐优商城是一个全品类的电商购物网站（B2C）。
• 用户可以在线购买商品，加入购物车，下单，秒杀商品
• 可以品论已购买商品
• 管理员可以在后台管理商品的上下架，促销活动
• 管理员可以监控商品销售状况
• 客服可以在后台处理退款操作

二、项目搭建

2.1、技术选型

前端技术：

• 基础的HTML，CSS，JavaScript的（基于ES6标准）

• JQuery的

• Vue.js 2.0以及基于Vue的框架：Vuetify

• 前端构建工具：的WebPack

• 前端安装包工具：NPM

• Vue的脚手架：Vue的-CLI

• Vue的路由：VUE路由器

• AJAX框架：爱可信

• 基于Vue的富文本框架：quill-editor

后端技术：

• 基础的SpringMVC、Spring 5.0和MyBatis3

• Spring Boot 2.3.11.RELEASE版本

• Spring Cloud Alibaba Hoxton.SR8版本

• Redis-6.0.15

• RabbitMQ-3.4.1-1

• Elasticsearch-7.6.2

• nginx-1.20.1：

• FastDFS - 5.0.8

• MyCat

• Thymeleaf

2.2、域名

一级域名：www.leyou.com //前端门户网站主域名

二级域名：manage.leyou.com、api.leyou.com //后端管理域名以及api调用域名

2.3、前端环境安装

1. 安装node以及NPM工具

   下载地址：https://nodejs.org/en/

   下载完成后，cmd控制台输入，看见版本即说明安装成功

   node -v
   

   node自带NPM，控制台输入npm -v查看版本信息

2. npm默认的仓库地址是在国外网站，速度较慢，建议设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

   安装nrm，这里-g代表全局安装。

   npm install nrm -g
   

   然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

通过nrm test来测试所有镜像的下载速度，通过nrm use taobao来指定要使用的taobao镜像源

注意：

• 有教程推荐使用cnpm命令，但是使用发现cnpm有时会有bug，不推荐。

3. 安装vue，下载地址：https://github.com/vuejs/vue

   官网：https://cn.vuejs.org/

   随意创建一个目录，进入该目录cmd的控制台

   输入命令npm init -y进行初始化

   安装vue：输入命令npm install vue --save

   成功后，会发现多一个node_modules目录，并且在下面有一个vue目录。

   node_modules是通过npm安装的所有模块的默认位置。

2.4、后台管理系统页面搭建

1. 解压压缩包leyou-manage-web.zip，解压后进入该目录cmd控制台，输入命令npm install安装所需依赖

   也可以将该项目用idea打开，点击Terminal即开启一个控制台
   

2. 运行测试：npm run dev

   

   若想修改启动端口可以进入路径config/index.js下进行修改

3. 项目目录结构:

   

三、环境配置

3.1、统一环境

目前访问后台页面的路径为：http://localhost:9001，这不够优雅，对其进行域名映射

之前有对项目所使用的域名有规定：

• 主域名是：www.leyou.com
• 管理系统域名：manage.leyou.com
• 网关域名：api.leyou.com

我们将以上域名进行映射

3.2、域名解析

一个域名一定会被解析为一个或多个ip。这一般会包含两步：

• 本地域名解析

  浏览器会首先在本机的hosts文件中查找域名映射的IP地址，如果查找到就返回IP ，没找到则进行域名服务器解析，一般本地解析都会失败，因为默认这个文件是空的。

  • Windows下的hosts文件地址：C:/Windows/System32/drivers/etc/hosts

  • Linux下的hosts文件所在路径： /etc/hosts

• 域名服务器解析

  本地解析失败，才会进行域名服务器解析，域名服务器就是网络中的一台计算机，里面记录了所有注册备案的域名和ip映射关系，一般只要域名是正确的，并且备案通过，一定能找到

3.3、域名映射

官网下载nginx：http://nginx.org/en/download.html

选中windows版本，将压缩包解压即可

修改本地host文件，添加映射关系

127.0.0.1 manage.leyou.com
127.0.0.1 api.leyou.com

修改后，本地访问时路径为http://manage.leyou.com:9001，这不够优雅，我们利用nginx进行反向代理

nginx配置文件中添加下面内容：

	server {
        listen       80;
        server_name  manage.leyou.com;
 
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
        location / {
			proxy_pass http://127.0.0.1:9001;
			proxy_connect_timeout 1000;
			proxy_read_timeout 1000;
        }
    }
    
    server {
        listen       80;
        server_name  api.leyou.com;
 
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

nginx的相关命令

#启动
start nginx
#停止
nginx -s stop
#重启
nginx -s reload

3.4、测试

启动nginx，浏览器输入manage.leyou.com后即进入控制台页面

可能的错误：Invalid Host header

原因：manage.leyou.com映射的ip是127.0.0.1，但是webpack会验证host是否符合配置。

解决办法：在webpack.dev.conf.js中取消host验证：disableHostCheck: true

重新执行npm run dev，刷新浏览器

流程分析：

1. 浏览器准备发起请求，访问http://mamage.leyou.com，但需要进行域名解析
2. 优先进行本地域名解析，因为修改了hosts，所以解析成功，得到地址：127.0.0.1
3. 请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80
4. 本机的nginx一直监听80端口，因此捕获这个请求
5. nginx中配置了反向代理规则，将manage.leyou.com代理到127.0.0.1:9001，因此请求被转发
6. 后台系统的webpack server监听的端口是9001，得到请求并处理，完成后将响应返回到nginx
7. nginx将得到的结果返回到浏览器

四、创建父工程

创建统一的父工程：myLeyou，用来管理项目依赖及其版本，这里直接选用springBoot脚手架快速搭建

创建成功后，修改pom.xml文件，并将多余的目录文件删除

<?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.leyou.parent</groupId>
    <artifactId>myLeyou</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>myLeyou</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <spring.cloud.alibaba.version>2.2.5.RELEASE</spring.cloud.alibaba.version>
        <spring.boot.version>2.3.11.RELEASE</spring.boot.version>
        <spring.cloud.version>Hoxton.SR8</spring.cloud.version>
        <mysql.version>5.1.47</mysql.version>
        <fastDFS.client.version>1.26.1-RELEASE</fastDFS.client.version>
        <mybatis.starter.version>2.1.1</mybatis.starter.version>
        <mapper.starter.version>2.1.5</mapper.starter.version>
        <pageHelper.starter.version>1.2.13</pageHelper.starter.version>
    </properties>

    <dependencyManagement>
        <!--Spring Cloud alibaba的版本管理， 通过dependency完成继承-->
        <dependencies>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>${spring.cloud.alibaba.version}</version>
                <type>pom</type>