博主介绍：专注于Java（springboot ssm 等开发框架） vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1500+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
更多项目地址 介绍 翰文编程-CSDN博客
文末下方有源码获取地址
系统实现
4系统设计
4.1 软件功能模块设计
网站整功能如下图所示：
图 4-1 轻餐饮点餐总体功能模块图
4.2 数据库设计与实现
在每一个系统中数据库有着非常重要的作用，数据库的设计得好将会增加系统的效率以及系统各逻辑功能的实现。所以数据库的设计我们要从系统的实际需要出发，才能使其更为完美的符合系统功能的实现。
4.2.1 概念模型设计
概念模型是对现实中的问题出现的事物的进行描述，ER图是由实体及其关系构成的图，通过E-R图可以清楚地描述系统涉及到的实体之间的相互关系。
美食信息实体图如图4-2所示：
图4-2美食信息实体图
用户信息实体图如图4-3所示：
图4-3用户信息实体图
订单管理实体图如图4-4所示：
图4-4订单管理实体图
4.2.2数据库逻辑结构设计
根据E-R得出数据库包涵了以下几张数据表来实现了对数据库的存储、调用。以下分别列出数据表的每个字段名、数据类型、主外键及备注。
表4-1：美食资讯
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| title | varchar | 200 | 标题 | ||
| introduction | longtext | 4294967295 | 简介 | ||
| picture | varchar | 200 | 图片 | ||
| content | longtext | 4294967295 | 内容 |
表4-2：美食信息
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| meishimingcheng | varchar | 200 | 美食名称 | ||
| meishileixing | varchar | 200 | 美食类型 | ||
| zhuliao | varchar | 200 | 主料 | ||
| kouwei | varchar | 200 | 口味 | ||
| meishijieshao | longtext | 4294967295 | 美食介绍 | ||
| meishitupian | varchar | 200 | 美食图片 | ||
| thumbsupnum | int | 赞 | 0 | ||
| crazilynum | int | 踩 | 0 | ||
| clicktime | datetime | 最近点击时间 | |||
| clicknum | int | 点击次数 | 0 | ||
| price | float | 价格 | |||
| onelimittimes | int | 单限 | -1 | ||
| alllimittimes | int | 库存 | -1 |
表4-3：美食分类
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| leixing | varchar | 200 | 类型 |
表4-4：美食信息评论表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| refid | bigint | 关联表id | |||
| userid | bigint | 用户id | |||
| nickname | varchar | 200 | 用户名 | ||
| content | longtext | 4294967295 | 评论内容 | ||
| reply | longtext | 4294967295 | 回复内容 |
表4-3：配置文件
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| name | varchar | 100 | 配置参数名称 | ||
| value | varchar | 100 | 配置参数值 |
表4-4：购物车表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| tablename | varchar | 200 | 商品表名 | meishixinxi | |
| userid | bigint | 用户id | |||
| goodid | bigint | 商品id | |||
| goodname | varchar | 200 | 商品名称 | ||
| picture | varchar | 200 | 图片 | ||
| buynumber | int | 购买数量 | |||
| price | float | 单价 | |||
| discountprice | float | 会员价 |
表4-5：用户
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| zhanghao | varchar | 200 | 账号 | ||
| mima | varchar | 200 | 密码 | ||
| xingming | varchar | 200 | 姓名 | ||
| xingbie | varchar | 200 | 性别 | ||
| shouji | varchar | 200 | 手机 | ||
| touxiang | varchar | 200 | 头像 | ||
| money | float | 余额 | 0 |
表4-6：地址
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| userid | bigint | 用户id | |||
| address | varchar | 200 | 地址 | ||
| name | varchar | 200 | 收货人 | ||
| phone | varchar | 200 | 电话 | ||
| isdefault | varchar | 200 | 是否默认地址[是/否] |
表4-7：用户表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| username | varchar | 100 | 用户名 | ||
| password | varchar | 100 | 密码 | ||
| role | varchar | 100 | 角色 | 管理员 | |
| addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP |
表4-8：token表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| userid | bigint | 用户id | |||
| username | varchar | 100 | 用户名 | ||
| tablename | varchar | 100 | 表名 | ||
| role | varchar | 100 | 角色 | ||
| token | varchar | 200 | 密码 | ||
| addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP | ||
| expiratedtime | timestamp | 过期时间 | CURRENT_TIMESTAMP |
表4-9：收藏表
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| userid | bigint | 用户id | |||
| refid | bigint | 收藏id | |||
| tablename | varchar | 200 | 表名 | ||
| name | varchar | 200 | 收藏名称 | ||
| picture | varchar | 200 | 收藏图片 | ||
| type | varchar | 200 | 类型(1:收藏,21:赞,22:踩) | 1 | |
| inteltype | varchar | 200 | 推荐类型 |
表4-10：订单
| 字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
| id | bigint | 主键 | 主键 | ||
| addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
| orderid | varchar | 200 | 订单编号 | ||
| tablename | varchar | 200 | 商品表名 | meishixinxi | |
| userid | bigint | 用户id | |||
| goodid | bigint | 商品id | |||
| goodname | varchar | 200 | 商品名称 | ||
| picture | varchar | 200 | 商品图片 | ||
| buynumber | int | 购买数量 | |||
| price | float | 价格/积分 | 0 | ||
| discountprice | float | 折扣价格 | 0 | ||
| total | float | 总价格/总积分 | 0 | ||
| discounttotal | float | 折扣总价格 | 0 | ||
| type | int | 支付类型 | 1 | ||
| status | varchar | 200 | 状态 | ||
| address | varchar | 200 | 地址 | ||
| tel | varchar | 200 | 电话 | ||
| consignee | varchar | 200 | 收货人 | ||
| logistics | longtext | 4294967295 | 物流 |
5 系统详细设计
5.1前台功能模块
用户登录，通过输入账号，密码，并点击登录进行系统登录操作，如图5-1所示。
图5-1用户登录界面图
主要代码
<template>
<view class="content">
<view class="box" :style='{"padding":"48rpx","boxShadow":"0px 6rpx 12rpx rgba(0, 0, 0, 0.16)","margin":"0 5%","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"90%","borderStyle":"solid","height":"90%"}'>
<view class="logo" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<image :style='{"padding":"0","boxShadow":"0 0 0px #59f43e","margin":"0 auto","borderColor":"#ccc","borderRadius":"40rpx","borderWidth":"2rpx","width":"160rpx","borderStyle":"solid","url":"http://codegen.caihongy.cn/20220213/5f9bcfe2ef6f45e3bebd7a33f292bf44.webp","isShow":true,"height":"160rpx"}' src='http://codegen.caihongy.cn/20220213/5f9bcfe2ef6f45e3bebd7a33f292bf44.webp' mode="aspectFill"></image>
</view>
<view class="uni-form-item uni-column" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<input v-model="username" :style='{"padding":"0 24rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"#fff","color":"#333","textAlign":"left","borderRadius":"0","borderWidth":"0 0 4rpx","width":"100%","fontSize":"28rpx","borderStyle":"solid","height":"88rpx"}' type="text" class="uni-input" name="" placeholder="请输入账号" />
</view>
<view class="uni-form-item uni-column" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<input v-model="password" :style='{"padding":"0 24rpx","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"#fff","color":"#333","textAlign":"left","borderRadius":"0","borderWidth":"0 0 4rpx","width":"100%","fontSize":"28rpx","borderStyle":"solid","height":"88rpx"}' type="password" class="uni-input" name="" placeholder="请输入密码" />
</view>
<view class="uni-form-item uni-column" v-if="roleNum>1" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<picker @change="optionsChange" :value="index" :range="options">
<view class="uni-picker-type" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"rgba(204, 204, 204, 1)","backgroundColor":"rgba(0,0,0,0)","color":"#333","textAlign":"center","borderRadius":"0","borderWidth":"0 0 4rpx","width":"100%","lineHeight":"80rpx","fontSize":"28rpx","borderStyle":"solid"}'>{{options[index]}}</view>
</picker>
</view>
<button class="btn-submit" @tap="onLoginTap" type="primary" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(37, 147, 230, 1)","borderRadius":"80rpx","color":"rgba(255, 255, 255, 1)","borderWidth":"2rpx","width":"100%","fontSize":"32rpx","borderStyle":"solid","height":"88rpx"}'>登录</button>
<view class="links" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0 0 24rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<view class="link-highlight" @tap="onRegisterTap('yonghu')" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"10rpx","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"rgba(37, 147, 230, 1)","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"55%","lineHeight":"40rpx","fontSize":"24rpx","borderStyle":"solid"}'>注册用户</view>
<!-- <view>|</view> -->
<view @tap="onForgetTap" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"#999","textAlign":"right","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"40rpx","fontSize":"24rpx","borderStyle":"solid"}'>忘记密码？</view>
</view>
<!-- <view class="links">
<view @tap="onForgetTap" :style='{"padding":"0","boxShadow":"0 2rpx 12rpx rgba(0,0,0,0)","margin":"0","borderColor":"#ccc","backgroundColor":"rgba(0,0,0,0)","color":"#999","textAlign":"right","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"40rpx","fontSize":"24rpx","borderStyle":"solid"}'>忘记密码？</view>
</view> -->
</view>
</view>
</template>
<style>
.btn-submit {
height: auto !important;
line-height: 88rpx;
}
</style>
<script>
import menu from '@/utils/menu'
export default {
data() {
return {
username: '',
password: '',
codes: [{
num: 1,
color: '#000',
rotate: '10deg',
size: '16px'
}, {
num: 2,
color: '#000',
rotate: '10deg',
size: '16px'
}, {
num: 3,
color: '#000',
rotate: '10deg',
size: '16px'
}, {
num: 4,
color: '#000',
rotate: '10deg',
size: '16px'
}],
options: [
'请选择登录用户类型'
],
optionsValues: [
'',
'yonghu',
],
index: 0,
roleNum:0
}
},
onLoad() {
let options = ['请选择登录用户类型'];
let menus = menu.list();
this.menuList = menus;
for(let i=0;i<this.menuList.length;i++){
if(this.menuList[i].hasFrontLogin=='是'){
options.push(this.menuList[i].roleName);
this.roleNum++;
}
}
if(this.roleNum==1) {
this.index = 1;
}
this.options = options;
this.styleChange()
},
methods: {
styleChange() {
this.$nextTick(()=>{
// document.querySelectorAll('.uni-input .uni-input-input').forEach(el=>{
// el.style.backgroundColor = this.loginFrom.content.input.backgroundColor
// })
})
},
onRegisterTap(tableName) {
uni.setStorageSync("loginTable", tableName);
this.$utils.jump('../register/register')
},
onForgetTap() {
this.$utils.jump('../forget/forget')
},
async onLoginTap() {
if (!this.optionsValues[this.index]) {
this.$utils.msg('请选择登陆用户类型')
return
}
let res = await this.$api.login(`${this.optionsValues[this.index]}`, {
username: this.username,
password: this.password
});
uni.removeStorageSync("useridTag");
uni.setStorageSync("token", res.token);
uni.setStorageSync("nickname",this.username);
uni.setStorageSync("nowTable", `${this.optionsValues[this.index]}`);
res = await this.$api.session(`${this.optionsValues[this.index]}`);
// 保存用户id
uni.setStorageSync("userid", res.data.id);
if(res.data.vip) {
uni.setStorageSync("vip", res.data.vip);
}
uni.setStorageSync("role", `${this.options[this.index]}`);
this.$utils.tab('../index/index');
},
optionsChange(e) {
this.index = e.target.value
}
}
}
</script>
<style lang="scss" scoped>
$color-primary: #b49950;
.content {
display: flex;
justify-content: center;
flex-direction: column;
height: calc(100vh - 44px);
box-sizing: border-box;
}
.content:after {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: '';
background-image: url(http://codegen.caihongy.cn/20220213/ffc2b6c73bc14ebc8bcaffdf9bb20702.png);
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.logo {
text-align: center;
image {
height: 200upx;
width: 200upx;
margin: 0 0 60upx;
}
}
.uni-form-item {
margin-bottom: 40upx;
padding: 0;
.uni-input {
font-size: 30upx;
padding: 7px 0;
}
}
button[type="primary"] {
background-color: $color-primary;
border-radius: 0;
font-size: 34upx;
margin-top: 60upx;
}
.links {
margin-top: 40upx;
font-size: 26upx;
color: #999;
view {
display: inline-block;
vertical-align: top;
margin: 0 10upx;
}
.link-highlight {
margin: 0;
color: $color-primary
}
}
</style>
用户注册，在用户注册页面通过填写账号、密码、确认密码、姓名、性别、手机等信息完成用户注册操作，如图5-2所示。
图5-2用户注册界面图
轻餐饮点餐APP—皮皮虾，在APP首页可以查看首页、购物车、我的等内容进行详细操作，如图5-3所示。
图5-3 APP首页界面图
购物车，在购物车页面可以查看购买美食、价格、数量、总价等详细内容，如图5-4所示。
图5-4购物车界面图
美食信息，在美食信息页面可以查看美食名称、美食类型、主料、口味、美食图片、价格、库存、美食介绍等详细内容，根据需要进行加入购物车、立即购买操作，如图5-5所示。
图5-5美食信息界面图
我的，在我的页面可以对个人中心、我的收藏管理、用户充值、购物车、我的订单等功能进行详细操作，如图5-6所示。
图5-6我的界面图
我的订单，在我的订单页面可以查看订单详细内容，如图5-7所示。
图5-7我的订单界面图
后端代码
package com.service.impl;
import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;
import com.dao.CartDao;
import com.entity.CartEntity;
import com.service.CartService;
import com.entity.vo.CartVO;
import com.entity.view.CartView;
@Service("cartService")
public class CartServiceImpl extends ServiceImpl<CartDao, CartEntity> implements CartService {
@Override
public PageUtils queryPage(Map<String, Object> params) {
Page<CartEntity> page = this.selectPage(
new Query<CartEntity>(params).getPage(),
new EntityWrapper<CartEntity>()
);
return new PageUtils(page);
}
@Override
public PageUtils queryPage(Map<String, Object> params, Wrapper<CartEntity> wrapper) {
Page<CartView> page =new Query<CartView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,wrapper));
PageUtils pageUtil = new PageUtils(page);
return pageUtil;
}
@Override
public List<CartVO> selectListVO(Wrapper<CartEntity> wrapper) {
return baseMapper.selectListVO(wrapper);
}
@Override
public CartVO selectVO(Wrapper<CartEntity> wrapper) {
return baseMapper.selectVO(wrapper);
}
@Override
public List<CartView> selectListView(Wrapper<CartEntity> wrapper) {
return baseMapper.selectListView(wrapper);
}
@Override
public CartView selectView(Wrapper<CartEntity> wrapper) {
return baseMapper.selectView(wrapper);
}
}
用户信息，在用户信息页面通过填写账号、密码、姓名、性别、手机、头像等详细内容进行保存操作，如图5-8所示。
图5-8用户信息界面图
5.2管理员功能模块
登录，用户通过输入用户名，密码，选择角色等信息即可进行系统登录，如图5-9所示。
图5-9管理员登录界面图
管理员登录进入轻餐饮点餐APP—皮皮虾可以查看首页、个人中心、用户管理、美食信息管理、美食分类管理、系统管理、订单管理等内容进行详细操作，如图5-10所示。
图5-10管理员功能界面图
用户管理，在用户管理页面可以查看索引、账号、姓名、性别、手机、头像等信息，并可根据需要对列表进行详情，修改或删除等操作，如图5-11所示。
图5-11用户管理界面图
美食信息管理，在美食信息管理页面可以查看索引、美食名称、美食类型、主料、口味、美食图片、价格、单限、库存等信息，并可根据需要对列表进行详情，查看评论，修改或删除等操作，如图5-12所示。
图5-12美食信息管理界面图
美食分类管理，在美食分类管理页面可以查看索引、类型等信息，并可根据需要对列表进行修改或删除等操作，如图5-13所示。
图5-13美食分类管理界面图
系统管理，在美食资讯页面可以查看索引、标题、图片等信息，并可根据需要对列表进行详情，修改或删除等操作，还可对轮播图管理进行详细操作，如图5-14所示。
图5-14系统管理界面图
代码下载
ssmvueuniapp轻餐饮点餐APP源码论文ppt资源-CSDN文库
大家点赞、收藏、关注、评论啦 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者
扫一扫
4606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
