前言：改项目作为毕设完全可以使用，同时可以作为实体培训机构商用，不过目前有些东西还不太全，比如支付接口（这个的话需要可以进行具体对接）、课程的付费模式等，但是其他的整体流程已经开发好了。小程序端、小程序服务端、小程序后台、数据端、前后端的交互等，都已经可以使用。这篇博客分享，主要是为了帮助想独立开发小程序的朋友，已经一些需要定制小程序的商家。

一、项目介绍

微信小程序端：

    1、小程序端包含首页、产品、我的三个主模块。
    2、首页模块实现机构的课程列表、课程详情及课程学习，产品模块实现产品搜索、产品分类和详情，个人模块实现我的足迹、个人信息和我的课程。

小程序服务端：

    1、实现对小程序功能的接口及业务逻辑支撑。
    2、对接数据端处理。

Web后台管理端：

    1、实现对不同角色的权限管理，管理员以及普通用户操作权限分离。
    2、Web端管理实现对会员的管理。
    3、实现对课程的管理（课程录入、课程分类、章节管理等）
    4、Web端管理员实现对商场的关键词设置。
    5、实现对商品的管理（商品上架、品牌管理、类目管理、库存管理等）
    6、实现推广管理、一键运营，轻松设置广告banner。


二、相关技术

    1、小程序采用小程序原生语言开发。
    2、小程序管理后台系统采用目前流行的前后端分离模式，前端使用Vue+ElementUI搭建后台管理界面。
    3、小程序服务端已经管理后台均采用Springboot+Mybatis实现。
    4、权限处理使用了Shiro框架实现。
    5、使用了lombok、SelectOneByExamplePlugin/ExampleEnhancedPlugin等插件。
    6、对于系统一些商品、课程的上传存储，目前实现了对接对地存储、阿里云对象存储、腾讯云对象存储、七牛云对象存储四种方式。


三、系统结构





四、界面展示

小程序端：

首页（课程展示）：



产品模块(产品展示、购买)：


我的模块：

Web后台管理端：

管理登录页面：

所有模块菜单：

用户管理：

课程管理：

商场关键词设置：

商品管理：

推广管理：

四、部分关键代码

本系统前后陆陆续续用了2个多月，也是在边学习新技术，边上手做东西，真的是实际开发成品才会遇到一个又一个技术难关、一个又一个自己知识的盲区，还好坚持下来了~~

小程序端，说两个页面的布局吧，一个是主页面的，一个是购物车页面。

主页面 index.wxml：

<!--index.wxml-->
<view class="container">
<!-- 搜索 -->
<view class="search">
    <navigator url="/pages/search/search?source=course" class="input">
      <image class="icon"></image>
      <text class="txt">课程搜索, 共{{courseCount}}门课程</text>
    </navigator>
  </view>
  <!-- 活动轮播 -->
  <swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
    <swiper-item wx:for="{{banner}}" wx:key="id">
      <navigator url="{{item.link}}">
        <image src="{{item.url}}" background-size="cover"></image>
      </navigator>
    </swiper-item>
  </swiper>
  <!--快捷入口 -->
  <view class="fast_column">
      <navigator bindtap="openPage" class="item" data-url="/pages/courseList/courseList?type=hot">
        <!-- <image src="{{item.iconUrl}}" background-size="cover"></image>
        <text>{{item.name}}</text> -->
        <image src="/static/images/shortCut/hot_course.png" background-size="cover"></image>
        <text>热门课程</text>
      </navigator>
      <navigator bindtap="openPage" class="item" data-url="/pages/musicianStyle/index">
      <!-- <image src="{{item.iconUrl}}" background-size="cover"></image>
      <text>{{item.name}}</text> -->
       <image src="/static/images/shortCut/musician_style.png" background-size="cover"></image>
       <text>乐手风采</text>
     </navigator>
     <navigator class="item">
      <!-- <image src="{{item.iconUrl}}" background-size="cover"></image>
      <text>{{item.name}}</text> -->
       <image src="/static/images/shortCut/about_me.png" background-size="cover"></image>
      <text>关于我们</text>
    </navigator>
  </view>
  <!-- 体系课程 -->
  <view class="a-section a-type">
    <view class="h">
      <navigator url="">
        <text class="text"> — 体系课程系列 — </text>
      </navigator>
    </view>
    <view class="b">
      <view class="item item-1" wx:for="{{sysCatList}}" wx:key="id">
        <navigator url="/pages/courseList/courseList?id={{item.id}}">
          <view class="wrap">
            <image class="img" src="{{item.iconUrl}}" mode="aspectFill"></image>
            <view class="mt">
              <text class="name">{{item.name}}</text>
            </view>
          </view>
        </navigator>
      </view>
    </view>
    <view class="h">
      <navigator url="" >
        <text class="text"> — 特色课程系列 — </text>
      </navigator>
    </view>
    <view class="b">
      <view class="item item-1" wx:for="{{feaCatList}}" wx:key="id">
        <navigator url="/pages/courseList/courseList?id={{item.id}}">
          <view class="wrap">
            <image class="img" src="{{item.iconUrl}}" mode="aspectFill"></image>
            <view class="mt">
              <text class="brand">{{item.name}}</text>
            </view>
          </view>
        </navigator>
      </view>
  </view>
  </view>
