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 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
随机推荐
- ssm框架出现的常见问题
1:自己写的代码测试的时候显示用户过期,需要释放拦截器,并配置权限允许 2:Servlet.service() for servlet [springmvc] in context with path ...
- app的创建和注册
APP是用来存放代码的 创建APP 命令行创建,切换到项目目录下 python manage.py startapp appo1 #app01为项目名,创建完刷新即可 目录结构 把函数放到views后 ...
- Yii2 数据搜索类 PostSearch
数据搜索类 PostSearch /** * @Purpose : 添加 authorName 属性,使属性和搜索表单相对应 * @return array */ public function at ...
- python基础介绍二
一.python种类 1.1 Cpython python官方版本,使用c语言实现,运行机制:先编译,py(源码文件)->pyc(字节码文件),最终执行时先将字节码转换成机器码,然后交给cpu执 ...
- GMA Round 1 函数求值
传送门 函数求值 设函数$f(x)=x^{2018}+a_{2017}*x^{2017}+a_{2016}*x^{2016}+...+a_{2}*x^2+a_{1}*x+a_{0}$,其中$a_{0} ...
- .Net转Java.01.从Main(main)函数说起
在C#中,main函数的签名可以有四种 static void Main(string[] args)static void Main()static int Main(string[] args)s ...
- Python的ctypes 和pyinstaller
这几天在学习python的爬虫, 无意中看到一篇博文 Python爬虫之自制英汉字典 发现里面的ctypes 和pyinstaller 还不了解,这边文章说白了就是你输入英文, python读取你的输 ...
- linux apache2部署php
apache2 doc http://blog.csdn.net/actor1999/article/details/44802519 #apache sudo apt-get install apa ...
- easyui combox 手动添加项
$('#comzwcf').combobox({ valueField: 'id', textField: 'text', }); $.ajax({ url: '/Provider/HandlerIr ...
- mysql5.6 sql_mode设置为宽松模式
最近遇到一个很奇怪的事情 由于数据人员的需求,现在需要修改mysql的sql_mode sql_mode默认是sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_ ...