devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

SSM+Vue+Element-UI实现外卖点餐系统_vue点餐页面的实现

作者：小桥流水78 | 2024-08-01 14:17:01

赞

踩

vue点餐页面的实现

文末获取源码

开发语言：Java
框架：ssm
JDK版本：JDK1.8
服务器：tomcat7
数据库：mysql 5.7/8.0
数据库工具：Navicat11
开发软件：eclipse/myeclipse/idea
Maven包：Maven3.3.9
浏览器：谷歌浏览器

前言介绍

 随着网络不断的普及发展，外卖点餐系统依靠网络技术的支持得到了快速的发展，首先要从用户的实际需求出发，通过了解用户的需求开发出具有针对性的用户、餐厅、菜品、订单评价、订单等功能，利用目前网络给用户带来的方便快捷这一特点对系统进行调整，设计的系统让用户的使用起来更加方便，本系统的主要目的就是给用户带来快捷与高效、安全，用户只要在家中就可以进行操作。同时随着电子商务的发展外卖点餐系统已经受到广大用户的关注。

互联网发展至今，已经解决了很多我们解决不了的难题，使得我们工作更加便捷，提高了我们的工作效率。目前各行各业都在运用网络信息管理程序，不同的用户也都接触到信息管理，特别是在各大电商行业广泛的应运起来。通过对当前网络环境发展的分析与总结，开发外卖点餐系统可以改变以往的外卖购买方式，改变传统线下外卖点餐系统的状态，由于用户的不断增多，使用传统的线下手工模式已经远远不能满足于用户需求了，而且越来越多的商家也在开通线上进行外卖点餐系统，所以开发一个外卖点餐系统可以解决商家不利于线下外卖购买的问题，同时商家可以利用网络对外卖购买信息进行管理，设计的网站保证信息的完整安全，这样才能提高工作效率，保证系统安全正常的运行 

系统功能分析

本外卖点餐系统主要包括二大功能模块，即用户功能模块和管理员功能模块。

（1）管理员模块：系统中的核心用户是管理员，管理员登录后，通过管理员功能来管理后台系统。主要功能有：首页、个人中心、用户管理、餐厅信息管理、菜品分类管理、菜品信息管理、订单评价管理、系统管理、订单管理等功能。管理员用例图如图

（2）用户：首页、个人中心、订单评价管理、我的收藏管理、订单管理等功能，用户如图

（3）前台首页：首页、餐厅信息、菜品信息、公告信息、个人中心、后台管理、购物车、客服等功能，前台首页如图

系统结构设计

整个系统是由多个功能模块组合而成的，要将所有的功能模块都一一列举出来，然后进行逐个的功能设计，使得每一个模块都有相对应的功能设计，然后进行系统整体的设计。

本外卖点餐系统结构图如图

数据库设计

本外卖点餐系统采用的是MYSQL数据库，数据存储快，因为外卖点餐系统 ，主要的就是对信息的管理，信息内容比较多，这就需要好好的设计一个好的数据库，分类要清楚，不能添加信息的时候，造成信息太过混乱，设计好的数据库首先就需要先把各个实体之间的关系表达明确，系统的E-R图如下图所示：

1、用户信息：用户名、密码、姓名、性别、头像、手机实体图如图

2、餐厅信息：餐厅名称、餐厅类型、配送时间、配送服务、联系电话、餐厅地址实体图如图

3、菜品信息：菜品名称、菜品分类、图片、材料、分量、餐厅名称、联系电话、价格、菜品介绍实体图如图

系统详细设计

前台首页功能模块 

外卖点餐系统 ，在前台首页可以查看首页、餐厅信息、菜品信息、公告信息、个人中心、后台管理、购物车、客服等内容，如图

登录

用户注册

在用户注册页面可以填写用户名、密码、姓名、手机等信息进行注册，如图

个人信息

用户进入个人信息可以对用户名、密码、姓名、性别、头像、手机、余额等可以进行余额冲值查看进行添加、删除、详情等操作。程序效果图如下图

 

菜品信息

在菜品信息页面通过查看菜品名称、菜品分类、图片、材料、分量、餐厅名称、联系电话、价格、菜品介绍等信息进行立即预定、评分，如图 

公告信息

在公告信息页面通过查看公告内容等等查看，如图 

管理员功能模块

管理员登录，通过填写注册时输入的用户名、密码、角色进行登录，如图 

