java Web学习笔记（二）

文章目录

- 1. 前置知识
- 2. Ajax
- - 同步交互和异步交互
  - Ajax的实现方式
  - - - 手写一个简单的Ajax请求响应过程
- 3. 前端工程化
- 4. ES6 （为了vue3框架，你要卷它）
- - let和const
  - - - let与const和var的区别
      - 解构表达式
      - 箭头函数
      - reset和spread
      - 类和对象
      - 对象的拷贝
      - js文件对象导出
      - 分别导出
        统一导出
        默认导出
- 5. 前端工程化软件安装
- - - - nodejs安装
      - npm安装
      - 配置阿里npm镜像源
        配置前端依赖目录
      - npm常见命令

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.responsewindow.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>

后端代码

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 {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");resp.getWriter().write("hello:" + username);}
}

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' // 报错

let有作用域

{var i = 10let j = 10
}
console.log(i)
// console.log(j) // 报错

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

console.log(a)
var a = 'd'// console.log(b)   // 报错
let b = "dwadwa"

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

var ss = 123456
let sss = 121311console.log(window.ss)
console.log(window.sss)

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

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

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

let city = '北京'
let str = `<ul-><li></li><li></li><li>${city}</li><li></li><li></li></ul->`

解构表达式

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

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

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

let person = {name:"zhangsan",age:10
}
let {name,age} = person
console.log(name,age)

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

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

箭头函数

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

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}

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)

spread快速合并对象

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

类和对象

类及其说明

class Person{// 公共属性nameage// 私有属性，#n 整体代表一个属性#n// getter and setterget 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 = namethis.age = age}
}

测试

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))

类的继承及其测试

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()

对象的拷贝

浅拷贝

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:小明}

深拷贝

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:张三}

js文件对象导出

分别导出

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

统一导出

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

默认导出

// 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))

5. 前端工程化软件安装

nodejs安装

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

npm安装

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

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

配置阿里npm镜像源

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

npm config get registry

配置前端依赖目录

npm config set prefix "D:\GlobalNodeModules"

npm config get prefix

npm常见命令

npm初始化

npm init

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

下载依赖

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

卸载依赖

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

查看当前npm所有依赖

npm ls

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

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

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

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