整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在上一篇文章中，小編介紹了HTML文檔的基本結(jié)構(gòu)，如下圖所示：
HTML文檔結(jié)構(gòu)
為了驗(yàn)證或者是為了更好的掌握文檔的結(jié)構(gòu)，小伙伴們可以在瀏覽器中打開(kāi)任意一個(gè)網(wǎng)頁(yè)（如：百度）查看它們的源代碼，具體操作如下：
打開(kāi)瀏覽器（IE、Chrome、firefox等）；
輸入網(wǎng)址（如：www.baidu.com）；
在頁(yè)面空白處單擊鼠標(biāo)右鍵，在彈出的菜單中選擇<查看源文件>選項(xiàng)打開(kāi)源文件。
HTML語(yǔ)言的頭部元素中包括多種信息，例如標(biāo)題、樣式表定義和腳本等。HTML的頭部元素以<head>為開(kāi)始標(biāo)記，以</head>為結(jié)束標(biāo)記。
語(yǔ)法：
<head>······</head>
說(shuō)明：
頭部標(biāo)記head的作用域?yàn)檎臋n，包括的內(nèi)容通常不會(huì)在界面上直接顯示出來(lái)。
舉例：
<!DOCTYPE html>
<html>
<head>
這是文檔頭部
</head>
<body>
這是文檔內(nèi)容
</body>
</html>
者：hetu666
來(lái)源：CSDN
HTML(HyperText Markup Language) 不是一門編程語(yǔ)言，而是一種用來(lái)告知瀏覽器如何組織頁(yè)面的標(biāo)記語(yǔ)言。
HTML 可復(fù)雜、可簡(jiǎn)單，一切取決于開(kāi)發(fā)者。它由一系列的元素組成，這些元素可以用來(lái)包圍不同部分的內(nèi)容，使其以某種方式呈現(xiàn)或者工作。 一對(duì)標(biāo)簽可以為一段文字或者一張圖片添加超鏈接，將文字設(shè)置為斜體，改變字號(hào)，等等
元素的主要部分有：
1開(kāi)始標(biāo)簽（Opening tag）：包含元素的名稱（本例為 p），被左、右角括號(hào)所包圍。表示元素從這里開(kāi)始或者開(kāi)始起作用 —— 在本例中即段落由此開(kāi)始。
2結(jié)束標(biāo)簽（Closing tag）：與開(kāi)始標(biāo)簽相似，只是其在元素名之前包含了一個(gè)斜杠。這表示著元素的結(jié)尾 —— 在本例中即段落在此結(jié)束。初學(xué)者常常會(huì)犯忘記包含結(jié)束標(biāo)簽的錯(cuò)誤，這可能會(huì)產(chǎn)生一些奇怪的結(jié)果。
3內(nèi)容（Content）：元素的內(nèi)容，本例中就是所輸入的文本本身。
4元素（Element）：開(kāi)始標(biāo)簽、結(jié)束標(biāo)簽與內(nèi)容相結(jié)合，便是一個(gè)完整的元素。
塊級(jí)元素在頁(yè)面中以塊的形式展現(xiàn) —— 相對(duì)于其前面的內(nèi)容它會(huì)出現(xiàn)在新的一行，其后的內(nèi)容也會(huì)被擠到下一行展現(xiàn)。塊級(jí)元素通常用于展示頁(yè)面上結(jié)構(gòu)化的內(nèi)容，例如段落、列表、導(dǎo)航菜單、頁(yè)腳等等。一個(gè)以block形式展現(xiàn)的塊級(jí)元素不會(huì)被嵌套進(jìn)內(nèi)聯(lián)元素中，但可以嵌套在其它塊級(jí)元素中。
<p>第四</p><p>第五</p><p>第六</p>
效果：
一個(gè)屬性必須包含如下內(nèi)容：
1，在元素和屬性之間有個(gè)空格space (如果已經(jīng)有一個(gè)或多個(gè)屬性，就與前一個(gè)屬性之間有一個(gè)空格.)
2屬性后面緊跟著一個(gè)“=”符號(hào).
3，有一個(gè)屬性值,由一對(duì)引號(hào)“ ”引起來(lái).
有時(shí)你會(huì)看到?jīng)]有值的屬性，它是合法的。這些屬性被稱為布爾屬性，他們只能有跟它的屬性名一樣的屬性值。
<!-- 使用disabled屬性來(lái)防止終端用戶輸入文本到輸入框中 --> <input type="text" disabled> <!-- 下面這個(gè)輸入框沒(méi)有disabled屬性，所以用戶可以向其中輸入 --> <input type="text">
在目前為止，本章內(nèi)容所有的屬性都是由雙引號(hào)來(lái)包裹。也許在一些HTML中，你以前也見(jiàn)過(guò)單引號(hào)。這只是風(fēng)格的問(wèn)題，你可以從中選擇一個(gè)你喜歡的。以下兩種情況都可以：
<a >示例站點(diǎn)鏈接</a> <a >示例站點(diǎn)鏈接</a>
但你應(yīng)該注意單引號(hào)和雙引號(hào)不能在一個(gè)屬性值里面混用。下面的語(yǔ)法是錯(cuò)誤的：
<a >示例站點(diǎn)鏈接</a>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的測(cè)試站點(diǎn)</title> </head> <body> <p>這是我的頁(yè)面</p> </body> </html>
1，<!DOCTYPE html>: 聲明文檔類型. 很久以前，早期的HTML(大約1991年2月)，文檔類型聲明類似于鏈接，規(guī)定了HTML頁(yè)面必須遵從的良好規(guī)則，能自動(dòng)檢測(cè)錯(cuò)誤和其他有用的東西。使用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
然而現(xiàn)在沒(méi)有人再這樣寫，需要保證每一個(gè)東西都正常工作已成為歷史。你只需要知道<!DOCTYPE html>是最短的有效的文檔聲明。
2，<html></html>: <html>元素。這個(gè)元素包裹了整個(gè)完整的頁(yè)面，是一個(gè)根元素。
3，<head></head>: <head>元素. 這個(gè)元素是一個(gè)容器，它包含了所有你想包含在HTML頁(yè)面中但不想在HTML頁(yè)面中顯示的內(nèi)容。這些內(nèi)容包括你想在搜索結(jié)果中出現(xiàn)的關(guān)鍵字和頁(yè)面描述，CSS樣式，字符集聲明等等。以后的章節(jié)能學(xué)到更多關(guān)于<head>元素的內(nèi)容。
4.<meta charset="utf-8">: 這個(gè)元素設(shè)置文檔使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字。基本上他能識(shí)別你放上去的所有文本內(nèi)容。毫無(wú)疑問(wèn)要使用它，并且它能在以后避免很多其他問(wèn)題。
5.<title></title>: 設(shè)置頁(yè)面標(biāo)題，出現(xiàn)在瀏覽器標(biāo)簽上，當(dāng)你標(biāo)記/收藏頁(yè)面時(shí)它可用來(lái)描述頁(yè)面。
6.<body></body>: <body>元素。 包含了你訪問(wèn)頁(yè)面時(shí)所有顯示在頁(yè)面上的內(nèi)容，文本，圖片，音頻，游戲等等。
代碼中包含的空格是沒(méi)有必要的；下面的兩個(gè)代碼片段是等價(jià)的：
<p>狗 狗 很 呆 萌。</p> <p>狗 狗 很 呆 萌。</p>
渲染這些代碼的時(shí)候，HTML解釋器會(huì)將連續(xù)出現(xiàn)的空白字符減少為一個(gè)單獨(dú)的空格符。
那么為什么我們會(huì)使用那么多的空白呢? 可讀性 —— 如果你的代碼被很好地進(jìn)行格式化，那么就很容易理解你的代碼。
為了將一段HTML中的內(nèi)容置為注釋，你需要將其用特殊的記號(hào)<!--和-->包括起來(lái)， 比如：
<p>我在注釋外！</p> <!-- <p>我在注釋內(nèi)！</p> -->
HTML 頭部是包含在<head> 元素里面的內(nèi)容。不像 <body>元素的內(nèi)容會(huì)顯示在瀏覽器中，head 里面的內(nèi)容不會(huì)在瀏覽器中顯示，它的作用是包含一些頁(yè)面的元數(shù)據(jù)。
元數(shù)據(jù)就是描述數(shù)據(jù)的數(shù)據(jù)，而HTML有一個(gè)“官方的”方式來(lái)為一個(gè)文檔添加元數(shù)據(jù)—— <meta> 。有很多不同種類的 <meta> 可以被包含進(jìn)你的頁(yè)面的<head>元素，比如。
指定字符的編碼
<meta charset="utf-8">
這個(gè)元素簡(jiǎn)單的指定了文檔的字符編碼 —— 在這個(gè)文檔中被允許使用的字符集。 utf-8 是一個(gè)通用的字符集，它包含了任何人類語(yǔ)言中的大部分的字符。
添加作者和描述
CSS和JavaScript
如今，幾乎你使用的所有網(wǎng)站都會(huì)使用css讓網(wǎng)頁(yè)更加炫酷，使用js讓網(wǎng)頁(yè)有交互功能，比如視頻播放器，地圖，游戲以及更多功能。這些應(yīng)用在網(wǎng)頁(yè)中很常見(jiàn)，它們分別使用<link>元素以及 <script> 元素。
<link>元素經(jīng)常位于文檔的頭部。這個(gè)link元素有2個(gè)屬性，rel="stylesheet"表明這是文檔的樣式表，而 href包含了樣式表文件的路徑：
<link rel="stylesheet" href="my-css-file.css">
<script>部分沒(méi)必要非要放在文檔頭部；實(shí)際上，把它放在文檔的尾部（在 </body>標(biāo)簽之前）是一個(gè)更好的選擇，這樣可以確保在加載腳本之前瀏覽器已經(jīng)解析了HTML內(nèi)容（如果腳本加載某個(gè)不存在的元素，瀏覽器會(huì)報(bào)錯(cuò)）。
<script src="my-js-file.js"></script>
在HTML中，每個(gè)段落是通過(guò)<p>元素標(biāo)簽進(jìn)行定義的, 比如下面這樣：
<p>我是一個(gè)段落，千真萬(wàn)確。</p>
每個(gè)標(biāo)題（Heading）是通過(guò)“標(biāo)題標(biāo)簽”進(jìn)行定義的：
<h1>我是文章的標(biāo)題</h1>
這里有六個(gè)標(biāo)題元素標(biāo)簽 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每個(gè)元素代表文檔中不同級(jí)別的內(nèi)容; <h1> 表示主標(biāo)題（the main heading），<h2> 表示二級(jí)子標(biāo)題（subheadings），<h3> 表示三級(jí)子標(biāo)題（sub-subheadings），等等。
<ol> <li>先用蛋白一個(gè)、鹽半茶匙及淀粉兩大匙攪拌均勻，調(diào)成“腌料”，雞胸肉切成約一厘米見(jiàn)方的碎丁并用“腌料”攪拌均勻，腌漬半小時(shí)。</li> <li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調(diào)拌均勻，調(diào)成“綜合調(diào)味料”。</li> <li>雞丁腌好以后，色拉油下鍋燒熱，先將雞丁倒入鍋內(nèi)，用大火快炸半分鐘，炸到變色之后，撈出來(lái)瀝干油汁備用。</li> <li>在鍋里留下約兩大匙油，燒熱后將切好的干辣椒下鍋，用小火炒香后，再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋，用大火快炒片刻后，再倒入“綜合調(diào)味料”繼續(xù)快炒。 <ul> <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。</li> <li>如果你在北方，可加入黃瓜丁、胡蘿卜丁和花生米，翻炒后起鍋。</li> </ul> </li> </ol>
<i> 被用來(lái)傳達(dá)傳統(tǒng)上用斜體表達(dá)的意義：外國(guó)文字，分類名稱，技術(shù)術(shù)語(yǔ)，一種思想……
<b> 被用來(lái)傳達(dá)傳統(tǒng)上用粗體表達(dá)的意義：關(guān)鍵字，產(chǎn)品名稱，引導(dǎo)句……
<u> 被用來(lái)傳達(dá)傳統(tǒng)上用下劃線表達(dá)的意義：專有名詞，拼寫錯(cuò)誤……
<strong>強(qiáng)調(diào)重要的詞
通過(guò)將文本轉(zhuǎn)換為<a>元素內(nèi)的鏈接來(lái)創(chuàng)建基本鏈接， 給它一個(gè)href屬性（也稱為目標(biāo)），它將包含您希望鏈接指向的網(wǎng)址。
<p>I'm creating a link to <a href="https://www.***.com/">***</a>. </p>
使用title屬性添加支持信息
<p>I'm creating a link to <a title="這是百度">百度</a>. </p>
I'm creating a link to 百度.
塊級(jí)鏈接
可以將一些內(nèi)容轉(zhuǎn)換為鏈接，甚至是塊級(jí)元素。例如你想要將一個(gè)圖像轉(zhuǎn)換為鏈接，你只需把圖像元素放到<a></a>標(biāo)簽中間。
文檔片段
超鏈接除了可以鏈接到文檔外，也可以鏈接到HTML文檔的特定部分（被稱為文檔片段）。要做到這一點(diǎn)，你必須首先給要鏈接到的元素分配一個(gè)id屬性。例如，如果你想鏈接到一個(gè)特定的標(biāo)題，可以這樣做：
<h2 id="Mailing_address">Mailing address</h2>
然后鏈接到那個(gè)特定的id，可以在URL的結(jié)尾使用一個(gè)哈希符號(hào)（#）指向它，例如：
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
你甚至可以在同一份文檔下，通過(guò)鏈接文檔片段，來(lái)鏈接到同一份文檔的另一部分：
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>增加學(xué)生</title> </head> <body> <form method="post" action="/community/alpha/student"> <p> 姓名：<input type="text" name="name"> </p> <p> 年齡：<input type="text" name="age"> </p> <p> <input type="submit" value="保存"> </p> </form> </body> </html>
//post
@RequestMapping(path = "/student",method = RequestMethod.POST)
@ResponseBody
public String saveStudent(String name,int age){
System.out.println(name);
System.out.println(age);
return "success";
}
大部分用來(lái)定義表單小部件的元素都有一些他們自己的屬性。然而，在所有表單元素中都有一組通用屬性，它們可以對(duì)這些小部件進(jìn)行控制。下面是這些通用屬性的列表:
密碼框
通過(guò)設(shè)置type屬性值為password來(lái)設(shè)置該類型框：
<input type="password" id="pwd" name="pwd">
搜索框
通過(guò)設(shè)置 type屬性值為 search 來(lái)設(shè)置該類型框：
<input type="search" id="search" name="search">
電話號(hào)碼欄：
通過(guò) type屬性的 tel 值設(shè)置該類型框：
<input type="tel" id="tel" name="tel">
URL 欄
通過(guò)type屬性的url 值設(shè)置該類型框：
<input type="url" id="url" name="url">
多行文本框
多行文本框?qū)Ｖ甘褂?lt;textarea>元素，而不是使用<input>元素。
<textarea cols="30" rows="10"></textarea>
在HTML表單中，有三種按鈕：
Submit
將表單數(shù)據(jù)發(fā)送到服務(wù)器。對(duì)于<button>元素, 省略 type 屬性 (或是一個(gè)無(wú)效的 type 值) 的結(jié)果就是一個(gè)提交按鈕.
Reset
將所有表單小部件重新設(shè)置為它們的默認(rèn)值。
Anonymous
沒(méi)有自動(dòng)生效的按鈕，但是可以使用JavaScript代碼進(jìn)行定制。
每次向服務(wù)器發(fā)送數(shù)據(jù)時(shí)，都需要考慮安全性。到目前為止，HTML表單是最常見(jiàn)的攻擊路徑(可能發(fā)生攻擊的地方)。這些問(wèn)題從來(lái)都不是來(lái)自HTML表單本身，它們來(lái)自于服務(wù)器如何處理數(shù)據(jù)。
根據(jù)你所做的事情，你會(huì)遇到一些非常有名的安全問(wèn)題：
跨站腳本(XSS)和跨站點(diǎn)請(qǐng)求偽造(CSRF)是常見(jiàn)的攻擊類型，它們發(fā)生在當(dāng)您將用戶發(fā)送的數(shù)據(jù)顯示給這個(gè)用戶或另一個(gè)用戶時(shí)。
XSS允許攻擊者將客戶端腳本注入到其他用戶查看的Web頁(yè)面中。攻擊者可以使用跨站點(diǎn)腳本攻擊的漏洞來(lái)繞過(guò)諸如同源策略之類的訪問(wèn)控制。這些攻擊的影響可能從一個(gè)小麻煩到一個(gè)重大的安全風(fēng)險(xiǎn)。
CSRF攻擊類似于XSS攻擊，因?yàn)樗鼈円韵嗤姆绞介_(kāi)始攻擊——向Web頁(yè)面中注入客戶端腳本——但它們的目標(biāo)是不同的。CSRF攻擊者試圖將權(quán)限升級(jí)到特權(quán)用戶(比如站點(diǎn)管理員)的級(jí)別，以執(zhí)行他們不應(yīng)該執(zhí)行的操作(例如，將數(shù)據(jù)發(fā)送給一個(gè)不受信任的用戶)。
XSS攻擊利用用戶對(duì)web站點(diǎn)的信任，而CSRF攻擊則利用網(wǎng)站對(duì)其用戶的信任。
為了防止這些攻擊，您應(yīng)該始終檢查用戶發(fā)送給服務(wù)器的數(shù)據(jù)(如果需要顯示)，盡量不要顯示用戶提供的HTML內(nèi)容。相反，您應(yīng)該對(duì)用戶提供的數(shù)據(jù)進(jìn)行處理，這樣您就不會(huì)逐字地顯示它。當(dāng)今市場(chǎng)上幾乎所有的框架都實(shí)現(xiàn)了一個(gè)最小的過(guò)濾器，它可以從任何用戶發(fā)送的數(shù)據(jù)中刪除HTML<script>、<iframe> 和<object>元素。這有助于降低風(fēng)險(xiǎn)，但并不一定會(huì)消除風(fēng)險(xiǎn)。
SQL 注入是一種試圖在目標(biāo)web站點(diǎn)使用的數(shù)據(jù)庫(kù)上執(zhí)行操作的攻擊類型。這通常包括發(fā)送一個(gè)SQL請(qǐng)求，希望服務(wù)器能夠執(zhí)行它（通常發(fā)生在應(yīng)用服務(wù)器試圖存儲(chǔ)由用戶發(fā)送的數(shù)據(jù)時(shí)）。這實(shí)際上是攻擊網(wǎng)站的主要途徑之一。
其后果可能是可怕的，從數(shù)據(jù)丟失到通過(guò)使用特權(quán)升級(jí)控制整個(gè)網(wǎng)站基礎(chǔ)設(shè)施的攻擊。這是一個(gè)非常嚴(yán)重的威脅，您永遠(yuǎn)不應(yīng)該存儲(chǔ)用戶發(fā)送的數(shù)據(jù)，而不執(zhí)行一些清理工作(例如，在php/mysql基礎(chǔ)設(shè)施上使用mysql_real_escape_string()
這種類型的攻擊出現(xiàn)在當(dāng)您的應(yīng)用程序基于表單上用戶的數(shù)據(jù)輸入構(gòu)建HTTP頭部或電子郵件時(shí)。這些不會(huì)直接損害您的服務(wù)器或影響您的用戶，但它們會(huì)引發(fā)一個(gè)更深入的問(wèn)題，例如會(huì)話劫持或網(wǎng)絡(luò)釣魚(yú)攻擊。
這些攻擊大多是無(wú)聲的，并且可以將您的服務(wù)器變成僵尸。
偏執(zhí):永遠(yuǎn)不要相信你的用戶
那么，你如何應(yīng)對(duì)這些威脅呢?這是一個(gè)遠(yuǎn)遠(yuǎn)超出本指南的主題，不過(guò)有一些規(guī)則需要牢記。最重要的原則是:永遠(yuǎn)不要相信你的用戶，包括你自己；即使是一個(gè)值得信賴的用戶也可能被劫持。
所有到達(dá)服務(wù)器的數(shù)據(jù)都必須經(jīng)過(guò)檢查和消毒。總是這樣。沒(méi)有例外。
遠(yuǎn)離有潛在危險(xiǎn)的字符轉(zhuǎn)義。應(yīng)該如何謹(jǐn)慎使用的特定字符取決于所使用的數(shù)據(jù)的上下文和所使用的服務(wù)器平臺(tái)，但是所有的服務(wù)器端語(yǔ)言都有相應(yīng)的功能。
限制輸入的數(shù)據(jù)量，只允許有必要的數(shù)據(jù)。
沙箱上傳文件(將它們存儲(chǔ)在不同的服務(wù)器上，只允許通過(guò)不同的子域訪問(wèn)文件，或者通過(guò)完全不同的域名訪問(wèn)文件更好)。
最后，我自己是一名從事了多年開(kāi)發(fā)的JAVA老程序員，辭職目前在做自己的java私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的java學(xué)習(xí)干貨，可以送給每一位喜歡java的小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：交流，即可免費(fèi)獲取。
上流行的解決方案是將assetsPublicPath: '/'改成'./'，下面說(shuō)一下這個(gè)解決方案的弊端：
通常頁(yè)面空白的問(wèn)題出現(xiàn)大多數(shù)是由于Spring Boot端配置了server.servlet.context-path，上下文改變了css, js等文件的訪問(wèn)路徑，文件無(wú)法加載導(dǎo)致index.html顯示空白。'/'改成'./'是將絕對(duì)路徑變?yōu)橄鄬?duì)路徑，可以動(dòng)態(tài)適應(yīng)Spring Boot端上下文的改變，這是為什么這個(gè)解決方案起作用的原因。
Vue項(xiàng)目部署在Spring Boot出現(xiàn)的另一個(gè)常見(jiàn)問(wèn)題是當(dāng)刷新瀏覽器的時(shí)候出現(xiàn)white label, 也就是404錯(cuò)誤，解決的方案基本是把error page配置成為Vue的index.html。
這兩個(gè)解決方案有沖突的地方，當(dāng)router出現(xiàn)子路徑的時(shí)候刷新瀏覽器，error page會(huì)指向Vue的index.html頁(yè)面，此時(shí)頁(yè)面中訪問(wèn)css,js文件的路徑是相對(duì)路徑，也就是上下文路徑+router子路徑，這將導(dǎo)致css,js再次無(wú)法正常加載，這就是相對(duì)路徑的弊端。
由于router會(huì)出現(xiàn)子路徑，因此必須保證assetsPublicPath為絕對(duì)路徑，下面講一下保持絕對(duì)路徑的解決方案：
1 假設(shè)Spring Boot端配置server.servlet.context-path： api, 對(duì)應(yīng)Vue的/config/index.js中assetsPublicPath: '/'改成 '/api/'
2 router/index.js中配置base: '/api/', 這是保證瀏覽器刷新時(shí)上下文參數(shù)和router跳轉(zhuǎn)路徑一致。
3 對(duì)于Ajax請(qǐng)求需要配置baseURL, 如果使用Axios, 可以采用如下方法在main.js中配置
// http request 攔截器
Axios.interceptors.request.use(
config => {
if (localStorage.getItem('id_token')) {
config.headers.Authorization = localStorage.getItem('id_token')
}
config.baseURL = '/api'
return config
},
err => {
return Promise.reject(err)
})
4 另外需要注意的一點(diǎn)，按照Spring Boot默認(rèn)配置， 在Vue端/config/index.js中assetsSubDirectory: 'static'要改變?yōu)槠渌址热纾?content', 'vue', 'api'等等。
5 試過(guò)將assetsSubDirectory配置為空，它和另一個(gè)css圖片加載的方案有沖突，圖片加載解決方案是在/build/util.js中加一行配置
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
結(jié)尾附上Spring Boot端將error page指向Vue的index.html代碼：
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.web.server.ConfigurableWebServerFactory;
import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.WebServerFactoryCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpStatus;
@Configuration
public class ServletConfig {
private static final Logger logger = LoggerFactory.getLogger(ServletConfig.class);
@Bean
public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
logger.info("come to 404 error page");
return factory -> {
ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
factory.addErrorPages(error404Page);
};
}
}
對(duì)前端全棧工程師感興趣的同學(xué)關(guān)注我的頭條號(hào)，并在后臺(tái)私信發(fā)送關(guān)鍵字：“前端”即可獲取免費(fèi)的前端全棧工程師學(xué)習(xí)資料
知識(shí)體系已整理好，歡迎免費(fèi)領(lǐng)取。還有面試視頻分享可以免費(fèi)獲取。關(guān)注我，可以獲得沒(méi)有的架構(gòu)經(jīng)驗(yàn)哦！！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
