一个基于Vue和Element-ui的个人博客系统（附完整代码）

于 2018-07-04 13:49:39 发布
阅读量1.5w 收藏 53
点赞数 7
CC 4.0 BY-SA版权
分类专栏： ☛ Vue.js ☛ Element-UI 文章标签： vue firebase axios element-ui 个人博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Mr_JavaScript/article/details/80909246
本项目为一款基于Vue2.0与Element-UI的前端博客系统，利用Google Firebase进行数据存储与读取。实现博客的基本发布、修改、删除及查询等功能。涵盖axios请求、组件间传值等技术。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

简介

        这是一个偏前端的博客项目，其前端是基于Element-UI和Vue2.0开发实现的，后端的实现使用了Google的Firebase作为实时数据库，直接调用它提供的接口来实现数据的读取和存储。（由于项目使用了国外的firebase，所以需要连接VPN才能正常工作。）

        此博客系统实现了基本的博客发布，修改，删除和查询；应用到的vue技术主要有axios请求、父子组件之间的互相传值、自定义事件、过滤器、计算属性、数据绑定等等。总体来说还是一个入门级实践项目，适合vue初学者学习。

源码下载

（完）

博客
Vue3.2单文件组件setup的语法糖总结
05-07 1万+
满满的干货，建议收藏慢慢看，可以当作Vue3.0的学习资料。 setup是Vue3.0后推出的语法糖，并且在Vue3.2版本进行了大更新，像写普通JS一样写vu...
博客
基于Element-UI的组件改造的树形选择器（树形下拉框）
03-18 6万+
前言：由于做项目需要一个树形选择器，项目用的也是element-ui框架，然而它自带的选择器组件没有树形选项，又不想引入其他的框架组件，于是自己利用el-select和el-tree改造了一个，感觉还挺好用的，就封装成了一个组件，如下图：element-ui的el-select组件的选项只能是列表形式：改造后的树形选择器：简介：此树形选择器组件是基于elment-ui框架的e...
博客
js实现无限层级树形数据结构（创新算法）
09-22 4万+
由于做项目的需要，把一个线性数组转成树形数组，在网上查了很多文章，觉得他们写的太复杂了，于是自己写了一个，在折腾了一下午终于把它写出来啦（激动.gif），用两个filter过滤器就搞定了，代码简洁明了，数据结构小白都能看懂。js代码：把扁平数据转成树形数据function setTreeData(source){ let cloneData = JSON.parse(JSON.s...
博客
git如何撤销未push的commit
12-02 5874
撤销commit一般用git reset ，语法如下：git reset [ --mixed | --soft | --hard] []
博客
vue3.0实现前进刷新后退不刷新
07-16 3013
1、通过keep-alive缓存组件；2、组件路由里定义一个变量isKeepAlive来控制组件的缓存；3、通过路由独享守卫根据条件修改缓存变量，选择性缓存组件。
博客
TypeScript的泛型和泛型约束
06-29 951
在使用ts封装一个函数时，由于入参是不固定的，必然参数类型也无法固定，这时就要用到泛型来定义参数类型。泛型可以理解为宽泛的类型，通常用于类和函数。例2. 在函数中使用泛型例3. 接口中使用泛型 例3中的T1和T2泛型添加了默认类型，类似于函数的默认参数。 泛型约束即是对泛型的类型进行约束控制，如限制为object类型或指定接口类型。当在函数里使用泛型参数的属性或者方法时，就需要对泛型进行约束。例2. object约束上面例2的getKeys方法获取一个对象的所有属性
博客
vite如何兼容低版本浏览器
06-23 2万+
vite通过配置@vitejs/plugin-legacy来解决兼容低版本浏览器的问题
博客
Vite打包后的dist不能直接在浏览器打开吗
06-06 4489
先来看看Vite打包后生成的index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
博客
JavaScript洗牌算法
05-17 594
概念洗牌算法即是把一组数组里的元素随机组合生成一个新数组。实现const shuffle = ([...arr]) => { let m = arr.length; while (m) { const i = Math.floor(Math.random() * m--); [arr[m], arr[i]] = [arr[i], arr[m]]; } return arr;}; // 测试const tes
博客
Vue3.0在script setup里定义变量时提示×××is declared but its value is never read.Vetur的解决办法
05-11 2万+
问题重现如下图：问题：根据提示判断问题是，IDE编辑器没法识别到script setup里定义的变量已经在template里被使用。解析：作者阅读Vue3.0的文档得知，新版Vue提供了新的语法检测插件叫Volar，以前使用的vue语法检测插件Vetur已不支持新版的script setup语法。以下为官方文档原文：推荐的 IDE 配置是VSCode+Volar扩展。Volar 为模板表达式、组件 prop，甚至是插槽验证提供了语法高亮和智能提示。我们强烈推荐这种设置，...
博客
taro路由传参正确的接收方式
06-15 2922
扯淡taro路由传参官方文档只说明了怎么传参，但是并没有说明具体怎么去接收参数，它又不像微信小程序那样在onload生命周期里拿到，百度正文
博客
解决uni-file-picker组件在ios点击失效的问题
06-15 2649
从组件源码里找到choose-and-upload-file.js文件，查找chooseAndUploadFile方法，在方法里添加下面代码，保存即可解决。opts.sourceType = ['album','camera']如下图所示：
博客
微信小程序页面如何滚动到底部
03-16 1066
在需要滚动的页面根节点定义一个id="page"<view id="page"> <text>需要滚到的页面</text></view>点击事件触发以下方法wx.createSelectorQuery().select('#page').boundingClientRect(rect => { wx.pageScrollTo({ duration: 500, // 动画时长 scrollTop: re.
博客
一篇文章搞懂CSS3网格布局（Grid）
08-13 1003
<!-- div class="asset-body" --> <h2>一、概述</h2>网格布局（Grid）是最强大的 CSS 布局方案。 <!-- /div --> <!-- di...
博客
js通过match方法和正则表达式截取某两个字符串中间部分的字符
03-13 4026
比如我要从下面base64编码字符串中截取一个文件后缀名，即image/和;之间的字符串，方法如下：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA......代码：let src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA......'let res = src.matc...
博客
基于Vue和Vant-ui开发的移动端周历日期选择器
01-07 4647
该周历日期选择器是在基于Vue的小日历（支持按周切换）的基础上改造而来，对其代码进行优化，并引入了Vant-ui新增了年份和月份的选择、一键返回今日的快捷键功能，以及支持4种常用日期格式的选择。总体来说，该日期选择器适用于中小型移动端web项目，非常好用，现在我把它封装成了一个组件，有需求的同学就拿去用吧，别忘了点赞哦！动图演示：详细介绍和源码，请戳此链接：https://gi...
博客
js实现树形数据转成扁平数据
10-31 9122
利用递归的方法循环树形数组，当遇到有children的对象再次调用递归函数循环children数组，每次循环的数据放入一个提前声明好的数组里，等所有递归函数执行完，这个数组即是想要得到的扁平数据数组。let res = []const fn = (source)=>{ source.forEach(el=>{ res.push(el) e...
博客
js如何修改伪类样式如before或after
07-29 4571
概括通过js创建一个内嵌样式表，并添加需要修改的伪类样式，覆盖原始的伪类样式。介绍html代码<ul>　　<li>apple</li>　　<li>banana</li>　　<li>pear</li></ul>css代码ul li{ list-style: no...
博客
.gitignore忽略规则的匹配语法
06-13 1万+
1、举例说明，掌握这些基本够用了#注释 .gitignore的注释*.txt 忽略所有 .txt 后缀的文件!src.a 忽略除 src.a 外的其他文件/todo 仅忽略项目根目录下的 todo 文件，不包括 src/todobuild/ 忽略 build/目录下的所有文件，过滤整个bu...
博客
Mint-UI的mt-search如何触发事件（确定和取消）
05-23 4248
Mint-ui的官方文档写得是真的简单，简单到遗漏了许多重点，使用文档里关于mt-search的api只介绍了属性的部分，各个调用方法完全没有介绍，让用户自己去探索？官方文档。关于开源框架的使用文档，我接触到的还是Element-UI写得最为简洁明了了，相比于Mint-UI都是同一个爸爸（饿了么）出来的，差距为什么就这么大呢？正文1、确定事件mint-ui使用文档开头里有提到，...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值