资讯专栏INFORMATION COLUMN

vue练习之vue+cnode api

chaos_G / 1833人阅读

摘要:最近使用社区提供的做了简单练习项目地址预览地址正好学会如何把项目部署到使用做简单动画效果,解析文本只做了简单的几个功能,所以没有用到,感觉小项目其实用不多。主要页面文件采用获取提交数据在先初始化获取帖子列表信息填充帖子列表

最近使用vue+cnode社区提供的api做了简单练习
项目地址:https://github.com/joyhb/vueNode
预览地址:https://joyhb.github.io/vueNo...
正好学会如何把项目部署到github

使用vue+vue-router+es6+animate.css+less+marked+cnode-api

animate.css做简单动画效果,marked解析markdown文本

只做了简单的几个功能,所以没有用到vuex,感觉小项目其实用vuex不多。
主要页面文件:
index.vue
footer.vue
header.vue
loading.vue
toast.vue
list.vue
user.vue
topic.vue
login.vue

采用axios获取提交数据:

在data先初始化list:[]
// 获取帖子列表信息
getList: function (index, page, limit) {
  axios.get(config.ajaxUrl + "/api/v1/topics", {
    params: {
      page: this.page || 1,
      tab: index,
      limit: this.limit || 20
    }
  }).then((response) => {
    this.list = []
    this.loading = false
    const data = response.data
    // 填充帖子列表
    data.data.map((item) => this.list.push(item))
  }).catch((error) => {
    console.log(error)
  })
},

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91747.html

相关文章

  • vue2习之仿美团外卖开发(一)

    摘要:的双向数据绑定方法我觉得很巧妙我是尤雨溪脑残粉为什么选美团外卖美团外卖项目估计差不多能够设计到大部分技术点,不包括服务端渲染作为练习够用了。平日里我点外卖一直用美团。用多了可能也比较了解美团外卖吧。 前言 很多初学者尤其是像我这样的公司有且只有一个前端的时候,硬着头皮去学习一门新框架,周围无人帮忙,平日里遇到问题只能求助于思否,百度,google。点击我的个人头像去看我的提问你们就知道...

    X1nFLY 评论0 收藏0
  • 基于cnode社区API重写的Vue2.0项目(vuevue-route,vuex,axios,w

    摘要:项目地址前言该项目是采用社区提供的,基于重写,在此特别感谢然后也要感谢的项目给予我的启发。 项目地址 https://github.com/LeeWgg/CNode DEMO http://www.leewgg.cn/projects... 前言 该项目是采用Cnode社区提供的api,基于vue2.0重写,在此特别感谢!!!然后也要感谢 https://github.com/shin...

    YPHP 评论0 收藏0
  • 基于vue的nuxt框架cnode社区服务端渲染

    摘要:基于的框架仿的社区服务端渲染,主要是为了优化以及首屏加载速度线上地址地址技术栈目录结构配置文件封装工具函数滚动条操作函数静态资源实例化之前执行的插件注册全局组件注册全局服务端渲染时保存供服务端请求时的获取页面级组件首页登录页未读消 nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnod...

    tainzhi 评论0 收藏0

发表评论

0条评论

chaos_G

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<