javaweb的基础

文章的简介：

页面的展示（HTML）+页面的修改、绑定、弹窗(js的dom、bom等)+页面的请求(Ajax)

1、在HTML中用标签和css样式实现了浏览器页面。

2、用JS实现页面内容（图片，复选框、文本颜色内容）的修改和弹框（提示是否取消）、跳转（跳转到别的页面）、事件绑定（点击点亮按钮，灯亮。点击熄灭按钮，灯灭）。Ajax主要是发送请求，访问服务器。

3、前后端代码需要编写、打包和部署。

前端编写用HTML、css、JavaScript(工具VScode)，后端用java和Python语言（工具IDEA）。

前端打包使用vscode的build命令来打包，后端在IEDA中使用maven的package来打包。

前端代码部署在nginx服务器，后端部署在tomcat这个web服务器上。

资料存放位置：

一、HTML

（一）、新浪新闻的页面设计-标签和样式

1、设计步骤

• 新浪新闻的页面标签设计（标题和正文）：h1、span、p等
• 新浪新闻的样式设计：<style>  h1{}........</style>
• 新浪新闻的页面布局(css盒子模型)：div

2、设计框架

3、小结

1、标签的标准属性和自定义属性

img：src、width、height

a:href、target

id和class属性来代替自定义属性

2、标签和属性

标签：<title>、<h1>、<div>、<img>、<hr>、<span>、<audio>、<p>、<b>、<strong>

属性：color、font-size、text-decoration、text-indent、line-height、text-align、width、margin

3、Css选择器（内嵌样式）

标签名{}

.class名{}:引用<p class="class名">

#id名{}：引用<p id="id名">

4、标签的样式要不就是行内样式，要不就写在style标签中进行引用（内嵌样式）。

 

（二）、表格、表单

1、创建一个表格

2、提交一个表单

（1）get的提交方式

（2）post的提交方式

3、表单项

二、JS

变量和对象都是用来存储数据的容器。变量可以存储各种基本数据类型的值,对象则是一种更复杂的数据结构，并通过属性和方法的形式进行存储和访问。

1、js用来控制网页行为的

（一 ）js的基本语法

（1）基本语法

（2）变量

（二）js函数

（三）js对象

1、js对象-数组

2、js对象-String

3、js对象-Json

（1）json格式化校验

JSON格式化

（2）json的格式

user是js对象，{}里是json字符串或者叫对象属性。

var user = {"name": "张三","age": 18,"addr": ["北京", "上海", "杭州", "郑州"]
};// 将 user 对象转换为 JSON 字符串
var jsonStr = JSON.stringify(user);// 再将 JSON 字符串解析为对象
var obj = JSON.parse(jsonStr);alert(obj.name);

4、js对象-BOM

实现浏览器的弹出框操作和页面的跳转

（1）BOM浏览器对象，主要了解Window和location对象

（2）Window的属性和方法

5、js对象-DOM

实现了页面内容的修改

（1）获取对象元素的方法

（2）dom实现案例

（四）js事件监听

1、js事件绑定案例

2、常见绑定事件

（五）VUe

1、vue概述

（1）v-model指令

message是数据模型

2、Vue指令：v-bind、v-model、v-on

(1)v-bind和v-model

 (2)v-on

3、vue指令-完成表格数据的渲染案例

4、vue-生命周期

（六）、Ajax

1、Ajax的介绍

（1）基础知识

（2）yapi的访问方法

服务端访问程序中提供了两个访问地址 ,分别为 : 
    
    GET http://localhost:8080/emp/list

    POST http://localhost:8080/emp/deleteById

（3）原生Ajax代码

2、Axios

（1）axios发送请求

（2）axios案例

3、前端工程化

（1）yapi是接口管理平台，网址如下：

YApi Pro-高效、易用、功能强大的可视化接口管理平台

4、前端工程化-环境准备

（1)安装nodejs和vue cli

5、前端工程化-Vue项目

（1）、新建vue工程

新建一个vue文件夹

在vue文件地址栏输入“cmd”

