[AppleScript] 纯文本查看 复制代码
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文件代码如下:
[AppleScript] 纯文本查看 复制代码
import http from './public' //引入public文件
// 定义页面加载的方法
export const page_loading = () => {
// 调用public文件中的requestQuickGet方法，发送异步请求
return http.requestQuickGet("http://localhost:8080/category/findAll")
}
3.在当前项目中，Header头部在页面加载时，需要访问后台数据服务器获取数据并动态显示，所以，在Header.vue文件中，调用该方法
[AppleScript] 纯文本查看 复制代码
<!-- 其他部分代码省略... -->
<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.注意，如果这时候运行项目，则无法正常运行，会出现错误
在当前项目根目录下，执行以下命令:
[AppleScript] 纯文本查看 复制代码
npm install --save-dev @gauseen/nuxt-proxy
在nuxt.config.js文件中，添加对应代理规则
/api --> 特定的标识字符串，当请求路径中有这个的时候就进行代理
target --> 目标代理服务，就是要跳转到哪个服务器
ws --> 是否支持 websocket 代理
pathRewrite --> 代理后，把请求路径中的"/api"给替换为""
10.3 修改请求路径 根据上述代理规则规定，只有在请求路径中有/api，才进行代理，所以，需要修改上述cms.js文件中的代码，
修改后如下:
[AppleScript] 纯文本查看 复制代码
import http from './public'
// 页面加载分类信息
export const page_loading = () => {
return http.requestQuickGet("/api/category/findAll")
}
总结 Nuxt.js 是一个基于 Vue.js 的通用应用框架。 如果想掌握Nuxt.js的使用方法，则必须要有以下几点前提：
1.精通js相关知识。
2.熟悉Vue的相关语法。
3.并且要对服务端和客户端的相关概念要有一定的理解。
4.了解Node.js。