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。