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

時間 2019-11-09

標籤 day06 day vuetify 框架使用域名訪問本地項目简体版

原文原文鏈接

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

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

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

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

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

day05-Vue入門學習node

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

day06-使用vue-cli搭建項目：搭建後臺管理系統

0.學習目標webpack

瞭解vue-router使用
瞭解webpack使用
會使用vue-cli搭建項目
使用資料搭建後臺系統
會使用nginx進行反向代理

3.vue-cli

3.1.介紹和安裝

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

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

使用它能快速的構建一個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>