java小白第七天之JAVAWeb前端知识

JAVA小白兔兔

已于 2022-11-29 17:09:42 修改

阅读量112

点赞数

分类专栏： java 文章标签：前端 web

于 2022-10-30 20:11:55 首次发布

本文链接：https://blog.csdn.net/czccxq/article/details/127602866

版权

java 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>