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

前端文件管理：使用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。