嘎嘎基础滴JavaWeb(上)

2024-01-10 23:17:43 浏览数 (1)

1.Web开发

Web：全球局域网，也成为万维网，能够通过浏览器访问的网站。

HTML：负责网页的结构（页面元素和内容）

CSS：负责网页的表现（页面元素大的外观、位置等页面样式，如：颜色、大小等）

JavaScript：负责网页的行为（交互效果）

2. HTML、CSS

HTML

超文本标记语言

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
  • 标记语言：由标签构成的语言
    • HTML标签都是预定义好的。例如:使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS

层叠样式表，用于控制页面的样式（表现）。

2.1 基础标签 & 样式

2.1.1 标题排版

  1. 标题标签
    • 标签：<h1>...<h6>（h1 -> h6 重要程度依次降低）
    • 注意：HTML标签都是预定好的，不能自己随意定义
  2. 水平线标签
    • <hr>
  3. 图片标签
    • <img src = "..." width = "..." height="...">
代码语言：html复制
<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器的兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气  新思想夯实大国粮仓</title>
</head>
<body>
    <!-- 
    img标签：
            src：图片资源路径
            width：宽度(px:像素；%：相对于父元素的百分比)（占整个body标签的百分比）
            height：高度(px:像素；%：相对于父元素的百分比)
            一般都指定一个，此时图片会等比例缩放
    相对路径：
            ./：当前目录，可以省略
            ../：上一级目录，不可以省略
     -->
    <img src="https://img.yuanmabao.com/zijie/pic/2024/01/10/lkgtkt40qtm.png"> 新浪政务>正文
​
    <h1>焦点访谈：中国底气  新思想夯实大国粮仓</h1>
​
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>
</html>

2.1.2 标题样式

  • CSS引入方式：
    • 行内样式：写在标签的style属性中（不推荐）
      • <h1 style="xxx: xxx; xxx: xxx"> 中国新闻网 </h1>
    • 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
      • <style> h1{ xxx: xxx; xxx: xxx; } </style>
    • 外联样式：写在一个单独的 .CSS 文件中（需要通过 link 标签在网页引入）
      • h1 { xxx: xxx; xxx: xxx; }
      • <link rel="stylesheet" href="css/news.css">

颜色表示方法

表示方式

表示含义

取值

关键字

预定义的颜色名

red、blue、green……

rgb 表示法

红绿蓝三原色，每项取值范围：0~255

rgb(0,0,0)、rgb(255,255,255)

十六进制表示法

#开头，将数字转换成十六进制表示

#000000、#ff0000

  • CSS选择器：（用来选取需要设置样式的元素（标签））
    • 元素选择器
      • 元素名称{ color: red; }
      • h1{ color: red; }
      • <h1> Hello CSS </h1>
    • id 选择器
      • #id属性值{ color: red; }
      • #hid{ color: red; }
      • <h1 id = "hid"> CSS id Selector </h1>
    • 类选择器
      • .class属性值{ color: red; }
      • .cls{ color: red; }
      • <h1 class="cls"> CSS class Selector </h1>

代码实现：

代码语言：html复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气  新思想夯实大国粮仓</title>
    <!-- 内嵌样式 -->
    <style>
    h1 {
        color: red;
    }
    span{
        color: black;
    }
    </style>
</head>
    <img src="https://img.yuanmabao.com/zijie/pic/2024/01/10/lkgtkt40qtm.png"> 新浪政务>正文
​
    <!-- 行内样式 -->
    <!-- <h1 style="color: brown;">焦点访谈：中国底气  新思想夯实大国粮仓</h1> -->
​
    <!-- <h1>焦点访谈：中国底气  新思想夯实大国粮仓</h1> -->
​
    <!-- 外联样式 -->
    <h1 link rel="stylesheet" href="CSS/news.css">焦点访谈：中国底气  新思想夯实大国粮仓</h1>
​
    <hr>
    <span>2023年03月02日 21:50 央视网</span>
    <hr>
</body>
</html>
代码语言：html复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气  新思想夯实大国粮仓</title>
    <style>
    h1 {
        color: #4d4f53;
    }
    /* 元素选择器 */
    /* span{
        color: #968D92;     优先级最低
    } */
    /* 类选择器 */
    /* .cls{
        color: #968D92;
    } */
    /* id选择器 */
    #time{
        color: #968D92;     /* 优先级最高 */
        font-size: 13px;      /* 设置字体大小 */
    }
    </style>
</head>
    <img src="https://img.yuanmabao.com/zijie/pic/2024/01/10/lkgtkt40qtm.png"> 新浪政务>正文
    <!-- 外联样式 -->
    <h1 link rel="stylesheet" href="CSS/news.css">焦点访谈：中国底气  新思想夯实大国粮仓</h1>
​
    <hr>
    <span class="cls" id="time">2023年03月02日 21:50</span>
    <span>央视网</span>
    <hr>
</body>
</html>

2.1.3 超链接

  • 标签：
    • <a href="..." target="...">央视网</a>
  • 属性：
    • href：指定资源访问的 url
    • target：指定在何处打开资源链接
      • _self：默认值，在当前页面打开
      • _blank：在空白页面打开
  • CSS属性：
    • text-decoration：规定添加到文本的修饰，none表示定义标准的文本
    • color：定义文本的颜色
代码语言：html复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气  新思想夯实大国粮仓</title>
    <style>
    h1 {
        color: #4d4f53;
    }
​
    #time{
        color: #968D92;     /* 优先级最高 */
        font-size: 13px;      /* 设置字体大小 */
    }
    
    a{
        color: black;
        text-decoration: none;
    }
    </style>
</head>
    <img src="https://img.yuanmabao.com/zijie/pic/2024/01/10/lkgtkt40qtm.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> >正文
    <!-- 外联样式 -->
    <h1 link rel="stylesheet" href="CSS/news.css">焦点访谈：中国底气  新思想夯实大国粮仓</h1>
​
    <hr>
    <span id="time">2023年03月02日 21:50</span> <span><a href="https://www.cctv.com/" target="_blank">央视网</a></span>
    <hr>
</body>
</html>
  • 视频标签：<video>
    • src：规定视频的url
    • controls：显示播放控件
    • width：播放器的宽度
    • height：播放器的高度
  • 音频标签：<audio>
    • src：规定音频的 url
    • controls：显示播放控件
  • 段落标签：<p>
  • 文本加粗标签：<b> / <strong>
  • CSS样式
    • line-height：设置行高
    • text-indent：定义第一个行内容的缩进
    • text-align：规定元素中的文本的水平对齐方式
  • 注意：
    • 在HTML中无论输入多少个空格，只会显示一个。可以使用占位符： &nbsp;

代码实现

代码语言：html复制
<!-- 视频 -->
    <video src="video/1.mp4" controls width="950px"></video>
    <!-- 音频 -->
    <!-- <audio src="audio/1.mp3"></audio> -->
    <!-- 文本 -->
    <p>
        <b>央视网消息</b>（焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
    </p>
    <p>
        人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    </p>
    <img src="img/1.jpg">
    <p>
        今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
    </p>
    <img src="img/2.jpg">
    <p>
        中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以习近平同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。
    </p>
    <p id="plast">
        责任编辑：王树森 SN242
    </p>

