java Web学习笔记(二)

发布于:2024-07-11 ⋅ 阅读:(21) ⋅ 点赞:(0)

1. 前置知识

前置知识

2. Ajax

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

同步交互和异步交互

同步交互:

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

异步交互:

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

Ajax的实现方式

  1. 通过js手写代码实现
  2. 通过第三方工具,重写或者直接使用第三方工具
  3. 使用框架直接实现(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>

后端代码

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

    }
}

3. 前端工程化

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

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

后端文件管理:使用maven

引入前后端分离

前端-前端工程化:将前端独立,形成一个独立的工程

分析前后端分离项目

  1. (前后端)开发分离
  2. (前后端)部署分离

4. ES6 (为了vue3框架,你要卷它)

let和const

let与const和var的区别
  • let不能重复声明
var i = 10
var i = ''

let cn = 123
// let cn = 'dw' // 报错
  • let有作用域
{
    var i = 10
    let 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 = 121311

console.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{
    // 公共属性
    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
    }
}

测试

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常见命令
  1. npm初始化
npm init

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

  1. 下载依赖
npm insatll vue@2.7.14   # 下载对应版本的vue
npm install ***  # 根据输入的内容下载相对应的依赖
npm i   # 下载package.json里面所有的依赖
  1. 卸载依赖
npm uninstall *** # 卸载某个依赖
  1. 查看当前npm所有依赖
npm ls
  1. package.json中的scripts键值对可以自己声明
npm run *** # *** 处自己修改为脚本中的键名
  1. vscode中集成了powershell终端,以便我们修改代码同时管理前端资源包

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