vue+node+mongodb前后端分离博客系统
感悟
历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前后端分离,对于博客类系统seo肯定很重要,索性就自己动手写了这个项目,其中也遇到了不少问题, 因为基于服务端渲染的项目不多,自己能力也有限,所以用了好长时间。这里特别感谢@lincenying,提供了登录功能的解决思路,也是我在开发过程中遇到最难解决的问题,本项目基于vue-hackernews-2.0开发,支持PWA(需升级为https)
演示地址
开发环境和技术栈
- 操作系统:windows 10 64位
- 开发工具 :webstrom sublime
- 前端:vue.js + vue-router + vuex
- 后端:node.js + mongodb (采用express框架)
特色功能
- 支持服务端渲染
- 支持标题动态切换
- 支持PWA
- 支持maekdown语法,样式采用github风格,代码高亮
- 支持文章保存为草稿
- 支持标签和归档功能
pc端效果图
首页效果图
代码高亮效果图
后台发布页面
后台文章列表
修改个人信息
手机端效果图,以chrome浏览器演示
添加到主屏
启动效果
首页效果
文章页效果
本地运行项目
项目地址:https://github.com/wmui/essay
- 安装mongod并启动
- 安装git工具
- 克隆项目到你的本地
- 修改配置项信息,/server/settings.js,你也可以默认不修改,默认用户名:q,默认密码:q
let user = 'q';
let pass = md5('q');
let avatar = 'avatar.jpg';//头像
let intro ='Never too old to learn';
let nickname = 'VueBlog';
module.exports = {
dbUrl:'mongodb://localhost:27017/vueblog',
user:user,
pass:pass,
avatar:avatar,
intro:intro,
nickname:nickname
}
- 打开本地终端,执行
npm run dev
,访问http://localhost:8080
结语
此项目会长期更新,1.0版本仅仅是一个开始
vue+node+mongodb前后端分离博客系统的更多相关文章
- vue+node+mongoDB前后端分离个人博客(入门向)
最近学习了VUE,自己为了学习做了个小小的博客,功能很简单,不过开发过程中也遇到了很多坑,所以记录下来方便以后使用.欢迎大家交流学习. 功能 实现了用户注册.登录.token检测登录.用户留言.个人中 ...
- Essay3.0发布,基于JavaScript的前后端同构博客系统
前言 转眼间距离我开源这个项目已经两年了,最初是奔着学习的目的开发了这个项目,后来一直记录自己的学习笔记.随着时间的增长,发现之前写的代码简直不忍直视,于是就有了重构的想法.这个过程有些漫长,竟然用了 ...
- 项目实战(连载):基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)
本章主要讲什么(一句话)? <项目实战:基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)> -- 基于MongoDB的MyBlog数据库知识技术储备(上 ...
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
- 基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统
很久没更新博客,最近也有点忙,然后业余时间搞了一个比较完整基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统的流程系统,希望对 ...
- Vue+Spring Boot 前后端分离的商城项目开源啦!
新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成后, ...
- Springboot + Vue + shiro 实现前后端分离、权限控制
本文总结自实习中对项目对重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...
- Spring Boot + Vue + Shiro 实现前后端分离、权限控制
本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
随机推荐
- Html表格:
(1)<table>标签:声明一个表格,它的常用属性如下: -- border属性 定义表格的边框,设置值是数值 -- cellpadding属性 定义单元格内容与边框的距离,设置值是数值 ...
- db2和oracle字段类型对比
在网上找到一片关于oracle与DB2数据类型的比较,特记下来. Oracle DB2/400 Oracle数据类型 注意事项 DB2 UDB数据类型 注意事项 DATE DATETIMETIMEST ...
- java内存和linux关系
运行个JAVA 用sleep去hold住 package org.hjb.test; public class TestOnly { public static void main(String[] ...
- ubuntu17.04 调试系统工具bcc,systamtap安装
发行版 ubuntu17.04 cat lsb-release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=17.04 DISTRIB_CODENAME=zesty DISTR ...
- JavaAes加密操作工具类
package com.king.weixin.util;import java.io.UnsupportedEncodingException;import java.security.Algori ...
- npm run dev
npm run dev npm run build
- 自动化中app支持schema跳转
android schema: String url = "adb -s " + udid + " shell am start -a 'android.intent.a ...
- Python import其他文件夹的文件
一般情况下,import的文件和被import的文件在同一个路径下面,import也比较方便.如果这两个文件不在一个路径下面,import就比较麻烦了,需要在被import的文件路径下面新建一个__i ...
- 找回停掉docker的文件
如果容器还能重启,就restart, 如果状态是DEAD的话, Error response from daemon: Container is marked for removal and cann ...
- [Chrome插件] SelectJd(京东自营筛选器) v1.0.0 发布
如今京东的商品列表已经没有"自营"筛选了,只有"京东物流"筛选.导致找商品时不方便. 于是我开发了一下Chrome插件--SelectJd(京东自营筛选器). ...