Vue3+TS+Node打造个人博客（数据库设计）

最新推荐文章于 2025-05-05 13:12:04 发布

lzz丶忠不悔

最新推荐文章于 2025-05-05 13:12:04 发布

阅读量512

点赞数 5

CC 4.0 BY-SA版权

分类专栏：程序员文章标签：数据库

本文链接：https://blog.youkuaiyun.com/rt3Dmax9/article/details/137484729

本文详细描述了使用Vue3、TS和Node构建的个人博客系统的数据库设计，包括多对多、一对一关系以及子级关系的处理，状态字段的考虑，以及如何通过E-R图或思维导图进行实体关系设计。作者还将分享后续的业务实现和学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

您的关注意义重大

原创@前端司南

本项目代码已开源，具体见：

前端工程：vue3-ts-blog-frontend[1]

后端工程：express-blog-backend[2]

数据库初始化脚本：关注公众号前端司南，回复关键字“博客数据库脚本”，即可获取。

一个博客系统应该有什么功能，相信大家都是非常熟悉的，其核心无非是文章、分类、创作。而像标签、评论、留言、交流、后台管理这些功能，都是锦上添花。

要实现这些功能，最关键的是先梳理各个功能之间的关系。提到关系，自然就会联想到关系型数据库。

在设计数据库前，需要先理清实体和实体之间的联系，这里会用到 E-R 图或者 UML 之类的建模语言来做一个概要设计。

但是从

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lzz丶忠不悔

关注关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 3入门指南：构建个人博客系统的前端

09-26

563

在本篇博客中，我们介绍了如何使用 Vue 3 构建个人博客系统的前端。我们从初始化项目开始，创建了文章列表、文章详情以及创建/编辑文章的组件。同时，我们配置了路由和状态管理，以及与后端的数据交互。这只是一个入门指南，博客系统通常需要更多功能和更复杂的逻辑。但通过学习本教程，你已经掌握了构建 Vue 3 前端的基本知识，可以进一步扩展和优化你的个人博客系统。希望这篇博客对你有所帮助，祝你成功构建自己的个人博客前端！

Vue3+TS+Node打造个人博客（数据库设计，2024前端高级面试题总结

m0_60667010的博客

04-03

714

如上图所示，针对我的个人博客，我做了简单的实体和实体关系设计。多对多关系=====其中文章表article是核心，考虑到一篇文章可能关联多个分类category或标签tag，一个分类或标签下也会有多篇文章，所以我这里设计的都是，用到了关系表。关系表不会涉及很多字段。主要是关系表中设计的两个外键起到关键作用。根据这么一张关系表，就能完成多对多的关联关系。一对多关系=====文章下有评论，一篇文章可以有多条评论，文章article和评论comment的关系就是一对多的，这个是很好理解的。

参与评论您还未登录，请先登录后发表或查看评论

使用Vue 3实现一个简单的博客架构，包含文章列表和文章详情

有我更精彩的博客

08-20

876

通过使用 Vue 3 的setup语法糖，我们能够快速构建一个简单的博客架构。在这个例子中，我们展示了如何使用 Vue Router 管理路由，以及如何使用响应式数据展示文章列表和详情。当然，以上的结构非常基础，随着你对 Vue 的深入了解，你可以添加更多的功能，比如评论系统、文章创建、删除等操作。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作书籍详情。

基于Vue3开发：打造高性能个人博客与在线投票平台

最新发布

全栈知识深入分享coder

05-05

1022

基于Vue3开发：打造高性能个人博客与在线投票平台

基于vue3+springboot的个人博客系统

欢迎光临

01-12

2179

实现了新增文章、搜索、查看等功能，基于Elasticsearch做的搜索前端地址：my-blog-ui 后端地址：my-blog

一款开箱即用的 Vue3 博客框架，不得不爱

qq_46856619的博客

04-23

6308

KOI-BLOG🌻 是一款的优雅、简洁、美观的博客模板，基于 Vue3、Vite、TypeScript、Pinia、Pinia持久化插件、Unocss 和 ElementPlus等前端最新技术栈。

Vue3+TS+Node打造个人博客，前端开发交流

04-10

848

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。一个人可以走的很快，但一群人才能走的更远。

blog:基于Vue3，Koa2开发的一套博客

03-15

