1、说明
前端包括4个端,分别是:
- 用户端(微信小程序)
- 快递员端(安卓app)
- 司机端(安卓app)
- 后台管理端(pc web)
2、用户端
2.1、开发者工具
用户端是基于微信小程序开发的,首先需要下载并安装微信开发者工具:
可以使用课程资料中提供的安装包或在线下载,点击下载
2.2、申请测试账号
接下来,申请微信小程序的测试账号,点击申请,通过手机微信扫码进行操作。
申请成功后,进行登录,点击登录,如下:
通过手机微信进行扫码登录:
即可看到测试账号信息:
需要将AppID和AppSecret保存到nacos配置中心的 sl-express-ms-web-customer.properties
中:
2.3、导入代码
从git拉取代码,地址:http://git.sl-express.com/sl/project-wl-yonghuduan-uniapp-vue3
打开微信开发者工具(需要通过手机上的微信客户端进行扫码登录,不要使用游客身份登录),导入代码,注意导入的目录为:project-wl-yonghuduan-uniapp-vue3\unpackage\dist\dev\mp-weixin
,使用测试账号:
导入完成后,需要修改env.js
配置文件,将baseUrl
变量设置为:http://api.sl-express.com/customer
,此链接为与后端服务交互的地址,入口为网关地址:(修改完成后需要点击【编译】按钮进行重新编译)
如果需要完成登录,需要确保如下服务保持启动状态:
测试登录:
登录成功:
3、司机、快递员端
司机和快递员端都是安卓app的,可以安装在手机或通过模拟器进行使用,这里介绍模拟器的方式进行使用。(如果使用手机的话,需要通过内网穿透的方式访问网关)
3.1、模拟器
3.1.1、联想模拟器
在Windows平台推荐使用【联想模拟器】,安装包在资料\软件包\模拟器
中找到。(如果联想模拟器不能正常使用也可以使用其他的模拟器)
安装完成后,设置分辨率为【手机 720 * 1280】:
效果如下:(安装apk直接拖入即可)
模拟器中的共享目录:
在模拟器的定位功能中可以设定位置信息,主要用于app中获取定位,在项目用于车辆位置上报等场景:
3.2、启动服务
测试登录的话,需要确保如下的服务处于启动状态:
3.3、快递员端
在app中设置接口地址:http://192.168.150.101:9527/courier
使用正确的用户密码即可登录:
3.4、司机端
司机端与快递员端类似,需要配置url为:http://192.168.150.101:9527/driver
输入正确的用户名密码即可登录成功:
4、pc管理端
pc管理端是需要将前端开发的vue进行编译,发布成html,然后通过nginx进行访问,这个过程已经在Jenkins中配置,执行点击发布即可。
地址:http://jenkins.sl-express.com/view/%E5%89%8D%E7%AB%AF/job/project-slwl-admin-vue/
vue打包命令:
将打包后的html等静态文件拷贝到指定目录下:
nginx中的配置:
nginx所在目录:/usr/local/src/nginx/conf
输入地址进行测试:http://admin.sl-express.com/#/login
确保如下服务是启动状态: