Go初级之手把手教你开发一个简易的个人博客网站（三）项目分析和技术分析

发布于

前言

本文是记录的是"Go语言之手把手教你开发一个简易的个人博客网站（三）"

此文是个人学习归纳的记录，腾讯云独家发布，未经允许，严禁转载，如有不对, 还望斧正, 感谢!

前两篇主要是记录了项目的基本架构和数据库的相关链接操作，本篇主要记录整体项目的分析。

前端前台

前端前台界面，如果是个人博客的话，其实就只是信息展示的，展示自己的文章，展示自己的过往经历和成绩，展示自己相关信息等等。

前段时间，看一个老哥的个人博客，他把网络安全法搬上去了，哈哈，有东西的。

我就想写一个简单的， 就没整那些花里胡哨的效果了，主打的就是一个简洁， 毕竟就是做出来玩的。

我简单地搞了一下，大概就是首页、资源、关于、个人作品、联系我、以及文章展示页，然后还有文章评论。

首页： 首页要实现的比较少，我的想法是不要搞太花里胡哨，就简单搞一下，哈哈其实是太花里胡哨我也搞不出来。

资源页，顾名思义，还有关于，就放自己个人介绍什么的，个人作品的话，放自己的项目github地址。

创建Vue3.0工程

vue有2有3，vue2是js写的，vue3是ts写的，目前除了一些老项目外，基本上都是在使用vue3了，现在学vue的也基本上都是vue3起手。

创建vue3项目的方法有两种，vue-cil和vite ，主要是打包工具不一样， vue-cil使用的是Webpack进行打包，而Vite利用现代浏览器的原生ES模块加载功能进行的，而vite和webpack的最大的区别是，webpack会打包好了再给你，vite是先告诉你打包好了，然后看你要什么，再打包什么。

我推荐使用vite

使用 vue-cli 创建

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

代码语言：bash
复制
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

使用 vite 创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网：https://vitejs.cn

  • 什么是vite？—— 新一代前端构建工具。
  • 优势如下：
    • 开发环境中，无需打包操作，可快速的冷启动。
    • 轻量快速的热重载（HMR）。
    • 真正的按需编译，不再等待整个应用编译完成。
  • 传统构建 与 vite构建对比图
代码语言：bash
复制
## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

感觉还是比较简单的，然后就是文章详情页，当时思考了一下，最主要要做的就是以mkdown格式展示文章，以及文章的图片存储，旁边再展示一下个人信息，和相关文章，然后还有就是评论功能，然后就OK了。

这个文章的界面设计，我参考了腾讯云开发者社区，掘金，知乎。

大厂不愧是大厂，这种UI设计就比较厉害了。

前端后台

前端后台的话，我决定还是用vue来自己写，思考了一下，大概结构如下

其实基本上就是对前台的各个模块的CRUD。到这里，项目的大致的构思也就完成了， 我还想引入chatGPT，或者其他国内的编程助手，用来辅助编写个人博客。

后端

后端技术栈: Go + Gin + MongoDB

后端比较简单，这个小网站的体量比较小，所以就都一切从简了，挑着简单来做的，后端主要做了CRUD , 然后就是鉴权和限流的操作， 总体来说还是比较简单的。

还有一件事， 就是图片我没有存储在数据库中， 数据库中只是存储了图片的位置。

项目的大体结构如下， 这个一键生成项目的目录结构的mkdown文档， 我是用了 mddir 。

代码语言：javascript
复制
|-- GoServe
    |-- go.mod
    |-- go.sum
    |-- main.go
    |-- .idea
    |   |-- .gitignore
    |   |-- GoServe.iml
    |   |-- modules.xml
    |   |-- workspace.xml
    |-- configs
    |   |-- config.yaml
    |-- docs
    |-- global
    |   |-- db.go
    |   |-- setting.go
    |-- imges
    |   |-- 1701780660121429800
    |   |-- 1701781014092268400.png
    |-- internal
    |   |-- middleware
    |   |   |-- access_log.go
    |   |   |-- Authentication.go
    |   |   |-- context_timeout.go
    |   |   |-- JWT.go
    |   |   |-- limiter.go
    |   |   |-- recovery.go
    |   |   |-- section.go
    |   |-- model
    |   |   |-- model.go
    |   |-- routers
    |   |   |-- backstage.go
    |   |   |-- routers.go
    |   |-- service
    |       |-- upload.go
    |-- logs
    |   |-- myblog.log
    |-- MyFunc
    |   |-- index.go
    |   |-- Backstage
    |   |   |-- index.go
    |   |-- Class
    |   |   |-- index.go
    |   |-- DB
    |   |   |-- config.go
    |   |   |-- mongodbdemo.go
    |   |   |-- mysqldemo.go
    |   |-- Foreground
    |   |   |-- index.go
    |   |   |-- MyFunc.go
    |   |-- imges
    |   |   |-- 1701781838068675500.png
    |   |   |-- 1701782543490279800.png
    |   |-- Middleware
    |       |-- ImageVerificationCode.go
    |       |-- JWT.go
    |-- MyFuncimges
    |   |-- 1701781331973876300.png
    |-- pkg
    |   |-- app
    |   |   |-- app.go
    |   |-- convert
    |   |   |-- convert.go
    |   |-- email
    |   |   |-- email.go
    |   |-- errcode
    |   |   |-- common_code.go
    |   |   |-- errcode.go
    |   |-- limiter
    |   |   |-- limiter.go
    |   |   |-- method_limiter.go
    |   |-- logger
    |   |   |-- logger.go
    |   |-- setting
    |   |   |-- section.go
    |   |   |-- setring.go
    |   |-- upload
    |   |   |-- file.go
    |   |-- util
    |       |-- md5.go
    |-- scripts

到这里就差不多了，下一期继续。

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

#vue3#笔记#腾讯技术创作特训营S6#go#gin