springboot+vue.js校园快递代取小程序一次创业经历心酸分享

小王通过开发一个校园快递代取小程序，在校园兼职快递代取赚取了丰厚的利润，因此我产生了灵感带领大家开发校园快递代取小程序，下面介绍下我的开发思路

数据库建模

开发之前我们想要做具体的需求分析然后建表，建表语句如下：

/*
Navicat MySQL Data TransferSource Server         : win7_3366_v5.6
Source Server Version : 50644
Source Host           : localhost:3366
Source Database       : dmp-codeTarget Server Type    : MYSQL
Target Server Version : 50644
File Encoding         : 65001Date: 2021-02-23 15:35:18
*/SET FOREIGN_KEY_CHECKS=0;-- ----------------------------
-- Table structure for dmp_order
-- ----------------------------
DROP TABLE IF EXISTS `dmp_order`;
CREATE TABLE `dmp_order` (`ID` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',`NAME` varchar(32) NOT NULL COMMENT '名称',`DESCRIPTION` varchar(32) DEFAULT NULL COMMENT '描述',`SHIPPING_ADDRESS` varchar(128) NOT NULL COMMENT '收货地址',`COMPANY` varchar(32) NOT NULL COMMENT '快递公司',`DELIVERY_CODE` varchar(32) DEFAULT NULL COMMENT '取件码',`EXPRESS_TYPE` varchar(32) DEFAULT NULL COMMENT '快递类型',`EXPECTED_TIME` datetime DEFAULT NULL COMMENT '期望时间',`EXPRESS_RECEIVER_NAME` varchar(32) NOT NULL COMMENT '收件人',`RECEIVER_PHONE_NUMBER` varchar(32) NOT NULL COMMENT '收件人号码',`REWARD` decimal(32,8) NOT NULL COMMENT '报酬',`RECEIVED` tinyint(4) NOT NULL COMMENT '是否接单',`STATUS` tinyint(4) NOT NULL COMMENT '状态',`ORDER_PUBLISHER_ID` int(11) NOT NULL COMMENT '发布者ID',`ORDER_RECEIVER_ID` int(11) DEFAULT NULL COMMENT '接单者ID',`CREATED_BY` varchar(32) DEFAULT NULL COMMENT '创建人',`CREATED_TIME` datetime DEFAULT NULL COMMENT '创建时间',`UPDATED_BY` varchar(32) DEFAULT NULL COMMENT '更新人',`UPDATED_TIME` datetime DEFAULT NULL COMMENT '更新时间',PRIMARY KEY (`ID`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='订单 ';-- ----------------------------
-- Records of dmp_order
-- ----------------------------
INSERT INTO `dmp_order` VALUES ('3', 'zhangsan1614064445452', '6666666', '上海理工大学', '顺丰快递', '88888', '大包裹', '2021-03-05 15:13:00', 'lisi', '13253648350', '66.00000000', '0', '2', '2', '4', null, '2021-02-23 15:14:05', null, null);
INSERT INTO `dmp_order` VALUES ('4', 'zhangsan1614065432465', '尽快', '郑州中移', '中通快递', '7758258', '小包裹', '2021-02-24 15:29:00', '刘彤', '18638614155', '10.00000000', '0', '1', '2', '4', null, '2021-02-23 15:30:33', null, null);-- ----------------------------
-- Table structure for dmp_user
-- ----------------------------
DROP TABLE IF EXISTS `dmp_user`;
CREATE TABLE `dmp_user` (`ID` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',`OPEN_ID` varchar(128) DEFAULT NULL COMMENT '微信OPEN_ID',`NAME` varchar(32) NOT NULL COMMENT '姓名',`STUDENT_ID` varchar(128) NOT NULL COMMENT '学号',`PASSWORD` varchar(32) DEFAULT NULL COMMENT '密码',`PHONE_NUMBER` varchar(32) NOT NULL COMMENT '电话号码',`CREDIT_SCORE` int(11) NOT NULL COMMENT '信誉积分',`DESCRIPTION` varchar(32) DEFAULT NULL COMMENT '描述',`CREATED_BY` varchar(32) DEFAULT NULL COMMENT '创建人',`CREATED_TIME` datetime DEFAULT NULL COMMENT '创建时间',`UPDATED_BY` varchar(32) DEFAULT NULL COMMENT '更新人',`UPDATED_TIME` datetime DEFAULT NULL COMMENT '更新时间',PRIMARY KEY (`ID`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='用户 ';-- ----------------------------
-- Records of dmp_user
-- ----------------------------
INSERT INTO `dmp_user` VALUES ('2', null, 'zhangsan', '20187710332', '123456', '17527398216', '0', null, null, '2021-02-23 14:44:00', null, null);
INSERT INTO `dmp_user` VALUES ('3', null, 'admin', '2018888888', '123456', '17527398217', '0', null, null, '2021-02-23 14:44:00', null, null);
INSERT INTO `dmp_user` VALUES ('4', null, 'wangwu', '20187710888', '123456', '16638208962', '0', null, null, '2021-02-23 14:56:28', null, null);

功能模块UML分析

基于微信小程序的校园快递代取平台在小程序端具有注册、登录、发单、接单、查看全部订单、查看我的发单、查看我的接单、用户留言、平台公告等功能，通过web端进行后台管理，包括用户管理，订单管理、留言管理、公告管理等。

注册：验证学生身份，手机号要短信验证
登录：学号，密码，动态验证码登录
发单：订单被接单前可取消订单，若被接单不可取消，若配送超时，可选择取消订单或联系取件人；一个订单，允许发布同一收件人同一快递公司的多个取件码，赏金酌情增加；订单被接单后可看到接单人信息
接单：可查看全部订单，也可按照收货地址查看订单，也可按照快递公司查看订单；要求未接单前，本单信息隐藏，只可查看收货地址，快递公司，快递类型，赏金等；接单成功，此订单会显示在个人中心->我的接单->已接单中
我的发单：按照未接单、进行中、已付款分类，也可查看全部发单
我的接单：按照已接单、已完成分类，也可查看全部接单
后台管理：订单管理（可以一键清除20:00前未被接单的订单），用户管理，学生身份验证，留言管理
信誉积分：若未在规定时间送达，影响信誉积分，积分降到一定程度会被取消接单资格
个人中心：可修改昵称和密码，可查看我的发单和我的接单
用户留言：
平台公告：

开发技术细节沟通

前台：微信开发者工具、vue.js

后台：springboot mybatis-plus

第三方技术：阿里云短信接口、百度echarts图表插件

前端开发详解

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'http://localhost:9099',//代理地址changeOrigin: true,pathRewrite: { '^/api': '/' }    //这里重写路径}},// Various Dev Server settingshost: 'localhost', // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-/*** Source Maps*/// https://webpack.js.org/configuration/devtool/#developmentdevtool: 'cheap-module-eval-source-map',// If you have problems debugging vue-files in devtools,// set this to false - it *may* help// https://vue-loader.vuejs.org/en/options.html#cachebustingcacheBusting: true,cssSourceMap: true},build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',/*** Source Maps*/productionSourceMap: true,// https://webpack.js.org/configuration/devtool/#productiondevtool: '#source-map',// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ['js', 'css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report}
}

小程序端开发详解

小程序只要调用java后台写好的接口

<cu-custom bgColor="bg-gradual-blue"><view slot="content">校园快递代取平台</view>
</cu-custom>
<!-- wx登录 -->
<!-- loading -->
<view class='cu-load load-modal' wx:if="{{loadModal}}"><view class='gray-text'>加载中...</view>
</view><view class='scope-con' wx:if="{{!userInfo}}"><view class='vx_img'><image src='../../images/logo_wechat.png'></image></view><view class='scope_title'><view class='title_text'>前往微信授权</view><view class='title_state'><text>通过微信授权登录您的个人账户</text><text>您将在我们网站享受更多服务</text></view><button open-type='getUserInfo' lang="zh_CN" bindgetuserinfo="onGotUserInfo" class='scope_auth_btn'>微信授权</button><view class='title_state title_state-flex'><view class='safe_img'><image src='../../images/g.png'></image></view><text>官方微信授权，为交易保驾护航</text></view></view>
</view>
<!-- 本地登录/注册弹框 -->
<view class="login-box" wx:if="{{userInfo && !userLogined}}"><view class="bg-white card"><view class="{{showLoginForm?'bg-cyan':'bg-blue'}} text-center text-lg dashed-bottom padding-sm">{{showLoginForm?'用户登录':'用户注册'}}</view><!--输入用户名 --><view class=" cu-form-group" wx:if="{{showLoginForm}}"><view class="title">用户名</view><input placeholder="输入学号或手机号" bindinput="getInputVal" data-name="localuser.username"></input></view><block wx:else><view class=" cu-form-group"><view class="title">姓名</view><input placeholder="输入您的姓名" bindinput="getInputVal" data-name="localuser.name"></input></view><view class=" cu-form-group"><view class="title">学号</view><input placeholder="输入您的学号" bindinput="getInputVal" data-name="localuser.studentId"></input></view><view class=" cu-form-group"><view class="title">手机号</view><input placeholder="输入您的手机号" type="number" bindinput="getInputVal" data-name="localuser.phoneNumber"></input></view><view class=" cu-form-group"><view class="title">短信验证码</view><input placeholder="短信验证码" type="number" bindinput="getInputVal" data-name="localuser.phoneCode"></input><button class="cu-btn bg-green shadow" disabled="{{verifyPhone.smsFlag}}"bindtap="sendCode">{{verifyPhone.message}}</button></view></block><!--输入密码 --><view class="cu-form-group"><view class="title">密码</view><input placeholder="输入密码" type="password" bindinput="getInputVal" data-name="localuser.password"value="{{localuser.password}}"></input></view><view class=" cu-form-group" wx:if="{{!showLoginForm}}"><view class="title">确认密码</view><input type="password" placeholder="再次输入密码" bindinput="getInputVal" data-name="localuser.pwd2"></input></view><view class="padding flex flex-direction"><button class="cu-btn round bg-blue" bindtap="loginLocal" wx:if="{{showLoginForm}}">登录</button><button class="cu-btn round bg-cyan" bindtap="regist" wx:else>注册</button><view class="login-tip" wx:if="{{showLoginForm}}"><text>还没有账号？</text><text class="clickable" bindtap="toggleFormShow" data-val="{{false}}">点我进行注册</text></view><view class="login-tip" wx:else><text>已有账号？</text><text class="clickable" bindtap="toggleFormShow" data-val="{{true}}">点我进行登录</text></view></view></view>
</view>
<!-- 登录后列表 -->
<view class="box" wx:if="{{userInfo && userLogined}}"><view class="condition-wrap"><view class="flex solid-bottom justify-between shadow condition"><view class="padding-sm margin-xs condition-item" bindtap="handleToggleCondition" data-condition="1"data-conditionvalue="true"><text>{{condition.company!=='all'?allBrand[condition.company].name:'所有快递公司'}}</text></view><view class="padding-sm margin-xs condition-item condition-item-addr" bindtap="handleToggleCondition"data-condition="2" data-conditionvalue="true"><text>{{condition.address!=='all'?condition.address:'所有地址'}}</text></view></view></view><view class="list"><view class="list-item shadow" wx:for="{{listDatas}}" wx:key="*this"><view class="flex-wrap item-header"><text class="express-comp text-blue">{{item.company}}</text><text class="text-gray time">{{item.oCreateTime}}</text></view><view class="flex-wrap item-content"><view class="left-info"><text>配送地址：{{item.shippingAddress}}</text><text>期望送达时间：{{item.expectedTime}}</text><view class="flex-wrap bottom-info"><text>快递类型：{{item.expressType}}</text><view class="cu-capsule round money"><view class="cu-tag bg-blue ">赏金</view><view class="cu-tag line-blue">{{item.reward}} 元</view></view></view></view><button class="cu-btn round bg-gradual-blue shadow" bindtap="openModal" data-modalname="DialogModal1"data-item="{{item}}">立即接单</button></view></view></view><button class="cu-btn bg-gradual-blue btn-add" bindtap="toSendPage"><text class="icon-add"></text></button><i-action-sheet visible="{{ visible1 }}" actions="{{ allBrand }}" show-cancel bind:cancel="handleToggleCondition"data-condition="1" data-conditionvalue="false" bind:click="handleClickItem1" /><!-- <i-action-sheet visible="{{ visible2 }}" actions="{{ allAddress }}" show-cancel bind:cancel="handleToggleCondition"data-condition="2" data-conditionvalue="false" bind:click="handleClickItem2" /> --></view>
<view class="cu-modal bottom-modal {{visible2?'show':''}}"><view class="cu-dialog"><view class="cu-bar bg-white"><view class="action text-green" bindtap="chooseAddr" data-val="true">确定</view><view class="action text-blue" bindtap="chooseAddr">取消</view></view><view class="padding-xl"><input name="expressReceiverName" value="{{condition.tempAddr}}" bindinput="addressInput" placeholder="请输入需要过滤的地址"></input></view></view>
</view><view class="cu-modal {{modalName=='DialogModal1'?'show':''}}"><view class="cu-dialog"><view class="cu-bar bg-white justify-end"><view class="content">接单提示</view><view class="action" bindtap="hideModal"><text class="icon-close text-red"></text></view></view><view class="padding-xl">请确认是否接单？点击确认将接受此订单。</view><view class="cu-bar bg-white justify-end"><view class="action"><button class="cu-btn line-blue text-green" bindtap="hideModal">取消</button><button class="cu-btn bg-blue margin-left" bindtap="confirmOrder">确定</button></view></view></view>
</view>

能够实现微信授权登录

java后端详细实现代码如下

server:port: 9099
spring:datasource:password: 123456username: rootdriver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3366/dmp-code?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8

实现具体代码如下：

server:port: 9099
spring:datasource:password: 123456username: rootdriver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3366/dmp-code?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8