vue仿cnode社区

一、为什么要仿cnode社区？

需要练习vue的相关知识点，比如计算属性、事件绑定、vue-router路由的跳转与监听等，进行一个综合的练习。cnode社区提供开放的api，可以进行前后端分离的开发。只需要利用axios请求数据，处理数据，展示数据即可。在此将遇到的一些问题，做一个梳理。

二、分析

文件结构

main.js　//程序入口文件App.vue　//页面的入口文件（跟组件）router/index.js //路由配置文件components //vue公共组件assets　//资源目录

API相关：

能拿到的数据：API：
１．主题首页get/topicshttps://cnodejs.org/api/v1/topics

参数： page Number页数　 limit Number每页数量　success: true　data: id　 author_id 　tab: share\good\ask\job //分类
content:内容 title: 标题
reply_count/visit_count: 回复/浏览量
author: loginname //名字
avatar_url //头像对应的标签
last_reply_at: 最后的回复时间

２．主题详情:get/topic/:id（也就是我们进入主题详情页的时候，需要传入id）
３．用户get/user/:loginname loginname avatar_url　// create_at score //积分 recent_topics //最近主题

cnode组件分析

Header //头部
PostList //论坛列表
Article //文章(底部带有回复）
SlideBar //进入，文章详情页后，存在侧边栏
userinfo //存在侧边栏
Pagination //页码

三、问题

１．命名路由&命名视图的使用

需求：我们在进入首页的时候，页面整体结构分为两部分，Header以及PostList，但是当我们进入文章详情页或者用户信息页的时候，页面就会变成三部分，Header以及其下方的左侧列表和右侧侧边栏。

这个时候就需要用命名视图来解决这个问题。

<Header></Header>
<div class="main">
 <router-view name="main"></router-view> 
 <router-view name="slidebar"></router-view>
 </div></pre>

２．路由传参

需求：当我们点击首页任何一个文章的时候，需要跳转到相应的文章，我们肯定需要对应文章的ID，这时候就需要传参。分为两步：

第一步：我们肯定在router中需要配置

{
 path: '/user/:userId',
 name:'user'
}

第二步：我们需要给router-link的to属性传递一个带有参数的对象

<router-link :to={name:'user',parmas:{ userId: 123}}>
 User
<router-link>

这时候就可以导航到/user/123

３．axios的使用

４．过滤器的使用：demo

从解析后的数据可以得到：

最近回复时间为"last_reply_at":"2018-10-31T11:02:54.656Z"我们获得的是最后的回复时间，而我们实际需要的是类似”３分钟前“这种形式。那么我们就需要shifang把时间做一个处理，首先转化为毫秒，接下来转化为时间差，进行计算即可。

formatDate的实现

Vue.filter('xxx',(value)=>{
 let lastDate = new Date(value)
 let newDate = app.date
 let time = (Date.parse(newDate)-Date.parse(lastDate))/1000

 if(time<60){
 return '刚刚'
 }else if(time<3600){
 return parseInt(time/60)+'分钟前'
 }else if(time<86488){
 return parseInt(time/3600)+'小时前'
 }else if(time<2678400){
 return parseInt(time/86488)+'天前'
 }else if(time<32140800){
 return parseInt(time/2678400)+'月前'
 }
})

５．生命周期

在这个例子中，需要获取数据，但是在什么时候获取数据呢？

在这里做一个区分：

• beforeCreate 实例初始化之后，数据和时间配置之前，可用于初始化非响应式变量

• created　已将data和methods挂载到vue实例上，可初始化ajax请求

• beforeMount　模板编译完成，但未挂载，无法获取dom

• mounted　组件挂载完成，能直接获取dom

• beforeUpdate

• updated　组件内响应式变量变更时调用

• beforeDestory

• destroyed　组件销毁，状态存储以及内存释放

四、总结

做完整个项目，对vue的实例属性、class的动态绑定，列表渲染、组件注册、自定义事件等知识有了更深的认识，对很多知识还比较模糊，在下一个练习中继续学习～