Vue:牛刀小试 Vue社区API

前言

学习Vue如果连官方社区的API都没有使用过,那么根本算不上Vue开发者,趁着有空,拿社区的API练习一下,主要是练习vuerouter以及axios两款插件的使用,先上图,后面会介绍遇到的坑

Vue:牛刀小试 Vue社区API_第1张图片
简洁(jian lou)的主页
Vue:牛刀小试 Vue社区API_第2张图片
详情页

Github地址

遇到的问题

  1. 官方社区日期显示的是 XX天以前,这里我留了filter接口,暂时没想到处理的方法,管他呢,不要在意细节
  2. 详情页上面有一排 精华 问答等标签,支持分类选择。返回的JSON里面其实就有tab,get参数也可以选择获取哪些标签,小问题
  3. 详情页的html内容经过处理过,暂时不知道用的什么工具,里面的图片链接用的是社区服务器资源,因此本地会以localhost:8080的地址请求,当然请求不到

开发中的坑

axios

项目用的是经过深度封装的axios(源码在我的另一篇文章《实用主义:Promise让异步回调更加优雅》里有,当然项目里有更详细的)。
先看看官方社区的参数

Vue:牛刀小试 Vue社区API_第3张图片
params.png

最早我是这样调用的

ajax.get('http://www.vue-js.com/api/v1/topics', {limit: 20})
    .then(res => {
      if (res) {
        return res.data;
      }
    })
    .then(data => {
      this.topicList = data;
    })
    .catch(err => {
      console.log(err);
    });

注意这里{limit: 20},

Vue:牛刀小试 Vue社区API_第4张图片
ajax.png

封装的config也是一个对象,但是这样是没有办法响应的。应该加个 params

这样ajax.get('http://www.vue-js.com/api/v1/topics', {params: {limit: 20}})
一定要加一个params标记为config,入门的同学需要特别注意

vue-router

  1. route和router的区别
    router:在实例中是this.$router,指的是vue-router这个对象,通过它来进行导航,比如this.$router.push(),this.$router.repalce()进行编程式导航;
    route: 浏览器当前地址,从中去取params信息
  2. 动态路由匹配
    先看看我的路由表
    Vue:牛刀小试 Vue社区API_第5张图片
    routes.png

    (注意routes是一个数组,别写成对象了)
    根目录显示组件Home,然后通过编程导航进入到子主题
    注意这里的path,'/topic/:id':id表示这是一个params属性,即任何一个匹配到/topic/路径的路由都会显示ItemDetail这个组件,:id是组件用来获取参数的。
    组件中使用this.$route.params获取。最早拼这个路径我是真的直接用字符串拼的
Vue:牛刀小试 Vue社区API_第6张图片
拼接路径.png

我真的就是这么天真硬拼接的,但是路由表仍然能获取到params,但是我觉得太丑。强迫症没办法,改成了

Vue:牛刀小试 Vue社区API_第7张图片
第一次修正.png

通过路径+params获取,但是这样params就获取不到id属性了,为了美观再改

最终.png

注意在注册路由的时候我给这张路由表增加了name属性,通过这样方式传params,相当优雅。这样也能正常使用浏览器的后退(history.go(-1)),这就是动态路由匹配需要注意的地方了,恩,相当优雅(/滑稽)

最后

这个Demo大概就这个样子了。目的在于练习axios和vue-router,完全自己写样式感觉有点傻,实际项目中最好套现成的,推荐Vonic移动端见过最漂亮的方案和ElementUI PC端方案。
题外话:也看过不少同学分享过Vue项目,做的内容也比我精彩很多(我主要是练习一两个插件为主,没想过全部写完)。但是往往丢一个github地址就跑了。CodeReview其实是编写代码中很重要的一个环节,在分享项目的过程中,讲解一下遇到的坑,既方便于后来者避免这些坑,也进一步加深了自己的印象,比如今天遇到的坑,通过写完这篇文章后我绝对不会犯第二次/滑稽

就是这样:)

你可能感兴趣的:(Vue:牛刀小试 Vue社区API)