024 搭建前台系統-----樂優商城工程啟動步驟教程

本文轉載自查看原文 2019-09-18 15:54 410 樂優商城項目

后台系統的內容暫時告一段落，有了商品，接下來我們就要在頁面展示商品，給用戶提供瀏覽和購買的入口，那就是我們的門戶系統。

門戶系統面向的是用戶，安全性很重要，而且搜索引擎對於單頁應用並不友好。因此我們的門戶系統不再采用與后台系統類似的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:\toolsoftware\nginx-1.14.0\nginx-1.14.0\conf

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>將上述代碼插入指定位置，效果圖如下：