【JavaWeb】实训的长篇笔记（上）

JavaWeb的实训是学校的一门课程，老师先讲解一些基础知识，然后让我们自己开发一个比较简单的Web程序。可涉及的知识何其之多，不是实训课的 3 周时间可以讲得完的，只是快速带过。他说：重点是Web开发的流程。
我的实训草草收场，一水而过，但也仍然留下了一些杂乱笔记，谨供参考。

文章目录

- 零、Hello
- - 1、心得
  - 2、问题
  - 3、其他
- 一、实训前要求
- - 1、eclipse
  - 2、立项
  - 3、需求分析
  - 4、概要设计
  - 5、前端设计
- 二、前端知识
- 三、操作任务
- 四、前端设计
- - 1、主页
  - 2、登录页面
  - 3、后台管理
- 五、数据库
- - 1、数据库基础
  - 2、MySQL基本使用
  - 3、SQL语句
  - 4、数据库设计
  - 5、数据库实现
- 六、连接数据库：JDBC
- - 1、使用流程
  - 2、参数处理
  - 3、简单封装
- 七、MVC系统架构
- - 1、架构介绍
  - 2、系统架构搭建
  - 3、小结
  - 4、Web项目运行部署

零、Hello

1、心得

不要经常打补丁式地去填充一些细节，而更应该去寻找更好的结构。

2、问题

for语法？
workbench创建外键的用法？

3、其他

中华英才网：招聘网站
应届生：重视可塑性

一、实训前要求

大三暑假就可以实习，只有一年了。（考研，考公，教资，就业）

boos直聘。

日记：80-100字
7-10班答辩取消了

MVC: 一种项目架构的设计模式，基于面向接口编程。

Servlet: 重要技术，但是企业不用。能接受前端的用户请求，把数据响应前端。（servlet -> springmvc -> sprintboot)

JDBC: 数据库连接技术

1、eclipse

工作空间的作用？会设置一些什么？

metadata：元数据，描述数据的数据。

字体：不要改，有些字体无法被识别，如javascript会有一些要求。
字符编码：utf-8
设置JDK？

对象

类是创建对象的模板
类的形成：对现实事物共同点的抽象
私有属性能不能被继承？能、不能都可以，要说出原因。
方法重写：只修改函数体。
看源码 ？

继承

一个父类可以多个子类，但是一个子类只有一个父类。（子类属于父类类型）
多态？接口？抽象？

2、立项

1）名称：《交个朋友》

2）需求：（实际需要需求调研）

涉及部门：产品部（主），开发部（产品不懂技术）

前端功能：用户交互的界面
- 首页
  - 导航栏：注册，登录，广告（轮播图），后台管理，我的朋友，搜索
  - 内容：轮播图广告，系统推荐朋友
  - Footer：版权信息
- 朋友详情
  - 头像 --> 查看信息，但不同人的信息同一个模板（不用每人写一个页面）
- 个人中心
  - 登录用户的信息
- 用户如何交到朋友？（流程）
  - 一方：注册 --> 登录 --> 搜索 / 推荐朋友 --> 查看 --> 好友申请 --> 等待
  - 另一方：收到申请 --> 查看详情 --> 接受 / 拒绝（理由）
后台功能：接受请求 --> 发牛响应
- 登录
- 用户管理
  - 审核用户
  - 禁用账号 / 解禁账号
  - 删除用户
  - 修改用户
- 朋友推荐

3、需求分析

1）涉及部门：开发部

需求分析是了解要做什么

4、概要设计

信息：

1）注册信息：用户昵称，性别，密码，确认密码

2）登录信息：用户昵称，密码

3）广告信息：图片，说明

4）用户详情：头像，昵称，真实姓名（对接公安系统），性别，职业，宣言…

5）首页推荐：头像，昵称，职业…

数据库设计：

5、前端设计

设计部门：前端设计部

过程：ps画页面原型 --> html页面

前端岗位：

1）传统前端：html / css / ps

2）现在前端：+ js框架 / 前端框架 / VUE前后端分离

一个标签：像java中的一个对象

二、前端知识

1）div标签，在网页中划出一块空间。

占多大 --> 设置样式。

注：div本是只是竖向排列的标签。

2）盒子模型：

3）网页布局：略

前端框架：Bootstrap （v3）。

4）框架：写好了很多东西，拿来用就好了。DIV（do it self）。

使用框架：导入.css和.js文件。

css的类选择器（class）与id选择器（id）的区别是什么？

5）响应式：拉动页面窗口（改变大小、纵横比），内容仍然可以正常显示，自适应。