</view>

购物车页面：cart.wxml

<view class="container">
  <view class="no-login" wx:if="{{!hasLogin}}">
    <view class="c">
      <image src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/noCart-a8fe3f12e5.png" />
      <text>还没有登录</text>
      <button style="background-color:#A9A9A9" bindtap="goLogin">去登录</button>
    </view>
  </view>
  <view class='login' wx:else>
    <view class="service-policy">
      <view class="item">30天无忧退货</view>
      <view class="item">48小时快速退款</view>
      <view class="item">满88元免邮费</view>
    </view>
    <view class="no-cart" wx:if="{{cartGoods.length <= 0}}">
      <view class="c">
        <image src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/noCart-a8fe3f12e5.png" />
        <text>去添加点什么吧</text>
      </view>
    </view>
    <view class="cart-view" wx:else>
      <view class="list">
        <view class="group-item">
          <view class="goods">
            <view class="item {{isEditCart ? 'edit' : ''}}" wx:for="{{cartGoods}}" wx:key="id">
              <view class="checkbox {{item.checked ? 'checked' : ''}}" bindtap="checkedItem" data-item-index="{{index}}"></view>
              <view class="cart-goods">
                <image class="img" src="{{item.picUrl}}"></image>
                <view class="info">
                  <view class="t">
                    <text class="name">{{item.goodsName}}</text>
                    <text class="num">x{{item.number}}</text>
                  </view>
                  <view class="attr">{{ isEditCart ? '已选择:' : ''}}{{item.goodsSpecificationValues||''}}</view>
                  <view class="b">
                    <text class="price">￥{{item.price}}</text>
                    <view class="selnum">
                      <view class="cut" bindtap="cutNumber" data-item-index="{{index}}">-</view>
                      <input value="{{item.number}}" class="number" disabled="true" type="number" />
                      <view class="add" bindtap="addNumber" data-item-index="{{index}}">+</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

      </view>
      <view class="cart-bottom">
        <view class="checkbox {{checkedAllStatus ? 'checked' : ''}}" bindtap="checkedAll">全选({{cartTotal.checkedGoodsCount}})</view>
        <view class="total">{{!isEditCart ? '￥'+cartTotal.checkedGoodsAmount : ''}}</view>
        <view class='action_btn_area'>
          <view class="{{!isEditCart ? 'edit' : 'sure'}}" bindtap="editCart">{{!isEditCart ? '编辑' : '完成'}}</view>
          <view class="delete" bindtap="deleteCart" wx:if="{{isEditCart}}">删除({{cartTotal.checkedGoodsCount}})</view>
          <view class="checkout" bindtap="checkoutOrder" wx:if="{{!isEditCart}}">下单</view>
          <!-- </view>  -->
        </view>
      </view>
    </view>
  </view>
</view>

小程序服务端：

首页Api：MiniHomeApi.java