摘要

该设计目标是创建一个集成了Java, SpringBoot, Vue和UniApp技术的酒吧微信小程序，为用户提供一个功能全面、操作便捷的服务体验。通过利用SpringBoot的高效微服务架构，后端能够快速处理用户请求，实现酒品浏览、订单管理等核心功能，并保证系统的稳定性和可伸缩性。前端采用Vue.js框架构建用户界面，以实现响应式设计和动态交互，提供美观、流畅的用户体验。借助UniApp，将进一步将Web应用无缝转换为微信小程序，让用户在微信环境中也能轻松访问酒吧服务，包括查看商品、加购下单等。总体来说，这个基于Java, SpringBoot, Vue和UniApp的酒吧微信小程序设计致力于提升传统酒吧的客户服务质量，为现代消费者提供一个集便捷预订、信息查询和社交互动于一体的数字平台。

实现的功能

角色分为管理员、员工、普通用户三种。

管理员（PC端Web页面）：登录、个人信息管理、用户管理、商品分类管理、商品信息管理、库存管理、订单管理等；

员工（PC端Web页面）：登录、创建订单、查询订单、商品查询、库存管理等；

普通用户（小程序端）：登录、首页（商品推荐、特色商品）、商品页面（商品信息显示、加入购物车）、购物车、提交订单（确认信息、备注、下单）、订单详情（支付情况、订单信息等）、我的（个人信息、订单查询、查看购物车）。

用到的技术

后端：Java语言的SpringBoot框架、MySql数据库、Maven依赖管理等；

前端：Vue.js语法的UniApp框架，可编译成微信小程序。

部分代码展示

<template><view class="content"><scroll-view scroll-y class="left-aside"><view v-for="(item,index) in typeList" :key="item.id" class="f-item b-b" :class="{active: selIndex == index}" @click="tabtap(item,index)">{{item.groupName}}</view></scroll-view><scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop"><view><text class="s-item">{{typeList[selIndex].groupName}}</text><view class="t-list"><view @click="navToDetailPage(item)" class="t-item" v-for="item in goodsList" :key="item.id"><image :src="filePath + item.pic"></image><text>{{item.title}}</text></view></view></view></scroll-view></view>
</template><script>import appRequest from "../../common/appRequestUrl.js";export default {data() {return {sizeCalcState: false,tabScrollTop: 0,currentId: 0,flist: [],slist: [],tlist: [],goodsList:[],typeList:[],filePath:appRequest.urlMap.getFile,selType:{},selIndex:0}},onLoad(){//this.loadData();this.getTypeList();},methods: {navToDetailPage(item) {//测试数据没有写id，用title代替let id = item.id;uni.navigateTo({url: `/pages/product/product?id=${id}`})},getGoods(type){let _this = this;appRequest.request({data: {validFlag: 1,state:1,type:type},url: appRequest.urlMap.findNmGoodsList,success: function(res) {if (res.data.code == 200) {_this.goodsList = res.data.data;} else {appRequest.msg(res.data.msg);}},fail: function(res) {appRequest.msg("网络异常");}});},getTypeList(){let _this = this;appRequest.request({data: {validFlag: 1},url: appRequest.urlMap.findNmGoodsTypeList,success: function(res) {if (res.data.code == 200) {_this.typeList = res.data.data;_this.getGoods( _this.typeList[0].id)} else {appRequest.err(res.data.msg);}},fail: function(res) {appRequest.err("网络异常");}})},async loadData(){let list = await this.$api.json('cateList');list.forEach(item=>{if(!item.pid){this.flist.push(item);  //pid为父级id, 没有pid或者pid=0是一级分类}else if(!item.picture){this.slist.push(item); //没有图的是2级分类}else{this.tlist.push(item); //3级分类}}) },//一级分类点击tabtap(item,selindex){this.getGoods(item.id)if(!this.sizeCalcState){this.calcSize();}this.selIndex = selindex;this.currentId = item.id;let index = this.slist.findIndex(sitem=>sitem.pid === item.id);this.tabScrollTop = this.slist[index].top;},//右侧栏滚动asideScroll(e){if(!this.sizeCalcState){this.calcSize();}let scrollTop = e.detail.scrollTop;let tabs = this.slist.filter(item=>item.top <= scrollTop).reverse();if(tabs.length > 0){this.currentId = tabs[0].pid;}},//计算右侧栏每个tab的高度等信息calcSize(){let h = 0;this.slist.forEach(item=>{let view = uni.createSelectorQuery().select("#main-" + item.id);view.fields({size: true}, data => {item.top = h;h += data.height;item.bottom = h;}).exec();})this.sizeCalcState = true;},navToList(sid, tid){uni.navigateTo({url: `/pages/product/list?fid=${this.currentId}&sid=${sid}&tid=${tid}`})}}}
</script>

演示视频