vue+node支持服务端渲染的博客系统

xiaoxiaozi 发布于2019-08-20 18:02 / 1577人阅读

摘要：此项目我会长期更新，希望能和大家一起学习，共同进步更新本项目的版本基于开发，后端用进行了重写。

感悟

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

开发环境和技术栈

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

特色功能

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

pc端效果图 首页效果图

代码高亮效果图

后台发布页面

后台文章列表

修改个人信息

手机端效果图，以chrome浏览器演示 添加到主屏

启动效果

首页效果

文章页效果

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

本地运行项目

安装mongodb并启动

安装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

结语

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

更新： 本项目的2.0版本基于Nuxt.js开发，后端用Koa + Mongoose进行了重写。

GitHub: https://github.com/wmui/essay

云服务器 GPU云服务器支持node.js的云服务器支持markdown的博客 vue条件渲染 node博客

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84028.html

vue+node支持服务端渲染的博客系统

摘要：此项目我会长期更新，希望能和大家一起学习，共同进步更新本项目的版本基于开发，后端用进行了重写。感悟历时两个多月，终于利用工作之余完成了这个项目的1.0版本，为什么要写这个项目？其实基于vuejs+nodejs构建的开源博客系统有很多，但是大多数不支持服务端渲染，也不支持动态标题，只是做到了前后端分离，对于博客类系统seo肯定很重要，索性就自己动手写了这个项目，其中也遇到了不少问题，...

solocoder 2019-06-26 17:17 评论0 收藏0
Vue.js实践：一个Node.js+mongoDB+Vue.js的博客内容管理系统

摘要：项目来源以前曾用过搭建自己的博客网站，但感觉很是臃肿。所以一直想自己写一个博客内容管理器。正好近日看完了各个插件的文档，就用着尝试写了这个简约的博客内容管理器。关于后端后端是用作为服务器的，使用了框架。项目来源以前曾用过WordPress搭建自己的博客网站，但感觉WordPress很是臃肿。所以一直想自己写一个博客内容管理器。正好近日看完了Vue各个插件的文档，就用着Vue尝试写...

Dr_Noooo 2019-08-20 11:07 评论0 收藏0
用vue搭建的个人博客介绍----mapblog小站

摘要：后端主要使用的框架，数据库采用。后台管理登录采用与后端进行登陆状态的确认。本文首发于小站，这是一个积累和分享知识的个人博客这篇文章搁置了很长时间，最终决定还是把它写出来，给刚开始学习vue并且想用vue写个人博客的同学一个参考。因为当初我也是参考了其他人分享的知识，从一个vue小白变成了一个入门级选手，并最终完成了这个个人博客的搭建工作，代码已托管在Github-justJokee。...

Ashin 2019-06-26 17:40 评论0 收藏0
vue 博客优化，服务端渲染(SSR)指南

摘要：现在我们需要在服务端和浏览器之间开启一个中间层用于服务端渲染。问题设置的配置文件这样我们的层才能获取到的，并在客户端将登陆时将保存下来，同时返回给客户端。这样用户在刷新页面时，会通过并带上请求服务器获取数据。 vue 博客优化，服务端渲染(SSR)指南对已有的单页应用进行改造，优化，使之成为一个具有良好seo的应用 github地址WdBly博客地址安装 git clone htt...

KnewOne 2019-08-23 13:00 评论0 收藏0