管理员登录进入外卖点餐系统可以查看首页、个人中心、用户管理、餐厅信息管理、菜品分类管理、菜品信息管理、订单评价管理、系统管理、订单管理等信息。如图

个人中心

管理员对个人中心进行操作填写原密码、新密码、确认密码并进行添加、删除、修改以及查看，如图 

用户管理

管理员进入系统可以对用户进行编辑用户名、密码、姓名、性别、头像、手机进行添加、修改、删除等操作。程序效果图如下图 

餐厅信息管理

在餐厅信息管理页面中可以填写餐厅名称、餐厅类型、配送时间、配送服务、联系电话、餐厅地址等信息，并可根据需要对已有餐厅信息管理进行修改或删除等操作，如图 

菜品信息管理

在菜品信息管理页面中可以查看菜品名称、菜品分类、图片、材料、分量、餐厅名称、联系电话、价格、菜品介绍等内容，并且根据需要对已有菜品信息管理进行添加，修改或删除等详细操作，如图 

系统管理

管理员通过系统管理页面查看轮播图/公告信息、客服管理等进行上传图片、发布公告、回复等进行添加、删除、修改以及查看并对整个系统进行维护等操作。，如图 

订单管理

在订单管理页面中可以查看订单编号、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等内容，并且根据需要对已有订单管理进行添加，修改或删除等详细操作，如图 

用户功能模块

用户登录，通过填写用户名、密码、角色进行登录，如图

订单评价管理

在订单评价管理页面中通过填写订单编号、商品名称、菜品分类、评分、评价日期、用户名、手机、评价内容等内容进行查看添加、删除，如图

订单管理

在订单管理页面中可以查看订单编号、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等内容，并且根据需要对已有订单管理进行详情、删除等详细操作，如图 

收藏管理

在收藏管理页面可以查看收藏ID 表名 收藏名称、收藏图片等等内容，并进行详情，删除或查看等操作，如图 

部分核心代码

