学成在线-第12天-讲义-搜索前端 Nuxt.js 五

3.6.1 asyncData 方法 
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法， asyncData 方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData 方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。
注意：由于 asyncData 方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
例子： 
在上边例子中的user/_id.vue中添加，页面代码如下： 

<template>
<div>
修改用户信息{{id}},名称：{{name}}
</div>
</template>
<script>
export default{
layout:
'
test
'
,
//根据id查询用户信息
asyncData(){
console.log(
"
async方法
"
)
return {
name:
'
黑马程序员
'
}
},
data(){
return {
id:
''
}
},
mounted(){
this.id
=
this.
$route.
params.id;
}
}
</script>
<style>
</style>

此方法在服务端被执行，观察服务端控制台打印输出“async方法”。
此方法返回data模型数据，在服务端被渲染，最后响应给前端，刷新此页面查看页面源代码可以看到name模型数据已在页面源代码中显示。
3.6.2 async /await方法 
使用async 和 await配合promise也可以实现同步调用，nuxt.js中使用async/await实现同步调用效果。
1、先测试异步调用，增加a、b两个方法，并在mounted中调用

methods:{
a(){
return new Promise(function(resolve,reject){
setTimeout(function () {
resolve(1)
},2000)
})
},
b(){
return new Promise(function(resolve,reject){
setTimeout(function () {
resolve(2)
},1000)
})
}
},
mounted(){
this.a()
.then(res
=
>{
alert(res)
console.log(res)
})
this.b()
.then(res
=
>{
alert(res)
console.log(res)
})
}

观察客户端，并没有按照方法执行的顺序输出，使用Promise实现了异步调用。
2、使用async/await完成同步调用

async asyncData({ store, route }) {
console.log(
"
async方法
"
)
var a
=
await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(
"
1
"
)
resolve(1)
},2000)
});
var a
=
await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(
"
2
"
)
resolve(2)
},1000)
});
return {
name:
'
黑马程序员
'
}
},

观察服务端控制台发现是按照a、b方法的调用顺序输出1、2，实现了使用async/await完成同步调用。 
3 搜索前端开发 
3.1 搜索页面 
3.1.1 需求分析 

 
上图是课程搜索前端的界面，用户通过前端向服务端发起搜索请求，搜索功能包括： 
1、界面默认查询所有课程，并分页显示 
2、通过一级分类和二分类搜索课程，选择一级分类后将显示下属的二级分类
3、通过关键字搜索课程 
4、通过课程等级搜索课程 
3.1.2 页面布局 
nuxt.js将/layout/default.vue作为所有页面的默认布局，通常布局包括：页头、内容区、页尾
default.vue内容如下： 
 

<template>
<div>
<Header />
<nuxt/>
<Footer />
</div>
</template>
<script>
import Footer from
'
../components/Footer.vue
'
import Header from
'
../components/Header.vue
'
export default {
components: {
Header,
Footer
}
}
</script>
<style>
</style>

3.1.3 Nginx代理配置 
搜索页面中以/static开头的静态资源通过nginx解析，如下： 
/static/plugins：指向门户目录下的plugins目录。 
/static/css：指向门户目录下的的css目录 
修改Nginx中www.xuecheng.com虚拟主机的配置： 

#静态资源，包括系统所需要的图片，js、css等静态资源
location /static/img/ {
alias F:/develop/xc_portal_static/img/;
 }
location /static/css/ {
alias F:/develop/xc_portal_static/css/;
}
location /static/js/ {
alias F:/develop/xc_portal_static/js/;
}
location /static/plugins/ {
alias F:/develop/xc_portal_static/plugins/;
add_header Access
‐
Control
‐
Allow
‐
Origin [url]http://ucenter.xuecheng[/url]
.com;
add_header Access
‐
Control
‐
Allow
‐
Credentials true;
add_header Access
‐
Control
‐
Allow
‐
Methods GET;
}

配置搜索Url，下图是Nginx搜索转发流程图：

 
用户请求/course/search时Nginx将请求转发到nuxt.js服务，nginx在转发时根据每台nuxt服务的负载情况进行转发，实现负载均衡。
本教程开发环境Nuxt.js服务和www.xuecheng.com虚拟机主在同一台计算机，使用同一个nginx，配置如下：
 

#前端门户课程搜索
location
^~
/course/search {
proxy_pass http://dynamic_portal_server_pool;
}
#后端搜索服务
location /openapi/search/ {
proxy_pass http://search_server_pool/search/;
}
#分类信息
location /static/category/ {
proxy_pass http://static_server_pool;
}

dynamic_portal_server_pool配置如下 ： 

#前端动态门户
upstream dynamic_portal_server_pool{
server 127.0.0.1:10000 weight
=10;
}
#后台搜索（公开api）
upstream search_server_pool{
server 127.0.0.1:40100 weight
=10;
}

其它配置：

#开发环境webpack定时加载此文件
location
^~
/__webpack_hmr {
proxy_pass http://dynamic_portal_server_pool/__webpack_hmr;
}

#开发环境nuxt访问_nuxt
location
^~
/_nuxt/ {
proxy_pass http://dynamic_portal_server_pool/_nuxt/;
}

在静态虚拟主机中添加：

#学成网静态资源
server {
listen 91;
server_name localhost;
#分类信息
location /static/category/ {
alias F:/develop/xuecheng/static/category/;
}
...