【源码】基于HTMLCSSJavaScriptlayuicropper框架的大事件后台管理系统

项目简介

本项目是一个基于HTML、CSS、JavaScript、layui和cropper框架的大事件后台管理系统。它提供了完整的后台管理解决方案，具备用户登录注册、个人信息管理、文章管理等功能。采用模块化设计，代码结构清晰，易于维护与扩展。

项目的主要特性和功能

1. 用户管理：支持用户注册与登录，登录成功后能获取用户信息并渲染到页面，显示欢迎语和头像。用户还可更新个人基本资料、修改密码、更换头像。
2. 表单验证：利用layui的表单验证规则，涵盖内置和自定义规则，保障用户输入数据的有效性。
3. 身份认证：采用JWT身份认证机制，登录成功后保存token，后续请求携带token进行身份验证，认证失败则跳转至登录页面。
4. 文章管理：设有文章列表页，支持搜索筛选；可添加文章，需录入标题、分类、内容、封面图片等信息，文章内容使用富文本编辑器，封面图片可裁剪。

安装使用步骤

环境准备

确保已安装VS Code等开发工具，同时安装vscode的live server插件（若live server不可用，可安装preview on web server插件）。

搭建项目目录

1. 创建 bigevent 文件夹作为项目文件夹。
2. 将 资料 里的 assets 和 home 复制到 bigevent 文件夹中。
3. 用vscode打开 bigevent 文件夹。

初始化项目

在项目根目录下执行以下命令： bash git init git add . git commit -m '提交了初始的文件' bash git remote add o1 git@gitee.com:laotang1234/bigevent-123.git git push -u o1 master git push -u o2 master

配置通用JS文件

在 assets/js/common.js 中配置大事件项目的接口根路径、headers和complete。

运行项目

1. 使用Live Server插件打开HTML文件：在vscode中右键点击HTML文件，选择 “Open with Live Server” 在浏览器预览页面。
2. 若使用preview on web server插件，右键点击HTML文件，选择 “vscode-preview-server：Launch on browser” 进行预览。

测试功能

通过浏览器访问相应页面，测试注册、登录、个人信息管理、文章管理等功能。

注意事项

1. 项目中部分功能（如图片剪裁插件、涉及iframe调用父页面函数）必须使用live server的方式打开页面。
2. 若注册用户名重复，服务器返回状态码500，可在 common.js 中添加判断条件进行错误提示。
3. 表单验证需确保表单（form标签）有 layui-form 类，按钮为submit类型且有 lay-submit 属性。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】