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,请求成功时显示数据:

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

vue手把手教你实现论坛bbs——(二)创建组件
创建页面基本组件:包括Header.PostList.SideBar.Article和UserInfo组件. 1.以创建Header组件为例子,主要步骤: a.编写组件页面基本内容在src/comp ...
Vue 手把手教你使用 kindeditor
Vue 手把手教你使用 kindeditor 第一步: npm install kindeditor 第二步:创建富文本组件建立以.vue结尾的单文件 <template><!-- ...
[github 教程]手把手教你最简单的开源项目托管GitHub入门教程_github 教程
[github 教程]手把手教你最简单的开源项目托管GitHub入门教程--简介自从google code关闭了下载服务了之后,GitHub作为了目前最好用的免费开源项目托管站点,众多开源项目都 ...
手把手教你构建一个web前端项目，全网最详细教程！
为什么80%的码农都做不了架构师?>>> 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种:选择现成的项目模板.自己搭建项目骨架. 选择一个现成项目模 ...
vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践
记录了自己的博客在禁用缓存的情况下,从八九秒加载时间到最终985ms的优化实践,开启缓存的情况下能达到138ms的访问速度本人的个人博客采用的是Vue-cli4.1.2 + typescript构建 ...
手把手教你弄一个毕业答辩项目-01
前言不知道大家是不是跟我一样,快到毕业答辩的时候就有些焦虑,可能是因为我是学渣本渣了,老担心自己的项目太low,毕业答辩会被导师diss.不过看了这篇文章之后就不用担心了,本渣教你如何去搞来一个大气 ...
手把手教你启动若依单体项目
目录一.概述二.运行阶段前准备三.运行步骤流程 (1)拉取项目源代码 (2)建立数据库,导入SQL脚本 (3) 修改项目数据库连接密码 (4)启动项目四.项目运行结果一.概述 ...
pycharm remote 远程项目同步本地_手把手教你Pycharm远程连接服务器端项目进行本地开发调试...
以下文章来源于Python进击者 ,作者kuls Python进击者博主Kuls,分享Python爬虫,Python后端等原创技术文章 by:Python进击者 centos7的云服务器上,我该怎么 ...
手把手教你在GitHub上传项目（超详细）
1. GitHub网址注册账号:https://github.com 待更新--

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

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

最新文章

热门文章