基于Java+Spring boot+Mybatis Plus 实现H5在线点餐系统

╰+哭是因爲堅強的太久メ 2023-09-28 17:54 9阅读 0赞

## 前言 ##

商城系统就是功能完善的网上销售系统，主要包括产品发布、在线订购、在线支付、在线客服、订单管理等功能模块。商城系统的日常管理如:商品添加修改、订单管理、回复客户留言等都是在线操作的，操作简单，会上网者就可以操作。 商城系统成本低、节省开发时间、性能稳定成熟等优点，让新手学习框架和业务逻辑很快可以上手并掌握。

--------------------

## 一、主要功能模块设计 ##

商城系统采用B/S结构、java开发语言、以及Spring boot +Mybatis Plus为项目框架，Mysql数据库，Layui为前端框架。系统主要分为管理员和用户二部分，管理员：首页、个人中心、用户管理、商品管理、订单管理、统计、商品分类管理、系统管理。用户；首页、个人中心、商品预览、商品详情页、我的收藏、我的订单，基本上实现了整个商城系统信息管理的过程。是一个高效的、动态的、相互友好的商城系统

> 效果图:H5移动端

![5731cc2cc8454b9d9bc9fd5a20199bd9.png][] ![004253bef41c419ca5e7d5d8c0dd3ad6.png][] ![98f98fddeaf9497883297c4db4afbf6c.png][]

> 后台管理端

![在这里插入图片描述][bc7ecb8dd5a74ee9bb08f3acbc809c8f.png]

![在这里插入图片描述][87f234aac271478d829bbf183b3887fd.png]

## 二、项目实现 ##

> **1.创建maven project**

先创建一个名为SpringBootDemo的项目，选择【New Project】  
![在这里插入图片描述][128259d9032c457f9b5eb361fe360124.png]

然后在弹出的下图窗口中，选择左侧菜单的【New Project】（注：和2022之前的idea版本不同，这里左侧没有【Maven】选项，不要选【Maven Archetype】！！！），输入Name(项目名)：SpringBootDemo,language选择【java】，build system选择【maven】，然后选择jdk，我这里选的是jdk18.

![在这里插入图片描述][52cdd0b320714f2a93f84496ab2adb85.png]然后点击【Create】  
![在这里插入图片描述][6a7a4937c1324475824dadc93d6c1936.png]

> **2.在project下创建module**

点击右键选择【new】—【Module…】  
![在这里插入图片描述][361bb10720984c84ab8e4e259de3b751.png]  
左侧选择【Spring initializr】，通过idea中集成的Spring initializr工具进行spring boot项目的快速创建。窗口右侧：name可根据自己喜好设置，group和artifact和上面一样的规则，其他选项保持默认值即可，【next】  
![在这里插入图片描述][0c40f710188b427cb64d147257358580.png]

Developer Tools模块勾选【Spring Boot DevTools】，web模块勾选【Spring Web】

![在这里插入图片描述][a79d3bf5fff541779a7dffd605b404e0.png]

***此时，一个Springboot项目已经搭建完成，可开发后续功能***

> **3.编写一个用户类、餐品类、购物车、订单类等、Mapper、service（三层架构）**

![在这里插入图片描述][2e2b29fdf417432db5da45d47ef4c5f8.png]  
![在这里插入图片描述][f523d7027cfc43108af52ffc38bc2e6d.png]  
**由于我们使用mybatis-plus，所以简单的增删改查不用自己写，框架自带了，只需要实现或者继承他的Mapper、Service**  
![在这里插入图片描述][d5bf96d652be437f87c9f5abdfb5c49a.png]![在这里插入图片描述][2a354294812c4aeb98e458fe7585874d.png]

> 4.创建具体的Api接口

![在这里插入图片描述][b955e578f8ce4875ab1f057c7737a1c3.png]

![在这里插入图片描述][1890eb96868c4e1db642efb84b9f1566.png]

> 5.前端实现

![在这里插入图片描述][85698325ea2745439ab00bf9713e32e5.png]  
![在这里插入图片描述][3075f28d6bfe480ca73c22eff1434428.png]

![在这里插入图片描述][2e93a30b3fdf439e9ed29d5339a2b805.png]

> 这里大致实现了移动点餐系统的功能，后续完善后可上传GIT

[5731cc2cc8454b9d9bc9fd5a20199bd9.png]: https://img-blog.csdnimg.cn/5731cc2cc8454b9d9bc9fd5a20199bd9.png
[004253bef41c419ca5e7d5d8c0dd3ad6.png]: https://img-blog.csdnimg.cn/004253bef41c419ca5e7d5d8c0dd3ad6.png
[98f98fddeaf9497883297c4db4afbf6c.png]: https://img-blog.csdnimg.cn/98f98fddeaf9497883297c4db4afbf6c.png
[bc7ecb8dd5a74ee9bb08f3acbc809c8f.png]: https://img-blog.csdnimg.cn/bc7ecb8dd5a74ee9bb08f3acbc809c8f.png
[87f234aac271478d829bbf183b3887fd.png]: https://img-blog.csdnimg.cn/87f234aac271478d829bbf183b3887fd.png
[128259d9032c457f9b5eb361fe360124.png]: https://img-blog.csdnimg.cn/128259d9032c457f9b5eb361fe360124.png
[52cdd0b320714f2a93f84496ab2adb85.png]: https://img-blog.csdnimg.cn/52cdd0b320714f2a93f84496ab2adb85.png
[6a7a4937c1324475824dadc93d6c1936.png]: https://img-blog.csdnimg.cn/6a7a4937c1324475824dadc93d6c1936.png
[361bb10720984c84ab8e4e259de3b751.png]: https://img-blog.csdnimg.cn/361bb10720984c84ab8e4e259de3b751.png
[0c40f710188b427cb64d147257358580.png]: https://img-blog.csdnimg.cn/0c40f710188b427cb64d147257358580.png
[a79d3bf5fff541779a7dffd605b404e0.png]: https://img-blog.csdnimg.cn/a79d3bf5fff541779a7dffd605b404e0.png
[2e2b29fdf417432db5da45d47ef4c5f8.png]: https://img-blog.csdnimg.cn/2e2b29fdf417432db5da45d47ef4c5f8.png
[f523d7027cfc43108af52ffc38bc2e6d.png]: https://img-blog.csdnimg.cn/f523d7027cfc43108af52ffc38bc2e6d.png
[d5bf96d652be437f87c9f5abdfb5c49a.png]: https://img-blog.csdnimg.cn/d5bf96d652be437f87c9f5abdfb5c49a.png
[2a354294812c4aeb98e458fe7585874d.png]: https://img-blog.csdnimg.cn/2a354294812c4aeb98e458fe7585874d.png
[b955e578f8ce4875ab1f057c7737a1c3.png]: https://img-blog.csdnimg.cn/b955e578f8ce4875ab1f057c7737a1c3.png
[1890eb96868c4e1db642efb84b9f1566.png]: https://img-blog.csdnimg.cn/1890eb96868c4e1db642efb84b9f1566.png
[85698325ea2745439ab00bf9713e32e5.png]: https://img-blog.csdnimg.cn/85698325ea2745439ab00bf9713e32e5.png
[3075f28d6bfe480ca73c22eff1434428.png]: https://img-blog.csdnimg.cn/3075f28d6bfe480ca73c22eff1434428.png
[2e93a30b3fdf439e9ed29d5339a2b805.png]: https://img-blog.csdnimg.cn/2e93a30b3fdf439e9ed29d5339a2b805.png