2.1.4 页面布局

  • 盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
  • 盒子模型组成：内容区域(content)、内边距区域（padding)、边框区域(border)、外边距区域(mangin)
  • 布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签。
  • 标签:<div> <span>
  • 特点：
    • div 标签：
      • 一行只显示一个（独占一行)
      • 宽度默认是父元素的宽度，高度默认由内容撑开
      • 可以设置宽高( width、height)
    • span 标签：
      • 一行可以显示多个
      • 宽度和高度默认由内容撑开
      • 不可以设置宽高( width、height)
  • CSS属性：
    • width：设置宽度
    • height：设置高度
    • border：设置边框的属性，如：1px solid #000;
    • padding：内边距
    • margin：外边距
  • 注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 - 位置，如：padding-top、padding-left、padding-right...
代码语言：html复制
#center{
            width: 65%;
            /* margin: 0% 0% 17.5% 17.5%; */
            margin: 0 auto;
        }

2.2 表格、表单标签

2.2.1表格标签

  • 场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表
  • 标签：

标签

描述

属性 / 备注

<table>

定义表格整体，可以包裹多个<tr>

border：规定表格边框的高度 width：规定表格的宽度 cellspacing：规定单元格之间的空间

<tr>

表格的行，可以包裹多个<td>

一个 tr 是一个行

<td>

表格单元格(普通)，可以包裹内容

如果是表头单元格，可以替换为 <th>

代码演示：

代码语言：html复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
    <style>
        table{
            text-align: center; /* 将表中数据居中 */
        }
    </style>
</head>
<body>
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>序号</th>
            <th>品牌</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td><img src="img/huawei.jpg" width="100px"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td><img src="img/alibaba.jpg" width="100px"></td>
            <td>阿里</td>
            <td>阿里巴巴集团股份有限公司</td>
        </tr>
    </table>
</body>
</html>

2.2.2 表单标签

  • 场景：在网页中主要负责数据采集功能，如 注册、登录等数据采集
  • 标签：<form>
  • 表单项：不同的 input 元素、下拉列表、文本域等
    • <input>：定义表单项，通过 type 属性控制输入格式
    • select：定义下拉列表
    • textarea：定义文本域

type取值

描述

text

默认值，定义单行的输入字段

password

定义密码字段

radio

定义单选按钮

checkbox

定义复选框

file

定义文件上传按钮

date / time / datetime-local

定义日期 / 时间 / 日期时间

number

定义数字输入框

email

定义邮件输入框

hidden

定义隐藏域

submit / reset / button

定义提交按钮 / 重置按钮 / 可点击按钮

  • 属性：
    • action：规定当提交表单时向何处发送表单数据，URL（指定的是URL地址）
    • method：规定用于发送表单数据的方式。GET、POST
      • get: （默认值）在url后面拼接表单数据，比如：?username=Tom&age==12，url长度有限制
      • post: 在消息体（请求体）中传递的，参数大小无限制

代码实现：

代码语言：html复制
<body>
    <!-- 
        form表单属性：
            action：表单提交的url，往何处提交数据，如果不指定，默认提交到当前页面
            method：表单的提交方式
               get: （默认值）在url后面拼接表单数据，比如：?username=Tom&age==12，url长度有限制
              post: 在消息体（请求体）中传递的，参数大小无限制
    -->
    <form action="" method="get">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        <!-- type="text"为文本输入框 -->
        <input type="submit" name="提交">
    </form>
</body>

3. JavaScript

JavaScript（简称:JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。

JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准。

ECMAScript 6 （ES6）是最新的JavaScript版本（发布于2015年）。

ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。

3.1 js 引入方式

  1. 内部脚本：将 js 代码定义在HTML页面中
    • JavaScript代码必须位于<script></script>标签之间
      • <script> alert("Hello JavaScript") </script>
    • 在HTML文档中，可以在任意地方，放置任意数量的<script>
    • 一般会把脚本置于<body>元素的底部，可改善显示速度
  2. 外部脚本：将 js 代码定义在为外部 js 文件中，然后引入到 HTML 页面中
    • 外部 js 文件中，只包含 js 代码，不包含<script>标签
      • 文件名：demo.js alert("Hello JavaScript")
      • <script src="js/demo.js"></script>
    • <script>标签不能自闭和

3.2 js 基础语法

3.2.1 书写语法

  • 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
  • 每行结尾的分号可有可无
  • 注释：与Java相同
  • 打开括号表示代码块
    • //判断 if(count == 3){ alert(count); }
  • 输出语句
    • 使用 window.alert() 写入警告框
    • 使用 document.write() 写入 HTML 输出
    • 使用 console.log() 写入浏览器控制台
      • <script> window.alert("Hello JavaScript"); //浏览器弹出警告框 document.write("Hello JavaScript"); //写入HTML，在浏览器中展示 console.log("Hello JavaScript"); //写入浏览器控制台 </script>

代码实现：

代码语言：html复制
<script>
    //方式一：弹出警告框
    window.alert("Hello JS");
    //方式二：写入html页面中
    document.write("Hello JS");
    //方式三：控制台输出
    console.log("Hello JS");
</script>

3.2.2 变量

  • JavaScript中用 var 关键字（variable 的缩写）来声明变量。
  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值
  • 变量名需要遵循如下规则：
    • 组成字符可以是任何字母、数字、下划线（ _ ）或美元符号（$）
    • 数字不能开头
    • 建议使用驼峰命名
  • ECMAScript 6新增了let 关键字来定义变量。它的用法类似于var
    • 但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
  • ECMAScript 6新增了const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

代码实现：

代码语言：html复制
<script>
    //var定义变量
    var a = 10;
    a = "张三";
    alert(a);
​
    /* 特点：作用域比较大，属于全局变量
       特点：可以重复定义 */
​
    // {
    //     var x = a;
    //     var x = "A";
    // }
    // alert(x);
​
    //let：局部变量，不能重复定义
    {
        let x = 1;
    }
    alert(x);
​
    //const：常量，不能被改变的
    const pi = 3.14;
    pi = 3.15;
    alert(pi);
</script>

3.3.3 数据类型、运算符、流程控制语句

数据类型：

JavaScript 中分为：原始类型 和 引用类型。

  • 原始类型：
    1. number：数字（整数、小数、NaN（Not a Number））
    2. string：字符串，单双引皆可
    3. boolean：布尔。true，false
    4. null：对象为空
    5. undefined：当声明的变量未初始化时，该变量的默认值时 undefined
  • 使用 typeof 运算符可以获取数据类型
    • var a = 20; alert(typeof a);
  • 运算符
    1. 算数运算符： ，-，，/，%， ，--
    2. 赋值运算符：=， =，-=，*=，/=，%=
    3. 比较运算符：>，<，>=，<=，!=，==，===（全等运算符）
    4. 逻辑运算符：&&，||，!
    5. 三元运输算符： 条件表达式? true_value : false_value
  • ==与===
    • == 在比较的时候，如果类型不同会进行类型转换，再进行比较
    • === 不会进行类型转换，两个类型不同，直接返回 false

代码演示：

代码语言：javascript复制
    var age = 20;
    var _age = "20";
    var $age = 20;
