myweb_bigevent: 前后端分离的后台管理项目，用户可以登录注册后，进入管理系统，管理文章分类，编辑更新文章，并可设置昵称，设置个人头像（可裁剪），设置密码等功能 - 前端 Layui + jQuery + Echarts

## 大事件后台管理项目

![输入图片说明](https://img.shields.io/static/v1?label=&message=Layui&color=yellowgreen "在这里输入图片标题") ![输入图片说明](https://img.shields.io/static/v1?label=&message=jQuery&color=yellow "在这里输入图片标题") ![输入图片说明](https://img.shields.io/static/v1?label=&message=Node.js&color= "在这里输入图片标题") ![输入图片说明](https://img.shields.io/static/v1?label=&message=Express&color=blue "在这里输入图片标题") ![输入图片说明](https://img.shields.io/static/v1?label=&message=MySQL&color=lightgrey "在这里输入图片标题")

</div>

### 基本介绍

**前后端分离的后台管理项目**，用户可以登录注册后，进入管理系统，管理文章分类，编辑更新文章，并可设置昵称，设置个人头像（可裁剪），设置密码等功能、

- 首页 Echarts 展示可视化数据图表
- 文章管理——文章类别，文章列表，发表文章
- 个人中心——基本资料，更换头像，重置密码

**仓库地址**

- 前端：https://gitee.com/yang-yu1997/myweb_bigevent
- 后端：https://gitee.com/yang-yu1997/myweb_bigevent_server

**技术栈**：

- **前端** Layui + jQuery + Echarts
- **后端** Node.js + Express 框架 + 数据库 MySQL

### 前端

- MPA 应用
- 基于 jQuery 实现页面主要业务逻辑功能，操作 DOM，实现文章增删改查，个人中心编辑，发送 Ajax 请求等
- 模板引擎实现数据的动态渲染
- Less 编写样式，使用 Layui 快速搭建基本页面 UI，使用表单，按钮，layer 弹出层提示框等
- rem 适配，Echarts 绘制后台系统首页

**主要功能展示**

1. 首页
   ![home png](preview-imgs/01-home.png)

2. 文章管理-文章类别
   ![home png](preview-imgs/02-文章类别.jpg)

3. 文章管理-文章列表
   ![home png](preview-imgs/03-文章列表.jpg)

4. 文章管理-文章发布
   ![home png](preview-imgs/04-文章发布.png)

5. 个人中心-基本资料修改
   ![home png](preview-imgs/05-个人中心-基本资料修改.png)

6. 个人中心-修改密码
   ![home png](preview-imgs/06-修改密码.png)

7. 登录页面
   ![home png](preview-imgs/07-登录页面.jpg)

### 后端

- 基于 Express 框架
- Node.js 操作 MySQL(本地) 实现用户的登录注册功能
- 配置 HTTP2，配置 JWT 跨域认证，CORS 跨域，加密密码，表单数据合法性验证
- 实现文章增删改查功能，模块化架构

### 目录结构描述

（本项目——前端部分）
myweb_bigevent

```
├── 笔记
├── 素材
├── index.html -- 后台主页 html
├── login.html -- 登录页面 html
├── article -- 文章管理
│   └──art_cate.html -- 文章分类
│   └──art_edit.html -- 文章编辑
│   └──art_list.html -- 文章列表
│   └──art_pub.html -- 文章发布
├── home
│   └──dashboard.html -- 首页展示
├── user -- 用户资料管理
│   └──user_avatar.html -- 用户头像
│   └──user_info.html -- 用户信息
│   └──user_pwd.html -- 用户密码
├── assets
│   └──css -- css 文件，下级有分类
│   └──fonts -- iconfont
│   └──images -- 图片
│   └──js -- js 文件，下级有分类
│   └──lib -- 依赖
│       └── cropper
│       └── Layui
│       └── echarts.min.js
│       └── jquery.js
│       └── ...
```

### 项目运行

#### 依赖及插件

- 前端: jQuery, Layui, Echarts, cropper(裁剪图片), tinymce(富文本编辑器), art-template(数据渲染模板引擎)
- 后端：MySQL, Node.js, Express, cors 跨域中间件, jsonwebtoken + express-jwt 解析 token, bcryptjs 加密密码，hapi/joi + escook/express-joi 中间件定义验证规则

#### 使用说明

1.  前端项目：`git clone git@gitee.com:yang-yu1997/myweb_bigevent.git`
2.  后端项目：`git clone git@gitee.com:yang-yu1997/myweb_bigevent_server.git`
3.  导入并连接本地 MySQL 模块——示例

```js
// 1. 导入 mysql 数据库模块 首先要npm i mysql
const mysql = require("mysql");
const { resourceLimits } = require("worker_threads");

// 2. 建立与 mysql 数据库连接 指定配置对象
const db = mysql.createPool({
  host: "127.0.0.1", // 数据库的IP地址 这里是本机地址
  user: "root", // 数据库的账号
  password: "admin123", // 数据库用户的密码
  database: "my_db_01", // 指定要操作的数据库
});
```

4. 后端项目：`npm install`
5. 启动后端项目：`node app.js`
6. 前端项目：live-server 启动 login.html

### 版本更新

- 2022.08.05 更新支持 HTTP2

#### 参与贡献

1.  Fork 本仓库
2.  新建分支
3.  git commit 提交代码
4.  新建 Pull Request

Jane/myweb_bigevent

简介

发行版

贡献者

近期动态

Jane/myweb_bigevent .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Jane/myweb_bigevent