6）栅格：div块的嵌套，一个横向div可以分很多列。不同的屏幕大小设备，适用于不同的样式。

12个分成5份？10/5，剩下的留白。
文本对齐：左中右。
学习框架：了解它能做哪些事情。
图片：显示形状（方、圆、方形圆角）

三、操作任务

搭建eclipse环境，熟悉css，安装bootstrap文件

四、前端设计

1、主页

1）导航栏

组件：导航、分页、缩略图…
先确定需求，然后开始写自己的前端页面。
勾上 generate web .xml
建议整个网页放在一个container容器中。
nav：导航
交互：如下拉框，js文件。导航栏中引用了jquery框架（怎么看出来的？）
用行内样式可以覆盖默认样式。在浏览器修改，快速调整，不用每次都修改都刷新浏览器。

2）广告栏

调整图片大小 / div形状
调整两栏之间的间隙

3）系统推荐

缩略图
注意div标签的正确对应和闭合。

4）其它

将导航栏固定在顶端，同时避免遮盖。下面的广告栏加上上边距。

2、登录页面

新建文件：register.html
版权信息固定在底部
栅格系统：左广告，右登录页
表单登录：输入框，单选按钮
<a>打开新标签页，使用target="_blank"属性。

3、后台管理

不太注重前端的体验
用户会有默认的头像
表格：<tr>，<th>，<td>，<table> 。

五、数据库

1、数据库基础

关系型数据库。

mysql安装流程：安装mysql，安装mysql服务，登录，修改密码，设置远程连接（具体见视频）。

update user set host='%' where user='root';

官网：mysql.com 。

移除mysql：停止服务，mysqld -remove mysql，删除安装文件目录，删除注册表。（使用.exe文件安装的，按照普通软件方式卸载）

？ services.msc
自己注册购买几个域名？
社区版，8.x版本
准备工作：如果机器上已经有，只要能用就无需安装。若有但不能用，需卸载干净后才能安装。
my.ini
mysql与mysql服务？
注册表：维护计算机运行的服务列表。
登录时指定登录端口号，使用参数-P，使用不同版本的mysql
概念区分：数据库服务器，数据库，表，数据。
- 数据库服务器：安装了数据库软件的服务器。
- 应用服务器：安装了应用程序的服务器。（企业中会分开部署）
- 数据库：在数据库服务器中创建，用来存放数据表。
- 表：用来存放数据，以行为单位。

Java	数据库
一个类	一张表
类属性	表字段
属性类型	字段类型
对象	一行

MySQL客户端的安装：navicat_trial。workbench是老版本。

本机：localhost，127.0.0.1
navicat_trial报错：1251 - Client does not support authentication protocol requested by server; consider upgrading MySQL client，应该是版本太旧了。

2、MySQL基本使用

登录：mysql -u root -p，其中-p并不是password的意思，而是用于指定数据库，参数可以为空（即不选择），在登录后通过use <database_name>来选择数据库 。
sql的分类：DDL（数据定义语言）, DCL（数据控制语言）, DML（数据操作语言）, DLL（数据事务语言）
创建数据库：可在客户端中创建。
创建数据表
- (sex) 1boy 2girl，使用代号比使用字符串查询更快。
- (birthday)，如果使用timestamp（记录从1970年开始的毫秒数），则1970前的生日无法表示。可以使用datetime。
- 表名字不使用user，因为是sql的关键字。
- workbench显然没有navacat好用，比如写入日期时没有选项框，只能手打。
数据类型：int, varchar, double, datatime, timestamp; 长串数字，若不用于运算，一律使用varchar而不用int。
数据输入：
主键：能够唯一标识一条字段。一般不参与业务逻辑运算，如学生主键经常使用id而不用学号。
- 修改表结构：在workbench中右键目标表，选择alter table。
- 设置自动维护主键：勾选·Auto Increment。记录已经被使用过的主键的最大值，删掉也不影响。
外键：在一张表中，关联另一张表的约束。
- 键名冲突：例如学生表有个id，地址表也有个id，如果要创建外键就会有问题。因此，可以给每个表自己的主键加个标识，例如重命名为uid。
  （或者给外键加个标识成aid应该也行）
- 主外键约束。参照完整性，外键的值得在被关联表中存在。约束的是外键列的值。
- 主外键约束的建立。外键不能参照不存在的主键，于是已经被参照的主键也无法被删除。
  
  注意：在开发过程中，表和表在结构上体现主外键关系，但不创建主外键约束。因为删除（修改）一个主键字段，就要先删除参照它的外键字段，这个外键字段的行可能又被被人参照，表间关联和约束太多导致维护困难。