​
    alert(age == _age);      //true
    alert(age === _age);     //false
    alert(age === $age);     //true
  • 类型转换
    • 字符串类型转换为数字：
      • 将字符串字面值转为数字。如果字面值不是数字，则转为 NaN。
    • 其他类型转为boolean：
      • Number： 0 和 NaN 为 false，其他均转为 true
      • String：空字符串为 false，其他均转为 true
      • Null 和undefined：均转为 false

流程控制语句：与Java 相同

3.3 js 函数

  • 介绍：函数（方法）是被设计为执行特定任务的代码块
  • 定义：JavaScript 函数通过 function 关键字进行定义，语法为：
    • function functionName(参数1,参数2...){ //要执行的代码 }
  • 注意：
    • 形式参数不需要类型。因为JavaScript是弱类型语言
    • 返回值也不需要定义类型，可以在函数内部直接使用 return 返回即可
  • 调用：函数名称（实际参数列表）

代码演示：

代码语言：javascript复制
function add(a, b){
    return a   b;
}
代码语言：javascript复制
var result = add(10, 20);
alert(result);

定义方式二：

代码语言：javascript复制
var functionName = function(参数1, 参数2...){
    //要执行的代码
}

代码演示：

代码语言：javascript复制
var add  = function(a, b){
    return a   b;
}

代码实现：

代码语言：javascript复制
<script>
    //定义函数 - 1
    function add(a, b){
        return a   b;
    }
​
    //定义函数 - 2
    var add = function(a, b){
        return a   b;
    }
​
    //函数调用
    var result = add(10, 20);
    alert(result);
    
</script>

注意：js 中，函数调用可以传递任意个数的参数

3.4 js 对象

3.4.1 Array

  • JavaScript 中Array 对象用于定义数组
  • 定义：
    • var 变量名 = new Array(元素列表);
      • var arr = new Array(1, 2, 3, 4);
    • var 变量名 = [元素列表];
      • var arr = [1, 2, 3, 4];
  • 访问：
    • arr[索引] = 值;
      • arr[10] = "hello";

代码实现：

代码语言：javascript复制
<script>
    //定义数组 - 1
    // var arr = new Array(1, 2, 3, 4);
    //定义数组 - 2
    var arr = [1, 2, 3, 4];
    console.log(arr[0]);
​
    /* 特点：长度可变，类型可变 */
    arr[10] = 50;
    console.log(arr[10]);
    console.log(arr[8]);    //undefined
​
    arr[9] = "A";
    console.log(arr[9]);
    
</script>

注意：JavaScript中的数组相当于 Java 中的集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意类型的数据。

属性：

length：设置或返回数组中元素的数量

代码实现：

代码语言：javascript复制
for (let i = 0; i < arr.length; i  ) {
        console.log(arr[i]);
    }

方法：

方法

描述

forEach()

遍历数组中的每个有值的元素，并调用一次传入的函数

push()

将新元素添加到数组的末尾，并返回新的长度

splice()

从数组中删除元素

代码实现：

代码语言：javascript复制
    //forEach：遍历数组中有值的元素
    arr.forEach(function(e){
        console.log(e);
    })
​
    //ES6  箭头函数：(...)=>{...} ----简化函数定义
    arr.forEach((e) => {
        console.log(e);
    })
​
​
    //添加元素到数组的末尾
    arr.push(7, 8, 9);
    console.log(arr);
​
    //splice删除元素
    arr.splice(2, 2);
    console.log(arr);

箭头函数（ES6）：用来简化函数定义语法的。具体格式为：( ... )=>{ ... }，如果需要给箭头函数起名字：

var xxx = ( ... ) => { ... }

3.4.2 String

  • String 字符串对象创建方式：
    • var 变量名 = new String("...");//方式一
      • var str = new String("Hello String");
    • var 变量名 = "...";//方式二
      • var str = "Hello String"; var str = 'Hello String';

属性：length --------------->字符串长度

方法：

方法

描述

charAt()

返回在指定位置的字符

indexOf()

检索字符串

trim()

去除字符串两边的空格

substring()

提取字符串中两个指定的索引号之间的长度

3.4.3 JSON

JavaScript 自定义对象：

  • 定义格式：
    • var 对象名 = { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, 函数名称: function(形参列表){} };
      • var user = { name: "Tom", age : 20, gender: "male", eat: function(){ alert("吃饭~") } };
  • 调用格式：
    • 对象名.属性名;
      • console.log(user.name);
    • 对象名.函数名;
      • user.eat();

代码实现：

代码语言：javascript复制
<script>
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        
        //编写方法：
        /* eat: function(){
            alert("吃饭~")
        } */
        eat (){
            alert("吃饭~")
        }
    }
    alert(user.name);
    user.eat();
</script>

JSON - 介绍

  • 概念：JavaScript Object Notation，JavaScript对象标记法
  • JSON 是通过 JavaScript 对象标记法书写的文本
  • 由于语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
代码语言：javascript复制
{
    "name": "Tom",
    "age" : 20,
    "gender": "male",
};

基础语法：

  • 定义：
    • var 变量名 == '{"key1": value1, "key2": value2}';
      • var userStr = '{"name": "Jerry", "age": 18, "addr": ["北京","上海", "西安"]}';
  • 数据类型：
    • 数字（整数或浮点数）
    • 字符串（在双引号中）
    • 逻辑值（true 或 false）
    • 数组（在方括号中）
    • 对象（在花括号中）
    • null
  • JSON字符串转为 JS 对象
    • var jsObject = JSON.parse(userStr);
  • JS 对象转为 JSON 字符串
    • var jsonStr = JSON.stringify(jsObject);

代码实现：

代码语言：javascript复制
    // 定义json
    var jsonStr = '{"name": "Tom","age": 18, "addr": ["北京", "上海", "西安"]}';
    alert(jsonStr.name);
    //json形式的字符串转换为js对象
    var obj = JSON.parse(jsonStr);
    alert(obj.name);
​
    //js对象转换为json字符串
    alert(JSON.stringify(obj));

3.4.4 BOM

  • 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象
  • 组成：
    • Window：浏览器窗口对象
    • Navigator：浏览器对象
    • Screen：屏幕对象
    • History：历史记录对象
    • Location：地址栏对象

Window

  • 介绍：浏览器窗口对象
  • 获取：直接使用window，其中window . 可以省略。
    • window.alert("Hello Window");
    • alert("Hello Window");
  • 属性：
    • history：对 History 对象的只读引用。
    • location：用于窗口或框架的 Location 对象。
    • navigator：对 Navigator 对象的只读引用。
  • 方法：
    • alert()：显示带有一段消息和一个确认按钮的警告框。
    • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
    • setInterval()：按照指定的周期（以毫秒计）来调动函数或计算表达式。
    • setTimeout()：延迟指定时间执行一次

Location

  • 介绍：地址栏对象
  • 获取：使用 window.location 获取，其中 window . 可以省略
    • window.location.属性;
      • location.属性;
  • 属性：
    • href：设置或返回完整的URL
      • location.href = "https://www.beihua.edu.cn";

代码实现：

代码语言：html复制
<script>
    
    //获取
    window.alert("Hello BOM");
    alert("Hello BOM Window");
​
    //方法
    //confirm - 对话框 -- 确认：true，取消：false
    var flag = confirm("您确认删除该记录吗？");
    alert(flag);
