建站 — 足各路的博客 | ZUGELU-专注前端开发

前言

2020年年末，萌生了搭建博客的想法。我这暴脾气，不得动手搭一个玩玩！！
说干就干，工作之余，搭建了首个属于自己的博客 —— 足各路的博客

一、框架选择

1.前端框架

市面上的前端框架，太太太太太太…多了。Element-UI、Ant Design、Vuetifyjs等，一个比一个火。强迫症的我犯难了，平时二选一都够纠结了，更别提多选一了。问题来了，这么多框架，选哪个合适呢？

选择当然需结合自身的情况。就我自己来讲，技术层方面，Vue熟练度大于React，所以优先选择Vue相关的。其次，框架功能需强大，且有相关团队持续维护。查阅对比多个UI框架后，权衡利弊，最终决定使用Quasar。为什么使用Quasar？了解更多。

2.后端框架

我选择了Express+MongoDB搭建的后端框架，别问，问就是不会Java。😤😤

二、后台管理系统

1. 功能模块

登录、注册
文章
相册
时间轴
友情链接
留言反馈
后端Express用到的中间件包括：
- cors 解决跨域问题，设置前端接口请求跨域白名单
- crypto-js 加密重要信息，邮箱、密码等
- jsonwebtoken 生成token
- express-jwt JWT鉴权
- redis 缓存token
- multer 文件上传
后台管理系统主要实现的功能：
- 基本的增删改查
- v-md-editormarkdown编辑器的使用
- 仿CSDN文章编写界面
- 路由权限的验证，通过router中的meta控制

2. 目录结构

├── public/                  # 纯静态资源
├── dist/                    # 生产版本代码，用于部署
│   ├── spa/                 # 构建SPA
│   └── electron/            # 构建Electron
├── src/
│   ├── api/                 # 请求后台API
│   ├── assets/              # 动态资源（由webpack处理）
│   ├── boot/                # 启动文件 (应用初始化代码) 
│   ├── components/          # 用于页面和布局的.vue组件
│   ├── css/                 # 全局 CSS
│   ├── layouts/             # 布局 .vue 文件
│   ├── pages/               # 页面 .vue 文件
│   ├── router/              # Vue路由
|   |   ├── index.js         # Vue路由定义
|   │   └── routes.js        # App路由定义
│   ├── store/               # Vuex Store
|   |   ├── index.js         # Vuex Store 定义
|   │   ├── <folder>         # Vuex Store 模块...
|   │   └── <folder>         # Vuex Store 模块...
│   ├── App.vue              # APP的根Vue组件
│   └── index.template.html  # index.html模板
├── src-electron/            # Electron特定代码（如"main"线程)
├── quasar.conf.js           # Quasar App配置文件
├── babel.config.js          # Babeljs配置
├── .editorconfig            # editor配置
├── .eslintignore            # ESlint忽略路径
├── .eslintrc.js             # ESlint配置
├── .postcssrc.js            # PostCSS配置
├── .gitignore               # GIT忽略路径
├── package.json             # npm脚本和依赖项
└── README.md                # 网站自述文件

3. 界面展示

基本都是表格，选了几个有特色界面。

首页

文章

分类

三、前端展示界面

1.功能实现

登录、注册
文章预览
文章评论
相册照片
时间总轴
友情链接
留言反馈

前端使用SSR — 服务端渲染，原因很简单：相比于与传统的SPA — 单页应用程序，SSR的优势主要在于：更好的SEO，因为搜索引擎抓取工具将直接看到完整渲染的页面。

2.目录结构

├── public/                  # 纯静态资源
├── dist/                    # 生产版本代码，用于部署
│   └── ssr/                 # 构建SSR
├── src/
│   ├── api/                 # 请求后台API
│   ├── assets/              # 动态资源（由webpack处理）
│   ├── boot/                # 启动文件 (应用初始化代码) 
|   |   ├── axios.js         # axios封装
|   │   ├── filter.js        # vue过滤器
|   |   ├── amin.js          # 入口文件
|   │   ├── markdown.js      # v-md-editor编辑器
|   |   ├── axios.js         # axios封装
|   │   └── notify.js        # notify提示框
│   ├── components/          # 用于页面和布局的.vue组件
│   ├── css/                 # 全局 CSS
|   |   ├── animation.scss   # 动画
|   |   ├── app.scss         # 全局css修改
|   |   ├── loading.scss     # 初次加载loading
│   ├── layouts/             # 布局 .vue 文件
│   ├── pages/               # 页面 .vue 文件
│   ├── router/              # Vue路由
|   |   ├── index.js         # Vue路由定义
|   │   └── routes.js        # App路由定义
│   ├── store/               # Vuex Store
│   ├── utils/               # 工具类库
│   ├── App.vue              # APP的根Vue组件
│   └── index.template.html  # index.html模板
├── src-ssr/                 # ssr特定代码
├── quasar.conf.js           # Quasar App配置文件
├── babel.config.js          # Babeljs配置
├── .editorconfig            # editor配置
├── .postcssrc.js            # PostCSS配置
├── .gitignore               # GIT忽略路径
├── package.json             # npm脚本和依赖项
└── README.md                # 网站自述文件