赞
踩
本课题旨在探讨和实现一个基于SpringBoot后端框架和UniApp前端框架的微信商城小程序。SpringBoot作为一种简化的、用于快速开发企业级应用的开源框架,提供了一套全面的基础架构支持,包括自动配置、依赖管理以及安全性等特性,使得开发者能够以最少的配置快速启动和运行项目。结合UniApp,一种使用Vue.js开发所有前端应用的框架,它允许开发者编写一次代码,然后发布到iOS、Android、Web(包括微信小程序及其他小程序平台)等多个平台。该课题通过整合这两个强大的框架来构建一个高效、可扩展且跨平台的微信商城小程序,致力于提供流畅的用户购物体验和便捷的后台管理功能。
在这个微信商城小程序项目中,SpringBoot负责处理业务逻辑、数据持久化、安全性控制以及与微信API的对接等后端任务。其提供的RESTful API接口将供UniApp前端调用,确保前后端的无缝通信和数据的即时交互。同时,UniApp前端框架将专注于用户界面的构建,利用其组件化和跨平台的特性来实现商城的页面布局、商品展示、购物车管理等功能,并优化用户在微信生态内的购物流程。整体而言,这个基于SpringBoot和UniApp的微信商城小程序项目将充分结合两者的优势,以期达到高性能、易维护和多端适配的目标,满足现代电子商务市场的需求。
三种角色,分别是管理员、商家、买家,均是小程序。使用微信授权登录。
普通用户: 1.浏览商品信息、查看分类 2.浏览推荐商品信息(根据销量推荐) 3.添加购物车和结算订单 4.查看个人订单详情,对订单进行评价 5.申请成为商家 6.修改收货地址等功能;
商家: 1.管理所有商品信息,可以上传商品 2.管理所有订单信息,进行发货等;
管理员: 管理商品分类、审核商品等。
使用的框架:后端SpringBoot框架,java语言。前端UniApp框架,Vue.js语法。
使用的数据库:MySql5.7或8
- <template>
- <view class="container">
-
- <view class="user-section">
- <image class="bg" src="/static/user-bg.jpg"></image>
- <view class="user-info-box">
- <view class="portrait-box">
- <image style="background-color: white;" class="portrait" :src="getHead()"></image>
- </view>
- <view class="info-box">
- <text class="username">{{user.name || '游客'}}</text>
-
- <text class="username u-m-l-30" style="color: firebrick;font-size: 25rpx;" @click="toLogout">退出登录</text>
- </view>
- </view>
- <!-- <view class="vip-card-box">
- <image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
- <view class="b-btn">
- 立即开通
- </view>
- <view class="tit">
- <text class="yticon icon-iLinkapp-"></text>
- DCloud会员
- </view>
- <text class="e-m">DCloud Union</text>
- <text class="e-b">开通会员开发无bug 一测就上线</text>
- </view> -->
- </view>
-
-
- <view class="u-flex u-direction-row u-row-center" v-if="!user">
- <view class="container">
- <view class="list-cell " style="text-align: center;">
- <text class="cell-tit" style="color: #909399;">游客无法享受购物的快乐</text>
- </view>
- <!-- <view class="list-cell log-out-btn" @click="toLogin">
- <text class="cell-tit">前往登录</text>
- </view> -->
- </view>
- </view>
-
-
-
- <view v-if="user"
- class="cover-container"
- :style="[{
- transform: coverTransform,
- transition: coverTransition
- }]"
- @touchstart="coverTouchstart"
- @touchmove="coverTouchmove"
- @touchend="coverTouchend"
- >
- <image class="arc" src="/static/arc.png"></image>
-
-
-
- <view v-if="user.type == 2" style="height: 60vh;background-color: white;">
- <view class="tj-sction u-p-t-20 u-font-30">
- 商家专区
- </view>
-
- <view class="" >
- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
- <view class="u-p-20 u-border-top" v-if="current == 0">
- <u-button @click="showAddGoods()" type="primary" size="mini" :plain="true">新增商品</u-button>
- </view>
-
-
- <u-cell-group v-if="current == 0">
- <u-cell-item v-for="(item,index) in storeGoods" :key="index" :title="item.name+(item.stat == 0 ?'(待上架)':(item.stat == 1 ? '(待审核)':'(在售)'))" :label="'售价:'+item.price+' 库存:'+item.num" :arrow="false">
- <image class="u-m-r-15" style="width: 80rpx;height: 80rpx;" mode="aspectFill" slot="icon" :src="picUrl + item.pic1 "></image>
- <u-button size="mini" slot="right-icon" :type="item.stat == 0 ? 'primary':'warning' " @click="goodsChange(item,0)">{{item.stat == 0 ?'上架':'下架'}}</u-button>
- </u-cell-item>
- </u-cell-group>
- </view>
-
- </view>
-
- <view v-if="user.type == 3">
- <view class="tj-sction u-p-t-20 u-font-30">
- 管理员专区
- </view>
- <view class="">
- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
-
- <u-cell-group v-if="current == 0">
- <u-cell-item v-for="(item,index) in unCheckList" :key="index" :title="item.memo+(item.stat == 0 ?'(待审核)':'')" :label="'店主:'+item.name" :arrow="false">
- <!-- <u-badge count="99" :absolute="false" slot="right-icon"></u-badge> -->
- <u-button size="mini" slot="right-icon" :type="item.stat == 0 ? 'primary':'warning' " @click="storeChange(item,0)">{{item.stat == 0 ?'通过':'停用'}}</u-button>
- </u-cell-item>
- </u-cell-group>
-
- <u-cell-group v-if="current == 1">
- <u-cell-item v-for="(item,index) in goodsList" :key="index" :title="item.name+(item.stat == 1 ?'(待审核)':(item.stat == 3 ? '(在售)':'(未上架)'))" :label="'售价:'+item.price+' 库存:'+item.num" :arrow="false">
- <image class="u-m-r-15" style="width: 80rpx;height: 80rpx;" mode="aspectFill" slot="icon" :src="picUrl + item.pic1 "></image>
- <u-button size="mini" slot="right-icon" :type="item.stat == 1 ?'success':(item.stat == 3 ?'warning':'primary')" @click="goodsChange(item,1)">{{item.stat == 1 ?'通过':(item.stat == 3 ?'下架':'上架')}}</u-button>
- </u-cell-item>
- </u-cell-group>
-
- </view>
- </view>
-
-
-
- <!-- 订单 -->
- <view class="order-section" v-if="user.type == 1">
- <view class="order-item" @click="navTo('/pages/order/order?index=0')" hover-class="common-hover" :hover-stay-time="50">
- <text class="yticon icon-shouye"></text>
- <text>全部订单</text>
- </view>
- <view class="order-item" @click="navTo('/pages/order/order?index=1')" hover-class="common-hover" :hover-stay-time="50">
- <text class="yticon icon-daifukuan"></text>
- <text>待发货</text>
- </view>
- <view class="order-item" @click="navTo('/pages/order/order?index=2')" hover-class="common-hover" :hover-stay-time="50">
- <text class="yticon icon-yishouhuo"></text>
- <text>待收货</text>
- </view>
- <view class="order-item" @click="navTo('/pages/order/order?index=3')" hover-class="common-hover" :hover-stay-time="50">
- <text class="yticon icon-shouhoutuikuan"></text>
- <text>待评价</text>
- </view>
- </view>
- <!-- 浏览历史 -->
- <view class="history-section icon" v-if="user.type == 1">
- <view class="sec-header">
- <text>其他功能</text>
- </view>
- <list-cell icon="icon-shezhi1" iconColor="#e07472" title="注册商家" border="" @eventClick="storeSet()"></list-cell>
- <list-cell icon="icon-shezhi1" iconColor="#e07472" title="设定收货地址" border="" @eventClick="addSet()"></list-cell>
- <list-cell icon="icon-shezhi1" iconColor="#e07472" title="设置" border="" @eventClick="navTo('/pages/set/set')"></list-cell>
- <list-cell icon="icon-share" iconColor="#3f80de" title="退出登录" border="" @eventClick="toLogout"></list-cell>
- </view>
-
- <view class="history-section icon" v-if="user.type == 3">
- <view class="sec-header">
- <text>其他功能</text>
- </view>
-
- <list-cell icon="icon-shezhi1" iconColor="#e07472" title="设定分类" border="" @eventClick="navTo('/pages/setType/setType')"></list-cell>
- <list-cell icon="icon-share" iconColor="#3f80de" title="退出登录" border="" @eventClick="toLogout"></list-cell>
- </view>
-
- </view>
-
-
- <u-popup v-model="addShow" mode="center" width="80%">
- <view class="u-p-25 " style="box-shadow: 1px 1px 5px lightcyan;">
- <u-form ref="uForm">
- <u-form-item label="地址" label-width="110" prop="name">
- <u-input v-model="add" />
- </u-form-item>
-
- </u-form>
- <u-button type="primary" @click="changeType">提交</u-button>
- </view>
- </u-popup>
-
- <u-popup v-model="addStore" mode="center" width="80%">
- <view class="u-p-25 " style="box-shadow: 1px 1px 5px lightcyan;">
- <u-form ref="uForm">
- <u-form-item label="店名" label-width="110" prop="name">
- <u-input v-model="store" />
- </u-form-item>
-
- </u-form>
- <u-button type="primary" @click="StoreSub">提交</u-button>
- </view>
- </u-popup>
-
- </view>
- </template>
基于JAVA,Vue,UniAPP微信商城小程序系统设计
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。