基于 uni-app + Vue 2 的专家预约系统前端(H5 端),包含登录、专家检索、预约列表与 详情等功能。
uni-app+Vue 2uni-simple-router路由Vuex状态管理uViewUI 组件库axios与自定义请求封装
- Node.js ≥ 14
- npm ≥ 6
- 安装:
npm install
本项目使用 Vue CLI 的环境变量机制。在项目根目录创建 .env 文件,并填写地图
Key:
# 复制 .env.example 为 .env 后填写实际值
VUE_APP_MAP_KEY=你的腾讯地图WebService Key
说明:
- 地图 Key 仅在运行时以
process.env.VUE_APP_MAP_KEY注入到前端代码中;请勿将真 实秘钥提交到仓库。 - 示例文件已提供:
.env.example。 .gitignore已忽略.env、.env.development、.env.production。
- 启动:
npm run serve - 默认在
http://localhost:8080预览(端口因本地环境可能不同)。
- 构建:
npm run build - 构建产物输出到
dist。
- 请求基地址在
src/config/request.js中分别配置了service和customService。 - 路由路径常量在
src/router/routes.js,权限配置在src/router/permission.js。 - 地图(地理编码)调用在
src/api/map.js,已改为从.env读取VUE_APP_MAP_KEY:key: process.env.VUE_APP_MAP_KEY- 同时已移除
src/manifest.json中的硬编码地图 Key,避免泄露。
src/api/接口封装src/pages/页面与业务逻辑src/components/组件src/config/请求与全局事件配置src/store/Vuex 模块
- 访问地理编码接口失败:请确认
.env中VUE_APP_MAP_KEY已正确设置且未过期; 腾讯地图 WebService 需在控制台开启相关服务并绑定域名白名单。 - 接口 401:请确认登录后本地已存储并携带 Token(见
src/common/utils.js)。
此仓库未附带许可文件,请在私有环境中使用或补充许可证。