- 主表：表中有一个主键被其他表用来当外键的表。
- 从表：把另外一个表中的主键当作自己的外键的表。

3、SQL语句

增加：insert into 表名(字段1, 字段2) values(值1, 值2)
修改：update 表名 set 字段=新值, ... where 条件
删除：delete from 表名 where 条件
查询：select 字段1, 字段2... from 表名 where 条件
- 查询部分数据：limit ；
- 模糊查询。关键字like；通配符% _ ；
  
  %可以代表任意多个字符，_可以代表任意一个字符。
- 排序。order by ；
  
  对查询好像结果排序，ASC(升序) | DESC(降序)
- 分组。group by ；
  
  分组的目的是统计。常见的统计函数有（max min sum avg count）。
  
  含有goupy by的sql中，select后只能接被分组的字段或统计函数。否则在mysql5.x版本会报错；在8.x中不会报错但是无意义。
- 多表连接查询
- 子查询
  
  将一个查询的结果作为另一个查询的对象。
  
  案例：和李四住在一起的人有哪些？
  
  分析：首先知道李四住在哪，然后将李四住址作为条件进行查询。

-- 1、查询部分数据
select * from users limit 2; -- 返回查询数据的前两个
select * from users limit 0,1; -- 从0到1，注意下标从0开始
-- 2、模糊查询
select * from users where name like %航%;
-- 4、分组
select * from users group by aid; -- 显示每组的第一条数据
select aid, count(id) from users group by aid; -- 查询每个地址人数
-- 5、连接
select * from users,address where users.aid = address.id;
select * from users as u,address a where u.aid = a.id; -- 简化写法
-- 6、子查询 --> 和李四住在一起的人有哪些？
select id,name,aid from users where aid = 
(select aid from users where name="李四");

4、数据库设计

回头再改表结构是非常麻烦的。

三大范式：1NF（列的原子性），2NF（直接依赖，即所有其他属性都直接依赖于主键），3NF（每个字段不能传递依赖于主键，如有aid列，就不要address列了）。

原则：数据库的性能，比规范化重要。

数据库设计的过程：

找出实体（对象）
找出实体的属性
找出实体之间的关系（E-R实体关系图）
将ER图转换为表

找实体：

用户实体 users：主键 uid，密码 password，头像 photo，昵称 nickname，真实姓名 name，性别 sex，职业 career，宣言 words，

审核状态 chechstatus（待审核1 通过2 未通过3），

账号状态 accstatus（正常1 禁用2）

首页推荐 indexstatus（未推荐1 已推荐2）
广告实体 ad：主键 adid，图片 image，说明
朋友实体 friends：主键 fid，邀请方 send，被邀请方 accept，邀请状态 status（未处理1 通过2 拒绝3）
职业表 carrer：主键 cid，名称 cname

英文命名尽量通俗，去查的单词可能后来自己都不认识了。

5、数据库实现

表的Comments在哪里体现？

为什么要单独创建一个职业表？

头像：用字符串存放路径

六、连接数据库：JDBC

Web项目的三大块：前台，后台，数据库。

JDBC：Java DataBase Connectivity

1、使用流程

实现步骤：

导入驱动jar包。数据库厂商给java提供了连接db的实现类。java只提供接口，实际调用的数据库厂商的实现。即java的同一套接口可以连接不同的数据库。
- jar包放到 /lib 目录下
- Add to Build Path，产生一个Referenced Libraries。
注册驱动。
- 记得注册时区
- localhost | 127.0.0.1
- 有多个异常：使用父类Exception捕获所有的异常。
创建连接。
- desc users 可以查看表的属性。
创建业务sql。
创建传送和执行sql的对象。PrepareStatement
- 修改操作，得到的是影响行数。
- 查询操作，得到的是一张表。返回List，遍历即可。
执行sql，根据结果处理业务逻辑。
- 从语句的影响行数来判断是否成功执行
关闭资源。

在一行数据中取属性。
- 使用各种get方法，一个个地取出属性。
- 然后将这些属性构成一个对象。
javabean：能够存储数据的一些类。（那记录呢？）
- 自动生成get和set方法、构造方法。
  
  source --> Generate Getters and Setters
- 标准的javabean：又脚vo（值对象），dto（数据传输对象），model（数据类型）
- 唯一作用：进行数据存储（封装）和传输。

// ResultSet对象的使用示例
while(rs.next()) {
	String id = rs.getString(1);
	int sex = rs.getInt("sex");
	System.out.println(id);
}

