感悟

历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前后端分离,对于博客类系统seo肯定很重要,索性就自己动手写了这个项目,其中也遇到了不少问题, 因为基于服务端渲染的项目不多,自己能力也有限,所以用了好长时间。这里特别感谢@lincenying,提供了登录功能的解决思路,也是我在开发过程中遇到最难解决的问题,本项目基于vue-hackernews-2.0开发,支持PWA(需升级为https),演示地址:https://vueblog.86886.wang,项目地址:https://github.com/wmui/vueblog

开发环境和技术栈

操作系统:windows 10 64位
开发工具 :webstrom sublime
前端:vue.js + vue-router + vuex
后端:node.js + mongodb (采用express框架)

特色功能

支持服务端渲染
支持标题动态切换
支持PWA
支持markdown语法,样式采用github风格,代码高亮
支持文章保存为草稿
支持标签和归档功能

pc端效果图

首页效果图

代码高亮效果图

后台发布页面

后台文章列表

修改个人信息

手机端效果图,以chrome浏览器演示

添加到主屏

启动效果

首页效果

文章页效果

更多效果大家可通过线上演示地址查看

本地运行项目

  1. 安装mongodb并启动

  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

结语

关于如何部署到线上和部署https,后面会更新相关教程。此项目我会长期更新,希望能和大家一起学习,共同进步

30 条评论
cdroid · 7月16日

这个前端有用到ui框架吗?很简洁,我很喜欢

+2 回复

0

没有用哦,我这人不喜欢用ui框架,所以前端后台都没用

wmui 作者 · 7月16日
0

@wmui ?,我是刚转前端,所以基本都用的UI框架,大部分都很臃肿,最多就是扩展UI框架的功能,但是要是像楼主全用自己写的css估计要过很长一段时间?

cdroid · 7月16日
1

@cdroid 偷偷的告诉你,公司的项目我是用框架疯狂copy的,自己的项目没人催你,当然要用心做啦

wmui 作者 · 7月16日
read_lee · 7月16日

maekdown
markdown

+1 回复

3

感谢提醒,已纠正

wmui 作者 · 7月16日
小民 · 7月16日

!!!

回复

风再起时 · 7月16日

你好,我也是前端,加一下你qq,方便技术交流,有问题问你。120077326

回复

1

已经加你啦

wmui 作者 · 7月16日
林岑影 · 7月16日

赞一个...

回复

0

感谢

wmui 作者 · 7月16日

不错,我要抄一下。

回复

Setsuna · 8月8日

一直想要有一个自己博客,不知如何下手开始做

回复

1

这个项目写的不复杂,轻量级的博客系统,希望对你有所帮助

wmui 作者 · 8月8日
0

@wmui 回答光速,github已star,从你的这个项目开始摸索

Setsuna · 8月8日
0

@Setsuna 因为有邮件提醒,感谢star

wmui 作者 · 8月8日
mazey · 8月11日

500

回复

扈申奥 · 8月22日

加下QQ呗,想和你请教一些问题,447611296

回复

1

项目问题可在github提issue,看到后第一时间处理

wmui 作者 · 8月22日
江保 · 9月7日

咨询一个问题:一般情况下npm run dev的入口是src目录下的main.js 那么当我改变地址栏加/admin跳转到后台的时候 这个过程是如何实现的呢?

回复

0

vue-router

wmui 作者 · 4 天前
wangwei2513 · 9月7日

本地的管理员后台只能登录一次、之后就不能登陆了;为什么呢?

回复

0

cookie

wmui 作者 · 4 天前
璐璐 · 5 天前

您好,我现在有一个vue的工程和一个node的工程,我想把他们合并成一个工程,要怎麽做呀?

回复

0

额,一两句话说不清,建议看一些相关教程

wmui 作者 · 4 天前
0

刚开始学前端,找的教程内容参差不齐,您有什么推荐吗?

璐璐 · 4 天前
0

@璐璐 我一菜鸟,不敢瞎推荐,刚开始建议看些简单的

wmui 作者 · 3 天前
载入中...
wmui wmui

613 声望