基于前端组件化的个性化个人博客项目本项目设计与实现了基于前端组件化的个性化博客系统，旨在通过后台管理页面轻便地调整前端页

1. 前言

本项目设计与实现了基于前端组件化的个性化博客系统，旨在通过后台管理页面轻便地调整前端页面展示内容，以达到简单部署出具有个人特色的博客的效果，同时解决了传统博客存在的一些问题。本系统使用了 Web 前端框架Vue.js，不仅轻量级，开发效率高，并且页面渲染速度快，交互效果友好，同时还强调了 Web 前端组件化的思想。系统在服务器部分使用了 Node.js进行开发，JavaScript作为前后端的统一开发语言。Node.js 作为服务器开发环境，非常稳定和高效并能保证系统在服务器的业务逻辑处理中能够响应快速并易于扩展。数据库采用了用面向文档的非关系型数据库 MongoDB，基于文档的数据存储不仅带来了存储上的高效还带来了对数据进行建模的极大的灵活性。

前端页面功能包括文章展示和文章搜索，后台管理功能包括文章发布、文章管理、评论管理、前端页面展示设置。

2. 技术综述

系统按照功能逻辑被分为前端博客页面，后台管理页面以及后台系统三个部分，项目采用Nginx + pm2方案实现项目部署，通过pm2使得后台node接口挂起并通过Nginx代理；前端博客页面使用Nuxt.js + Vue.js2.0 ，Nuxt实现SSR服务端渲染开发，优化SEO并提高首页渲染速率，同时实现了页面大小自适应配置，可以在PC、ipad以及移动端看到不同地；后台管理页面使用Vue.js 3.0 + ElementUI Plus；后台系统使用Node.js + express，并使用JWT实现鉴权访问，数据库采用无关系型数据库 MongoDB。

前台功能主要包括用户信息、博客内容以及博客评论。后台功能主要是对前台展示内容的管理，包括用户个人信息资料的变更、对博客内容的管理、对博客文章的评论的管理以及Markdown文章撰写。

3. 技术解决方案

本项目主要以Vue框架作为基础进行开发工作，Vue框架当前市场上流行使用2.0以及3.0版本；Vue3.0相对于Vue2.0版本项目体积更小、运行速度更快、项目结构更为清晰便于维护，但是相对的，由于Vue3.0诞生不久，所以市面上与其配套的项目解决方案不够成熟，生态没有Vue2.0那般完善，在于其他的技术配合使用时容易出现bug。由于前端页面选择使用Nuxt.js来实现服务，而Nuxt.js当前并没有与Vue3.0配套的版本，若选用Vue3.0与Nuxt.js配合，将会伴生许多不兼容的错误，稳定性差，开发难度增大，所以改用Vue2.0 + Nuxt.js 作为前端页面基础框架；而后台管理页面对于SEO优化没有需求，故不需要采用Nuxt.js，可直接选用Vue3.0以及与之配套的ElementUI Plus框架；后台系统采用node.js作为编写语言，配合express框架，通过中间件开发模式实现node模块的封装和拓展，从而实现高性能的web接口服务，同时采用MongoDB作为数据库，相比于常用的MySQL数据库，尽管MongoDB占用较大的存储空间，但是却能够更简单地实现高性能的索引字段查询，可以支持文章搜索功能的实现。