文章目錄

(一)搭建管理后臺的前端
(二)項目結構
(三)vuetify
(四)使用域名訪問后臺頁面
(五)nginx的介紹
(六)nginx的使用

(一)搭建管理后臺的前端

把資料包中提供的leyou-manage-web拷貝到工作空間，如下：

用IDEA打開，如下：

選擇Run npm install，或者自己在控制臺輸入npm install命令，如下：

在package.json文件中有scripts啟動腳本配置，如下：

可以輸入命令：npm run dev或者npm start，運行效果如下：

(二)項目結構

.vue文件由兩部分組成：<template>（存放html代碼）和<script>（存放js代碼）
有時候還會使用<style定義一些樣式


可以看到整個Vue項目只有index.html一個頁面，其它的都是組件，如下：

main.js把App.vue（組件）通過router與index.html（單頁面）綁定在一起，如下：

App.vue（組件）中只有一個錨點（<router-view></router-view>）
在index.js（在main.js中CTRL+單擊new Vue里面的router可跳轉）定義了路由，如下：

配置path:"/"就是根路由，對應的組件是Layout.vue，如下：

左側導航條和頂部工具條基本數不會發送變化，我們可以寫死它
經常發送改變的只是中間內容主體，我們可以放置一個錨點，讓Layout的子組件在這里顯示

其中的route()方法是被封裝起來的，如下：


所以說main.js是紐帶文件，它把路由、頁面和組件三者關聯起來

補充：我們剛打開頁面顯示的路徑并不是http://localhost:9001/，而是http://localhost:9001/#/index/dashboard，是因為做了重定向，如下：

(三)vuetify

Vue雖然會幫我們進行視圖的渲染，但樣式還是由我們自己來完成。這顯然不是我們的強項，因此后端開發人員一般都喜歡使用一些現成的UI組件，拿來即用，常見的例如：

• BootStrap
• LayUI
• EasyUI
• ZUI

然而這些UI組件的基因天生與Vue不合，因為他們更多的是利用DOM操作，借助于jQuery實現，而不是MVVM的思想。

而目前與Vue吻合的UI框架也非常的多，國內比較知名的如：

• element-ui：餓了么出品
• i-view：某公司出品

然而我們都不用，我們今天推薦的是一款國外的框架：Vuetify

(四)使用域名訪問后臺頁面

我們不可能去購買一個域名，但是我們可以偽造本地的hosts文件，實現對域名的解析
修改本地的host為：

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

這樣就實現了域名的關系映射了，但是每次在C盤尋找hosts文件并修改是非常麻煩的
給大家推薦一個快捷修改host的工具，在課前資料中可以找到：

運行過程中出錯可以看：SwitchHosts以管理員身份運行出錯的解決方案
點擊左下角的?，可以添加一條hosts映射，如下：

配置內容如下：

# leyou 127.0.0.1 api.leyou.com #我們的網關Zuul 127.0.0.1 manage.leyou.com #我們的后臺系統地址

其中的backup是我們原本配置好的，我們保留，如下：


修改webpack.dev.conf.js，如下：

重啟vue項目后，訪問http://manage.leyou.com:9001/，效果如下：

(五)nginx的介紹

域名問題解決了，但是現在要訪問后臺頁面，還得自己加上端口：http://manage.leyou.com:9001/
這就不夠優雅了，我們希望的是直接域名訪問：http://manage.leyou.com
這種情況下端口默認是80，如何才能把請求轉移到9001端口呢？
如果直接把http://manage.leyou.com映射到80端口，那其它域名就不能映射到80端口了
這里就要用到反向代理工具：Nginx
我們可以把80端口映射給Nginx，讓Nginx統一管理

nginx

nginx可以作為web服務器，但更多的時候，我們把它作為網關，因為它具備網關必備的功能：

• 反向代理
• 負載均衡
• 動態路由
• 請求過濾

服務器分類

Web服務器分2類：

• web應用服務器，如：
  • tomcat
  • resin
  • jetty
• web服務器，如：
  • Apache 服務器
  • Nginx
  • IIS

區分：web服務器不能解析jsp等頁面，只能處理js、css、html等靜態資源
并發：web服務器的并發能力遠高于web應用服務器

反向代理

什么是反向代理？

• 代理：通過客戶機的配置，實現讓一臺服務器代理客戶機，客戶的所有請求都交給代理服務器處理
• 反向代理：用一臺服務器，代理真實服務器，用戶訪問時，不再是訪問真實服務器，而是代理服務器

nginx可以當做反向代理服務器來使用：

• 我們需要提前在nginx中配置好反向代理的規則，不同的請求，交給不同的真實服務器處理
• 當請求到達nginx，nginx會根據已經定義的規則進行請求的轉發，從而實現路由功能

利用反向代理，就可以解決我們前面所說的端口問題，如圖：

(六)nginx的使用

我們在本地安裝一臺nginx：

解壓后，目錄結構：

conf：配置目錄

contrib：第三方依賴

html：默認的靜態資源目錄，類似于tomcat的webapps

logs：日志目錄

nginx.exe：啟動程序（可雙擊運行，但不建議這么做，建議在CMD或者PS中運行）

打開config目錄的nginx.conf文件進行配置，如下：
其中的worker_processes是工作進程數量，通常不要超過CPU核數
我們配置一個，現在是1個工作進程 + 1個主進程，一共有兩個進程

其中的worker_connnections為1個進程中的線程數，即連接池中的連接數量，如下：

server配置如下：

nginx中的每個server就是一個反向代理配置，可以有多個server

完整配置如下：

#user nobody; worker_processes 1;#error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024; }http {include mime.types;default_type application/octet-stream;#log_format main '$remote_addr - $remote_user [$time_local] "$request" '# '$status $body_bytes_sent "$http_referer" '# '"$http_user_agent" "$http_x_forwarded_for"';#access_log logs/access.log main;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;#gzip on;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 600;proxy_read_timeout 600;}}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;location / {proxy_pass http://127.0.0.1:10010;proxy_connect_timeout 600;proxy_read_timeout 600;}}# another virtual host using mix of IP-, name-, and port-based configuration##server {# listen 8000;# listen somename:8080;# server_name somename alias another.alias;# location / {# root html;# index index.html index.htm;# }#}# HTTPS server##server {# listen 443 ssl;# server_name localhost;# ssl_certificate cert.pem;# ssl_certificate_key cert.key;# ssl_session_cache shared:SSL:1m;# ssl_session_timeout 5m;# ssl_ciphers HIGH:!aNULL:!MD5;# ssl_prefer_server_ciphers on;# location / {# root html;# index index.html index.htm;# }#}}

配置完成后重新加載即可

• 啟動：start nginx
• 停止：nginx -s stop
• 重新加載：nginx -s reload

效果如下：

nginx的執行流程如下：

瀏覽器準備發起請求，訪問http://mamage.leyou.com，但需要進行域名解析

優先進行本地域名解析，因為我們修改了hosts，所以解析成功，得到地址：127.0.0.1

請求被發往解析得到的ip，并且默認使用80端口：http://127.0.0.1:80
本機的nginx一直監聽80端口，因此捕獲這個請求

nginx中配置了反向代理規則，將manage.leyou.com（雖然域名被解析成127.0.0.1，但是請求時還是會帶上解析前的域名，見下圖中的Origin）代理到127.0.0.1:9001，因此請求被轉發

后臺系統的webpack server監聽的端口是9001，得到請求并處理，完成后將響應返回到nginx

nginx將得到的結果返回到瀏覽器

總結

以上是生活随笔為你收集整理的乐优商城之后台管理系统的环境搭建(七)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。