在命令提示界面输入“vue ui”

（2）运行前端项目vue-project

(3)修改端口号

5、前端工程化-vue开发流程

在vscode中打开vue项目：

文件-新建窗口-资源管理器-打开文件夹-vue

（七）element介绍

1、element快速入门

（1）安装和引入element组件库

Element - The world's most popular Vue UI framework

（2）按钮

（2）表格

shift+alt+f将代码格式化

（2）pagination分页

erro:

npm运行不了

2、element页面布局案例

3、vue路由

4、打包部署

实现将 VSCode 相关页面通过 Nginx 服务器localhost：90进行访问。（vscode的代码复制到了nginx的HTML目录下了）

该过程需要打开两个服务器（yapi和nginx）

• 打不开nginx .exe
• 查看后台运行nginx吗
• 查看logs文件夹，表示端口号占用错误
• 查看哪个系统使用80端口号-system
• 修改nginx占用的端口号，在conf文件夹修改
• 可以成功访问localhost:90。（记得打开yapi服务器）

5、前端页面显示的完整流程

三、maven

1、Maven的课程介绍

（1）maven是一款管理和构建java项目的工具

（2）mavan的作用：

依赖管理：不用手动导入jar包

项目结构：

2、maven的安装

• 直接解压 apache-maven-3.6.1-bin.zip 。（将这个文件夹存放在develop目录，不带英文）
• 配置本地仓库
• 配置阿里云私服
• 配置maven环境变量

3、IDEA集成maven

• 配置maven环境
• 创建maven项目
• 导入maven项目

（1）配置maven全局环境

（2）创建maven项目

创建一个maven项目时，会有很多插件，这些插件都保存在本地仓库目录

（3）导入maven的方法

• 先复制maven-project02
• 右击maven-project01，点击open in-Explorer
• 粘贴maven-project02到打开的目录
• 点击maven面板的“+”，打开maven-project02的“pom.xml”

4、maven依赖管理

5、依赖传递

6、依赖范围

（1）scope的多种取值

7、maven的生命周期

（1）maven生命周期的阶段

（2）执行生命周期的方法

package和compile双击执行后，在target目录可以看到

（3）执行test阶段的方法（双击）

8、SpringBootWeb入门

• 创建springboot工程，填写模块信息，并勾选web开发相关依赖
• 创建请求处理类HelloController,添加请求处理方法hello，并添加注解
• 运行启动类，打开浏览器测试

(1)创建springboot工程

（2）编写请求处理类

(3)运行springboot

9、http的请求协议

（1）get请求

（2）post请求

10、http的响应协议

11、web服务器-tomcat

（1）使用web服务器tomcat打开表格页面的方法：（将demo文件部署到tomcat服务器）

• 先解压apache-tomcat-9.0.27

• 将demo文件复制到apache-tomcat-9.0.27的webapps文件夹（demo含表格页面）

• 启动tomcat

• 浏览器输入http://localhost:8080/demo/index.html就显示表格页面​

（2）查进程id并修改tomcat的端口号

​

​

如果tomcat的端口被占用，且只能修改tomcat的端口，在conf/server.xml中修改。

​

（3）tomcat小结

12、springboot内嵌tomcat

内嵌了tomcat，通过main方法启动springboot时启动了tomcat，并访问了部署在里面的web程序

基于springboot来web程序的开发

四、请求响应

准备：

develop放置安装的工具，如maven，tomcat

code中放置的IDEA代码

javaweb document放置的每章节的资料

1、请求响应-概述

2、请求响应-postman工具

（1）向8081端口发送请求

（2）、服务器监听端口的修改

多个服务器同时使用同一个端口会冲突，要访问服务器时要启动服务器。

