024 搭建前台系统-----乐优商城工程启动步骤教程

后台系统的内容暂时告一段落，有了商品，接下来我们就要在页面展示商品，给用户提供浏览和购买的入口，那就是我们的门户系统。

门户系统面向的是用户，安全性很重要，而且搜索引擎对于单页应用并不友好。因此我们的门户系统不再采用与后台系统类似的SPA（单页应用）。

依然是前后端分离，不过前端的页面会使用独立的html，在每个页面中使用vue来做页面渲染。

1.静态资源

webpack打包多页应用配置比较繁琐，项目结构也相对复杂。这里为了简化开发（毕竟我们不是专业的前端人员），我们不再使用webpack，而是直接编写原生的静态HTML。

(1)创建工程

创建一个新的工程：

(2)导入静态资源

leyou-portal解压

复制到当前工程目录下

项目结构：

2.live-server

没有webpack，我们就无法使用webpack-dev-server运行这个项目，实现热部署。

所以，这里我们使用另外一种热部署方式：live-server

(1)简介

这是一款带有热加载功能的小型开发服务器。用它来展示你的HTML / JavaScript / CSS，但不能用于部署最终的网站。

(2)安装及运行参数

<1>安装

在idea软件的terminal中输入

npm install -g live-server

<2>运行时，直接输入命令：

live-server

另外，你可以在运行命令后，跟上一些参数以配置：

• --port=NUMBER - 选择要使用的端口，默认值：PORT env var或8080

• --host=ADDRESS - 选择要绑定的主机地址，默认值：IP env var或0.0.0.0（“任意地址”）

• --no-browser - 禁止自动Web浏览器启动

• --browser=BROWSER - 指定使用浏览器而不是系统默认值

• --quiet | -q - 禁止记录

• --verbose | -V - 更多日志记录（记录所有请求，显示所有侦听的IPv4接口等）

• --open=PATH - 启动浏览器到PATH而不是服务器root

• --watch=PATH - 用逗号分隔的路径来专门监视变化（默认值：观看所有内容）

• --ignore=PATH- 要忽略的逗号分隔的路径字符串（anymatch -compatible definition）

• --ignorePattern=RGXP-文件的正则表达式忽略（即.*.jade）（不推荐使用赞成--ignore）

• --middleware=PATH - 导出要添加的中间件功能的.js文件的路径; 可以是没有路径的名称，也可以是引用middleware文件夹中捆绑的中间件的扩展名

• --entry-file=PATH - 提供此文件（服务器根目录）代替丢失的文件（对单页应用程序有用）

• --mount=ROUTE:PATH - 在定义的路线下提供路径内容（可能有多个定义）

• --spa - 将请求从/ abc转换为/＃/ abc（方便单页应用）

• --wait=MILLISECONDS - （默认100ms）等待所有更改，然后重新加载

• --htpasswd=PATH - 启用期待位于PATH的htpasswd文件的http-auth

• --cors - 为任何来源启用CORS（反映请求源，支持凭证的请求）

• --https=PATH - 到HTTPS配置模块的路径

• --proxy=ROUTE:URL - 代理ROUTE到URL的所有请求

• --help | -h - 显示简洁的使用提示并退出

• --version | -v - 显示版本并退出

(3)测试

在idea软件的terminal中输入（已9002端口运行）

live-server --port=9002

浏览器访问效果图：

3.域名访问

现在我们访问只能通过：http://127.0.0.1:9002

我们希望用域名访问：http://www.leyou.com

(1)利用SwichHost软件修改hosts文件，添加一行配置：

127.0.0.1 www.leyou.com

(2)修改nginx配置，将www.leyou.com反向代理到127.0.0.1:9002

<1>进入Nginx的安装目录：E: oolsoftware ginx-1.14.0 ginx-1.14.0conf

server {
        listen       80;
        server_name  www.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:9002;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
        }
    }

<2>将上述代码插入指定位置，效果图如下：

<3>重新加载nginx配置：nginx.exe -s reload

(3)测试

(4)再次启动leyou-portal执行步骤

<1>利用live-server启动leyou-portal这个前端工程

在idea软件的terminal中输入（以9002端口运行，不要更换成其他端口）

live-server --port=9002

<2>启动Nginx代理

start nginx.exe

此时访问：http://www.leyou.com/

注意：live-server服务器启动项目默认先访问index.html

<3>启动ElasticSearch

可以打开bin目录，双击elasticSearch.bat文件，启动ElasticSearch

<4>启动后台微服务

4.common.js

为了方便后续的开发，我们在前台系统中定义了一些工具，放在了common.js中：

部分代码截图：

首先对axios进行了一些全局配置，请求超时时间，请求的基础路径，是否允许跨域操作cookie等

定义了对象 ly ，也叫leyou，包含了下面的属性：

• getUrlParam(key)：获取url路径中的参数

• http：axios对象的别名。以后发起ajax请求，可以用ly.http.get()

• store：localstorage便捷操作，后面用到再详细说明

• formatPrice：格式化价格，如果传入的是字符串，则扩大100被并转为数字，如果传入是数字，则缩小100倍并转为字符串

• formatDate(val, pattern)：对日期对象val按照指定的pattern模板进行格式化

• stringify：将对象转为参数字符串

• parse：将参数字符串变为js对象