gxwebsoft/mp-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重新整理仓库

Browse Source
This commit is contained in:
赵忠林
2025-07-25 13:28:38 +08:00
parent 469af7f7f9
commit 64134bf45b
11 changed files with 106 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
README.md
View File

@@ -1,266 +1,129 @@
<h1 style="text-align: center">websoft-uniapp 网宿软件uniapp端</h1>
<div align="center">
<h1>🌐WebSoft Admin</h1>
<p><strong>基于 Vue 3 + Ant Design Vue 的企业级后台管理系统</strong></p>
#### 项目简介
websoft基于Spring、SpringBoot、SpringMVC、SpringSecurity、jjwt、MyBatis、Druid等搭建，前后端分离模式，适用于快递开发和打包为微信小程序、H5、安卓apk、苹果ios、抖音小程序、支付宝小程序等应用
<p>
<img src="https://img.shields.io/badge/Vue-3.x-4FC08D" alt="Vue">
<img src="https://img.shields.io/badge/Ant%20Design%20Vue-3.x-1890FF" alt="Ant Design Vue">
<img src="https://img.shields.io/badge/TypeScript-4.x-3178C6" alt="TypeScript">
<img src="https://img.shields.io/badge/Vite-4.x-646CFF" alt="Vite">
<img src="https://img.shields.io/badge/License-MIT-blue" alt="License">
</p>
</div>
## 📖 项目简介
WebSoft Admin 是一个基于 **Vue 3 + Ant Design Vue** 构建的现代化企业级后台管理系统，采用最新的前端技术栈：
# 官网体验地址（里面有演示地址与文档）
| 官网文档地址 | https://www.gxwebsoft.com |
|---|--------------------------------------------------------------------------------------------------------------------------------------|
| 管理后台演示地址： | http://10093.admin.gxwebsoft.com |
| 关注公众号点体验小程序与H5 | ![输入图片说明](https://oss.wsdns.cn/20240327/f1175cc5aae741d3af05484747270bd5.jpeg?x-oss-process=image/resize,m_fixed,w_300/quality,Q_90) |
- **前端框架**：Vue 3 + TypeScript + Vite
- **UI 组件库**：Ant Design Vue 3.x
- **富文本编辑器**：TinyMCE（支持图片/视频上传、一键排版）
- **图表库**：ECharts + G2
- **工具库**：Lodash、Day.js、CryptoJS
## 🛠️ 技术栈
### 核心技术
| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.x | 渐进式 JavaScript 框架 |
| TypeScript | 4.x | JavaScript 的超集 |
| Vite | 4.x | 下一代前端构建工具 |
| Ant Design Vue | 3.2.11 | 企业级 UI 设计语言 |
| EleAdmin Pro | 1.10.1 | 企业级组件库 |
#### 核心依赖
### 功能组件
- **TinyMCE** - 富文本编辑器，支持图片/视频上传
- **ECharts** - 数据可视化图表库
- **CropperJS** - 图片裁剪组件
- **ExcelJS** - Excel 文件处理
- **Ali OSS** - 阿里云对象存储
| 依赖 | 版本 |
|-----------------|--------|
| Spring Boot | 2.7.x |
| weixin-java | 4.4.0 |
| Spring Security | 2.7.10 |
| Mybatis Plus | 3.5.2 |
| hutool | 5.8.16 |
| swagger | 3.0.0 |
## 📋 环境要求
### 基础环境
- 🟢 **Node.js 16+**
- 📦 **npm 8+ / yarn 1.22+**
- 🌐 **现代浏览器**（Chrome 63+、Firefox、Safari、Edge）
# 本地安装
### 基本环境（必备）
- 1、JDK：8+
- 2、Redis 3.0+
- 3、Maven 3.0+
- 4、MYSQL 5.7+
- 5、Node v8+
### 开发工具
Idea、webstorm、vscode
- **推荐**：VS Code / WebStorm
- **插件**：Vetur / Volar（Vue 3 支持）
### 前端系统工程（UNIAPP端）
## 🚀 快速开始
1、下载代码
```
git clone https://gitee.com/gxwebsoft/websoft-uniapp.git
```
2、使用HBuiderX导入项目：
### 安装依赖
```bash
# 使用 npm
npm install
3、安装依赖：
```
npm install luch-request -S
# 或使用 yarn
yarn install
```
### 后台前端工程（JAVA端）
1、请确保redis已经安装启动
### 启动开发服务器
```bash
# 开发模式
npm run dev
2、下载代码
```
git clone https://gitee.com/gxwebsoft/websoft-java.git
```
3、使用HBuiderX导入项目：
4、安装依赖：
```
npm install luch-request -S
# 或
yarn dev
```
### 后台前端工程（VUE端）
1、请确保本地已经安装node,建议node8或者node10
访问 `http://localhost:3000` 即可看到管理后台。
2、下载代码
```
git clone https://gitee.com/gxwebsoft/websoft-vue.git
```
3、cnpm install或者yarn install,当前所有命令必须当前工程目录下进行：
### 构建生产版本
```bash
# 生产构建
npm run build
![输入图片说明](https://images.gitee.com/uploads/images/2021/0811/163159_895e12de_477893.png "test8.png")
4、安装依赖失败
```
yarn
```
5、在控制台输入命令：npm run dev，控制台打印出如下画面，恭喜表示本项目启动成功拉。
5、打开浏览器输入地址如图：
默认超管账户密码：admin/123456
# nginx线上部署
### 后台系统（Java端）
1、mvn install 或者直接idea打成jar包
2、配置nginx 反向代理如下：
```
server{
listen 443 ssl;
server_name api.gxwebsoft.com;
#listen [::]:81 default_server ipv6only=on;
#ssl on;
ssl_certificate httpssl/gxwebsoft.cn.pem;
ssl_certificate_key httpssl/api.gxwebsoft.cn.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
#error_page 404 /404.html;
#include enable-php.conf;
location / {
proxy_pass http://127.0.0.1:9090;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
access_log /home/wwwlogs/websoftapi.log;
}
# 预览构建结果
npm run serve
```
我配置的了ssl证书，如果不需要证书配置如下即可：
## 🎯 核心功能
### 📝 内容管理系统
- **文章管理**：支持富文本编辑、图片/视频上传
- **一键排版**：智能文章格式优化，包含10种专业排版样式
- **媒体库**：图片/视频文件管理，支持分组和搜索
- **首行缩进**：中文段落格式智能切换
### 🛒 商城管理
- **商品管理**：商品信息编辑、规格设置
- **订单管理**：订单流程跟踪
- **库存管理**：商品库存监控
### 👥 用户权限
- **用户管理**：用户信息维护
- **角色权限**：基于角色的访问控制
- **菜单管理**：动态菜单配置
## 🎨 富文本编辑器特色功能
### 📸 媒体上传
- **图片上传**：支持拖拽、粘贴、文件选择
- **视频上传**：支持多种视频格式
- **媒体库**：统一的媒体文件管理
- **OSS 存储**：阿里云对象存储集成
### ✨ 智能排版
- **一键排版**：10种专业排版优化
- **首行缩进**：中文段落格式切换
- **样式优化**：标题、段落、列表、表格等元素美化
- **响应式**：适配不同屏幕尺寸
## 🏗️ 项目结构
```
server{
listen 80;
server_name api.gxwebsoft.com;
#listen [::]:81 default_server ipv6only=on;
#error_page 404 /404.html;
#include enable-php.conf;
location / {
proxy_pass http://127.0.0.1:8000;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
access_log /home/wwwlogs/websoftapi.log;
}
```
### 后台前端工程（VUE端）
1、输入命令：npm run build:prod 编译打包
2、把打包后的dist目录代码上传到服务器
3、配置nginx如下：
```
server
{
listen 443 ssl;
#listen [::]:81 default_server ipv6only=on;
server_name www.gxwesboft.com;
#ssl on;
ssl_certificate httpssl/www.gxwebsoft.com.pem;
ssl_certificate_key httpssl/www.gxwebsoft.com.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
index index.html;
root /home/wwwroot/system/websoft;
location / {
try_files $uri $uri/ @router;
index index.html;
· }
location @router {
rewrite ^.*$ /index.html last;
}
location ~* \.(eot|ttf|woff)$ {
# add_header Access-Control-Allow-Origin *;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
location ~ .*\.(js|css)?$
{
expires 12h;
}
access_log /home/wwwlogs/websoftapi.log;
}
```
不需要证书如上面Java端配置一样去掉相关证书配置 改监听端口80即可
### 功能模块
* 一：商品模块：商品添加、规格设置，商品上下架等
* 二：订单模块：下单、购物车、支付，发货、收货、评价、退款等
* 三：营销模块：积分、优惠券、分销、砍价、拼团、秒杀、多门店等
* 四：微信模块：自定义菜单、自动回复、微信授权、图文管理、模板消息推送
* 五：配置模块：各种配置
* 六：用户模块：登陆、注册、会员卡、充值等
* 七：其他模块：场地预定模块、办公协同模块等
#### 项目结构
项目采用分模块开发方式
- gxwebsoft-common 公共模块
- gxwebsoft-cms 预定模块
- gxwebsoft-shop 商城模块
- gxwebsoft-booking 预定模块
- gxwebsoft-oa oa模块
- gxwebsoft-weixin 微信相关模块
- gxwebsoft-generator 代码生成模块
### 技术选型
* 1 后端使用技术
* 1.1 SpringBoot2
* 1.2 mybatis、MyBatis-Plus
* 1.3 SpringSecurity
* 1.5 Druid
* 1.6 Slf4j
* 1.7 Fastjson
* 1.8 JWT
* 1.9 Redis
* 1.10 eleadmin
* 1.11 Mysql
* 1.12 swagger
* 1.13 WxJava
* 1.14 Lombok
* 1.15 Hutool
* 前端使用技术
* 2.1 Vue 全家桶
* 2.2 Antdv
* 2.3 uniapp
#### 反馈交流
- 喜欢这个系统的小伙伴留下你的小星星啦,star,star哦！
#### 特别鸣谢
- mybaitsplus:https://github.com/baomidou/mybatis-plus
- hutool:https://github.com/looly/hutool
- eleadmin:https://eleadmin.com/
- wxjava:https://github.com/Wechat-Group/WxJava
- vue:https://github.com/vuejs/vue
- antdv:https://3x.antdv.com/components/overview-cn
src/
├── components/ # 公共组件
├── views/ # 页面组件
│ ├── cms/ # 内容管理
│ ├── shop/ # 商城管理
│ └── system/ # 系统管理
├── router/ # 路由配置
├── store/ # 状态管理
├── utils/ # 工具函数
└── assets/ # 静态资源
```

0
EDITOR_SWITCH_DEMO.md → docs/EDITOR_SWITCH_DEMO.md
View File

0
MARKDOWN_FILE_SELECTOR_DEMO.md → docs/MARKDOWN_FILE_SELECTOR_DEMO.md
View File

0
SELECT_FILE_DRAG_DEMO.md → docs/SELECT_FILE_DRAG_DEMO.md
View File

0
一键排版测试说明.md → docs/一键排版测试说明.md
View File

0
富文本编辑器图片上传功能说明.md → docs/富文本编辑器图片上传功能说明.md
View File

0
富文本编辑器完整功能演示.md → docs/富文本编辑器完整功能演示.md
View File

0
栏目记忆功能测试指南.md → docs/栏目记忆功能测试指南.md
View File

0
栏目选择记忆功能说明.md → docs/栏目选择记忆功能说明.md
View File

0
段落首行缩进切换功能说明.md → docs/段落首行缩进切换功能说明.md
View File

2
package.json
View File

@@ -1,5 +1,5 @@
{
"name": "ele-admin-pro-template",
"name": "mp-vue-template",
"version": "1.10.1",
"private": true,
"scripts": {