木道寻08

这个屌丝很懒，什么也没留下！

热门标签

java Web学习笔记（二）

作者：木道寻08 | 2024-07-15 08:08:47

踩

java Web学习笔记（二）

1. 前置知识

前置知识

2. Ajax

概述：通过JS代码来控制请求的收发。

同步交互和异步交互

同步交互：

单线程作业，客户端发送请求前服务端需要等待，服务端处理请求时客户端等待。

异步交互：

多线程作业，客户端可以发送复数的请求等待服务端响应。服务端响应请求后客户端再一一跳转请求。

Ajax的实现方式

通过js手写代码实现
通过第三方工具，重写或者直接使用第三方工具
使用框架直接实现（eg. VUE 的 axios【暂时不懂】）

手写一个简单的Ajax请求响应过程

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getMessage(){
            var request = new XMLHttpRequest()
            request.onreadystatechange=function (){
                if(request.readyState == 4 && request.status == 200){
                    console.log(request.responseText)// 获取并打印响应信息
                    var inputEle = document.getElementById("message")
                    inputEle.value = request.response
                    window.location.href="https://baidu.com"
                }
            }
            request.open("GET","/hello?username=zhangsan")
            request.send()
        }
    </script>
</head>
<body>

  <button onclick="getMessage()">点我</button>
  <input type="text" id="message"/>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

后端代码

package com.itchen.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        resp.getWriter().write("hello:" + username);

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 前端工程化

前后端使用不同的框架十分不好管理！

前端文件管理：使用nodejs、npm、vite

后端文件管理：使用maven

引入前后端分离

前端-前端工程化：将前端独立，形成一个独立的工程

分析前后端分离项目

（前后端）开发分离
（前后端）部署分离

4. ES6 （为了vue3框架，你要卷它）

let和const

let与const和var的区别

let不能重复声明

var i = 10
var i = ''

let cn = 123
// let cn = 'dw' // 报错
1
2
3
4
5

let有作用域

{
    var i = 10
    let j = 10
}
console.log(i)
// console.log(j) // 报错
1
2
3
4
5
6

let不会预解析进行变量提升

console.log(a)
var a = 'd'

// console.log(b)   // 报错
let b = "dwadwa"
1
2
3
4
5

let定义的全局变量不会作为window属性

var ss = 123456
let sss = 121311

console.log(window.ss)
console.log(window.sss)
1
2
3
4
5

注意：const就是不可修改的let

const teachers = ["章老师","李老师","王老师"]
// teachers = ["","",""]   // 报错
teachers.push("陈老师")
1
2
3

模板字符串：解决换行和字符串拼接问题（类似java中的文本块）

let city = '北京'
let str = `<ul->
                <li></li>
                <li></li>
                <li>${city}</li>
                <li></li>
                <li></li>
            </ul->`
1
2
3
4
5
6
7
8

解构表达式

使用解构表达式取出数组中的元素

// 使用解构表达式取出数组中的元素
let arr = [11,22,33,44]
let = [a,b,c,d,e = 10] = arr
console.log(a,b,c,d,e)
1
2
3
4

使用解构表达式获取对象的属性值(按照同名参数的变量赋值)

let person = {
    name:"zhangsan",
    age:10
}
let {name,age} = person
console.log(name,age)
1
2
3
4
5
6

解构表达式应用在方法的参数列表

function showArr([a,b,c]){
    console.log(a,b,c)
}
showArr(arr)
1
2
3
4

箭头函数

let fun1 = function(){}       // 普通函数声明
let fun2 = ()=>{}             // 箭头函数声明

let fun3 = (x)=>{return x+1}  
let fun4 = x => {return x+1}  // 参数列表中有且只有一个参数，()可以省略不写
let fun5 = x => console.log(x)  // 方法体中只有一行代码，{}可以不写
let fun6 = x => x+1           // 方法体中只有一行含return的代码，return必须省略，{}可以不写

// 在箭头函数中使用this相当于在上一作用域中使用this
1
2
3
4
5
6
7
8
9

reset和spread

reset 剩余的，解决剩余的参数接收问题

let fun1 = (a,b,c,... arr)=>{
    console.log(a,b,c,d)
    console.log(arr)
}

fun1(1,2,3,4,5,6,7,8)
// 输出：1 2 3 4
//      1 2 3 4 5 6 7 8 

// spread   rest在实参上的使用
let arr = [1,2,3]
// let info = ...arr // 报错
let fun2 = (a,b,c)=>{
    console.log(a,b,c)
}
fun2(arr)  // 输出：{[1,2,3],undefined,undefined}
fun2(...arr) // 输出：{1,2,3}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

spread快速合并数组

let a = [1,2,3]
let b = [4,5,6]
let c = [7,8,9]

