vue手把手教你实现论坛bbs——(一)项目骨架

项目下载地址:https://github.com/SD-Gaming/Vue2.0_CNode.bbs

本文复现该项目过程所做的一些记录,选择一个较为简单的项目入手学习vue,正在前端路上摸爬滚打,存在不足地方还请大家指正,后面会继续慢慢完善.

一.项目主要模块呈现:
包含组件:Header、PostList、SideBar、Article以及UserInfo
(1)主页面

(2)文章和侧边栏页面

(3)用户页面

二.项目实战
1.创建组件PostList.vue并配置路由路径
(参照上一章)
后面在项目过程中讲解一些基本用法,包括v-for、v-if及数据请求部分
2.v-for
参考资料:https://www.cnblogs.com/shibin90/p/10334609.html
(1)页面基本内容

(2)浏览器访问页面效果

(3)使用v-for

(4)放置静态数据

(5)浏览器访问页面效果

3.数据请求
参考资料:
https://www.jianshu.com/p/6b82722e2025
https://www.cnblogs.com/zhangjunkang/p/10147357.html
具体步骤:
(1)安装axios

npm install axios --save 
npm run start 

(2)直接调用axios

(3)查看控制台打印内容

我们已经可以通过提供的接口获取数据,则不需要类似前面那样自己写静态数据,可将api取得的数据赋值给变量posts,如下图:

页面基本内容:
{{}}双括号呈放页面内容

浏览器访问页面效果:

对数据请求部分进行封装,可携带参数:

4.使用v-if添加loading
参考资料:https://cn.vuejs.org/v2/guide/#条件与循环
(1)
显示部分v-if=“true”
隐藏部分v-else

(2)设置变量loading,页面请求数据时显示loading,请求成功时显示数据: