网站漂浮怎么做/百度网站介绍

JavaWeb的实训是学校的一门课程，老师先讲解一些基础知识，然后让我们自己开发一个比较简单的Web程序。可涉及的知识何其之多，不是实训课的 3 周时间可以讲得完的，只是快速带过。他说：重点是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）需求：（实际需要需求调研）

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

1. 前端功能：用户交互的界面

   • 首页
     • 导航栏：注册，登录，广告（轮播图），后台管理，我的朋友，搜索
     • 内容：轮播图广告，系统推荐朋友
     • Footer：版权信息
   • 朋友详情
     • 头像 --> 查看信息，但不同人的信息同一个模板（不用每人写一个页面）
   • 个人中心
     • 登录用户的信息
   • 用户如何交到朋友？（流程）
     • 一方：注册 --> 登录 --> 搜索 / 推荐朋友 --> 查看 --> 好友申请 --> 等待
     • 另一方：收到申请 --> 查看详情 --> 接受 / 拒绝（理由）

2. 后台功能：接受请求 --> 发牛响应

   • 登录
   • 用户管理
     • 审核用户
     • 禁用账号 / 解禁账号
     • 删除用户
     • 修改用户
   • 朋友推荐

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列了）。

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

数据库设计的过程：

1. 找出实体（对象）
2. 找出实体的属性
3. 找出实体之间的关系 （E-R实体关系图）
4. 将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、使用流程

实现步骤：

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

• 在一行数据中取属性。

  • 使用各种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、简单封装

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

1. 抽取connection对象的创建。

   public static Connection getConn()

2. 抽取资源的关闭。

   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代码执行流程：（以模拟注册为例）

1. control：把注册信息入库，得到入库的结果，将结果告知用户。

2. service：给控制器提供一个能够入库的功能。

3. 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

---