​
    //定时器 = setInterval -- 周期性的执行某一个函数
    var i = 0;
    setInterval(function() {
        i   ;
        console.log("定时器在执行了"   i   "次");
    },2000);    //毫秒值
​
    //定时器 - setTimeout -- 延迟指定时间执行一次
    setTimeout(function(){
        alert("JS");
    },3000);     //毫秒
​
​
    //location
    alert(location.href); //获取当前地址链接
    location.href = "https://www.beihua.edu.cn";   //跳转到指定的地址
</script>

3.4.5 DOM

概念：Document Object Model，文档对象模型

  • 将标记语言的各个组成部分封装为对应的对象：
    • Document：整个文档对象 整个<html>标签被封装为文档对象
    • Element：元素对象 文档中的标签被封装为元素对象
    • Attribute：属性对象 每个标签的属性被封装为属性对象
    • Text：文本对象 标签之间定义的文本称为文本对象（<h1>标签中的文本）
    • Comment：注释对象 编写的注释
  • JavaScript 通过 DOM，就能够对HTML进行操作：
    • 改变 HTML 元素的内容
    • 改变 HTML 元素的样式（CSS）
    • 对 HTML DOM 事件作出反应
    • 添加和删除 HTML 元素
  • DOM 是 W3C（万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准，分为 3 个不同的部分
    1. Core DOM - 所有文档类型的标准模型
      • Document：整个文档对象
      • Element：元素对象
      • Attribute：属性对象
      • Text：文本对象
      • Comment：注释对象
    2. XML DOM - XML 文档的标准模型
    3. HTML DOM - HTML 文档的标准模型
      • Image：<img>
      • Button：<input type='button'>

HTML 中的 Element对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取的

  • Document 对象中提供了以下获取 Element 元素对象的函数：
    1. 根据 id 属性值获取，返回单个 Element 对象
      • var h1 = document.getElementById('h1');
    2. 根据标签名称获取，返回 Element 对象数组
      • var divs = documet.getElementsByTagName('div');
    3. 根据 name 属性值获取，返回 Element 对象数组
      • var hobbys == document.getElementsByName('hobby');
    4. 根据 class 属性值获取，返回 Element 对象数组
      • var clss = document.getElementsByClassName('cls');

代码实现：

代码语言：html复制
<script>
    //1.获取Element元素
    //1.1 获取元素 - 根据ID获取
    var img = document.getElementById('h1');
    alert(img);
    //1.2 获取元素 - 根据标签获取
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i  ) {
        alert(divs[i]);
    }
    //1.3 获取元素 - 根据 name 属性获取
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i  ) {
        alert(ins[i]);
    }
    //1.4 获取元素 - 根据class属性获取
    var classes = document.getElementsByClassName('cls');
    for (let i = 0; i < classes.length; i  ) {
        alert(classes[i]);
    }
​
​
    //2. 查询参考手册，属性、方法
    var classes = document.getElementsByClassName('cls');
    var div1 = classes[0];
    div1.innerHTML = "666"; //改变第一个元素的内容
</script>

3.5 js 事件监听

  • 事件：HTML 事件是发生咋 HTML 元素上的 ”事情“ 比如
    • 按钮被点击
    • 鼠标移动到元素上
    • 按下键盘按键
  • 事件监听：JavaScript 可以在事件被侦测到时 执行代码

3.5.1 事件绑定

  • 通过 HTML 标签中的事件属性进行绑定
代码语言：html复制
<input type = "button" onclick = "on()" value = "按钮1"> 
<script>
     function on(){         
     alert('我被点击了');     
     } 
</script>
通过 DOM 元素属性绑定
代码语言：html复制
<input type = "button" id = "btn" value = "按钮2"> 
<script>     
    document.getElmentById('btn').onclick = function(){
             alert('我被点击了');     
    } 
</script>

代码实现：

代码语言：html复制
<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
</body>
​
<script>
    function on(){
        alert("按钮1被点击了");
    }
    document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了");
    }
​
</script>

3.5.2 常见事件

事件名

说明

onclick

鼠标单击事件

onblur

元素失去焦点

onfocus

元素获得焦点

onload

某个页面或图像被完成加载

onsubmit

当表单提交时触发该事件

onkeydown

某个键盘的键被按下

onmouseover

鼠标被移到某个元素之上

onmouseout

鼠标从某元素移开

代码实现：

代码语言：javascript复制
<body onload="load()"><!-- body部分加载完成之后会自动触发该事件 -->
​
    <form action="" style="text-align: center;" onsubmit="subfn()">
        <!-- 在一个输入框中，点击进去获得焦点（此时写数据触发onkeydown键盘按下）；点到外面，失去焦点 -->
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">
​
        <!-- 定义button按钮绑定onclick事件 -->
        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  
​
    <br><br><br>
​
    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>
​
</body>
​
<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }
​
    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }
​
    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }
​
    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }
​
    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }
​
    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }
​
    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }
​
    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }
​
</script>

4.Vue

  • Vue是一套前端框架，免除原生JavaScript中的 DOM 操作，简化书写。。
  • 基于 MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上
  • 官网：https://v2.cn.vuejs.org/

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

4.1 快速入门

  • 新建HTML页面，引入Vue.js文件
    • <script src = "js/vue.js"></script>
  • 在js代码区域，创建Vue核心对象，定义数据模型
代码语言：html复制
	<script>
	    new Vue({         
		el: "#app",         
		data: {             
			message: "Hello Vue"         
			}     
		}) 
	</script>
  • 编写视图
代码语言：html复制
<div id = "app">     
    <input type = "text" v-model = "message">     {{message}}
</div>

插值表达式

  • 形式：{{ 表达式 }}
  • 内容可以是：
    • 变量
    • 三元运算符
    • 函数调用
    • 算数运算

4.2 Vue 的常用指令

  • 指令：HTML 标签上带有 v- 前缀 的特殊属性，不同指令具有不同的含义。例如： v-if， v-for……
  • 常用指令：
  • 指令作用v-bind为 HTML 标签绑定属性值，如设置 href，css 样式等v-model在表单元素上创建双向数据绑定v-on为 HTML 标签绑定事件v-if条件性的渲染某元素，判定为 true 时渲染，否则不渲染v-else-if条件性的渲染某元素，判定为 true 时渲染，否则不渲染v-else条件性的渲染某元素，判定为 true 时渲染，否则不渲染v-show根据条件展示某元素，区别在于切换的是 display 属性的值v-for列表渲染，遍历容器的元素或者对象的属性

4.3 Vue 的生命周期

生命周期：指一个对象从创建到销毁的整个过程

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态

阶段周期

beforeCreate

创建前

created

创建后

beforeMount

挂载前

mounted

挂载完成

beforeUpdate

更新前

updated

更新后

beforeDestroy

销毁前

destroyed

销毁后

mounted：挂载完成，Vue初始化成功，HTML 页面渲染成功（发送请求到服务端，加载数据）

5.Web 前端开发

5.1 Ajax

  • 概念：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML
  • 作用：
    • 数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据
    • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

5.1.1 Axios

介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发

官网：https://www.axios-http.cn/

  1. 引入 Axios 的 js 文件
    • <script src = "js/axios-0.18.0.js"></script>
  2. 使用 Axios 发送请求，并获取响应结果
代码语言：html复制
axios({
 	method:"get",
  	url:"http://yapi.smart-xwork.cn/mock/169327/emp/list" })
   .then((result)=>{
    	console.log(result.data); 
    });

