感悟

历时两个多月,终于利用工作之余完成了这个项目的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

  1. 安装mongod并启动
  2. 安装git工具
  3. 克隆项目到你的本地
  4. 修改配置项信息,/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
}
  1. 打开本地终端,执行npm run dev ,访问http://localhost:8080

结语

此项目会长期更新,1.0版本仅仅是一个开始

vue+node+mongodb前后端分离博客系统的更多相关文章

  1. vue+node+mongoDB前后端分离个人博客(入门向)

    最近学习了VUE,自己为了学习做了个小小的博客,功能很简单,不过开发过程中也遇到了很多坑,所以记录下来方便以后使用.欢迎大家交流学习. 功能 实现了用户注册.登录.token检测登录.用户留言.个人中 ...

  2. Essay3.0发布,基于JavaScript的前后端同构博客系统

    前言 转眼间距离我开源这个项目已经两年了,最初是奔着学习的目的开发了这个项目,后来一直记录自己的学习笔记.随着时间的增长,发现之前写的代码简直不忍直视,于是就有了重构的想法.这个过程有些漫长,竟然用了 ...

  3. 项目实战(连载):基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)

    本章主要讲什么(一句话)?   <项目实战:基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)> -- 基于MongoDB的MyBlog数据库知识技术储备(上 ...

  4. 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& ...

  5. 基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统

    很久没更新博客,最近也有点忙,然后业余时间搞了一个比较完整基于react全家桶+antd-design+webpack2+node+express+mongodb开发的前后台博客系统的流程系统,希望对 ...

  6. Vue+Spring Boot 前后端分离的商城项目开源啦!

    新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成后, ...

  7. Springboot + Vue + shiro 实现前后端分离、权限控制

    本文总结自实习中对项目对重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...

  8. Spring Boot + Vue + Shiro 实现前后端分离、权限控制

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...

  9. ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

    一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...

随机推荐

  1. ssm框架出现的常见问题

    1:自己写的代码测试的时候显示用户过期,需要释放拦截器,并配置权限允许 2:Servlet.service() for servlet [springmvc] in context with path ...

  2. app的创建和注册

    APP是用来存放代码的 创建APP 命令行创建,切换到项目目录下 python manage.py startapp appo1 #app01为项目名,创建完刷新即可 目录结构 把函数放到views后 ...

  3. Yii2 数据搜索类 PostSearch

    数据搜索类 PostSearch /** * @Purpose : 添加 authorName 属性,使属性和搜索表单相对应 * @return array */ public function at ...

  4. python基础介绍二

    一.python种类 1.1 Cpython python官方版本,使用c语言实现,运行机制:先编译,py(源码文件)->pyc(字节码文件),最终执行时先将字节码转换成机器码,然后交给cpu执 ...

  5. 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} ...

  6. .Net转Java.01.从Main(main)函数说起

    在C#中,main函数的签名可以有四种 static void Main(string[] args)static void Main()static int Main(string[] args)s ...

  7. Python的ctypes 和pyinstaller

    这几天在学习python的爬虫, 无意中看到一篇博文 Python爬虫之自制英汉字典 发现里面的ctypes 和pyinstaller 还不了解,这边文章说白了就是你输入英文, python读取你的输 ...

  8. linux apache2部署php

    apache2 doc http://blog.csdn.net/actor1999/article/details/44802519 #apache sudo apt-get install apa ...

  9. easyui combox 手动添加项

    $('#comzwcf').combobox({ valueField: 'id', textField: 'text', }); $.ajax({ url: '/Provider/HandlerIr ...

  10. mysql5.6 sql_mode设置为宽松模式

    最近遇到一个很奇怪的事情 由于数据人员的需求,现在需要修改mysql的sql_mode sql_mode默认是sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_ ...