5.2 KiB
5.2 KiB
政府端小程序
基于Vue.js和uni-app开发的政府管理系统微信小程序,提供完整的政府监管、审批、人员管理等功能。
功能特性
核心功能
- 数据看板: 实时展示各类统计数据和分析图表
- 监管管理: 监管记录管理、检查任务分配、结果跟踪
- 审批管理: 各类申请审批流程管理
- 人员管理: 政府工作人员信息管理
- 疫情监控: 疫情数据监控和预警
- 服务管理: 政府服务项目管理
- 仓库管理: 物资仓库管理
技术特性
- 基于Vue 2.6 + uni-app框架
- 支持微信小程序、H5、App多端发布
- 响应式设计,适配各种屏幕尺寸
- 模块化组件设计,易于维护和扩展
- 完整的API接口集成
- 用户认证和权限管理
项目结构
government-mini-program/
├── src/
│ ├── components/ # 组件目录
│ │ ├── Home.vue # 首页组件
│ │ ├── Login.vue # 登录组件
│ │ ├── Dashboard.vue # 数据看板
│ │ ├── Supervision.vue # 监管管理
│ │ ├── Approval.vue # 审批管理
│ │ ├── Personnel.vue # 人员管理
│ │ ├── Epidemic.vue # 疫情监控
│ │ ├── Service.vue # 服务管理
│ │ ├── Warehouse.vue # 仓库管理
│ │ └── Profile.vue # 个人中心
│ ├── pages/ # 页面目录
│ ├── services/ # API服务
│ ├── utils/ # 工具类
│ ├── styles/ # 样式文件
│ ├── router/ # 路由配置
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── public/ # 静态资源
├── package.json # 项目配置
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── vue.config.js # Vue配置
开发环境
环境要求
- Node.js 16.20.2+
- npm 8.0.0+
- 微信开发者工具
安装依赖
npm install
开发模式
# H5开发
npm run dev:h5
# 微信小程序开发
npm run dev:mp-weixin
构建生产版本
# H5构建
npm run build:h5
# 微信小程序构建
npm run build:mp-weixin
API接口
认证接口
POST /api/auth/login- 用户登录GET /api/auth/userinfo- 获取用户信息
数据看板接口
GET /api/visualization/data- 获取可视化数据GET /api/supervision/stats- 获取监管统计GET /api/approval/stats- 获取审批统计
监管管理接口
GET /api/supervision/list- 获取监管列表POST /api/supervision- 创建监管记录PUT /api/supervision/:id- 更新监管记录DELETE /api/supervision/:id- 删除监管记录
审批管理接口
GET /api/approval/list- 获取审批列表POST /api/approval- 创建审批POST /api/approval/:id/approve- 审批通过POST /api/approval/:id/reject- 审批拒绝
人员管理接口
GET /api/personnel/list- 获取人员列表POST /api/personnel- 创建人员PUT /api/personnel/:id- 更新人员DELETE /api/personnel/:id- 删除人员
疫情监控接口
GET /api/epidemic/list- 获取疫情列表POST /api/epidemic- 创建疫情记录GET /api/epidemic/stats- 获取疫情统计
服务管理接口
GET /api/service/list- 获取服务列表POST /api/service- 创建服务PUT /api/service/:id- 更新服务DELETE /api/service/:id- 删除服务
仓库管理接口
GET /api/warehouse/list- 获取仓库列表POST /api/warehouse- 创建仓库PUT /api/warehouse/:id- 更新仓库DELETE /api/warehouse/:id- 删除仓库
配置说明
环境配置
在项目根目录创建 .env 文件(或复制 config.env 为 .env):
# API基础地址
VUE_APP_API_BASE_URL=http://localhost:5352/api
# 应用配置
VUE_APP_TITLE=政府管理系统
VUE_APP_VERSION=1.0.0
微信小程序配置
在 manifest.json 中配置小程序信息:
{
"mp-weixin": {
"appid": "your-wechat-appid",
"setting": {
"urlCheck": false,
"es6": true,
"postcss": true,
"minified": true
}
}
}
部署说明
微信小程序部署
- 使用微信开发者工具打开项目
- 配置小程序AppID
- 点击上传,提交审核
- 审核通过后发布
H5部署
- 执行
npm run build:h5 - 将
dist目录上传到服务器 - 配置nginx或其他web服务器
开发指南
添加新页面
- 在
src/pages目录下创建页面文件夹 - 在
pages.json中注册页面 - 在
src/router/index.js中添加路由
添加新组件
- 在
src/components目录下创建组件文件 - 在需要使用的页面中导入并使用
添加新API
- 在
src/services目录下创建服务文件 - 在
src/utils/request.js中添加请求方法 - 在组件中调用API
注意事项
- 确保后端API服务正常运行
- 检查网络请求配置和跨域设置
- 微信小程序需要配置合法域名
- 生产环境需要配置HTTPS
许可证
MIT License