代码语言：html复制
axios({ 	
    method:"post", 	
    url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld", 	
    data:"id=1" })
    .then((result)=>{ 	console.log(result.data); 
})

5.1.2 案例

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index   1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>

5.2 前后端分离开发

介绍

当前最为主流的开发模式：前后端分离

前端开发人员和后端开发人员在开发过程中都要遵循接口文档

YAPI --- 接口文档管理平台

  • 介绍：YApi是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
  • 地址：https://yapi.pro/
  • 分为
    • API接口管理
    • Mock 服务-----通过这个平台模拟真实接口，生成接口模拟测试数据，用于前端功能测试
  • 步骤：
    1. 添加项目
    2. 添加分类
    3. 添加接口

5.3 前端工程化

是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

3.5.1 环境准备

  1. 介绍：Vue-cli 是 Vue 官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。
  2. Vue-cli 提供了如下功能：
    • 统一的目录结构
    • 本地调试
    • 热部署
    • 单元测试
    • 集成打包上线
  3. 依赖环境：NodeJS

3.5.2 Vue 项目简介

基于 Vue 脚手架创建出来的工程，有标准的目录结构

  • 目录介绍node_modules整个项目的依赖包public存放项目的静态文件src存放项目的源代码package.json模块基本信息，项目开发所需要模块，版本信息vue.config.js保存 vue 配置的文件，如：代理、端口的配置等

src目录下

目录

含义

assets

静态资源

components

可重用的组件

router

路由配置

views

视图组件（页面）

App.vue

入口页面（根组件）

main.js

入口 js 文件

3.5.3 Vue项目开发流程

Vue 的组件以 .vue结尾，每个组件由三个部分组成：<template>、<script>、<style>

5.4 Vue 组件库 Element

  • Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库
  • 组件：组成网页的部件，例如：超链接、按钮、图片、表格、表单、分页条等等
  • 官网：https://element.eleme.cn/#/zh-CNListener

5.4.1 快速入门

  • 安装 ElementUI 组件库（在当前工程的目录下），在命令行执行指令
    • npm install element-ui@2.15.3
  • 引入 ElementUI 组件库
    • import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
  • 访问官网，复制组件代码，调整

5.4.2 常见组件

Table表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

pagination分页展示

当数据量过多时，使用分页分解数据

代码语言：javascript复制
<template>
  <div>
    <!-- button按钮 -->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
​
    <br />
​
    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
​
    <!-- Pagination 分页 -->
    <el-pagination background layout="total,sizes, prev, pager, next, jumper" 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
     :total="1000"></el-pagination>
​
     <br><br>
​
     <!-- Dialog对话框 -->
     <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
​
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
​
​
    <!-- Dialog对话框-Form表单 -->
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>
​
    <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
​
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
​
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: ''
      },
      gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleSizeChange:function(val){
        alert("每页记录数变化"   val)
    },
    handleCurrentChange:function(val){
        alert("页码发生变化"   val)
    },
    onSubmit:function(){
        alert(JSON.stringify(this.form));
    }
  }
};
</script>
​
<style>
</style>
​

6. maven

Java项目的构建方案

Maven 是 apache 旗下的一个开源项目，是一款用于管理和构建Java项目的工具

  • 依赖管理：有了Maven，不用手动导入jar包，只需要在配置文件中描述配置信息，就会自动联网下载
  • 统一项目结构：提供统一的项目结构
  • 项目构建：标准跨平台自动化项目构建方式

5.1 概述

Apache Maven 是一个项目管理和构建工具，它基于项目对象模型（POM）的概念，通过一小段描述信息管理项目的构建

官网：http://maven.apache.org/

  • 仓库：用于存储资源，管理各种jar包
    • 本地仓库：自己计算机上的一个目录
    • 中央仓库：由 Maven 团队维护的全球唯一的。仓库地址：https://repo1.maven.org/maven2/
    • 远程仓库（私服）：一般由公司团队搭建的私有仓库

5.2 IDEA集成Maven

  • Maven坐标：
    • Maven 中的坐标是 资源的唯一标识，通过该坐标可以唯一定位资源位置
    • 使用坐标来定义项目或引入项目中需要的依赖
  • Maven 坐标组成
    • groupld：定义当前Maven项目隶属组织名称（通常是域名反写，例如：com.itheima）
    • artifactld:定义当前Maven项目名称（通常是模块名称，例如order-service. goods-service)
    • version:定义当前项目版本号
代码语言：javascript复制
<groupId>org.example</groupId>
<artifactId>untitled</artifactId>
<version>1.0-SNAPSHOT</version>
代码语言：javascript复制
<groupId>org.example</groupId>
<artifactId>untitled</artifactId>
<version>1.0-SNAPSHOT</version>

5.3 依赖管理

5.3.1 依赖配置：

  • 依赖：指当前项目运行所需的 jar 包，一个项目中可以引入多个依赖。
  • 配置：
    1. 在 pom.xml 中编写 <dependencies>标签
    2. 在<dependencies> 标签中使用<dependency>引入坐标
    3. 定义坐标的 group、artifactld、version
    4. 点击刷新按钮，引入最新加入的坐标
代码语言：javascript复制
<dependencies>
  <dependency>
    <groupId>ch.qos.logback</groupId>
    <artifactId>logback-classic</artifactId>
    <version>1.4.7</version>
  </dependency>
</dependencies>
  • 注意：
    • 如果引入的依赖，在本地仓库不存在，将会连接 远程仓库 / 中央仓库，然后下载依赖。（比较耗时）
    • 如果不知道依赖的信息，可以到https://mvnrepository.com中搜索。

5.3.2 依赖传递：

依赖具有传递性

  • 直接依赖：在当前项目中通过依赖配置建立的依赖关系
  • 间接依赖：被依赖的资源如果依赖其他资源，当前项目间接依赖其他资源。
  • 排除依赖：排除依赖指主动断开依赖的资源，被排除的资源无需指定版本。
    • projectA----------->projectB------------>jar
    • 如果A不需要jar就可以排除依赖
    • 使用<exclusion>
代码语言：xml复制
<dependency>
 	<groupId>ch.qos.logback</groupId> 	
    <artifactId>logback-classic</artifactId>
    <version>1.4.7</version>
    <exclusions>
         	<groupld>junit</groupld>
            <artifactld>junit</artifactld>     
    </exclusions>
</dependency>

5.3.3 依赖范围：

依赖的 jar 包，默认情况下，可以在任何地方使用。可以通过<scope>...</scope>设置其作用范围。

  • 作用范围：
    • 主程序范围有效（main文件夹范围内）
    • 测试程序范围有效（test文件夹范围内）
    • 是否参与打包运行（package指令范围内）

scope值

主程序

测试程序

打包（运行）

范例

compile（默认）

Y

Y

Y

log4j

test

-

Y

-

junit

provided

Y

Y

-

servlet-api

runtime

-

Y

Y

jdbc驱动

  • 如果是默认值，<scope>就不用配置了

5.3.4 生命周期：

