day06-初識Vuetify框架UI框架和使用域名訪問本地項目

本項目的筆記和資料的Download，請點擊這一句話自行獲取。

day01-springboot（理論篇） ；day01-springboot（實踐篇）

day02-springcloud（理論篇一)  ；day02-springcloud(理論篇二)  ；day02-springcloud(理論篇三) ；day02-springcloud(理論篇四) ；

day03-springcloud(Hystix，Feign)  ；day03-springcloud(Zuul網關）

day04-項目搭建（一） ； day04-項目搭建（二）； day04-ES6語法入門

day05-Vue入門學習

day06-了解vue-router和webpack的使用  ； day06-初識Vuetify框架UI框架和使用域名訪問本地項目 ；  day06-使用nginx反向代理並掌握cors解決跨域 

day06-使用vue-cli搭建項目：搭建后台管理系統

---

0.學習目標

• 了解vue-router使用
• 了解webpack使用
• 會使用vue-cli搭建項目
• 使用資料搭建后台系統
• 會使用nginx進行反向代理

---

3.vue-cli

3.1.介紹和安裝

在開發中，需要打包的東西不止是js、css、html。還有更多的東西要處理，這些插件和加載器如果我們一 一去添加就會比較麻煩。

幸好，vue官方提供了一個快速搭建vue項目的腳手架：vue-cli

使用它能快速的構建一個web工程模板。

官網：https://github.com/vuejs/vue-cli

（已安裝Node.js在cmd窗口下輸入）安裝命令：

npm install -g vue-cli

3.2.快速上手

我們新建一個module：

 

 打開終端並進入目錄：

 

用vue-cli命令，快速搭建一個webpack的項目：vue init webpack

 

前面幾項都走默認或yes

下面這些我們選no

 

 最后，再選yes，使用 npm安裝

3.3.項目結構

安裝好的項目結構：

 入口文件：

3.4.單文件組件

需要注意的是，我們看到有一類后綴名為.vue的文件，我們稱為單文件組件

每一個.vue文件，就是一個獨立的vue組件。類似於我們剛才寫的loginForm.js和registerForm.js

只不過，我們在js中編寫 html模板和樣式非常的不友好，而且沒有語法提示和高亮。

而單文件組件中包含三部分內容：

• template：模板，支持html語法高亮和提示
• script：js腳本，這里編寫的就是vue的組件對象，看到上面的data(){}了吧
• style：樣式，支持CSS語法高亮和提示

每個組件都有自己獨立的html、JS、CSS，互不干擾，真正做到可獨立復用。

3.5.運行

看看生成的package.json：

• 可以看到這引入了非常多的依賴，絕大多數都是開發期依賴，比如大量的加載器。
• 運行時依賴只有vue和vue-router
• 腳本有三個
  • dev：使用了webpack-dev-server命令，開發時熱部署使用
  • start：使用了npm run dev命令，與上面的dev效果完全一樣
  • build：等同於webpack的打包功能，會打包到dist目錄下。

我們執行npm run dev 或者 npm start 都可以啟動項目：

頁面：

 

1.搭建后台管理前端

1.1.導入已有資源

后台項目相對復雜，為了有利於教學，我們不再從0搭建項目，而是直接使用課前資料中給大家准備好的源碼：

 

 我們解壓縮，放到IDEA的工作目錄中：

 

然后在Intellij idea中導入新的工程：

選中我們的工程：

 這正是一個用vue-cli構建的webpack工程，是不是與之前見過的結構一樣：

1.2.安裝依賴

你應該注意到，這里並沒有node_modules文件夾，方便給大家下發，已經把依賴都刪除了。不過package.json中依然定義了我們所需的一切依賴：

 我們只需要打開IDEA的終端窗口，進入項目目錄，輸入：npm install命令，即可安裝這些依賴。

 

 如果安裝過程出現以下問題：

 建議刪除node_modules目錄，重新安裝。

1.3.運行一下看看

輸入命令：npm run dev

發現默認的端口是9001。訪問：http://localhost:9001

會自動進行跳轉：

 

2.Vuetify框架

2.1.為什么要學習UI框架

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

• BootStrap
• LayUI
• EasyUI
• ZUI

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

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

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

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

官方網站：https://vuetifyjs.com/zh-Hans/

2.2.為什么是Vuetify

有中國的為什么還要用外國的？原因如下：

• Vuetify幾乎不需要任何CSS代碼，而element-ui許多布局樣式需要我們來編寫
• Vuetify從底層構建起來的語義化組件。簡單易學，容易記住。
• Vuetify基於Material Design（谷歌推出的多平台設計規范），更加美觀，動畫效果酷炫，且風格統一

這是官網的說明：

2.3.怎么用？

基於官方網站的文檔進行學習：

我們重點關注UI components即可，里面有大量的UI組件，我們要用的時候再查看，不用現在學習，先看下有什么：

 

 

以后用到什么組件，就來查詢即可。

3.項目結構

開始編碼前，我們先了解下項目的結構。

3.1.目錄結構

首先是目錄結構圖：

3.2.調用關系

我們最主要理清index.html、main.js、App.vue之間的關系：

理一下：

• index.html：html模板文件。定義了空的div，其id為app。
• main.js：實例化vue對象，並且綁定通過id選擇器，綁定到index.html的div中，因此main.js的內容都將在index.html的div中顯示。main.js中使用了App組件，即App.vue，也就是說index.html中最終展現的是App.vue中的內容。index.html引用它之后，就擁有了vue的內容（包括組件、樣式等），所以，main.js也是webpack打包的入口。
• index.js：定義請求路徑和組件的映射關系。相當於之前的<vue-router>
• App.vue中也沒有內容，而是定義了vue-router的錨點：<router-view>,我們之前講過，vue-router路由后的組件將會在錨點展示。
• 最終結論：一切路由后的內容都將通過App.vue在index.html中顯示。
• 訪問流程：用戶在瀏覽器輸入請求路徑，例如：http://localhost:9001/#/item/brand --> index.js(/item/brand路徑對應pages/item/Brand.vue組件) --> 該組件顯示在App.vue的錨點位置 --> main.js使用了App.vue組件，並把該組件渲染在index.html文件中（id為“app”的div中）

3.3.頁面布局

Layout組件是我們的整個頁面的布局組件：

 一個典型的三塊布局。包含左，上，中三部分：

里面使用了Vuetify中的2個組件和一個布局元素：

• v-navigation-drawer ：導航抽屜，主要用於容納應用程序中的頁面的導航鏈接。

  ![1530380237867](assets/1530380237867.png)
  

• v-toolbar：工具欄通常是網站導航的主要途徑。可以與導航抽屜一起很好地工作，動態選擇是否打開導航抽屜，實現可伸縮的側邊欄。

  

• v-content：並不是一個組件，而是標記頁面布局的元素。可以根據您指定的app組件的結構動態調整大小，使得您可以創建高度可定制的組件。

那么問題來了：v-content中的內容來自哪里？

 

• Layout映射的路徑是/
• 除了Login以為的所有組件，都是定義在Layout的children屬性，並且路徑都是/的下面
• 因此當路由到子組件時，會在Layout中定義的錨點中顯示。
• 並且Layout中的其它部分不會變化，這就實現了布局的共享。

---

 

4.使用域名訪問本地項目

4.1.統一環境

我們現在訪問頁面使用的是：http://localhost:9001

有沒有什么問題？

實際開發中，會有不同的環境：

• 開發環境：自己的電腦
• 測試環境：提供給測試人員使用的環境
• 預發布環境：數據是和生成環境的數據一致，運行最新的項目代碼進去測試
• 生產環境：項目最終發布上線的環境

如果不同環境使用不同的ip去訪問，可能會出現一些問題。因此，我們會在各種環境下都使用域名來訪問。

我們將使用以下域名：

• 主域名是：www.leyou.com，
• 管理系統域名：manage.leyou.com
• 網關域名：api.leyou.com
• ...

但是最終，我們希望這些域名指向的還是我們本機的某個端口。

那么，當我們在瀏覽器輸入一個域名時，瀏覽器是如何找到對應服務的ip和端口的呢？

4.2.域名解析

一個域名一定會被解析為一個或多個ip。這一般會包含兩步：

• 本地域名解析

  瀏覽器會首先在本機的hosts文件中查找域名映射的IP地址，如果查找到就返回IP ，沒找到則進行域名服務器解析，一般本地解析都會失敗，因為這個文件默認是空的。

  • Windows下的hosts文件地址：C:/Windows/System32/drivers/etc/hosts
  • Linux下的hosts文件所在路徑：/etc/hosts

  樣式：

# My hosts
127.0.0.1 www.xmind.com
127.0.0.1 xmind.com
127.0.0.1 www.xmind.net
127.0.0.1 xmind.net

• 域名服務器解析

本地解析失敗，才會進行域名服務器解析，DNS服務器就是網絡中的一台計算機，里面記錄了注冊備案的域名和ip映射關系，一般只要域名是正確的，並且備案通過，一定能找到。

4.3.解決域名解析問題

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

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

這樣就實現了域名的關系映射了。

BlueLife Hosts Editor v1.2 是一款windows操作系統下修改host文件的軟件。

每次在C盤尋找hosts文件並修改是非常麻煩的，給大家推薦一個快捷修改host的工具，在課前資料中可以找到：

win10系統請先切換到目錄下，給自己的登錄賬戶設定hosts文件的寫入權限

C:\Windows\System32\drivers\etc

 

初次運行還需要找到Switch Hosts這個應用或桌面快捷方式，右鍵選擇以管理員身份運行。

 解壓，運行exe文件，效果：

我們添加了兩個映射關系（中間用空格隔開）：

• 127.0.0.1 api.leyou.com ：我們的網關Zuul
• 127.0.0.1 manage.leyou.com：我們的后台系統地址

現在，ping一下域名試試是否暢通：

OK！通過域名訪問：

 

 原因：我們配置了項目訪問的路徑，雖然manage.leyou.com映射的ip也是127.0.0.1，但是webpack會驗證host是否符合配置。

 在build目錄下webpack.dev.conf.js中取消host驗證：

disableHostCheck: true

 重新執行npm run dev，刷新瀏覽器即可訪問

http://manage.leyou.com:9001/#/index/dashboard

 

針對蘋果版的課堂錄像，我們的leyou項目的父工程的pom.xml里添加lombok的依賴坐標。並且還需要IDEA安裝lombok的插件。

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <!--
        子模塊天生繼承父工程，可以使用父工程所有資源。
        子模塊之間天生是沒有任何關系的。

        父子工程直接不用建立關系，繼承關系是先天的，不需要手動建立。
        平級直接的引用叫依賴，依賴不是先天的，依賴是需要后天建立的。
        -->
    <groupId>com.leyou.parent</groupId>
    <artifactId>leyou</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>pom</packaging>
    <modules>
        <module>leyou-registry</module>
        <module>leyou-gateway</module>
        <module>leyou-item</module>
        <module>leyou-common</module>
    </modules>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <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.version>Finchley.SR4</spring-cloud.version>
        <!--DAO持久層的依賴版本控制開始-->
        <mybatis.starter.version>1.3.5</mybatis.starter.version>
        <mapper.starter.version>2.1.5</mapper.starter.version>
        <pageHelper.starter.version>1.2.12</pageHelper.starter.version>
        <mysql.version>5.1.45</mysql.version>
        <!--DAO持久層的依賴版本控制結束-->
        <leyou.latest.version>1.0.0-SNAPSHOT</leyou.latest.version>
        <fastDFS.client.version>1.26.1-RELEASE</fastDFS.client.version>
    </properties>

    <dependencyManagement>
        <dependencies>
            <!-- springCloud -->
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring-cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
            <!-- mybatis啟動器 -->
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>${mybatis.starter.version}</version>
            </dependency>
            <!-- 通用Mapper啟動器 -->
            <dependency>
                <groupId>tk.mybatis</groupId>
                <artifactId>mapper-spring-boot-starter</artifactId>
                <version>${mapper.starter.version}</version>
            </dependency>
            <!-- 分頁助手啟動器 -->
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>${pageHelper.starter.version}</version>
            </dependency>
            <!-- mysql驅動 -->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>${mysql.version}</version>
            </dependency>
            <!--FastDFS客戶端-->
            <dependency>
                <groupId>com.github.tobato</groupId>
                <artifactId>fastdfs-client</artifactId>
                <version>${fastDFS.client.version}</version>
            </dependency>
        </dependencies>
    </dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.6</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

 

 

 

==================================================

參考資料：

請先安裝IntelliJ IDEA 2019.2.3的插件：File-->Settings-->Plugins-->Vue.js

運行switchhosts修改host文件提示please run SwitchHosts as Administrator

 

end