文章列表

{
  "code": 0,
  "message": "OK",
  "data": {
    "pageSize": 5,
    "pageNum": 1,
    "total": 2,
    "pageData": [
      {
        "id": 2,
        "created_at": "2022-12-16T11:56:40.88+08:00",
        "updated_at": "2022-12-18T00:31:40.171+08:00",
        "category_id": 2,
        "category": {
          "id": 2,
          "created_at": "2022-12-03T22:01:33.074+08:00",
          "updated_at": "2022-12-03T22:01:33.074+08:00",
          "name": "前端",
          "Articles": null
        },
        "tags": [
          {
            "id": 1,
            "created_at": "2022-12-03T22:01:51.624+08:00",
            "updated_at": "2022-12-03T22:01:51.624+08:00",
            "articles": null,
            "name": "Golang"
          },
          {
            "id": 2,
            "created_at": "2022-12-03T22:01:56.984+08:00",
            "updated_at": "2022-12-03T22:01:56.984+08:00",
            "articles": null,
            "name": "Vue"
          }
        ],
        "user_id": 1,
        "title": "项目运行成功",
        "desc": "",
        "content": "6666\n\n恭喜你，项目已经成功运行起来了！\n\n```go\nfmt.Println(\"恭喜！\")\n```\n\n```js\nconsole.log(\"恭喜！\")\n```\n\n🆗😋",
        "img": "https://static.talkxj.com/articles/1395642324821741569.png",
        "type": 1,
        "status": 1,
        "is_top": 0,
        "is_delete": 0,
        "original_url": "",
        "comment_count": 0,
        "read_count": 0
      },
      {
        "id": 1,
        "created_at": "2022-12-03T22:07:01.638+08:00",
        "updated_at": "2022-12-16T11:53:37.132+08:00",
        "category_id": 1,
        "category": {
          "id": 1,
          "created_at": "2022-12-03T22:01:29.106+08:00",
          "updated_at": "2022-12-03T22:01:29.106+08:00",
          "name": "后端",
          "Articles": null
        },
        "tags": [
          {
            "id": 1,
            "created_at": "2022-12-03T22:01:51.624+08:00",
            "updated_at": "2022-12-03T22:01:51.624+08:00",
            "articles": null,
            "name": "Golang"
          },
          {
            "id": 2,
            "created_at": "2022-12-03T22:01:56.984+08:00",
            "updated_at": "2022-12-03T22:01:56.984+08:00",
            "articles": null,
            "name": "Vue"
          }
        ],
        "user_id": 1,
        "title": "测试文章",
        "desc": "",
        "content": "## 博客介绍\n\n<p  align=center>\n<a  href=\"http://www.hahacode.cn\">\n<img  src=\"https://img-blog.csdnimg.cn/fe2f1034cf7c4bd795552d47373ee405.jpeg\"  width=\"200\"  hight=\"200\"  alt=\"阵、雨的个人博客\"  style=\"border-radius: 50%\">\n</a>\n</p>\n\n因最近忙于学业，本项目开发周期不是很长且断断续续，可能会存在不少 BUG，但是我会逐步修复的。\n\n您的 Star 是我坚持的动力，感谢大家的支持，欢迎提交 Pr 共同改进项目。\n\nGithub 地址：[https://github.com/szluyu99/gin-vue-blog](https://github.com/szluyu99/gin-vue-blog)\n\nGitee 地址：[https://gitee.com/szluyu99/gin-vue-blog](https://gitee.com/szluyu99/gin-vue-blog)\n\n## 在线预览\n\n博客前台链接：[hahacode.cn](https://www.hahacode.cn)\n\n博客后台链接：[hahacode.cn/blog-admin](https://www.hahacode.cn/blog-admin)\n\n> 博客已备案通过，且配置 SSL，可通过 https 访问\n\n测试账号：test@qq.com，密码：11111，前后台都可用这个账号登录\n\n在线接口文档地址：[doc.hahacode.cn](http://doc.hahacode.cn/)\n\n> 本项目在线接口文档由 Apifox 生成，由于项目架构调整，有些接口待完善和修改\n>\n> 并且由于一开始不会用 Apifox，接口文档生成的信息不全（如返回响应、响应示例），抽空完善一下\n\n## 目录结构\n\n代码仓库目录：\n\n```bash\ngin-vue-blog\n├── gin-blog-admin      -- 博客后台前端\n├── gin-blog-front      -- 博客前台前端\n├── gin-blog-server     -- 博客后端\n```\n\n> 项目运行参考：[快速开始](#快速开始)\n\n后端目录：\n\n```bash\ngin-blog-server\n├── api             -- API\n│   ├── front       -- 前台接口\n│   └── v1          -- 后台接口\n├── dao             -- 数据库操作模块\n├── service         -- 服务模块\n├── model           -- 数据模型\n│   ├── req             -- 请求 VO 模型\n│   ├── resp            -- 响应 VO 模型\n│   ├── dto             -- 内部传输 DTO 模型\n│   └── ...             -- 数据库模型对象 PO 模型\n├── routes          -- 路由模块\n│   └── middleware      -- 路由中间件\n├── utils           -- 工具模块\n│   ├── r               -- 响应封装\n│   ├── upload          -- 文件上传\n│   └── ...\n├── routes          -- 路由模块\n├── config          -- 配置文件\n├── test            -- 测试模块\n├── log             -- 日志文件\n├── Dockerfile\n└── main.go\n```\n\n前端目录：自行参考代码文件\n\n## 项目介绍\n\n市面上有太多优秀的前后台框架，本项目也是参考了很多开源项目，但是大多项目过于重量级（并非坏处），如果从学习的角度来看对初学者并不是很友好。本项目在以**博客**这个业务为主的前提下，提供一个完整的全栈项目代码（前台前端 + 后台前端 + 后端），技术点基本都是最新 + 最火的技术，代码轻量级，注释完善，适合学习。\n\n前台：\n- 前台界面设计参考 Hexo 的 Butterfly 设计，美观简洁\n- 响应式布局，适配了移动端\n- 实现点赞，统计用户等功能 (Redis)\n- 评论 + 回复评论功能\n- 留言采用弹幕墙，效果炫酷\n- 文章详情页有文章目录、推荐文章等功能，优化用户体验\n\n后台：\n- 鉴权使用 JWT\n- 权限管理使用 CASBIN，实现基于 RBAC 的权限管理\n- 支持动态权限修改，前端菜单由后端生成（动态路由）\n- 文章编辑使用 Markdown 编辑器\n- 常规后台功能齐全：侧边栏、面包屑、标签栏等\n- 实现记录操作日志功能（GET 不记录）\n- 实现监听在线用户、强制下线功能\n- 文件上传支持七牛云、本地（后续计划支持更多）\n- 对 CRUD 操作封装了通用 Hook\n\n其他：\n- 采用 Restful 风格的 API\n- 前后端分离部署，前端使用 Nginx，后端使用 Docker\n- 代码整洁层次清晰，利于开发者学习\n- 技术点新颖，代码轻量级，适度封装\n\n## 技术介绍\n\n> 这里只写一些主流的通用技术，详细第三方库：前端参考 `package.json` 文件，后端参考 `go.mod` 文件\n\n前台前端：使用 pnpm 包管理工具\n- 基于 TypeScript\n- Vue3\n- VueUse: 服务于 Vue Composition API 的工具集\n- Unocss: 原子化 CSS\n- Pinia\n- Vue Router \n- Axios \n- Naive UI\n- ...\n\n后台前端：使用 pnpm 包管理工具\n- 基于 JavaSciprt \n- Vue3\n- VueUse: 服务于 Vue Composition API 的工具集\n- Unocss: 原子化 CSS\n- Pinia \n- Vue Router \n- Axios \n- Naive UI\n- ...\n\n后端技术栈：\n- 基于 Golang\n- Docker\n- Gin\n- GORM\n- Viper: 使用 TOML 作为配置文件\n- Casbin\n- Zap\n- MySQL\n- Redis\n- Nginx: 部署静态资源 + 反向代理\n- ...\n\n其他：\n- 腾讯云人机验证\n- 七牛云对象存储\n- ...\n\n## 运行环境\n\n服务器：腾讯云 2核 4G Ubuntu 22.04 LTS\n\n对象存储：七牛云\n\n## 开发环境\n\n| 开发工具                      | 说明                    |\n| ----------------------------- | ----------------------- |\n| Vscode                        | Golang 后端 +  Vue 前端 |\n| Navicat                       | MySQL 远程连接工具      |\n| Another Redis Desktop Manager | Redis 远程连接工具      |\n| MobaXterm                     | Linux 远程工具          |\n| Apifox                        | 接口调试 + 文档生成     |\n\n| 开发环境 | 版本 |\n| -------- | ---- |\n| Golang   | 1.19 |\n| MySQL    | 8.x  |\n| Redis    | 7.x  |\n\n\n### Vscode 插件\n\n如果使用 Vscode 开发，推荐安装一下以下插件。\n\n> 前后端相关插件属于**开发必须插件**，还有很多提升开发效果的插件后面推荐一下\n\n前端开发插件：\n\n| 插件 | 作用 |\n| -------- | ---- |\n| Volar   | Vue 官方插件 |\n| UnoCSS | Unocss 官方插件 |\n| Tailwind CSS IntelliSense | Tailwind 官方插件 |\n| Iconify IntelliSense | Iconify 提示插件 |\n\n后端开发插件：\n\n| 插件 | 作用 |\n| -------- | ---- |\n| Go | Golang 官方插件 |\n\n\n通用插件：（非开发必须，个人推荐）\n\n| 名称 | 作用 |\n| -------- | ---- |\n| Better Comments   | 优化代码注释显示效果 |\n| TODO Highlight | 高亮 TODO |\n| Highlight Matching Tag | 高亮匹配的标签 | \n\n\n## 快速开始\n\n### 本地运行\n\n> 目前需要自行安装 Golang、Node、MySQL、Redis 环境\n>\n> TODO: 完全基于 Docker 的运行教程（Docker 实在太好用了！）\n\n\n需要先运行后端服务，再运行前端项目，因为很多前端配置由后端动态加载（如菜单等）。\n\n拉取项目到本地：\n\n```bash\ngit clone https://github.com/szluyu99/gin-vue-blog.git\n```\n\n后端项目运行：\n\n```bash\n# 1、进入后端项目根目录 \ncd gin-blog-server\n\n# 2、修改项目运行的配置文件，默认加载位于 config/config.toml \n\n# 3、MySQL 导入 ginblog.sql\n\n# 4、启动 Redis \n\n# 5、运行项目\ngo mod tidy\ngo run main.go\n```\n\n数据库中的默认用户：\n- 管理员 admin 123456\n- 普通用户 user 123456\n- 测试用户 test 123456\n\n前端项目运行： 本项目使用 pnpm 进行包管理，建议全局安装 pnpm\n\n```bash\nnpm install -g pnpm\n```\n\n前台前端：\n\n```bash\n# 1、进入前台前端项目根目录\ncd gin-blog-front\n\n# 2、安装依赖\npnpm install\n\n# 3、运行项目\npnpm run dev\n```\n\n后台前端：\n\n```bash\n# 1、进入后台前端项目根目录\ncd gin-blog-admin\n\n# 2、安装依赖\npnpm install\n\n# 3、运行项目\npnpm run dev\n```\n\n\n### 项目部署\n\n**目前暂时不推荐将本博客部署上生产环境，因为还有很多功能未完善**。\n\n但是相信本项目对于 Golang 学习者绝对是个合适的项目！\n\n等功能开发的差不多了，再专门针对部署写一篇文章。\n\n---\n\n这里简单介绍一下，有基础的同学可以自行折腾。\n\n本项目前端采用 Nginx 部署静态资源，后端使用 Docker 部署。\n\n后端 Docker 部署参考 `Dockerfile`，Docker 运行对应的配置文件是 `config/config.docker.toml`\n\nDocker 打包成镜像指令：\n\n```bash\ndocker build -t ginblog .\n```\n\n> 以上只是简单说明，等功能全部完成，会从 `安装 Docker`、`Docker 安装运行环境`、`Docker 部署项目` 等多个角度写几篇关于部署的教程。\n\n## 项目总结\n\n这个项目不管是前端，还是后端，都是花了比较大心血去架构的，并且从技术选型上，都是选择了目前最火 + 最新的技术栈。当然，这也是个人的学习之作，很多知识点都是边学边开发的（例如 Casbin），这个过程中也参考了很多优秀的开源项目，感谢大家的开源让程序员的世界更加美好，这也是开源本项目的目的之一。本项目中仍有很多不足，后续会继续更新。\n\n最后，项目整体代码风格很优秀，注释完善，适合 Golang 后端开发者、前端开发者学习。\n\n## 鸣谢项目\n\n- [https://butterfly.js.org/](https://butterfly.js.org/)\n- [https://github.com/flipped-aurora/gin-vue-admin](https://github.com/flipped-aurora/gin-vue-admin)\n- [https://github.com/qifengzhang007/GinSkeleton](https://github.com/qifengzhang007/GinSkeleton)\n- [https://github.com/X1192176811/blog](https://github.com/X1192176811/blog)\n- [https://github.com/zclzone/vue-naive-admin](https://github.com/zclzone/vue-naive-admin)\n- [https://github.com/antfu/vitesse](https://github.com/antfu/vitesse)\n- ...\n\n> 需要感谢的绝不止以上这些开源项目，但是一时难以全部列出，后面会慢慢补上。\n\n## 后续计划\n\n高优先级: \n\n- ~~完善图片上传功能, 目前文件上传还没怎么处理~~\n- 后台首页重新设计（目前没放什么内容）\n- ~~前台首页搜索文章（目前使用数据库模糊搜索）~~\n- 博客文章导入导出 (.md 文件)\n- 权限管理中菜单编辑时选择图标（现在只能输入图标字符串）\n- 后端日志切割\n- ~~后台修改背景图片，博客配置等~~ \n- 后端的 IP 地址检测 BUG 待修复\n- ~~博客前台适配移动端~~ \n- ~~文章详情, 目录锚点跟随~~ \n\n后续有空安排上：\n- 黑夜模式\n- 前台收缩侧边信息功能\n- 说说\n- 相册\n- 音乐播放器\n- 鼠标左击特效\n- 看板娘\n- 第三方登录\n- 评论时支持选择表情，参考 Valine\n- 一键部署：使用 docker compose 单机一键部署整个项目（前后端 + 环境）\n- 单独部署：前后端 + 环境\n- 重写单元测试，目前的单元测试是早期版本，项目架构更改后，无法跑通\n- 前台首页搜索集成 ElasticSearch\n\n其他：\n- 写一份好的文档\n- 补全 README.md\n- 完善 Apifox 生成的接口文档\n\n## 更新日志\n\n描述规范定义，有以下几种行为 ACTION:\n- `FIX`: 修复\n- `REFINE`: 优化\n- `COMPLETE`: 完善\n- `ADD`: 新增\n\n---\n\n2022-12-15:\n\n博客后台：\n- 优化 菜单栏和标签栏，点击标签自动展开对应菜单，点击菜单自动滚动到显示对应标签 ⭐\n- 优化 使用响应式语法糖重构代码\n- 优化 代码结构 + 注释\n\n---\n\n2022-12-14:\n\n博客前台：\n- 优化 代码，去除 n-card 组件，使用自定义 css 实现卡片视图\n- 优化 对滚动的监听操作，添加节流函数，提升性能 ⭐\n- 优化 文章目录，根据当前滚动条自动高亮锚点 ⭐⭐\n- 新增 vite 打包优化相关插件\n\n---\n\n2022-12-13:\n\n项目部署：\n- 新增 Nginx 配置 https 访问域名 (http 自动跳转到 https) ⭐\n- 新增 七牛云添加加速域名访问图片资源\n\n博客后端：\n- 新增 文章搜索接口（数据库模糊查询）\n\n博客前台：\n- 新增 导航栏的文章搜索\n\n---\n\n2022-12-12:\n\n博客前台：\n- 新增 适配移动端 ⭐⭐\n- 优化 删除 Vuetify 相关组件及依赖 (css 样式存在冲突)，统一使用 naive-ui\n- 优化 使用 `$ref` 语法糖功能重构页面\n\n---\n\n2022-12-09:\n\n博客前台：\n- 完善 个人中心的头像上传（注意头像上传需要 Token）\n- 优化 重构通用页面的代码 ⭐\n\n---\n\n2022-12-08:\n\n博客后端：\n- 新增 页面模块 的接口 ⭐\n- 修复 单元测试无法初始化全局变量（flag 包冲突）问题\n\n博客后台：\n- 新增 pinia 数据持久化，防止刷新丢失数据 ⭐\n- 新增 页面管理页面，动态配置前台显示的封面 ⭐\n\n博客前台：\n- 新增 页面根据 `label` 从后端数据中加载封面 ⭐\n- 优化 尝试性使用 `$ref` 语法糖功能\n\n---\n\n2022-12-07:\n\n博客后台：\n- 修复 博客后台，动态加载路由模块导致的热加载失效问题 ⭐⭐\n- 完善 文件上传，抽取出单独的组件 ⭐⭐\n- 新增 个人信息页面 ⭐\n- 优化 发布文章/查看文章 时的文章标签选择、分类选择\n- 修复 发布文章/查看文章 页面数据加载错误",
        "img": "https://static.talkxj.com/articles/771941739cbc70fbe40e10cf441e02e5.jpg",
        "type": 1,
        "status": 1,
        "is_top": 0,
        "is_delete": 0,
        "original_url": "",
        "comment_count": 0,
        "read_count": 0
      }
    ]
  }
}