博客 Blog是一个基于vue和node的小小小博客前端用vue，最初用Koa2 快速入门技术栈前置：用户端：，管理员端：，初期：，本地运行安装数据库和环境。 # 安装服务端依赖 npm install # 运行服务 npm run dev # 安装前台依赖 npm install # 运行前台项目 npm run serve # 安装后台依赖 npm install # 运行后台项目 npm run serve # 即可通过 http://127.0.0.1:3000访问项目目录 | blog-admin 后台管理系统 | blog-home 用户端 | blog-serve 后台 | .gitignore git配置打包 # 在前台和后台目录分别 npm ru

全栈-Vite3+Vue3+TS+Ant-design-vue3整合

11-07

Vue3+TS+Node打造个人博客（数据库设计）(1)，实战案例

2301_82244182的博客

04-04

967

根据这么一张关系表，就能完成多对多的关联关系。一对多关系=====文章下有评论，一篇文章可以有多条评论，文章article和评论comment的关系就是一对多的，这个是很好理解的。对于这种关系，我的设计是在评论表中用一个外键article_id来实现关联。要查询某文章下的评论时，就可以依据条件article_id筛选出对应的评论数据。子级关系====同样地，一条评论下也会有很多回复，针对回复，我是单独设计了reply表。comment和reply也是一对多的关系，reply表中有。

Vue3创建最基础的博客网站示例

风不归的乐园

12-06

1220

Vue3创建最基础的博客网站示例

vue3-博客

02-25

vue3-博客项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置请参阅。

vue 简单个人博客

03-28

实现分页功能，bootstrap栅格布局，用vue2实现前后端分离，

基于SpringBoot 和 Vue3 开发的博客系统源码，适合新手学习，二次开发，课程设计和毕业设计等

06-15

基于SpringBoot 和 Vue3 开发的博客系统源码 ## 快速开始 1. 运行 `resource/sql/kila_kila_blog.sql`，创建数据库 2. 修改 `kilakila-backend/blog/src/main/resources/application.yml` 中的配置，主要有以下两项： 1. `spring.datasource` 中的 `url`、`username` 和 `password` 改成你自己的 2. `spring.redis` 的 `password` 改成你自己的，没有设置 redis 密码的话可以去掉该项配置 3. 在 IDEA 中导入 kilakila-backend 项目，启动 `BlogApplication` 4. 进入 kilakila-frontend 目录，打开终端，运行以下命令： ```shell npm install npm run serve ``` 5. 在浏览器中打开网页 [http://localhost:8080/](http://localh

springboot+vue3实现《个人小博客》（二）发布小文章（添加文章）

weixin_43969936的博客

05-10

698

springboot+vue3实现《个人小博客》第二部分，发布文章

vue3个人博客，从零到一搭建

shi_zuka的博客

02-22

2036

一个开源的博客，仅用于学习和记录日常的知识点。前端使用了最新的vue3vite2TypeScript等主流技术开发，后端使用的是最契合Typescript的nestjs开发，数据库采用的是mysql，代码管理采用的是自己搭的轻量级gitea，后端考虑到服务器和数据库的安全性暂时代码不开源，后期整理后会开源~。

Vue3+TS+Node打造个人博客（总览篇）

前端原创分享，常年坚持记录和分享，全网阅读量超百万

02-24

2592

从 Vue3 正式发布到现在，也快过去一年了（写这行文字的时候是2021年09月08日，拖延症…）。但是就我最近招聘面试的一些经历来看，很多 Vue 技术栈的候选人依然还没有使用过 Vue3。关于他们没有选择使用 Vue3 这个事情，我觉得也是可以理解的。一方面，Vue3 直接放弃了 IE11。虽然 IE 的用户数量在持续下降，但是想让老板们直接放弃 IE11 还是有一些困难。另外就是，做项目这种事情，有时候人们的选择就是能用就行，升级 Vue3 可能并不能给项目带来太多效益。对于一些历史悠久的项

vue实现个人博客

ChenYJoetj的博客

07-28

4084

Vue实现个人博客一、首页效果展示标题的彩虹色展示博客标题字母大写以及博客预览内容限制并在结尾加上“．．．”分页的实现二、写博客页面效果展示markdown编辑器三、搜索功能一、首页效果展示在连数据库前可用JSONplaceholder的数据接口用假数据来测试，先将整体样式确定。确定好页面后再连接数据库的真数据。这里使用是数据库是firebase（使用时要注意打开数据库可写和可读）标题的彩虹色展示在main.js中全局自定义指令 Vue.directive('tit',{ bind(el){

vue开发个人博客

huangjiangmin

01-05

9425

vue实现个人简约博客

vue3+ts+node+mysql开发个人博客

08-20

- *1* *2* *3* [Vue3+TS+Node打造个人博客（后端架构）](https://blog.youkuaiyun.com/weixin_41196185/article/details/123415200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...