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

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

数据库建模

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

/*
Navicat MySQL Data Transfer

Source Server         : win7_3366_v5.6
Source Server Version : 50644
Source Host           : localhost:3366
Source Database       : dmp-code

Target Server Type    : MYSQL
Target Server Version : 50644
File Encoding         : 65001

Date: 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: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:9099',//代理地址
        changeOrigin: true,
        pathRewrite: { '^/api': '/' }    //这里重写路径
    }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: '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#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#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-plugin
    productionGzip: 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 off
    bundleAnalyzerReport: 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: 123456
    username: root
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3366/dmp-code?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8

实现具体代码如下：

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