文章目录
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>
后端代码
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
引入前后端分离
前端-前端工程化：将前端独立，形成一个独立的工程
分析前后端分离项目
- （前后端）开发分离
- （前后端）部署分离
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常见命令
- 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。