基于Java SpringBoot和UniApp的商城小程序

        近年来，随着我国网络基础设施的不断完善和信息技术的不断发展，第三方支付手段得到了广泛的普及，网上购物已经成为人们生活中的重要内容，基于PC平台的网上商城系统可以足不出户就可以享受购物。基于手机的网购微信小程序发挥智能终端的便携性，让大众随时随地购买自己喜欢的产品，面向社区的购物模式源于O2O概念，将线下商品交易和互联网结合起来，将互联网打造成线上交易的平台。

 

整个项目实现的功能

三种角色，分别是管理员、商家、买家，其中管理员和商家是PC端，买家是小程序端。

普通用户：

1.登录注册：已有账号则直接输入账号密码登录，若无账号则先注册再登录

2.查看和修改个人信息

3.搜索想要的商品

4.浏览商品信息

5.浏览推荐商品信息（根据销量推荐）

6.添加购物车和结算订单

7.查看个人订单详情

商家：

1.管理所有商品信息

2.管理所有订单信息

3.管理所有用户信息

4.查看收益数据图表

管理员： 拥有卖家所有的权限，除此之外还可以管理卖家和买家，管理商品分类等。

 

使用的技术

使用的框架：后端SpringBoot框架，java语言。前端UniApp框架，Vue.js语法。

使用的数据库：MySql5.7或8

 部分代码展示

<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in [{src:goodsInfo.pic1}]" :key="index">
					<view class="image-wrapper">
						<image
							:src="picUrl + item.src" 
							class="loaded" 
							mode="aspectFill"
						></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="introduce-section">
			<text class="title">{{goodsInfo.name}}</text>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{goodsInfo.price}}</text>
			</view>
			<view class="bot-row">
				<text>库存: {{goodsInfo.num}}</text>
			</view>
		</view>

		
		<!-- 评价 -->
		<view class="eva-section">
			<view class="e-header">
				<text class="tit">评价{{ commentList.length == 0 ?'：无':'' }}</text>
			</view> 
			<view class="eva-box" v-for="(item,index) in commentList" :key="index">
				<view class="right">
					<text class="name">{{item.uname}}</text>
					<text class="con">{{item.context}}</text>
					<view class="bot">
						<text class="time">{{item.createTime}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="detail-desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<view class="" style="">
				<view class="u-flex u-row-center u-p-20" style="width: 100vw">{{goodsInfo.memo}}</view>
				<image :src="picUrl+goodsInfo.pic2" style="width: 750rpx;" mode="widthFix"></image>
				<image :src="picUrl+goodsInfo.pic3" style="width: 750rpx;" mode="widthFix"></image>
			</view>
		</view>
		
		
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-gouwuche"></text>
				<text>购物车</text>
			</navigator>
			
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="addGoods">加入购物车</button>
			</view>
		</view>
		
		
		<!-- 规格-模态层弹窗 -->
		<view 
			class="popup spec" 
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image src="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"></image>
					<view class="right">
						<text class="price">¥328.00</text>
						<text class="stock">库存：188件</text>
						<view class="selected">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.name}}
							</text>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in specList" :key="index" class="attr-list">
					<text>{{item.name}}</text>
					<view class="item-list">
						<text 
							v-for="(childItem, childIndex) in specChildList" 
							v-if="childItem.pid === item.id"
							:key="childIndex" class="tit"
							:class="{selected: childItem.selected}"
							@click="selectSpec(childIndex, childItem.pid)"
						>
							{{childItem.name}}
						</text>
					</view>
				</view>
				<button class="btn" @click="toggleSpec">完成</button>
			</view>
		</view>
		<!-- 分享 -->
		<share 
			ref="share" 
			:contentHeight="580"
			:shareList="shareList"
		></share>

演示视频

基于Java SpringBoot和UniApp的商城小程序