感悟

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

    (1)<table>标签:声明一个表格,它的常用属性如下: -- border属性 定义表格的边框,设置值是数值 -- cellpadding属性 定义单元格内容与边框的距离,设置值是数值 ...

  2. db2和oracle字段类型对比

    在网上找到一片关于oracle与DB2数据类型的比较,特记下来. Oracle DB2/400 Oracle数据类型 注意事项 DB2 UDB数据类型 注意事项 DATE DATETIMETIMEST ...

  3. java内存和linux关系

    运行个JAVA 用sleep去hold住 package org.hjb.test; public class TestOnly { public static void main(String[] ...

  4. ubuntu17.04 调试系统工具bcc,systamtap安装

    发行版 ubuntu17.04 cat lsb-release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=17.04 DISTRIB_CODENAME=zesty DISTR ...

  5. JavaAes加密操作工具类

    package com.king.weixin.util;import java.io.UnsupportedEncodingException;import java.security.Algori ...

  6. npm run dev

     npm run dev     npm run build

  7. 自动化中app支持schema跳转

    android schema: String url = "adb -s " + udid + " shell am start -a 'android.intent.a ...

  8. Python import其他文件夹的文件

    一般情况下,import的文件和被import的文件在同一个路径下面,import也比较方便.如果这两个文件不在一个路径下面,import就比较麻烦了,需要在被import的文件路径下面新建一个__i ...

  9. 找回停掉docker的文件

    如果容器还能重启,就restart, 如果状态是DEAD的话, Error response from daemon: Container is marked for removal and cann ...

  10. [Chrome插件] SelectJd(京东自营筛选器) v1.0.0 发布

    如今京东的商品列表已经没有"自营"筛选了,只有"京东物流"筛选.导致找商品时不方便. 于是我开发了一下Chrome插件--SelectJd(京东自营筛选器). ...