黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第12天-讲义-搜索前端 Nuxt.js 五 [打印本页]

---

作者: 我是楠楠    时间: 2019-12-25 14:53
标题: 【郑州校区】学成在线-第12天-讲义-搜索前端 Nuxt.js 五

【郑州校区】学成在线-第12天-讲义-搜索前端 Nuxt.js 五

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

[AppleScript] 纯文本查看 复制代码

<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中调用

[AppleScript] 纯文本查看 复制代码

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完成同步调用

[AppleScript] 纯文本查看 复制代码

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内容如下：

[AppleScript] 纯文本查看 复制代码

<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虚拟主机的配置：

[AppleScript] 纯文本查看 复制代码

#静态资源，包括系统所需要的图片，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 http://ucenter.xuecheng

.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，配置如下：

[AppleScript] 纯文本查看 复制代码

#前端门户课程搜索

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配置如下 ：

[AppleScript] 纯文本查看 复制代码

#前端动态门户

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;

} 

其它配置：

[AppleScript] 纯文本查看 复制代码

 #开发环境webpack定时加载此文件

location

^~

/__webpack_hmr {

proxy_pass http://dynamic_portal_server_pool/__webpack_hmr;

}

[AppleScript] 纯文本查看 复制代码

#开发环境nuxt访问_nuxt

location

^~

/_nuxt/ {

proxy_pass http://dynamic_portal_server_pool/_nuxt/;

}

在静态虚拟主机中添加：

[AppleScript] 纯文本查看 复制代码

 #学成网静态资源

server {

listen 91;

server_name localhost;

#分类信息

location /static/category/ {

alias F:/develop/xuecheng/static/category/;

}

...

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2