为期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

执行成功后的效果如下

9. 打开浏览器，地址栏输入：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 ;

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.课堂截图

第五部分：技巧：

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

2.IDEA中可以点击Project选择文件目录的显示结构

3.运行IDEA项目的方法