java小白第七天之JAVAWeb前端知识-优快云博客

本文是作者观看黑马B站视频所做的前端学习笔记，涵盖HTML、CSS、JavaScript、VUE、AJAX等技术。介绍了HTML的路径使用，提及CSS属性参考官方文档，阐述了AJAX实现前后端分离的原理，还包含VUE常用命令、生命周期及JSON与JAVA对象转换等内容。

java小白第七天JAVAWeb前端知识

写在前面
01 HTML
- 01 快速入门
02 CSS
03 JavaScript
05 VUE
- 02 常用命令
- 03 vue 生命周期
01 AJAX

写在前面

本文是边看黑马b站视频边写的一片笔记, 文中大多图片都来自黑马视频. 旨在巩固学习以及方便后续查阅和供广大朋友们学习, 感谢黑马视频分享

01 HTML

在这里插入图片描述

01 快速入门

在这里插入图片描述

示例图片
src可以是绝对路径和相对路径

02 CSS

在这里插入图片描述

CSS属性
参考官方文档

03 JavaScript

在这里插入图片描述

05 VUE

在这里插入图片描述

02 常用命令

在这里插入图片描述

03 vue 生命周期

在这里插入图片描述

01 AJAX

w3school

01 快速入门

数据交互不再通过JSP返回页面, 而是在html中使用ajax直接获取后端响应数据, 实现前后端分离

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--使用 ajax 获取后端响应的数据-->
<script>
    // 创建ajax核心对象 xmlhttprequest
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 发送请求
    // url: 全路径名
    xhttp.open("GET", "http://localhost:8080/ajax_demo07/ajaxServlet", true);
    xhttp.send();

    // 接收响应

   xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {

               alert(this.responseText);
       }
  };
</script>
</body>
</html>

在这里插入图片描述

02 Axios

Axious官网

在这里插入图片描述
代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<script>
    axios({
        method:"get",
        url:"http://localhost:8080/ajax_demo07/registerServlet?username=张三",
    }).then(function (response) {

        alert(response.data)
    });
</script>
</body>
</html>

在这里插入图片描述

03 JSON

JAVASCRIPT OBJECT NOTATION
在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03</title>
</head>
<body>

<script>
    const json = {
        "name":"张三",
        "age":20,
        "city":["北京","上海","广州"]
    }
    alert(json.name)
    alert(json.age)
    alert(json.city)
</script>
</body>
</html>