基于Java,SpringBoot,Vue,UniAPP的微信商城小程序

摘要

本课题旨在探讨和实现一个基于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微信商城小程序系统设计