博客2.0更新啦

博客2.0

博客地址：mangoya.cn

整体样式基本没有变化，主要变化是前后端重构，之前的1.0版本后端为php，并非博主所开发，这次重构调整了数据结构和所熟悉的语言，采用koa2+mongodb。

废话不多说，下面介绍博客的搭建教程和思路。

技术栈：

博客主页：vue2
管理后台：vue3
后端：koa2+mongodb

博客主要功能：

文章：列表、分类、详情、点赞、收藏、评论
用户中心：登录/注册、收藏列表、点赞列表、设置友链
其他：静态信息展示、留言板、点赞、最受欢迎文章排行榜、友链

前端模块拆分：

博客主页主要为展示信息和用户留言等信息模块，其中评论和留言板可以复用一个组件，首页列表和点赞收藏列表也可以复用一个的组件，页面整体为头部、左侧和右侧，其中只有左侧内容为页面切换内容，头部和右侧则固定不变。

管理后台包含文章、分类、标签、用户、留言等管理功能。

后端数据文档划分：

文章
文章分类
文章标签
留言
点赞
收藏
浏览
网站点赞
用户
资源

主要功能点介绍：

用户登录注册：
使用github oauth 实现第三方认证登录，可能会遇到接口请求慢的情况，可以通过翻墙软件设置代理访问。

浏览量：
由时间戳+ua+随机数加密生成log_id设置2个小时有效期的cookie，访问页面详情时，通过log_id和文章id去重存储浏览表。

留言和评论：
留言关于我等设置为固定的留言文章id，和文章一样存储用户信息，并添加回复的父级id存储，查询时递归获取并返回数据。

收藏和点赞：
分别存储收藏表和点赞表，包含用户id/文章id。

资源：
使用koa-body 实现文件上传功能，将资源保存在某个目录，并设置对应的url，存资源列表。

源码：

博客前端：https://github.com/Aimee1608/myblog2.0
管理后台：https://github.com/Aimee1608/myblog2.0-admin
服务端：https://github.com/Aimee1608/myblog2.0-server

版本要求：

node>=12
koa2
mongodb4
vue2.0/3.0

安装mongodb后，启动服务，即可运行。

欢迎点赞和评论~

博客1.0版本

为何选择vue.js搭建博客

为什么会选择使用vue.js框架搭建博客呢？原因有多个。作为前后端分离的多数据绑定项目，首选的就是mvc 以及mvvm等框架，也就是主流的angular.js 和vue.js，之前有用angular.js 写过项目，但是数据的双向绑定并没有vue.js灵活；在使用vue.js框架快速完成美食网站后，更加离不开这个框架了，简单方便，易于管理和后期的维护。

个人博客框架

如图所示，页面整体可分为几大主模块，有首页、分类、实验室、赞赏、伙伴、留言板、关于、登录注册、用户个人中心，这些主模块通过路由跳转切换；然后还有几个公共模块，如头部和尾部，以及其他的一些公用模块，这些子模块嵌套在主模块中，用于公用样式和公用功能的实现。

项目基于node.js npm 安装vue-cli 脚手架后的目录结构，如下图，根据项目的需求选择性的安装依赖和插件

搭建博客所安装的插件和依赖，如下图，我使用了 element-ui组件来开发样式，还有vue-resource和vue-router 以及css-loader等样式加载依赖，安装成功后，在webpack.config.js上写上相应的配置

得在上图中的routes完成主路由模块的配置，并且export出来，这里需要注意的是，可以通过component: resolve 来设置懒加载，对于带宽为1M的服务器来说，这点非常重要，不然打开页面需要好几分钟，还需要在webpack.config.js中注释掉 devtool: ‘#eval-source-map’，这个是项目webpack打包的时候设置的参数，使用webpack -p 这个命令打包，即为压缩打包，打包的文件更小，除去不需要的注释

接着是入口文件文件的配置，根据自己的需求，引入对应的模块和路由等文件

运行项目

使用命令窗口，cd到当前目录，使用npm run dev ，就可以打开运行项目，编辑项目保存的同时，页面会自动更新，即为实时监控。

模块化开发

之所以使用vue.js来开发博客项目，其中看中的一点就是模块化开发，就以打开页面的首页为例，如上面的结构介绍图，我分别使用了头部、尾部、右侧、文章列表这四个子模块组成，就如下图所示

子模块的结构和主模块一样，如果子模块中还需嵌套子模块，同上面一样

按照上面的步骤根据自己的需求添加自己的模块，整个博客网站就搭建完成啦，是不是很简单呢！如果需要了解vue.js具体的api 和element-ui组件的用法，可以访问官方网站，都有详细的说明哦！

博客地址： http://mangoya.cn
需要看详细文档的，这里有github 地址 https://github.com/Aimee1608

vue.js搭建个人博客相关推荐

使用 Gatsby.js 搭建静态博客 2 实现分页
原文地址:https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建静态博客 1 关键文件 <- 本文将会介绍如何为初始项目添加分页功能. 理解页面创建原理 ...
用node.js 搭建的博客程序心得(node.js实战读书笔记1)
学习node已经有一段时间了,之前把了不起的node.js看完了,基本算了解了一些node的基本的用法还有一些概念了,然后就开始看第二本node.js实战,第一章就是搭建一个博客程序.但是不得不吐槽一 ...
node.js搭建个人博客系统
node.js+腾讯云搭建个人博客系统最好要有的预备知识: 前端开发知识 html css JavaScript,尤其重要 nodejs相关知识: 异步编程回调函数 *阻塞&非阻塞一.开 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）...
缘起书说前两篇文章< 十五 ║ Vue前篇:JS对象&字面量&this>和 < 十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面 ...
前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡
React.js 是现今前端最火的应用框架之一,而 **Next.js 正是 React.js 领域最优秀的服务端渲染框架之一.**基本上,现在所有的前端主流形式,从服务端渲染 APP,静态站到桌面应 ...
springboot+vue+elementUI搭建个人博客
duck blog 博客项目第一阶段----雏形 1. vue前端 1.1 全局文件说明 1.2 登录功能 1.3 注册功能 1.4 博客列表 1.5 博客编辑 1.6 博客详情 1.7 路由守卫 ...
使用 Gatsby.js 搭建静态博客 EX 使用语雀发布到博客
原文链接:https://ssshooter.com/2019-01... 偶然看到通过语雀 webhook 发布文章到 Hexo 静态博客,很方便,实现过程也很有意思.同样的原理可以运用到 Gats ...
搭建个人博客网站 -- vue初学者学习总结
搭建个人博客网站 – vue技术学习开源代码:个性化个人博客系统参考项目:风丶宇的个人博客一.项目概述项目主要是基于SpringBoot + Vue 开发的前后端分离博客,本文主要涉及项目前端 ...
用Node.JS+MongoDB搭建个人博客（成品展示）
在博客里可以随意畅写和分享自己喜欢的技术,和网友分享知识也是一种提升.根据自己所发表的博客也能更加加深印象. 与此同时写博客也可以提高自己的写作能力(虽然不咋地),但我相信博客只会越写越有质量的. 个 ...

vue.js搭建个人博客