菜品信息

  1. /**
  2.  * 菜品信息
  3.  * 后端接口
  4.  * @author 
  5.  * @email 
  6.  * @date 2021-01-25 10:23:22
  7.  */
  8. @RestController
  9. @RequestMapping("/caipinxinxi")
  10. public class CaipinxinxiController {
  11.     @Autowired
  12.     private CaipinxinxiService caipinxinxiService;
  13.     
  14.  
  15.  
  16.     /**
  17.      * 后端列表
  18.      */
  19.     @RequestMapping("/page")
  20.     public R page(@RequestParam Map<String, Object> params,CaipinxinxiEntity caipinxinxi, HttpServletRequest request){
  21.  
  22.         EntityWrapper<CaipinxinxiEntity> ew = new EntityWrapper<CaipinxinxiEntity>();
  23. 		PageUtils page = caipinxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, caipinxinxi), params), params));
  24.         return R.ok().put("data", page);
  25.     }
  26.     
  27.     /**
  28.      * 前端列表
  29.      */
  30. 	@IgnoreAuth
  31.     @RequestMapping("/list")
  32.     public R list(@RequestParam Map<String, Object> params,CaipinxinxiEntity caipinxinxi, HttpServletRequest request){
  33.         EntityWrapper<CaipinxinxiEntity> ew = new EntityWrapper<CaipinxinxiEntity>();
  34. 		PageUtils page = caipinxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, caipinxinxi), params), params));
  35.         return R.ok().put("data", page);
  36.     }
  37.  
  38. 	/**
  39.      * 列表
  40.      */
  41.     @RequestMapping("/lists")
  42.     public R list( CaipinxinxiEntity caipinxinxi){
  43.        	EntityWrapper<CaipinxinxiEntity> ew = new EntityWrapper<CaipinxinxiEntity>();
  44.       	ew.allEq(MPUtil.allEQMapPre( caipinxinxi, "caipinxinxi")); 
  45.         return R.ok().put("data", caipinxinxiService.selectListView(ew));
  46.     }
  47.  
  48. 	 /**
  49.      * 查询
  50.      */
  51.     @RequestMapping("/query")
  52.     public R query(CaipinxinxiEntity caipinxinxi){
  53.         EntityWrapper< CaipinxinxiEntity> ew = new EntityWrapper< CaipinxinxiEntity>();
  54.  		ew.allEq(MPUtil.allEQMapPre( caipinxinxi, "caipinxinxi")); 
  55. 		CaipinxinxiView caipinxinxiView =  caipinxinxiService.selectView(ew);
  56. 		return R.ok("查询菜品信息成功").put("data", caipinxinxiView);
  57.     }
  58. 	
  59.     /**
  60.      * 后端详情
  61.      */
  62.     @RequestMapping("/info/{id}")
  63.     public R info(@PathVariable("id") Long id){
  64.         CaipinxinxiEntity caipinxinxi = caipinxinxiService.selectById(id);
  65. 		caipinxinxi.setClicknum(caipinxinxi.getClicknum()+1);
  66. 		caipinxinxi.setClicktime(new Date());
  67. 		caipinxinxiService.updateById(caipinxinxi);
  68.         return R.ok().put("data", caipinxinxi);
  69.     }
  70.  
  71.     /**
  72.      * 前端详情
  73.      */
  74. 	@IgnoreAuth
  75.     @RequestMapping("/detail/{id}")
  76.     public R detail(@PathVariable("id") Long id){
  77.         CaipinxinxiEntity caipinxinxi = caipinxinxiService.selectById(id);
  78. 		caipinxinxi.setClicknum(caipinxinxi.getClicknum()+1);
  79. 		caipinxinxi.setClicktime(new Date());
  80. 		caipinxinxiService.updateById(caipinxinxi);
  81.         return R.ok().put("data", caipinxinxi);
  82.     }
  83.     
  84.  
  85.  
  86.  
  87.     /**
  88.      * 后端保存
  89.      */
  90.     @RequestMapping("/save")
  91.     public R save(@RequestBody CaipinxinxiEntity caipinxinxi, HttpServletRequest request){
  92.     	caipinxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
  93.     	//ValidatorUtils.validateEntity(caipinxinxi);
  94.  
  95.         caipinxinxiService.insert(caipinxinxi);
  96.         return R.ok();
  97.     }
  98.     
  99.     /**
  100.      * 前端保存
  101.      */
  102.     @RequestMapping("/add")
  103.     public R add(@RequestBody CaipinxinxiEntity caipinxinxi, HttpServletRequest request){
  104.     	caipinxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
  105.     	//ValidatorUtils.validateEntity(caipinxinxi);
  106.  
  107.         caipinxinxiService.insert(caipinxinxi);
  108.         return R.ok();
  109.     }
  110.  
  111.     /**
  112.      * 修改
  113.      */
  114.     @RequestMapping("/update")
  115.     public R update(@RequestBody CaipinxinxiEntity caipinxinxi, HttpServletRequest request){
  116.         //ValidatorUtils.validateEntity(caipinxinxi);
  117.         caipinxinxiService.updateById(caipinxinxi);//全部更新
  118.         return R.ok();
  119.     }
  120.     
  121.  
  122.     /**
  123.      * 删除
  124.      */
  125.     @RequestMapping("/delete")
  126.     public R delete(@RequestBody Long[] ids){
  127.         caipinxinxiService.deleteBatchIds(Arrays.asList(ids));
  128.         return R.ok();
  129.     }
  130.     
  131.     /**
  132.      * 提醒接口
  133.      */
  134. 	@RequestMapping("/remind/{columnName}/{type}")
  135. 	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
  136. 						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
  137. 		map.put("column", columnName);
  138. 		map.put("type", type);
  139. 		
  140. 		if(type.equals("2")) {
  141. 			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
  142. 			Calendar c = Calendar.getInstance();
  143. 			Date remindStartDate = null;
  144. 			Date remindEndDate = null;
  145. 			if(map.get("remindstart")!=null) {
  146. 				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
  147. 				c.setTime(new Date()); 
  148. 				c.add(Calendar.DAY_OF_MONTH,remindStart);
  149. 				remindStartDate = c.getTime();
  150. 				map.put("remindstart", sdf.format(remindStartDate));
  151. 			}
  152. 			if(map.get("remindend")!=null) {
  153. 				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
  154. 				c.setTime(new Date());
  155. 				c.add(Calendar.DAY_OF_MONTH,remindEnd);
  156. 				remindEndDate = c.getTime();
  157. 				map.put("remindend", sdf.format(remindEndDate));
  158. 			}
  159. 		}
  160. 		
  161. 		Wrapper<CaipinxinxiEntity> wrapper = new EntityWrapper<CaipinxinxiEntity>();
  162. 		if(map.get("remindstart")!=null) {
  163. 			wrapper.ge(columnName, map.get("remindstart"));
  164. 		}
  165. 		if(map.get("remindend")!=null) {
  166. 			wrapper.le(columnName, map.get("remindend"));
  167. 		}
  168.  
  169.  
  170. 		int count = caipinxinxiService.selectCount(wrapper);
  171. 		return R.ok().put("count", count);
  172. 	}
  173. 	
  174. 	/**
  175.      * 前端智能排序
  176.      */
  177. 	@IgnoreAuth
  178.     @RequestMapping("/autoSort")
  179.     public R autoSort(@RequestParam Map<String, Object> params,CaipinxinxiEntity caipinxinxi, HttpServletRequest request,String pre){
  180.         EntityWrapper<CaipinxinxiEntity> ew = new EntityWrapper<CaipinxinxiEntity>();
  181.         Map<String, Object> newMap = new HashMap<String, Object>();
  182.         Map<String, Object> param = new HashMap<String, Object>();
  183. 		Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
  184. 		while (it.hasNext()) {
  185. 			Map.Entry<String, Object> entry = it.next();
  186. 			String key = entry.getKey();
  187. 			String newKey = entry.getKey();
  188. 			if (pre.endsWith(".")) {
  189. 				newMap.put(pre + newKey, entry.getValue());
  190. 			} else if (StringUtils.isEmpty(pre)) {
  191. 				newMap.put(newKey, entry.getValue());
  192. 			} else {
  193. 				newMap.put(pre + "." + newKey, entry.getValue());
  194. 			}
  195. 		}
  196. 		params.put("sort", "clicknum");
  197.         
  198.         params.put("order", "desc");
  199. 		PageUtils page = caipinxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, caipinxinxi), params), params));
  200.         return R.ok().put("data", page);
  201.     }
  202.  
  203.  
  204. }

 登录

  1. @RequestMapping("config")
  2. @RestController
  3. public class ConfigController{
  4. 	
  5. 	@Autowired
  6. 	private ConfigService configService;
  7.  
  8. 	/**
  9.      * 列表
  10.      */
  11.     @RequestMapping("/page")
  12.     public R page(@RequestParam Map<String, Object> params,ConfigEntity config){
  13.         EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
  14.     	PageUtils page = configService.queryPage(params);
  15.         return R.ok().put("data", page);
  16.     }
  17.     
  18. 	/**
  19.      * 列表
  20.      */
  21.     @IgnoreAuth
  22.     @RequestMapping("/list")
  23.     public R list(@RequestParam Map<String, Object> params,ConfigEntity config){
  24.         EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
  25.     	PageUtils page = configService.queryPage(params);
  26.         return R.ok().put("data", page);
  27.     }
  28.  
  29.     /**
  30.      * 信息
  31.      */
  32.     @RequestMapping("/info/{id}")
  33.     public R info(@PathVariable("id") String id){
  34.         ConfigEntity config = configService.selectById(id);
  35.         return R.ok().put("data", config);
  36.     }
  37.     
  38.     /**
  39.      * 详情
  40.      */
  41.     @IgnoreAuth
  42.     @RequestMapping("/detail/{id}")
  43.     public R detail(@PathVariable("id") String id){
  44.         ConfigEntity config = configService.selectById(id);
  45.         return R.ok().put("data", config);
  46.     }
  47.     
  48.     /**
  49.      * 根据name获取信息
  50.      */
  51.     @RequestMapping("/info")
  52.     public R infoByName(@RequestParam String name){
  53.         ConfigEntity config = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
  54.         return R.ok().put("data", config);
  55.     }
  56.     
  57.     /**
  58.      * 保存
  59.      */
  60.     @PostMapping("/save")
  61.     public R save(@RequestBody ConfigEntity config){
  62. //    	ValidatorUtils.validateEntity(config);
  63.     	configService.insert(config);
  64.         return R.ok();
  65.     }
  66.  
  67.     /**
  68.      * 修改
  69.      */
  70.     @RequestMapping("/update")
  71.     public R update(@RequestBody ConfigEntity config){
  72. //        ValidatorUtils.validateEntity(config);
  73.         configService.updateById(config);//全部更新
  74.         return R.ok();
  75.     }
  76.  
  77.     /**
  78.      * 删除
  79.      */
  80.     @RequestMapping("/delete")
  81.     public R delete(@RequestBody Long[] ids){
  82.     	configService.deleteBatchIds(Arrays.asList(ids));
  83.         return R.ok();
  84.     }
  85. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/914486
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号