毕业实习:Vue+Springboot+MySQL实现的订餐系统

发布时间:2022-08-19 12:42

为期4天的毕业实习的收获

第一部分:vue框架的准备工作

测试vue-cli创建工程(要以管理员身份运行cmd)
1.在F盘下新建一个F:\shixuntestvue\code文件
2. cd F:
3.cd shixuntestvue\code
4. vue create hello-vue
5.等一会,输入cd hello-vue,然后输入npm run serve
6.会自动创建很多文件
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第1张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第2张图片
7. 访问: http://localhost:8080/
在浏览器地址栏输入:http://localhost:8080/
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第3张图片
完成

第二部分:上课

注意:这个程序是前后端分离

1.将项目导入IDEA:File——New——第二行from existing sourse——select file——选择磁盘目录,找到code——code sever——OK——选择Maven,而非默认的上面那个选项(这不是Tomcat项目)——finish
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第4张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第5张图片
IDEA自动下载java依赖包,导入的时候较慢,等待一会

2.在note文件夹——SQL脚本.sql,双击打开
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第6张图片

3.MYSQL客户端——左上角的插头标志——连接
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第7张图片
连接名可以自定义输入,如 food,我用的是sa
主机名或IP地址::localhost

注:mysql安装在本机的话
主机名或IP地址::localhost或者127.0.0.1

默认端口号port:3306
默认用户名:root
密码:123456
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第8张图片
4.打开数据库客户端:
选中刚才新建的Mysql数据库连接sa——点击菜单栏的”查询”——新建查询
把SQL脚本的内容复制到 新建的查询 中

把SQL 脚本中 foreign key的语句全部删掉(最后一行不带符号)

脚本执行完后,刷新一下数据表sa(右建 表 ——刷新)

创建cate数据库(在”查询”中输入代码create database cate)——执行一条select语句(select * from tb_user)(或者右键tb_user表——打开)以查看tb_user表的内容
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第9张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第10张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第11张图片

5.在IDEA中打开项目cate-server
在application.yml文件中有连接数据库的代码
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第12张图片

注意:
url: jdbc:mysql://localhost:3306/cate?characterEncoding=utf8&serverTimezone=GMT%2B8
(这个"cate"是你的数据库名称,就是第二大的那个,小海豚下一层的绿色千层饼)
在这里插入图片描述
6.运行项目
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第13张图片
7.来到F:\shixun\code\cate-client
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第14张图片

8.在弹出的DOS窗口中依次输入命令
npm install
npm run serve
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第15张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第16张图片

执行成功后的效果如下
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第17张图片

  1. 打开浏览器,地址栏输入:http://localhost:8080/login,访问登录页面
    毕业实习:Vue+Springboot+MySQL实现的订餐系统_第18张图片

10.到Navicat中查看tb_user表中的用户名和密码,选一个用户tom登录进去
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第19张图片

11.运行结果
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第20张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第21张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第22张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第23张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第24张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第25张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第26张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第27张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第28张图片

第三部分:课堂笔记

1.MYSQL客户端:
username:root
password:123456

2.这个工程所涉及到的技术点:
前端使用的是vue,html5,css,js

服务端:springboot+mybatis(半自动化,数据访问层的java轻量级持久层框架)——java轻量级开源框架
要对javase的基础语法熟练掌握
要对java的spring,sevlet框架有所了解

数据库用MYSQL——关系型数据库

3.进入登陆界面,上面可以选择不同的手机终端——按F12,右边出现调试界面

4.原生开发:
基于H5的页面
小程序,公众号都是基于H5的
安卓:打包成apk安装文件

5.问题:这个程序涉及到哪些模块?
两大端口:
前端——app(安卓/IOS/其他第三方的接入:抖音,微信)是基于H5的网页程序
后端:后台管理系统,对前端所有的数据做一个数据管理,即管理app数据

6.这个具有点餐功能的程序,要给客户提供哪些模块能满足其点餐的需求?
答案:注册,登录
1)登录成功之后要做到:
要拿到当前登录人的个人信息(界面最上方,个人头像,昵称),查询个人信息数据
有用户的购物车
要把商品菜单显示出来(最左边的一栏,后台管理模块要管理这一栏一级商品菜单,要从数据库中查出来,如select * from tb_food where goodid_id=3)

