vue框架大概要学多久(前端vue要学5天就会方法)

Vue + NodeJS + MySQL 搭建文章后台管理系统

PHPer 2022-10-24 257 0 1
这个项目实测跑了下还行。基本功能比如注册登陆等功能做的还是可以直接应用的。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执行建表。

前端:

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

# 生成静态文件npm run build

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

后端:

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

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

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

预览

1.gif2.gif3.gif4.gif322056a8cd_normal.gif

主要功能

- 注册
- 登录 / 注销
- 用户信息更改
- 文章管理
	- 发布文章
	- 删除文章
	- 编辑文章
	- 模糊搜索
	- 点赞
	- 收藏到特定收藏夹
	- 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个联系。 ...

立即注册
分享的网址网站均收集自搜索引擎以及互联网,非查问网运营,查问网并没有提供其服务,请勿利用其做侵权以及违规行为。

更新于:2022-10-24 02:42:25
    您需要登录后才可以评论。 立即注册
    相关内容

    【该文章就是坑】mysql使用中文的全文索引(注意只有5.7.6以上的版本支持)

    MySQL数据库设计总结

    什么是B-Tree

    二叉查找树、平衡二叉树、红黑树、B-/B+树性能对比

    MYSQL8.0全文索引使用​

    Mysql问题整理

    Yii2数据库报错-SQLSTATE[HY093]: Invalid parameter number: no para...

    Mysql server has gone away 报错原因分析及解决办法

    mysql 警告 could not be resolved: Name or service not known

    Mysql用特殊字符设置密码遇到的问题

    Mysql的函数substring使用注意事项

    MySQL 5.7内存使用分析

    mysql 命令整理

    【mysql】主键、普通索引、唯一索引和全文索引的比较

    没有接收到要导入的数据。可能是文件名没有提交,也可能是文件大小超出 PHP 限...

    Mysql 报错'SQLSTATE[HY000] [1045] Access denied for user 'root'@'...

    php连接mysql报错The server requested authentication method unknown to ...

    Mysql登录提示ERROR 2003 (HY000): Can't connect to MySQL server o...

    Mysql报错SQLSTATE[HY000]: General error: 1366 Incorrect string ...

    全网最详尽的Centos和Windows系统 Mysql8 root忘记密码解决办法

    mysql数据库操作 报错 #1030 - Got error 176 "Read page with wrong ...

    Linux系统彻底卸载MySQL数据库

    Linux下mysql5.7忘记root密码的解决方法

    ERROR 1130 (HY000): Host '127.0.0.1' is not allowed to connect to...

    mysql创建数据类型为JSON时,显示的longtext数据类型

    mysql 修改编码utf8mb4依旧无法保存表情 Incorrect string value: '\x解决办法

    MySQL 中 不等于 会过滤掉 Null 的问题

    RECOVER_YOUR_DATA勒索恢复

    Mysql知识学习

    MySQL 8.0 索引特性1-函数索引

    MySQL字符串函数substring:字符串截取

    Mysql的临时变量取值3例

    mysql查找字符串出现位置

    mysql 更改AUTO_INCREMENT 失败的解决办法

    MYSQL 数据库导入导出命令

    mysql如何判断不包含某个字符串

    Mysql中不要用操作符和函数名等等来命名字段

    ORM 实例教程

    Mysql中的排序规则utf8_unicode_ci、utf8_general_ci的区别总结

    MySQL 中 datetime 和 timestamp 的区别与选择

    Invalid default value for ‘updated_at‘

    设置MySQL的group_concat_max_len长度为最大值

    MySQL中concat()、concat_ws()、group_concat()函数使用技巧与心得

    mysql的left join和inner join的效率对比,以及如何优化

    推荐内容

    分享几个好用的bt搜索bt资源下载网址网站

    影视电影剧集动漫综艺bt资源在线播放网址网站推荐分享

    全网最新bt磁力搜索引擎bt资源bt网站网址分享

    人气美女女优百度指数排行榜(波多野结衣,苍井空,三上悠亚,深田咏美,桥本有菜,北条...

    最强人造人深田咏美,业界的社交女王

    人生起起落落的三上悠亚,成名前的清纯风,怎么搭配出来的?

    业内第一大长腿,桥本有菜的腿究竟有多长

    波多野结衣,岛国业界著作最多的超级劳模

    日本AV界NO.1,苍井空是多少宅男的疯狂?

    美女女优视频混剪 This Girl-Laza Morgan

    怎样使用V2Ray代理和SSTap玩如魔兽世界/绝地求生/LOL台服/战地3/黑色沙漠/彩...

    sstap游戏代理教程 从此玩如魔兽世界/绝地求生/LOL台服/战地3/黑色沙漠/彩虹六...

    影视电影剧集动漫综艺bt资源在线播放网址网站推荐分享