环境准备
1 安装nvm
nvm 即 (node version manager)，好处是方便切换 node.js 版本
安装注意事项
- 要卸载掉现有的 nodejs
- 提示选择 nvm 和 nodejs 目录时，一定要避免目录中出现空格
- 选用【以管理员身份运行】cmd 程序来执行 nvm 命令
- 首次运行前设置好国内镜像地址
nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/
首先查看有哪些可用版本
nvm list available
建议安装 LTS（长期支持版）
nvm install 16.16.0
nvm install 14.20.0
执行 nvm list 会列出已安装版本
切换到 16.16.0
nvm use 16.16.0
安装后 nvm 自己的环境变量会自动添加，但可能需要手工添加 nodejs 的 PATH 环境变量
2 检查npm
npm 是 js 的包管理器，就类似于 java 界的 maven，要确保它使用的是国内镜像
检查镜像
npm get registry
3 搭建前端服务器
新建一个保存项目的 client 文件夹，进入文件夹执行
npm install express --save-dev
修改 package.json 文件
{"type": "module","devDependencies": {"express": "^4.18.1"}
}
- 其中 devDependencies 是 npm install --save-dev 添加的
编写 main.js 代码
import express from 'express'
const app = express()app.use(express.static('./'))
app.listen(7070)
执行 js 代码（运行前端服务器）
node main.js
前端案例
- 前端只有静态页面，使用 Express 服务器
- 后端使用 Tomcat 服务器，通过 SpringBoot、MyBatis 等框架获取数据库数据
1 查找元素
- document.getElementById - 根据 id 值查找一个元素
- [document|元素].querySelector - 根据选择器查找第一个匹配元素
- [document|元素].querySelectorAll - 根据选择器查找所有匹配元素
例如，有下面的 html 代码
<div><div class="title">学生列表</div><div class="thead"><div class="row bold"><div class="col">编号</div><div class="col">姓名</div><div class="col">性别</div><div class="col">年龄</div></div></div><div class="tbody"><div class="row"><div class="col">1</div><div class="col">张三</div><div class="col">男</div><div class="col">18</div></div></div>
</div>
执行
document.querySelector('.title'); // 找到 <div class="title">学生列表</div>
执行
document.querySelector('.col'); // 找到 <div class="col">编号</div>
执行
document.querySelectorAll('.col');/*找到的是一个集合<div class="col">编号</div><div class="col">姓名</div><div class="col">性别</div><div class="col">年龄</div><div class="col">1</div><div class="col">张三</div><div class="col">男</div><div class="col">18</div>
*/
执行
const thead = document.querySelector('.thead');// 只在 thead 元素范围内找
thead.querySelectorAll('.col');/*找到的是一个集合<div class="col">编号</div><div class="col">姓名</div><div class="col">性别</div><div class="col">年龄</div>
*/
根据 id 属性查找既可以用
document.getElementById("id值")
也可以用
document.querySelector("#id值")
2) 修改元素内容
- 元素.innerHTML
- 元素.textContent
例如
document.querySelector('.title').innerHTML = '侠客列表'
innerHTML 会解析内容中的标签
textContext 不会解析内容中的标签
给 innerHTML 或 textContent 赋值空串，可以实现清空标签内容的效果
3 利用模版
<div><div class="title">学生列表</div><div class="thead"><div class="row bold"><div class="col">编号</div><div class="col">姓名</div><div class="col">性别</div><div class="col">年龄</div></div></div><div class="tbody"></div>
</div><template id="tp"><div class="row"><div class="col">xx</div><div class="col">xx</div><div class="col">xx</div><div class="col">xx</div></div>
</template><script>// 将来这些数据从 java 端返回let array = [{ id: 1, name: '张三', sex: '男', age: 18 },{ id: 2, name: '李四', sex: '女', age: 17 }];const tp = document.getElementById("tp");const row = tp.content;const [c1,c2,c3,c4] = row.querySelectorAll(".col");const tbody = document.querySelector('.tbody');for(const {id,name,sex,age} of array) {c1.textContent = id;c2.textContent = name;c3.textContent = sex;c4.textContent = age;// 复制元素const newRow = document.importNode(row, true);// 建立父子关系，左边父，右边子tbody.appendChild(newRow);}
</script>
4 Fetch API
Fetch API 可以用来获取远程数据，它有两种方式接收结果，同步方式与异步方式
格式
fetch(url, options) // 返回 Promise
同步方式
const 结果 = await Promise
// 后续代码
- await 关键字必须在一个标记了 async 的 function 内来使用
- 后续代码不会在结果返回前执行
异步方式
Promise.then(结果 => { ... })
// 后续代码
- 后续代码不必等待结果返回就可以执行
例：
在 express 服务器上有 students.json 文件
[{ "id": 1, "name": "张三", "sex": "男", "age": 18 },{ "id": 2, "name": "李四", "sex": "女", "age": 17 }
]
现在用 fetch api 获取这些数据，并展示
同步方式
<script>async function findStudents() {try {// 获取响应对象const resp = await fetch('students.json')// 获取响应体, 按json格式转换为js数组const array = await resp.json();// 显示数据const tp = document.getElementById("tp");const row = tp.content;const [c1,c2,c3,c4] = row.querySelectorAll(".col");const tbody = document.querySelector('.tbody');for(const {id,name,sex,age} of array) {c1.textContent = id;c2.textContent = name;c3.textContent = sex;c4.textContent = age;// 复制元素const newRow = document.importNode(row, true);// 建立父子关系tbody.appendChild(newRow);}} catch (e) {console.log(e);}}findStudents()
</script>
- fetch(‘students.json’) 内部会发送请求，但响应结果不能立刻返回，因此 await 就是等待响应结果返回
- 其中 resp.json() 也不是立刻能返回结果，它返回的也是 Promise 对象，也要配合 await 取结果
异步方式
<script>fetch('students.json').then( resp => resp.json() ).then( array => {// 显示数据const tp = document.getElementById("tp");const row = tp.content;const [c1,c2,c3,c4] = row.querySelectorAll(".col");const tbody = document.querySelector('.tbody');for(const {id,name,sex,age} of array) {c1.textContent = id;c2.textContent = name;c3.textContent = sex;c4.textContent = age;// 复制元素const newRow = document.importNode(row, true);// 建立父子关系tbody.appendChild(newRow);}}).catch( e => console.log(e) )</script>
- 第一个 then 是在响应返回后，才会调用它里面的箭头函数，箭头函数参数即 resp 响应对象
- 第二个 then 是在 json 解析完成后，才会调用它里面的箭头函数，箭头函数参数即解析结果（本例是 array 数组）
- 上一个 then 返回的是 Promise 对象时，才能链式调用下一个 then
跨域问题
- 只要协议、主机、端口之一不同，就不同源，例如
- http://localhost:7070/a 和 https://localhost:7070/b 就不同源
- 同源检查是浏览器的行为，而且只针对 fetch、xhr 请求
- 如果是其它客户端，例如 java http client，postman，它们是不做同源检查的
- 通过表单提交、浏览器直接输入 url 地址这些方式发送的请求，也不会做同源检查
请求响应头解决
- fetch 请求跨域，会携带一个 Origin 头，代表【发请求的资源源自何处】，目标通过它就能辨别是否发生跨域
- 我们的例子中：student.html 发送 fetch 请求，告诉 tomcat，我源自 localhost:7070
- 目标资源通过返回 Access-Control-Allow-Origin 头，告诉浏览器【允许哪些源使用此响应】
- 我们的例子中：tomcat 返回 fetch 响应，告诉浏览器，这个响应允许源自 localhost:7070 的资源使用
代理解决
npm install http-proxy-middleware --save-dev
在 express 服务器启动代码中加入
import {createProxyMiddleware} from 'http-proxy-middleware'// ...app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }));
fetch 代码改为
const resp = await fetch('http://localhost:7070/api/students')
或
const resp = await fetch('/api/students')
5 模块化
单个导出 const、let、function
export const a = 10;
export let b = 20;
export function c() {console.log('c');
}
一齐导出
const a = 10;
let b = 20;
function c() {console.log('c')
}export {a,b,c}
导出 default，只能有一个
export const a = 10;
export let b = 20;
export function c() {console.log('c')
}export default b;
import 语法
<script type="module">import 语句
</script>
- import 需要遵循同源策略
整个导入
import * as module from '/1.js'
console.log(module.a) // 输出10
console.log(module.b) // 输出20
module.c() // 输出c
单个导入
import {a,c} from '/1.js'
console.log(a) // 输出10
c() // 输出c
导入默认
import x from '/1.js'
console.log(x) // 输出20
