8.界面優化
8.1 優化首頁
我們發現，在項目啟動後，頁面的頭部和尾部已經能正常顯示，但頁面中間的文字，不是我們想要的。 如果想修改這裡的文字或圖檔，則可以在項目根目錄下的pages目錄中，修改index.vue，因為目前項目預設通路的就是這個檔案。
<template>
<section class="container">
<div>
<app-logo/>
<h1 class="title">
黑馬旅遊網
</h1>
<h2 class="subtitle">
你最值得信賴的旅遊指導
</h2>
<div class="links">
<a
href="http://www.itcast.cn/" target="_blank" rel="external nofollow"
target="_blank"
class="button--green">傳智播客</a>
<a
href="http://www.itheima.com/" target="_blank" rel="external nofollow"
target="_blank"
class="button--green">黑馬程式員</a>
</div>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
export default {
components: {
AppLogo
}
}
</script>
<!-- css樣式，可以根據自己選擇進行調整 -->
<style>
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: "Quicksand"，"Source Sans Pro"，-apple-system，BlinkMacSystemFont，"Segoe UI"，Roboto，"Helvetica Neue"，Arial，sans-serif; /* 1 */
display: block;
font-weight: 300;
font-size: 70px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 20px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
修改後，效果如圖所示
8.2 全局頁面配置
如果修改單獨的頁面，可以在pages目錄中找到對應頁面進行修改。如果想修改全局的頁面配置，可以在項目根目錄下的nuxt.config.js檔案中進行修改，比如全局的預設title。
9.異步加載分類資料 除了以上的頁面需要修改之外，我們在首頁中，還需要去異步通路背景資料伺服器，然後根據傳回資料，動态顯示頁面上的分類資訊。
9.1 準備背景資料伺服器 背景資料伺服器可以使用任意語言搭建，要求能傳回json資料即可。背景資料伺服器如何搭建，在這裡就省略了，(我使用Java搭建的背景資料伺服器，并且已經啟動)： 通路路徑: http://localhost:8080/category/findAll 傳回資料:
[
{
"cid": 1，
"cname": "門票"
}，
{
"cid": 2，
"cname": "酒店"
}，
{
"cid": 3，
"cname": "香港車票"
}，
{
"cid": 4，
"cname": "出境遊"
}，
{
"cid": 5，
"cname": "國内遊"
}，
{
"cid": 6，
"cname": "港澳遊"
}，
{
"cid": 7，
"cname": "抱團定制"
}，
{
"cid": 8，
"cname": "全球自由行"
}
]
9.2 nuxt.js通路背景資料伺服器
- 在根目錄下的assets中，建立public.js檔案，該檔案是一個"工具類"，該工具類中，通過 "axios"技術，定義了多個異步發送請求的方法。 public.js檔案代碼如下:
import axios from 'axios'
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www=form-urlencoded'
export default {
//get請求
requestGet (url，params = {}) {
return new Promise((resolve，reject) => {
axios.get(url，params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}，
//get請求不帶參數
requestQuickGet (url) {
return new Promise((resolve，reject) => {
axios.get(url).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}，
//post請求
requestPostForm (url，params = {}) {
return new Promise((resolve，reject) => {
axios.post(url，params，{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'，
}，
}
).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}，
//post請求
requestPost (url，params = {}) {
return new Promise((resolve，reject) => {
axios.post(url，params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}，
//put請求
requestPut (url，params = {}) {
return new Promise((resolve，reject) => {
axios.put(url，params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}，
//delete請求
requestDelete (url，params = {}) {
return new Promise((resolve，reject) => {
axios.delete(url，params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}
}
2.在根目錄的assets中，建立cms.js檔案
cms.js檔案代碼如下:
import http from './public' //引入public檔案
// 定義頁面加載的方法
export const page_loading = () => {
// 調用public檔案中的requestQuickGet方法，發送異步請求
return http.requestQuickGet("http://localhost:8080/category/findAll")
}
3.在目前項目中，Header頭部在頁面加載時，需要通路背景資料伺服器擷取資料并動态顯示，是以，在Header.vue檔案中，調用該方法
<!-- 其他部分代碼省略... -->
<script>
// 導入cms.js檔案中的所有方法
import * as loadApi from './../assets/cms';
export default {
name: "Header"，
data(){
return {
category_list:{}
}
}，
head: {
link: [
{rel: 'stylesheet'，href: '/css/common.css'}，
{rel: 'stylesheet'，href: '/css/bootstrap.min.css'}，
]
}，
methods:{
// 定義findAll方法
findAll: function () {
// 調用cms.js檔案中的page_loading方法，發送請求，并把傳回值交給res
loadApi.page_loading().then((res)=>{
// 把res中的傳回值，指派給上邊data()中的category_list
this.category_list = res;
});
}
}，
// 頁面被加載時，調用自己定義的findAll方法
created(){
this.findAll();
}
}
</script>
3.這時，data()中的category_list已經有資料了，那麼我們就可以在頁面的html部分處，周遊并顯示這部分資料
4.因為該異步請求使用的是"axios"技術，是以，目前項目需要"axios"的支援，需要在package.json中配置axios的支援 持
5.注意，如果這時候運作項目，則無法正常運作，會出現錯誤
原因：浏覽器的同源政策不允許跨域通路。解決方案: 采用代了解決 。
10.跨域請求 10.1 安裝 @gauseen/nuxt-proxy 依賴資源
在目前項目根目錄下，執行以下指令:
npm install --save-dev @gauseen/nuxt-proxy
10.2 配置代理
在nuxt.config.js檔案中，添加對應代理規則
/api --> 特定的辨別字元串，當請求路徑中有這個的時候就進行代理
target --> 目标代理服務，就是要跳轉到哪個伺服器
ws --> 是否支援 websocket 代理
pathRewrite --> 代理後，把請求路徑中的"/api"給替換為""
10.3 修改請求路徑
根據上述代理規則規定，隻有在請求路徑中有/api，才進行代理，是以，需要修改上述cms.js檔案中的代碼，
修改後如下:
import http from './public'
// 頁面加載分類資訊
export const page_loading = () => {
return http.requestQuickGet("/api/category/findAll")
}
10.4 啟動項目
總結
Nuxt.js 是一個基于 Vue.js 的通用應用架構。 如果想掌握Nuxt.js的使用方法，則必須要有以下幾點前提：
1.精通js相關知識。
2.熟悉Vue的相關文法。
3.并且要對服務端和用戶端的相關概念要有一定的了解。
4.了解Node.js。