Maven的生命周期就是为了对所有的maven项目构建过程进行抽象和统一

  • Maven 中有 3 套相互独立的生命周期
    • clean：清理工作
    • default：核心工作，如：编译、测试、打包、安装、部署等。
    • site：生成报告、发布站点等。
  • 生命周期的阶段：
    • clean：（清理）移除上一次构建生成的文件
    • compile：（编译）编译项目源代码
    • test：（测试）使用适合的单元测试框架运行测试（junit）
    • package：（打包）将编译后的文件打包，如：jar、war等
    • install：（安装）安装项目到本地仓库
  • 在同一套生命周期中，当运行后面的阶段时，前面的阶段都会运行。

7. Web 后端入门

6.1 StringBootWeb

Spring

官网：https://spring.io

Spring 发展到今天已经形成了一种开发生态圈，Spring 提供了若干个子项目，每个项目用于完成特定的功能

SpringBoot

SpringBoot 可以帮助我们非常快速的构建应用程序、简化开发、提高效率。

启动程序：创建项目时自己生成

代码语言：javascript复制
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/*启动类----启动springboot工程*/
@SpringBootApplication
public class SpringbootQuickstartApplication {

	public static void main(String[] args) {
		SpringApplication.run(SpringbootQuickstartApplication.class, args);
	}

}

代码实现：

代码语言：javascript复制
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

//请求处理类
@RestController
public class HelloController {
    @RequestMapping("/hello")//浏览器将来请求 /hello 这个地址就会调用这个方法
    public String hello(){
        System.out.printf("Hello World~");
        return "Hello World~";
    }
}

实现时，浏览器输入localhost:8080/hello即可实现

6.2 HTTP协议：

概述

Hyper Text Transfer Protocol，超文本传输协议，规定了浏览器与服务器之间数据传输的规则。

  • 特点：
    1. 基于 TCP 协议：面向连接，安全
    2. 基于请求 - 响应模型的：一次请求对应一次响应
    3. HTTP协议是无状态的协议：对于事务处理没有记忆能力。每次请求 - 响应都是独立的。
      • 缺点：多次请求间不能共享数据
      • 优点：速度快

6.2.1 请求协议

  • 请求行：请求数据的第一行（请求方式、资源路径、协议）
  • 请求头：第二行开始，格式 key：value 形式的键值对
  • 请求体：POST请求，存放请求参数
  • 请求概述Host请求的主机名User-Agent浏览器版本 例如Chrome浏览器的标识类似Mozilla/5.0 ... Chrome/79， IE浏览器的标识类似Mozilla/5.0(Windows NT...) like GeckoAccept表示浏览器能接收的资源类型，如text / * , image/* 或者 */* 表示所有Accept-Language表示浏览器偏好的语言，服务器可以据此返回不同语言的网页Accept-Encoding表示浏览器可以支持的压缩类型，例如 gzip, deflate 等。Content-Type请求主体的数据类型。Content-Length请求主体的大小（单位:字节）。
  • 请求方式 - GET：请求参数在请求行中，没有请求体，如： /brand / findAll ? name=OPPO&status=1。GET请求大小是有限制的
  • 请求方式 - POST：请求参数在请求体中，POST请求大小是没有限制的。

6.2.2 响应协议

  • 响应行：响应数据第一行（协议、状态码、描述）
  • 响应头：从第二行开始，格式key：value
  • 响应体：最后一部分，存放响应数据
  • 响应状态码：
  • 响应的状态码介绍一百多响应中 -- 临时状态码，表示请求已经被接收，告诉客户端应该继续请求（发送数据）或者如果它已经完成则忽略它二百多成功 -- 表示请求已经被成功接收，处理已完成。三百多重定向 -- 重定向到其他地方;让客户端再发起一次请求以完成整个处理。四百多客户端错误 -- 处理发生错误，责任在客户端。如:请求了不存在的资源、客户端未被授权、禁止访问等。五百多服务器错误 -- 处理发生错误，责任在服务端。如:程序抛出异常等。

状态码

英文描述

解释

200

OK

客户端请求成功，即处理成功，这是我们最想看到的状态码

302

Found

指示所请求的资源已移动到由Location响应头给定的 URL，浏览器会自动重新访问到这个页面

304

Not Modified

告诉客户端，你请求的资源至上次取得后，服务端并未更改，你直接用你本地缓存吧。隐式重定向

400

Bad Request

客户端请求有语法错误，不能被服务器所理解

403

Forbidden

服务器收到请求，但是拒绝提供服务，比如：没有权限访问相关资源

404

Not Found

请求资源不存在，一般是URL输入有误，或者网站资源被删除了

405

Method Not Allowed

请求方式有误，比如应该用GET请求方式的资源，用了POST

428

Precondition Required

服务器要求有条件的请求，告诉客户端要想访问该资源，必须携带特定的请求头

429

Too Many Requests

指示用户在给定时间内发送了太多请求（“限速”），配合 Retry-After（多长时间后可以请求）响应头一起使用

431

Request Header Fields Too Large

请求头太大，服务器不愿意处理请求，因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。

500

Internal Server Error

服务器发生不可预期的错误。服务器出异常了，赶紧看日志去吧

503

Service Unavailable

服务器尚未准备好处理请求，服务器刚刚启动，还未初始化好

状态码大全：https://cloud.tencent.com/developer/chapter/13553

  • 响应头：
  • 响应头介绍Content-Type表示该响应内容的类型，例如 text / html，application / json。Content-Length表示该响应内容的长度（字节数）。Content-Encoding表示该响应压缩算法，例如 gzip。Cache-Control指示客户端应如何缓存，例如 max - age = 300表示可以最多缓存300秒。Set-Cookie告诉浏览器为当前页面所在的域设置 cookie。

6.2.3 协议解析

  • 概念：Hyper Text Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则。

6.3 Web服务器 - Tomcat

Web服务器是一个软件程序，对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，让Web开发更加便捷。主要功能是 “ 提供网上信息阅览服务 ”。

  • 对HTTP协议操作进行封装，简化Web程序开发
  • 部署web项目，对外提供网上信息浏览服务。

6.3.1 简介

  • 概念：Tomcat 是 Apache 软件基金会一个核心项目，是一个开源免费的轻量级 Web 服务器，支持 Servlet / JSP少量的 JavaEE 规范
  • JavaEE：Java Enterprise Edition，Java企业版。指Java企业开发的技术规范总和。
    • 包含13项技术规范：JDBC、JNDI、EJB、RMI、JSP、Servlet、XML、JMS、Java IDL、JTS、JTA、JavaMail、JAF
  • Tomcat 也被称为 Web容器、Servlet 容器。Servlet 程序需要依赖于 Tomcat 才能运行
  • 官网：https://tomcat.apache.org/

6.3.2 基本使用

  • 下载：官网下载，地址https://tomcat.apache.org/download-90.cgi
  • 安装：绿色版，最直接解压即可。
  • 卸载：直接删除目录即可
  • 启动：双击：binstartup.bat
    • 控制台中文乱码：修改conf / logging.properties UTF-8改成GBK即可
  • 关闭：
    1. 直接 × 掉运行窗口：强制关闭
    2. binshutdown.bat：正常关闭
    3. Ctrl C：正常关闭
  • 配置Tomacat端口号：( conf/server.xml )
    • HTTP 协议默认端口号为 80，如果将 Tomcat 端口号改为 80 ，则将来访问 Tomcat 时，将不用输入端口号。
  • 部署：应用复制到 webapps 目录