重载：一件事情，根据不同的条件有不同的实现方式。

对比：突然感觉，python中的字典就很方便。

局部类型推断 var：在java10版本后。

感想：好像，自己写代码的时间就过得特别快。

2、参数处理

sql注入。可以干嘛？
- sql的执行计划？
- 防御：sql语句使用占位符参数，查询时再给参数赋值，会自动进行类型转换（内部有很多处理），丢掉多余的部分。
  
  将sex值只作为sex的字段值进行设置，而不是组合sql语句。
- 组合模糊查询：nm+"%"

// _sex = "1 or 1=1"
// 可以被sql注入的语句
String sql  = "select * from users where sex = " + _sex + ";";
PreparedStatement pstmt = conn.prepareStatement(sql);
// 防sql注入的语句
String sql  = "select * from users where sex = ?;";
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, _sex);

select * from users where sex = '1 or 1=1';

问题：pstmt.setString()是将_sex作为一个字符串加入sql语句的，它为什么可以正常执行呢？在什么阶段进行了处理？

答：你会发现下面这条语句就是可以正常执行（即使sex的类型为int）。

select * from users where sex = '1 or 1=1';

3、简单封装

一共只需要一个，也只需要建立一次数据库连接。
开发角度的封装。

抽取connection对象的创建。

public static Connection getConn()
抽取资源的关闭。

public static void close(Connection conn, PreparedStatement pstmt)

单例模式？
- 静态块：只在类加载时执行一次。
- finally关键字：不管catch执不执行，里面都会执行。
- 条件判断将null写在前面（老手）：null != pstmt ；理论上可以避免空值异常。为啥？

感受：在jdbcUtil类中，多层嵌套的try-catch-finally看起来好丑。

七、MVC系统架构

1、架构介绍

不管java如何，先看生活中如何。

顾客：前端
- 静态技术：html，css，js，bs
- 动态技术：jsp，vue --> 静态数据动态化
下单：发送请求
服务员（控制层）：控制整个业务流程走向，向前端负责。
- 接受前端请求，并将请求获取到的数据响应前端。
- 技术：jsp，Servet，SpringMVC，SpringBoot
厨师（服务层）：向控制层负责，为控制层提供服务。
- 能够提供各种方法，处理控制层的业务。
- 思想：面向接口编程。接口定义功能，实现类实现功能。控制层只需要调用接口方法即可，而无需知道具体实现。
配菜师（DAO层）：数据访问层，从数据库中获取数据交给服务层，为服务层服务。
- 只负责数据处理，将数据处理的结构反馈给服务层即可。也面向接口编程。
- 数据库连接技术：JDBC，MyBatis
菜（DB数据库）：存放数据。
- MySQL，ORACLE，DB2

MVC：Model（数据模型），View（视图），Controller（控制）

流程：View --> Controller --> Services --> DAO --> DB

2、系统架构搭建

- src
	- edu.ft.control
	- edu.ft.services
	- edu.ft.dao
	- edu.ft.util
	- edu.ft.bean
- WebContent

层次展示包结构：Package Presentation --> Hierarchical

想法：总是只看功能，不关心如何实现，真的好吗？

理解mvc代码执行流程：（以模拟注册为例）

control：把注册信息入库，得到入库的结果，将结果告知用户。
service：给控制器提供一个能够入库的功能。
dao：给服务层提供一个能够插入数据库的功能。存粹地处理数据，而不进行任何业务逻辑的处理。

- control
	- Test
- services
	- impl :实现类
		- IUsersServiceImpl
	- IUsersService :一个接口
- dao
	- impl
		- IUsersDaoImpl
	- IUsersDao

使用对象传数据，避免冗长的参数列表。

问题：注解Override是什么？

问题：给类再包一层接口，不会显得多余吗？

3、小结

需求分析：要做什么。
概要设计：做成什么样子。
详细设计：每一个细节怎么做。

各个步骤可以并行开始，而不是只能一条龙。

执行计划：解析sql

4、Web项目运行部署

要实现静态数据的动态化。

服务器：运行项目的一个容器，其实就是一个软件，如tomcat。汽车要放到马路环境，才能启动运行。
在Eclipse中配置tomcat：windows --> Preferences --> Server --> Runtime Environments
给项目配置tomcat：右键项目 --> Propenties for … --> Java Build Path --> Libraries
运行项目（部署到tomcat中）：Window --> show view --> 搜索Servers --> open

默认端口号为8080
访问项目：url：http://IP(localhost):端口号/项目资源 ，例如http://localhost:8080/friends/index.html