这个项目实测跑了下还行。基本功能比如注册登陆等功能做的还是可以直接应用的。20221024

转载的内容不全，建议看原文。

WoodenStone

2021-11-24 19:17:25 Projects vue | nodejs | MySQL

功能、目录结构、设计说明和一些小细节。

概览

Article Admin 是一个前后端分离的文章/博客管理系统。前端采用Vue2.x并结合ElementUI，后端使用Node.js的Express框架，数据库为MySQL8.0。

本项目是HITSZ 21春数据库系统课程实验四的作品。

在线demo怕被攻击就不放出了

repository:[github]WoodenStone/article_admin

SETUP

克隆项目

git clone https://github.com/WoodenStone/article_admin.git

数据库

将articleAdmin.sql导入MySQL即可生成数据库。

由于存在同一张表上存在多个触发器的情况，MySQL版本不能低于5.7。

后端

# 进入项目目录

cd article_admin/node_back_end# 安装依赖npm install# 启动项目

node app.js

注意：需要修改数据库用户名、密码。

前端

# 进入项目目录cd article_admin/vue_front_end# 安装依赖npm install# 启动项目npm run dev
		

访问http://localhost:9529查看前端界面。

部署

数据库：

安装不低于5.7版本的MySQL，并导入articleAdmin.sql执行建表。

前端：

根据需要配置生产环境的路径，然后运行：

将/dist目录下的文件放在服务器可访问路径下（如/www）。

后端：

修改/src/sql/db.js中的数据库配置，修改/app.js中的图片上传路径。

使用pm2或forever等工具启动项目，保持后端为开启状态。

最后修改nginx配置，通过ip或域名访问查看效果。

预览

主要功能

- 注册
- 登录 / 注销
- 用户信息更改
- 文章管理
	- 发布文章
	- 删除文章
	- 编辑文章
	- 模糊搜索
	- 点赞
	- 收藏到特定收藏夹
	- Markdown编辑器及图片插入
	- 文章标签
	- 按特定方式排序（时间倒序、赞数降序、评论数降序、收藏数降序）
- 评论回复
	- 评论文章
	- 回复用户
	- 查看个人收到的评论、回复
- 收藏夹
	- 添加 / 删除收藏夹
	- 更改收藏夹名及描述
	- 内部文章查看、删除、移动
- 用户关注
	- 关注和取关
- 站内信
	- 收 / 发站内信
	- 阅读状态标记
- 输入错误地址时重定向至404

目录结构

.
|-- node_back_end		# 后端工程文件
|   |-- app.js			# 主要API
|   |-- package-lock.json
|   |-- package.json		# 配置文件
|   |-- public			# 静态目录
|   |-- src			# 数据库相关操作
|   |-- upload			# 上传图片存放
|-- vue_front_end		# 前端工程文件
    |-- babel.config.js
    |-- package-lock.json
    |-- package.json		# 项目配置
    |-- public			# html模板和网站图标
    |   |-- favicon.ico
    |   |-- index.html
    |-- src			# 主要代码
    |   |-- App.vue
    |   |-- assets		# 静态资源，如图标字体等
    |   |-- components		# 公用组件
    |   |   |-- ArticleList	# 文章列表组件
    |   |   |-- BreadCrumb	# 导航栏面包屑
    |   |   |-- Collection	# 收藏夹组件
    |   |   |-- Comment		# 评论、回复组件
    |   |   |-- Message		# 站内信（私信）组件
    |   |   |-- Tags		# 文章标签组件
    |   |-- layout		# 页面基础布局
    |   |-- main.js		# 入口文件 加载组件等
    |   |-- plugins		# 引入的插件
    |   |-- router		# 路由
    |   |-- settings.js
    |   |-- store		# 全局store管理
    |   |-- styles		# 全局样式
    |   |-- utils		# 常用方法
    |   |-- views		# 各页面
    |       |-- error-page	# 404页面
    |       |-- form		# 表单 实现文章修改和创建
    |       |-- home		# 站点主页面
    |       |-- login		# 登录、注册
    |       |-- table
    |       |   |-- detail.vue	# 文章详情
    |       |   |-- index.vue	# 文章列表
    |       |-- user		# 用户相关页面
    |           |-- change.vue			# 修改用户信息
    |           |-- collection.vue		# 收藏夹
    |           |-- components
    |           |   |-- UserInfo.vue		# 用户信息主页面
    |           |-- favorite.vue		# 收藏的文章
    |           |-- index.vue			# 路由入口
    |           |-- message.vue			# 站内信页面
    |           |-- visitor.vue			# 访客界面
    |-- vue.config.js		# vue-cli配置

数据库

概览

数据库设计共包含8个实体，14个联系。 ...