6.3.3 入门程序解析

起步依赖：

  • spring-boot-starter-web：包含了web应用开发所需要的常见依赖。
  • spring-boot-starter-test：包含了单元测试所需要的常见依赖。
  • 官方提供的starter：https://docs.spring.io/spring-boot/docs/2.7.4/reference/htmlsingle/#using.build-systems.starters

8. 请求响应

  • 请求（HttpServletRequest）：获取请求数据
  • 响应（HttpServletResponse）：设置响应数据
  • BS架构：Browser / Server，浏览器 / 服务器架构模式。客户端只需要通过浏览器，应用程序的逻辑和数据都存储在服务端。（浏览器直接打开）
    • 维护方便
  • CS架构：Client / Service，客户端 / 服务器架构模式。（需要下载相应的客户端）
    • 不同操作系统需要安装不同的客户端，开发、维护麻烦，体验感好

7.1 请求

Postman

Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件

作用：常用于进行接口测试

简单参数

  • 原始方式：在原始的 web 程序中，获取请求参数，需要通过 HTTPServletRequest 对象手动获取
    • //原始方式 @RequestMapping("/simpleParam") public String simpleParam(HttpServletRequest request){ //获取请求参数 String name = request.getParameter("name"); String ageStr = request.getParameter("age"); int age = Integer.parseInt(ageStr); System.out.println(name ":" age); return "OK"; }
  • Springboot 方式：如果方法形参名称与请求名称不匹配，可以使用 @RequestParam 完成映射
    • //springboot方式 @RequestMapping("/simpleParam") public String simpleParam(String name, Integer age){ System.out.println(name ":" age); return "OK"; }
    • @RequestParam 中的 required 属性默认为 true，代表该请求参数必须传递，如果不传递将报错。如果该参数是可选的，可以将 required 属性设置为 false
      • @RequestMapping("/simpleParam") public String simpleParam(@RequestParam(name = "name",required = false) String name, Integer age){ System.out.println(name ":" age); return "OK"; }

实体参数

简单实体对象：请求参数名与形参对象属性名相同，定义POJO接收即可

代码语言：javascript复制
public class User {
    private String name;
    private Integer age;
}
代码语言：javascript复制
@RequestMapping("/simplePojo")
public String simplePojo(User user){
    System.out.println(user);
    return "OK";
}

数组集合参数

  • 数组参数：请求参数名与形参数组名称相同且请求参数为多个，定义数组类型即可接收参数
    • arrayParam?hobby=game&hobby=java
代码语言：javascript复制
@RequestMapping("/arrayParam")
public String arrayParam(String[] hobby){      //数组名和前端请求参数名一致
    System.out.println(Arrays.toString(hobby));
    return "OK";
}
  • 集合参数：请求参数名与形参集合名称相同且请求参数为多个，@RequestParam 绑定参数关系
    • 默认情况下多个值会封装到数组中
代码语言：javascript复制
@RequestMapping("/listParam")
public String listParam(@RequestParam list<String> hobby){
    System.out.println(hobby);
    return "OK";
}

日期参数

  • 日期参数：使用 @DateTimeFormat 注解完成日期参数格式转换
代码语言：javascript复制
@RequestMapping("/dateParam")
public String dateParam(@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime updateTime){
	System.out.println(updateTime);
	return "OK";
}

Json参数

  • JSON 数据 键名 与形参对象 属性名 相同，定义 POJO 类型形参即可接收参数，需要使用 @RequestBody 标识
  • 需要在请求体当中携带到服务端（将请求方式设置为POST）
  • 选择 Body 下面的 raw 后面选择 JSON
代码语言：json复制
{ 	"name":"ITCAST", 	"age":166, 	"address":{ 		"province":"北京", 		"city":"北京" 	} }

先创建一个实体对象

代码语言：javascript复制
public class User{
	private String name;
	private Integer age;
	private Address address;
}
代码语言：javascript复制
public class Address{
	private String province;
	private String city;
}

JSON格式数据

代码语言：javascript复制
{
	"name":"Tom",
	"age":10,
	"address":{
		"province":"beijing",
		"city":"beijing"
	}
}

再将请求数据封装到实体对象中

代码语言：javascript复制
@RequessMapping("/jsonParam")
public String jsonParam(@RequestBody User user){
	System.out.println(user);
	return "OK";
}
代码语言：javascript复制
@RequestMapping("/listAddr")
public List<Address> listAddr(){
	List<Address> list = new ArrayList<>();
	Address addr = new Address();
	addr.setProvince("广东");
	addr.setCity("深圳");
	list.add(addr);
	return list;
}

路径参数

  • 通过请求URL直接传递参数，使用 {……} 来标识该路径参数，需要使用 @PathVariable 获取路径参数

一个路径

代码语言：javascript复制
@RequestMapping("/path/{id}")
public String pathParam(@PathVriable Integer id){
	System.out.println(id);
	return "OK";
}

多个路径

代码语言：javascript复制
@RequestMapping("/path/{id}/{name}")
public String pathParam(@PathVriable Integer id, @PathVriable String name){
	System.out.println(id   ":"   name);
	return "OK";
}

总结

  • 简单参数
    • 定义方法形参，请求参数名与形参变量名一致
    • 如果不一致，通过 @RequestParam 手动映射
  • 实体参数
    • 请求参数名，与实体对象的属性名一致，会自动接收封装
  • 数组集合参数
    • 数组：请求参数名与数组名一致，直接封装
    • 集合：请求参数名与集合名一致，@RequestParam 绑定关系
  • 日期参数
    • @DataTimeFormat
  • JSON参数
    • @RequestBody
  • 路径参数
    • @PathVariable

7.2 响应

  • @ResponseBody
    • 类型：方法注解、类注解
    • 位置：Controller 方法上 / 类上
    • 作用：将方法返回值直接响应，如果返回值类型是 实体对象 / 集合，将会转换为 JSON 格式响应
    • 说明：@RestController = @Controller @ResponseBody

统一响应结果

代码语言：javascript复制
package com.itheima.pojo;
​
/**
 * 统一响应结果封装类
 */
