idou85 / blog

使用Next.js+Vue.js+Express+Typescript搭建的个人博客以及管理系统

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

个人博客系统(源码长期更新)

Logo

技术栈

用户端:Next.js(SSR)+TypeScript+Ant Design
管理系统:Vue3+Element-Plus
服务端:TypeScript+Express+Sequelize(ORM)
数据库:MySQL

ALL in Vue

系统相对完善对博客网站所需的 SEO 有处理可以在生产环境中进行使用,也可以当做毕业设计,系统提供一份用户端为 Vue3 的 CSR 版本(前端 Vue3,服务端 Node.js 使用 JavaScript),可联系 QQ:1974109227

相关链接

  1. 博客预览地址:https://blogweb.cn
  2. GitHub 仓库地址:https://github.com/Lrunlin/blog
  3. Gitee 仓库地址:https://gitee.com/awebcoder/blog

注:

Node.js 版本推荐使用 14.17.1,同时推荐使用 yarn 作为包管理器(未来会对 Node 版本进行升级)

功能

用户端

  1. 在首页查询全部文章
  2. 展示作者基本社交平台账号
  3. 点击文章标题进入文章页面查询文章详情
  4. 搜索页面可以根据搜索栏关键词进行指定文章查询
  5. 关于作者编写作者简单信息
  6. 发布文章、设置用户基本信息
  7. 可以对管理员进行留言
  8. 浏览并使用管理员发布的开发 API 接口

管理系统

  1. 分页查询文章
  2. 可以查询指定文章信息并对其修改、删除
  3. 发布文章可以上传图片并对图片进行水印添加
  4. 可以查询用户留言进行并且删除
  5. 可以添加、查询文章类型
  6. 可以查询、删除富文本编辑器所有上传的静态图片
  7. 可以简单获取服务器当前信息
  8. 登录并且可以修改管理员密码
  9. 处理开源仓库信息
  10. 增删改查友链
  11. 大屏数据可视化

开发环境启动

关于项目启动环境见文档顶部说明

  1. 导入 SQL 文件
  2. npm install yarn -g (如果有 yarn 请忽略)
  3. 点击 install.bat 自动安装依赖 (完成后关闭 cmd 窗口)
  4. 点击 dev.bat 启动项目

生产环境部署

本站使用宝塔 Linux 进行网站部署,对于不同开发者来说生产环境服务器不同。如果你在项目部署时遇到了问题可以通过顶部的联系方式联系我。

更新计划

  1. 用户端支持移动端,更换 CSS 管理方案为 tailwind CSS 或者 styled-components
  2. 服务端 Node.js 框架更换为 Koa2 或者 Nest.js
  3. 将富文本编辑器换为 Markdown 编辑器
  4. 管理系统使用 React18 重构
  5. 在线友链申请功能
  6. 管理员管理系统配置功能

服务器推荐

  1. 服务器:腾讯云(推荐)
  2. 服务器:阿里云
  3. CDN/OSS:七牛云

预览图片

文章页面 用户端首页 数据可视化 文章编辑 管理系统首页 文章管理页面

Star History

Star History Chart

About

使用Next.js+Vue.js+Express+Typescript搭建的个人博客以及管理系统


Languages

Language:TypeScript 63.2%Language:Vue 32.0%Language:JavaScript 4.6%Language:HTML 0.2%Language:Batchfile 0.1%