vue.js|毕业实习:Vue+Springboot+MySQL实现的订餐系统 boot|mysql|spring

为期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.会自动创建很多文件

文章图片

文章图片

7. 访问: http://localhost:8080/
在浏览器地址栏输入：http://localhost:8080/

文章图片

完成
第二部分：上课注意：这个程序是前后端分离
1.将项目导入IDEA：File——New——第二行from existing sourse——select file——选择磁盘目录，找到code——code sever——OK——选择Maven,而非默认的上面那个选项(这不是Tomcat项目)——finish

文章图片

文章图片

IDEA自动下载java依赖包，导入的时候较慢，等待一会
2.在note文件夹——SQL脚本.sql，双击打开

文章图片

3.MYSQL客户端——左上角的插头标志——连接

文章图片

连接名可以自定义输入，如 food，我用的是sa
主机名或IP地址:：localhost
注：mysql安装在本机的话
主机名或IP地址:：localhost或者127.0.0.1
默认端口号port：3306
默认用户名：root
密码：123456

文章图片

4.打开数据库客户端：
选中刚才新建的Mysql数据库连接sa——点击菜单栏的”查询”——新建查询
把SQL脚本的内容复制到新建的查询中
把SQL 脚本中 foreign key的语句全部删掉（最后一行不带符号）
脚本执行完后，刷新一下数据表sa（右建表 ——刷新）
创建cate数据库（在”查询”中输入代码create database cate）——执行一条select语句（select * from tb_user）（或者右键tb_user表——打开）以查看tb_user表的内容

文章图片

文章图片

文章图片

5.在IDEA中打开项目cate-server
在application.yml文件中有连接数据库的代码

文章图片

注意：
url: jdbc:mysql://localhost:3306/cate?characterEncoding=utf8&serverTimezone=GMT%2B8
（这个"cate"是你的数据库名称，就是第二大的那个，小海豚下一层的绿色千层饼）

文章图片

6.运行项目

文章图片

7.来到F:\shixun\code\cate-client

文章图片

8.在弹出的DOS窗口中依次输入命令
npm install
npm run serve

文章图片

文章图片

执行成功后的效果如下

文章图片

打开浏览器，地址栏输入：http://localhost:8080/login，访问登录页面

文章图片

10.到Navicat中查看tb_user表中的用户名和密码，选一个用户tom登录进去

文章图片

11.运行结果

文章图片

文章图片

第三部分：课堂笔记 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 ;
【vue.js|毕业实习:Vue+Springboot+MySQL实现的订餐系统】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.课堂截图