public class Result {
    private Integer code ;//1 成功 , 0 失败
    private String msg; //提示信息
    private Object data; //保存查询数据 data
​
    public Result() {
    }
    public Result(Integer code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }
    public Integer getCode() {
        return code;
    }
    public void setCode(Integer code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Object getData() {
        return data;
    }
    public void setData(Object data) {
        this.data = data;
    }
​
    public static Result success(Object data){
        return new Result(1, "success", data);
    }
    public static Result success(){
        return new Result(1, "success", null);
    }
    public static Result error(String msg){
        return new Result(0, msg, null);
    }
​
    @Override
    public String toString() {
        return "Result{"  
                "code="   code  
                ", msg='"   msg   '''  
                ", data="   data  
                '}';
    }
}

案例

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

  • 在 pom.xml 文件中引入 dom4j 的依赖，用于解析XML文件
  • 引入资料中提供的解析XML的工具类XMLParserUtils、对应的实体类 Emp、XML文件 emp.xml
  • 引入资料中提供的静态页面文件，放在resources下的static目录下
  • 编写 Controller 程序，处理请求，响应数据
代码语言：javascript复制
        <!--解析XML-->
        <dependency>
            <groupId>org.dom4j</groupId>
            <artifactId>dom4j</artifactId>
            <version>2.1.3</version>
        </dependency>

Springboot 项目的静态资源（html，css，js 等前端资源）默认存放目录为：classpath :/ static、classpath :/ public、classpath :/ reesources

代码语言：javascript复制
package com.example.controller;
​
import com.example.pojo.Emp;
import com.example.utils.XmlParserUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.example.pojo.Result;
​
import java.util.List;
​
@RestController
public class EmpController {
    @RequestMapping("/listEmp")
    public Result list(){
        /*加载并解析emp.xml*/
        String file = "src\main\resources\emp.xml";
        System.out.println(file);
        List<Emp> empList = XmlParserUtils.parse(file, Emp.class);
​
        /*对数据进行转换  -gender, job*/
        empList.stream().forEach(emp -> {
            //处理 gender 1：男，2：女
            String gender = emp.getGender();
            if ("1".equals(gender)){
                emp.setGender("男");
            }else if ("2".equals(gender)){
                emp.setGender("女");
            }
            //处理job - 1：讲师，2：班主任，3：就业指导
            String job = emp.getJob();
            if ("1".equals(job)){
                emp.setJob("讲师");
            } else if ("2".equals(job)) {
                emp.setJob("班主任");
            } else if ("3".equals(job)){
                emp.setJob("就业指导");
            }
        });
​
        /*响应数据*/
        return  Result.success(empList);
    }
}

7.3 分层解耦

7.3.1 三层架构

  • Controller（接收请求、响应数据）：控制层，接收前端发送的请求，对请求进行处理，并响应数据
  • Service（逻辑处理）：业务逻辑层，处理具体的业务逻辑。
  • Dao（数据访问）：数据访问层（Data Access Object）（持久层），负责数据访问操作，包括数据的增、删、改、查。
  • 访问顺序：
    1. 前端发起请求之后请求先到达 Controller
    2. 接收到请求之后直接调用 Service 层的方法
    3. Service 层调用 dao，由 dao 进行数据的访问操作
    4. 将 dao 查询的数据返回给Service，拿到数据进行数据处理，最终返回给 Controller程序

Controller层：

代码语言：javascript复制
@RestController
public class EmpController {
    private EmpService empService = new EmpServiceA();
​
    @RequestMapping("/listEmp")
    public Result list(){
        /*调用service，获取数据*/
        List<Emp> empList = empService.listEmp();
        /*响应数据*/
        return  Result.success(empList);
    }
}

Service 层：

代码语言：javascript复制
public class EmpServiceA implements EmpService {
    private EmpDao empDao = new EmpDaoA();
    @Override
    public List<Emp> listEmp() {
        /*调用 dao，获取数据*/
        List<Emp> empList = empDao.listEmp();
        /*对数据进行转换处理*/
        empList.stream().forEach(emp -> {
            //处理 gender 1：男，2：女
            String gender = emp.getGender();
            if ("1".equals(gender)){
                emp.setGender("男");
            }else if ("2".equals(gender)){
                emp.setGender("女");
            }
            //处理job - 1：讲师，2：班主任，3：就业指导
            String job = emp.getJob();
            if ("1".equals(job)){
                emp.setJob("讲师");
            } else if ("2".equals(job)) {
                emp.setJob("班主任");
            } else if ("3".equals(job)){
                emp.setJob("就业指导");
            }
        });
        return empList;
    }
}

dao 层：

代码语言：javascript复制
public class EmpDaoA implements EmpDao {
    @Override
    public List<Emp> listEmp() {
        String file = "src\main\resources\emp.xml";
        System.out.println(file);
        List<Emp> empList = XmlParserUtils.parse(file, Emp.class);     //封装到导入进来的 emp 对象中
        return empList;
    }
}

7.3.2 分层解耦

  • 内聚：软件中各个功能模块内部的功能联系
  • 耦合：衡量软件中各个层 / 模块之间的依赖、关联的程度
  • 软件设计原则：高内聚低耦合

7.3.3 IOC & DI 入门

控制反转：Inversion Of Control，简称 IOC 。对象的创建控制权由程序自身转移到外部（容器）

依赖注入：Dependency Injection，简称 DI。容器为应用程序提供运行时所依赖的资源

Bean对象：IOC 容器中创建、管理的对象

  • Service层 及 Dao层 的实现类，交给 IOC容器管理---------需要在类中加上注解 @Component
    • @Component /*将当前类交给IOC容器管理，成为IOC容器中的bean*/ public class EmpDaoA implements EmpDao { @Override public List<Emp> listEmp() { String file = "src\main\resources\emp.xml"; System.out.println(file); List<Emp> empList = XmlParserUtils.parse(file, Emp.class); return empList; } }
  • 为 Controller 及 Service 注入运行时依赖的对象--------------需要在成员变量的生命上加上注解 @Autowired
    • @Autowired private EmpService empService ; ​ @RequestMapping("/listEmp") public Result list(){ /*调用service，获取数据*/ List<Emp> empList = empService.listEmp(); /*响应数据*/ return Result.success(empList); }
  • 运行测试

7.3.4 IOC 控制反转

IOC对象又称 Bean 对象，Bean 的声明：要把某个对象交给 IOC 容器管理，需要在对应的类上加上如下注解之一

注解

说明

位置

@Componet

声明 bean 的基础注解

不属于一下三类时，用此注解

@Controller

@Componet 的衍生注解

标注在控制器类上

@Service

@Componet 的衍生注解

标注在业务类上

@Repository

@Componet 的衍生注解

标注在数据访问类上（由于与 mybatis 整合，用的少）

  • 注意：
    • 声明 bean 的时候，可以通过 value 属性指定 bean 的名字，如果没有指定，默认为类名首字母小写
    • 使用以上四个注解都可以声明 bean，但是在 springboot 集成 web 开发中，声明控制器 bean 只能用 @Controller
  • Bean 组件扫描
    • 前面声明 bean 的四大注解，想要生效，还需要被组件扫描注解 @ComponentScan扫描
    • @ComponentScan 注解虽然没有显示配置，但是实际上已经包含在了启动类声明注解 @SpringBootApplication 中，默认扫描的范围是启动类所在的包及其子包。

7.3.5 DI 依赖注入

  • @Autowired注解，默认是按照类型进行，如果存在多个相同的 bean，将会报错
  • 通过以下几种方案解决：
    1. @Primary，想让哪个生效，就在哪个上面加上
      • @Primary @Service public class EmpServiceA implements EmpService { }
    2. @Qualifier，配合@Autowired在此后面加上注解，括号里面指定的属性是 bean 的名字，如果声明 bean 的时候没有指定名字，默认是类名首字母小写。
      • @RestController public class EmpController { @Qualifier("empServiceA") @Autowired private EmpService empService ; }
    3. @Resource
      • @RestController public class EmpController { @Autowired @Resource(name = "empServiceA") private EmpService empService ; }
  • @Qualifier 默认按照类型注入
  • @Resource 默认按照名称注入
  • @Autowired 和 @Resource 区别：
    • @Autowired 是 sprig 框架提供的注解，而 @Resource 是 JDK 提供的注解。
    • @Autowired 默认是按照类型注入，而 @Resource 默认是按照名称注入
后端 前后端分离JavaWeb

0 人点赞