查询所有商品菜单列表,默认查询排序为1的商品信息(包括商品的图片,名称,单价),即显示在商品栏右边的东西

商品列表+商品信息
以上是左边那个功能栏:商品

2)中间那个功能栏:评论
评分,评价,送达时间

注意:隐藏处理:评论中的用户名只显示首尾两个字母,其他的用*代替

加密数据一般在服务端处理,而非客户端处理,因为可能暴露在(查看网页源代码中)

1.默认查询/显示所有评论,并统计评论数量
2.根据筛选条件,来查询(满意)和(不满意)的评论

3)商家
做成假的,就显示一下信息得了,因为没有在线支付功能

中间的小细条:公告(可以做个特效,一直从左往右滚动),这些数据都是应该在后台管理,但这里没有后台管理它们,所以只能做成假的,静态的数据

7.代码中:数据库名称:cate

8.这是IDEA项目,要用IDEA导入,别用eclipse
黑框要启动着,在去浏览器访问localhost:8080/login

执行完
npm install
npm run serve
之后,黑框就处于运行状态了,此时去浏览器地址栏输入登录地址——回车

第四部分:数据库知识

1.总体分为3个部分:前端,后端,数据表的设计

数据表的设计:取表名时有规矩(不建议表名字取太长)
用户表/user表:tb_user——对应登录和注册功能
存用户名,密码,要有数据表主键(key,id),用户名username,密码password,性别sex,头像
用户输入用户名和密码,点击登录,其请求次序为:
1)客户端:客户输入登录的数据,向服务器发起请求,服务器收到用户的请求后,要作出回应,调用数据库(controller来查询数据库,拿到数据)
查询即执行一条查询语句(select * from tb_user where username=Tom)

2)controller要验证用户名密码是否正确,并将结果返回到客户端(用户名不存在/密码不正确)
对user表(tb_user)这一张表进行操作
用户名正确时,(select * from tb_user where username=Tom and password=123456),在查到user表中,该用户名对应的密码,在验证用户输入的密码和user表中的密码是否一致,若一致,才会做正确的跳转

用户名不存在时,提示用户不存在

注册:输入用户名,密码,确认密码——点击注册——会往数据表中插入一条数据(执行insert into tb_user value(‘SSS’,‘123456’,’ '))在往数据表插入一条新信息时,主键key会自动+1

登录成功后,要在执行查询,查询当前登录的用户的信息,包括:用户头像,和这个用户相关的商品数据,订单数据,购物车数据

商品表tb_good表要分为两个:
1)商品类别表tb_good——最左边栏,数据包括:主键good_id,类别名称typename

2)商品信息表tb_food——右边信息栏,数据包括:主键id,商品名称goodName,单价price,打折价disPrice,商品图片goodpic,库存count,日期currDate(取系统当前时间),外键good_id(用来关联商品类别表)

通过主外键的联合来查询:
select t.id,t.name f.name from tb_good t inner join tb_food f on t.id f.good_id where t.id=1——看截图

以上就是数据表的设计:共3张表
涉及知识:主外键,查询语句,MYSQL客户端的使用方法:查询——新建查询 (选中自己写的SQL语句——>运行选中的——>下边会显示查询结果)

第三范式:对主外键foreign key的约束

2.用到的2个查询语句
1)select t.id,f.id as ‘商品编号’,t.name as ‘商品类型’,f.name as ‘商品名称’ from tb_good t inner join tb_food f on t.id=f.good_id where t.id=3 order by f.id ;

2)select t.id,f.id as ‘商品编号’,t.name as ‘商品类型’,f.name as ‘商品名称’ from tb_good t,tb_food f where t.id=f.good_id and t.id=‘3’ order by f.id;

3.课堂截图
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第29张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第30张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第31张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第32张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第33张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第34张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第35张图片
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第36张图片

第五部分:技巧:

1.以管理员身份运行cmd:
C:\Windows\System32\cmd.exe——右键cmd.exe——以管理员身份运行

2.IDEA中可以点击Project选择文件目录的显示结构
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第37张图片

3.运行IDEA项目的方法
毕业实习:Vue+Springboot+MySQL实现的订餐系统_第38张图片

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号