let d = [...a,...b,...c] // let d = [1,2,3,4,5,6,7,8,9]
console.log(d)
1
2
3
4
5
6

spread快速合并对象

let person1={name:"张三"}
let person2={age:"10"}
let person3={gender:"boy"}
let person4={...person1,...person2,...person3}
console.log(person4)
1
2
3
4
5

类和对象

类及其说明

class Person{
    // 公共属性
    name
    age
    // 私有属性，#n 整体代表一个属性
    #n
    // getter and setter
    get name(){
        console.log("getter")
        return this.name
    }
    set name(name){
        console.log("setter")
        this.name = name
    }

    // 实例方法
    eat(food){
        console.log(`${this.age}岁的${this.name}正在吃${food}`)
    }
    // 静态方法
    static sum(a,b){
        return a + b
    }
    // 构造器
    constructor(name,age){
        this.name = name
        this.age = age
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

测试

let person = new Person()
let person2 = new Person("小明",21)
person.name = "张三"
person.age = 21
console.log(person)
console.log(person2)
person.eat("蛋糕")
console.log(Person.sum(1,2))
1
2
3
4
5
6
7
8

类的继承及其测试

class Student extends Person{
    score;
    study(){
        console.log(`${this.age}岁的${this.name}正在努力学习`)
    }
    constructor(name,age,score){
        super(name,age)  // 调用父类的构造器进行赋值
        this.score = score
    }
}

let stu = new Student("小王",21,60)
stu.study()
1
2
3
4
5
6
7
8
9
10
11
12
13

对象的拷贝

浅拷贝

let arr = [1,2,3]
let person = {name:"张三"}
浅拷贝 : 只拷贝变量的引用地址
let arr2 = arr
let person2 = person
arr[0] = 100
console.log(arr2) // [100,2,3]
person.name = "小明"
console.log(person2) // {name:小明}
1
2
3
4
5
6
7
8
9

深拷贝

let arr = [1,2,3]
let person = {name:"张三"}
// 深拷贝 : 
let arr2 = [...arr]
// let person2 = {...person}
let person2 = JSON.parse(JSON.stringify(person))   // 将其先转换为字符串，再将字符串解析为一个person对象
arr[0] = 100
console.log(arr2) // [1,2,3]
person.name = "小明"
console.log(person2) // {name:张三}
1
2
3
4
5
6
7
8
9
10

js文件对象导出

分别导出

// module.js文件
export const PI = 3.14
// app.js文件
import * as m1 from "./module.js"
// 最后在html文件中关联js文件
1
2
3
4
5

统一导出

// module.js文件
export{PI,sum,Person}
// app.js文件
import * as m1 from "./module.js"
1
2
3
4

默认导出

// module.js文件
export default sum
// app.js文件
import * as m1 from "./module.js"
console.log(m1.default)

// import {default as add} from './module.js'
// console.log(add(10,30))
1
2
3
4
5
6
7
8

5. 前端工程化软件安装

nodejs安装

nodejs的作用。运行js代码。兼容性好：可以运行到windows和linux里。

npm安装

Nodejs包管理工具。作用主要是：前端框架的下载工具，前端项目的管理工具

配置前端依赖目录以及配置阿里npm镜像源

配置阿里npm镜像源

npm config set registry https://registry.npmmirror.com
1

npm config get registry
1

配置前端依赖目录

npm config set prefix "D:\GlobalNodeModules"
1

npm config get prefix
1

npm常见命令

npm初始化

npm init
1

生成一个json文件，这个json文件相当于在maven中的pom.xml文件

下载依赖

npm insatll vue@2.7.14   # 下载对应版本的vue
npm install ***  # 根据输入的内容下载相对应的依赖
npm i   # 下载package.json里面所有的依赖
1
2
3

卸载依赖

npm uninstall *** # 卸载某个依赖
1

查看当前npm所有依赖

npm ls
1

package.json中的scripts键值对可以自己声明

npm run *** # *** 处自己修改为脚本中的键名
1

vscode中集成了powershell终端，以便我们修改代码同时管理前端资源包

注意：如果vscode不能使用npm命令，可以用管理员身份打开npm。

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

java Web学习笔记（二）

文章目录

1. 前置知识

2. Ajax

同步交互和异步交互

Ajax的实现方式

手写一个简单的Ajax请求响应过程

3. 前端工程化

4. ES6 （为了vue3框架，你要卷它）

let和const

let与const和var的区别

解构表达式

箭头函数

reset和spread

类和对象

对象的拷贝

js文件对象导出

分别导出

统一导出

默认导出

5. 前端工程化软件安装

nodejs安装

npm安装

配置阿里npm镜像源

配置前端依赖目录

npm常见命令