• springboot端口修改路径（main-resources-application.properties）
• tomcat端口修改路径（develop-conf-server.xml）
• yapi服务器的端口(8080）

（3）localhost：8080的含义

访问你所开发的 Spring Boot 应用所提供的 Web 服务（8080端口此时被springboot占用）

3、请求响应-请求-简单参数和实体参数

（1）原始方式

在原始web程序中，获取请求参数，要通过HttpServletRequest对象手动获取

（2）springboot方式

参数名与形参变量名相同，定义形参既可接受参数

（3）映射方式

（4）实体参数

4、请求-路径参数

（1）/path/{id}

(2)小结：

5、请求响应-响应

• 响应字符串
• 响应对象
• 响应集合

（1）响应 集合案例

（2）三个响应类型的对比

（3）统一响应结果

6、请求响应-响应-案例

难点：两个路径：一个用于处理数据请求，另一个用于展示用户界面

需求：获取员工数据，返回统一响应结果，在页面渲染

• 在pom.xml文件中引入dom4j的依赖，用于解析xml文件
• 引入资料中提供的解析xml的工具类XMLParserUtils、对应的实体类Emp、XML文件中的emp.xml
• 引入静态页面文件，放在resourses下的static目录下
• 编写EmpController程序，处理请求，响应数据。

（1）新建工程和maven模块

（2）Emp

(3)EmpController

(4)响应结果

7、三层架构

• Controller层:控制层，接收前端请求，处理请求，返回响应数据
• Service层：业务逻辑层，处理具体逻辑（gender，job）
• Dao层：数据访问层。(如解析emp.xml)

(1)dao目录

EmpDao接口：listEmp方法

EmpDaoA类：实现EmpDao接口，listEmp方法解析epm.xml

empList变量：存解析的员工列表

（2）Service

EmpService接口：listEmp方法

EmpServiceA类：实现EmpService接口，listEmp方法（调用EmpDaoA类的listEmp方法，数据处理，返回数据empList变量）

empList变量：存处理后的员工列表

（3）controller

EmpController类：list方法（1、调用EmpServiceA类的listEmp方法 2、响应数据empList变量）

8、分层解耦

本节概要：

(1)EmpDaoA

(2)EmpServiceA

(3)EmpController类

（4）运行界面展示

（3）判断是否解耦成功

9、分层解耦-IOC&DI-IOC详解

（1）四种IOC容器注释：声明bean

注释后bean名默认为类的首字母小写，即对象名为类名首字母小写。（可修改）

如：@Service("serviceA"),此时EmpServiceA类的对象名为serviceA

(2)EmpDaoA声明bean:Repository

(2)EmpService类声明bean:Service

(3)查看IOC容器中默认的bean名

10、分层解耦-IOC&DI-IC详解

• service层有两个类，A和B
• IOC容器有两个service层对象，不处理会报错
• DI依赖注入时，通过@Primary、@Qualifier、@Resource来解决

（1）Primary方法解决一个层多个类对象注入问题

五、数据库MYSQL

1、数据库介绍

（1）什么是数据库

SQL-数据库管理系统-数据库-数据的控制

（2）数据库产品

Orcle、MYSQL等

2、安装mysql

• 解压mysql安装包
• 配置mysql环境变量、初始化mysql，注册mysql服务、启动mysql服务、修改mysql账户密码
• 登录mysql：root 123456
• 卸载mysql

（1）解压安装包

（2）配置mysql

（3）登录mysql

3、mysql的数据模型

（1）访问本地mysql服务器：mysql的客户端连接mysql的服务器

（2）SQL的语法

• SQL语句怒区分大小写
• SQL语句以分号结尾

（3）SQL的分类

4、MYSQL-DDL-数据库操作（增删查用）

5、MYSQL-DDL-图形化工具

（1）mysql客户端工具的缺点：

（2）mysql图形化工具

• SQLyog
• Navicat
• DataGrip
• IDEA

（3）在IDEA中连接mysql数据库

6、MYSQL-DDL-表操作（增删改查）

（1）创建表-字段无约束

（2）创建表-字段有约束（注意字段的值唯一和非空）

• 约束关键字
• 案例

（2）字段的数据类型

MySQL中的数据类型有很多，主要分为三类：数值类型、字符串类型、日期时间类型。

（3）创建tb_emp表(员工表)

（4）查询和修改、删除tb_emp表

（5）DDL小结

注：是alter

7、MYSQL-DML-数据操作（增删改）

（1）添加数据insert

(2)修改数据update

（3）删除操作delete

（4）DML小结

8、MYSQL-DQL-表查询（查）

（1）基本查询

（2）条件查询（表，查询的字段，查询的条件）

（3）聚合函数

（4）分组查询

(5)排序查询

（6）分页查询

（6）小结

9、MYSQL-DQL案例

（1）案例一:分页查询

分析：

1、输入员工姓名（模糊匹配）、员工性别（精确查询）、入职时间（范围查询）

2、分页查询（每页10条记录）

3、查询结果，根据更新时间倒序排序

（2）案例二：统计男女员工的人数

分析：

1、性别分组

2、统计分组后的员工数量

3、将gender的1和2转换处理

4、查询女性和男性员工的统计值（count（*））

（3）案例三：

10、MYSQL-多表设计---一对多

（1）表的结构

（2）案例：两个表结构设计

需求：根据页面原型和需求文档，完成部门和员工模块的表结构设计

• 1、创建一个tb_dept表

2、修改tb_empt表结构

（3）一对多--外键约束（物理外键）

1、插入两个表的数据（上一步已完成）

2、删除tb_dept表的id=1的数据

3、为tb_emp表添加一个外键，外键的字段是dept_id

4、tb_dept中删除id=1和id=5分别查看是什么情况

5、小结

11、MYSQL-多表设计---一对一

案例：用户与身份信息的关系

关系：一对一关系，将一个表拆分成两个表，可以提高操作效率。

实现：在一个表tb_user_card中加入外键user_id，关联另一个表tb_user的主键id。

（1）创建tb_user表（文件夹有）

（2）创建tb_user_card

该表的外键是user_id。

12、MYSQL-多表设计-多对多（中间表）

案例：学生与课程的关系

关系：一个学生可以选多门选修课，一门课程可以供多个学生选择

实现：建立第三张中间表，中间表至少包含两个外键，分别关联两方主键

（1）创建tb_student

（2）创建tb_course

（3）创建tb-student_course

（4）3张表的关系图

13、MYSQL-多表设计-案例（苍穹外卖）

（1）案例要求：设计合理的表结构

根据苍穹外卖页面原型，设计分类管理、菜品管理、套餐管理模块的表结构.

（2）打开苍穹外卖项目的页面

（3）案例步骤

分类管理和套餐管理一对多，分类管理和菜品管理是一对多，套餐管理和菜品管理是多对多。

（4）模块的关系图

（5）分类表的设计category

（6）菜品表的设计dish

(7)套餐表设计

(8)套餐菜品中间表

（9）小结

14、MYSQL-多表查询-概述

（1）在db04数据库下创建两个表tb_dept和tb_emp

（2）单表查询和多表查询

多表查询出现笛卡尔积现象，会有无效数据。

（3）加上筛选条件消除无效的笛卡尔积。

（4）小结

（5）下节预习

15、MYSQL-多表查询-内连接（公共部分）

16、MYSQL-多表查询-外连接

（1）左连接

（2）右连接

17、MYSQL-多表查询-子查询

（1）标量子查询1

（2）列子查询

重点：in

（3）行子查询

（4）表子查询

18、MYSQL-多表查询案例

（1）category和dish表

（2）

（3）

（4）

（5）

（6）三表联查

19、MYSQL-事务-概述

（1）需求：学工部整个部门解散了，该部门和部门下的员工都要删除（两个表间有物理外键）

这个是两个事务，当部门删除成功，员工删除失败，则数据就不一致对应了。即不同时不同步。

（2）事务概念

使用事务与使用其他方法解散部门的区别

事务案例：

20、MYSQL-事务-四大特性

原子性、一致性、隔离性、持久性

21、MYSQL-事务-索引

（1）索引的操作语法

• 创建索引
• 查看索引
• 删除索引

（2）索引概念

索引是帮助数据库高效获取数据的数据结构，相当于一个目录。

（3）索引优缺点

（4）索引的结构

（5）小结