作者 adminz 发布于 2018-04-13 修改于

vue2+vux2单页面应用入门实战:3、远程获取豆瓣数据

在完成前两节之后,本节将增加和优化路由配置,并利用豆瓣开放的API,以ajax方式动态获取数据,用vux的格式显示。完成后的演示图如下:

Thumbnail
模拟手机打开的演示图

 

链接:vue2+vux2单页面应用入门实战:1、环境搭建

vue2+vux2单页面应用入门实战:2、用vux2构建项目首页

一、路由配置

1、引入 axios,修改原型链, axios插件注册为全局函数。(main.js文件第5、第9行)

2、删除原路由相关代码,引入router目录,会默认识别里面的index.js文件(不能是其他文件名 )。(main.js文件第7行)

3、编辑rooter目录中的index.js文件,引入组件,配置路由映射,将路由模式设置为 history 模式,这样可以去掉网址链接中的#号。

这种模式利用 HTML5的 history.pushState API 来完成 URL 跳转,可以使用浏览器的 “转到上一页”、“转到下一页”按钮。

在服务器上部署时,需要配置http服务器:如果 URL 匹配不到任何静态资源,则应该返回这个webapp的 index.html 页面。例如nginx配置如下:

location / {
  try_files $uri $uri/ /index.html;
}

 

4、新建组件 NotFound.vue ,作为404页面。

5、路由设置路径为 “*” 覆盖所有的路由情况,这样在打开一个不存在路径时出现这个404页面。(index.js 文件第28行)

代码见src\main.js文件、src\router\index.js文件

查看代码链接:
https://gitee.com/uxpi/vu2_vux2_study/blob/master/src/main.js
https://gitee.com/uxpi/vu2_vux2_study/blob/master/src/router/index.js
https://gitee.com/uxpi/vu2_vux2_study/blob/master/src/components/NotFound.vue

二、代理配置

配置 config/index.js 文件 proxyTable ,target 的参数就是你要访问的服务器地址,这样就可以使用豆瓣api,本例中所有以 /api 开头的本地路径,都会代理到 https://api.douban.com/v2 这个路径。

!!完成代理配置之后,如果终端已经在运行本项目,一定要重启服务ctrl+c然后再重新运行npm run dev,才会生效。

查看代码链接:
https://gitee.com/uxpi/vu2_vux2_study/blob/master/config/index.js

三、获取豆瓣数据

查看代码链接:
https://gitee.com/uxpi/vu2_vux2_study/blob/master/src/components/FrontList.vue

如本例代码,第19行定义数据并返回给模板,第21行定义 list ,第3行按 vux 的格式输出 list。第29行使用 axios.get 组件方法获取豆瓣数据,按confing/index.js文件中的代理配置,路径 /api/movie/in_theaters 会代理到 https://api.douban.com/v2/movie/in_theaters 这个地址。

第30行用 console.log(response.data) 输出所获取的数据到浏览器调试,查看数据格式,接下来将获取的数据转换成 vux 组件相应的数据格式,第41行将转换后的数据赋给第21行定义的 list。

四、部署到服务器

开发完成并调试无误后,在终端结束调试,使用命令:npm run build ,打包输出,接着把dist目录下的 index.html 和static 目录上传到WEB服务器网站目录下,打开网址就可以访问了。

结束语

至此,已经用vue2+vux2完成了一个简单的webApp,组件化的方式,有远程数据、有路由。但这只是刚刚入门,在此基础上扩展,如果要增加更多的页面、获取更多的数据,那就新建组件再从远程api获取数据,按模板输出。如果要登录那就后台要有登录api,一般采用Auth方式,前端路由拦截判断是否需要登录。总之,必须要有后台程序提供相应的API,不管后台程序什么语言什么环境,只要提供固定格式的api,前端代码就不用修改,实现前后端开发上的分离。

万里长征开始了第一步,加油吧!骚年!