门户系统面向的是用户,安全性很重要,而且搜索引擎对于单页应用并不友好。因此我们的门户系统不再采用与后台系统类似的SPA(单页应用)。
(2)导入静态资源
leyou-portal解压
复制到当前工程目录下
项目结构:
2.live-server
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://www.leyou.com
127.0.0.1 www.leyou.com
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)测试
(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中:
部分代码截图:
定义了对象 ly ,也叫leyou,包含了下面的属性:
-
getUrlParam(key):获取url路径中的参数
-
http:axios对象的别名。以后发起ajax请求,可以用ly.http.get()
-
store:localstorage便捷操作,后面用到再详细说明
-
formatPrice:格式化价格,如果传入的是字符串,则扩大100被并转为数字,如果传入是数字,则缩小100倍并转为字符串
-
formatDate(val, pattern):对日期对象val按照指定的pattern模板进行格式化
-
stringify:将对象转为参数字符串
-