node:来解析 .js 文件的软件
浏览器内置了一个 js 代码的解释器(解析器),所以能识别 js 代码
官方: 是一个基于 Chrome V8 解析引擎的 JavaScript 运行时环境
node 的作用
+ 当 js 代码引入在 html 文件内, 在浏览器打开的时候,使用 ECMAScript 操作 BOM 和 DOM,叫前端 js
+ 当 js 代码直接被 node 运行的时候, 没有了 BOM 和 DOM,增加了一些操作你电脑的能力,如:操作文件 文件夹的增删改查,电脑系统,数据库,我们叫做 后端 js
node 环境的安装,官网下在安装包,直接装在你的电脑操作系统内部,需要通过 命令行 来打开node
node 运行 js 代码的方式
1. $ node:就会进入 js 编辑模式
2. $ node 文件名 在控制台 以 node 这个 "软件" 来运行 该 js 文件
一些简单的指令
$ dir: 查看当前目录下的有哪些文件或者文件夹存在
$ cd 文件夹名称: 切换到指定目录下
$ cd .. : 回到当前目录的上一级目录
+ 注意: cd xx 的指令是不能进行盘符的切换的,只能在当前盘符下切换目录环境
$ 盘符: 切换盘符
$ md 文件夹名称: 创建文件夹
$ rmdir 文件夹名称: 删除文件夹
$ ipconifg: 查看你的电脑 ip 地址信息
$ systeminfo:查看你电脑的基本操作系统信息
$ cls/ $ clear(os): 清屏
node 的模块化开发
node 有自己的模块化开发标准, 叫 CommonJS 模块化开发标准
1. 自定义模块
2. 内置模块(分为内置模块fs、内置模块path、内置模块http)
3. 第三方模块(不是自己写的, 也不是内置模块)
+ require('指定的 js 文件')
=> 注意: 如果你导入的文件是 .js 后缀, 可以省略不写
+ 返回值: 该文件内导出的那个 对象数据类型
const moduleB = require('./b.js')
module.exports = { 书写上你要导出的内容 }
module.exports = {
// 导出了一个叫做 num 的数据, 用的是我自己的 num 这个变量的值
// 导出一个叫做 num 的数据, 值是 100
num: num,
showStr: fn
}
内置模块 - fs 模块
const fs = require('fs'), 用来操作 各种 文件和文件夹 的操作
1. 异步读取文件内容
fs.readFile(文件路径, 格式, 回调函数)
-> 文件路径: 你要读取的文件路径, 如果该路径不存在, 就会出现错误信息
-> 格式: 选填, 默认是 buffer, 选填 'utf-8'
-> 回调函数: 必填, 读取结束后执行
2. 同步读取文件内容
fs.readFileSync(文件路径, 格式)
如果读取文件失败, 会直接报错, 阻断程序的继续执行, 返回值: 读取到的文件内容
3. 异步写入文件内容
fs.writeFile(文件路径, 写入的内容, 回调函数)
文件路径: 你要写入的内容的文件路径, 如果该路径不存在, 会创建一个这个文件在写入
写入的内容: 你要想文件内写入的内容,写入是完全覆盖式的写入
回调函数: 必填, 写入完毕后执行的代码
4. 同步写入文件内容
fs.writeFileSync(文件路径, 写入的内容)
内置模块 - path 模块
用来操作 路径信息 的模块,用来组装路径信息的
const path = require('path')
1. path.join(路径片段1, 路径片段2, ...),返回值: 组装好的相对路径信息
2. path.resolve(路径片段1, 路径片段2, ...), 返回值: 组装好的装成一个绝对路径信息
内置模块 - http 模块
用来开启 http 服务的
const http = require('http')
http.createServer(函数),返回值: 是一个 服务
服务.listen(端口号, 函数), 此时你的命令行就变成了一个 服务器,根据不同的请求给出不同的响应
// 1. 导入 http 模块
const http = require('http')
const fs = require('fs')
//创建一个服务, 函数a 会在什么时候执行,只要前端有任何一个请求请求到了 8080 端口号, 就会执行一次
const server = http.createServer(function a(req, res) {
const url = req.url
const method = req.method
if (method === 'GET' && url === '/test/first') {
// response 内有一个方法叫做 end(),语法: res.end('文本内容'),后端返回给前端的内容
res.end('hello world')
}
// 判断
if (method === 'GET' && url === '/test/second') {
const obj = { name: "jack", age: 18 }
res.end(JSON.stringify(obj))
}
if (method === 'GET' && url === '/goods/list') {
// 读取 data.json 文件
fs.readFile('./data.json', 'utf-8', (err, data) => {
if (err) return console.log(err)
res.end(data)
})
}
})
// 2-2. 监听一个端口
server.listen(8080, () => console.log('我正在监听 8080 端口号'))
express
下载 express: $ npm install express
下载 art-template(提供模板引擎解析语法):$ npm install art-template
下载 express-art-template(让 atr-template 和 express 合作): $ npm install express-art-template
const express = require('express') // 创建服务 const app = express() // 配置服务的静态资源 app.use('/public', express.static('./client')) // 配置文件读取引擎(需要用到 expres-art-template) app.engine('html', require('express-art-template')) // 配置所有文件的处理 app.use('/page', (req, res) => { const path = req.url.slice(1) // 利用 express-art-template 提供的 res.rander 方法 去读取指定的文件内容 // 注意: 文件需要放在 views 文件夹内 res.render(path, { title: '啥都有 首页', list: [ 100, 200, 300, 400, 500 ] }) }) // 监听一个指定的端口号 app.listen(6060, () => console.log('监听 6060 端口号成功了')) // 去到命令行, 用 node 执行当前文件
使用express处理静态资源
// 使用 express 框架搭建一个服务器
const express = require('express')
const fs = require('fs')
// 1. 创建服务
// 语法: express()
// 返回值: 一个服务
const app = express()
// 配置所有静态资源文件
// 我们把所有静态资源约定一个共同点, 当你需要静态资源文件的时候, 请求都以 /public 开头
// 将来前端需要 css/index.css 文件的时候, 就请求 /public/css/index.css
app.use('/public', express.static('./client'))
// 配置各种内容
// 目前已后端为主, 设计了一个 /a, 返回的是 index.html 文件
// 当前端需要 index.html 文件的时候, 请求 /a
// 这个是一个随便书写的内容, 完全没有语义化
// 既然可以自己定义, 修改成 /index.html
app.use('/index.html', function (req, res) {
fs.readFile('./client/index.html', 'utf-8', (err, data) => {
if (err) return console.log(err)
res.end(data)
})
})
// 既然 index.html 可以成功
// 那么我们就可以把 xxx.html 放在一起书写
// 我们还可以把 xxx.css 放在一起书写
// 我们还可以把 xxx.js 放在一起书写
// 我们还可以把 xxx.jpg 放在一起书写
// ...
// 我们可以把上面的内容分成两类
// 1. 页面文件(html)
// 2. 静态资源(css, js, 图片)
// express 框架给我们提供了一个叫做 static 的方法
// 专门用来处理静态资源文件的
// 语法: express.static('文件夹名称')
// 作用: 按照你写的文件夹去自动查找内容自动帮你返回给前端
// 2. 监听一个端口
// 语法: 服务.listen(端口号, 回调函数)
app.listen(8080, () => console.log('监听8080 端口成功'))
/*
// 将来只要前端发送 /public/xxx 的请求
// 都会去到 ./client 文件夹下查找文件, 自动返回
app.use('/public', express.static('./client'))
// 例子:
// 前端请求 /public/css/index.css
// 拿到 /public 后面的内容, 也就是 /css/index.css
// 和 ./client 组合在一起, 得到 ./client/css/index.css
// 自动读取 ./client/css/index.css 文件, 返回给前端
// 前端请求 /public/js/index.js
// 拿到 /public 后面的内容, 也就是 /js/index.js
// 和 ./client 组合在一起, 得到 ./client/js/index.js
// 自动读取 ./client/js/index.js 文件, 返回给前端
// 前端请求 /aaa/css/index.css
// 不会去按照 static 规则定义了
*/
nodemon 工具
+ nodemon 和 node 差不对, 是一个专门用来执行 js 文件的工具,依赖 node 环境运行
+ 特点: 当文件发生变化的时候, 会自动重启
下载 nodemon:
因为依赖 node 环境,就可以使用 npm 下载
=> win : $ npm install --global nodemon
=> MAC : $ sudo npm install --global nodemon
检测下载: $ nodemon --version
卸载
win : $ npm uninstall --global nodemon
MAC : $ sudo npm uninstall --global nodemon
使用:
和使用 node 运行 js 文件是一样的
+ 打开命令行, 切换目录到你要执行的 js 文件的目录: $ nodemon 文件名称
基础路由
const express = require('express')
const app = express()
// 配置服务的静态资源
app.use('/public', express.static('./client'))
// 配置文件读取引擎(需要用到 expres-art-template)
app.engine('html', require('express-art-template'))
// 配置所有文件的处理
app.use('/page', (req, res) => {
const path = req.url.slice(1)
// 利用 express-art-template 提供的 res.rander 方法 去读取指定的文件内容
// 注意: 文件需要放在 views 文件夹内
res.render(path, { title: '啥都有 首页', list: [ 100, 200, 300, 400, 500 ] })
})
// 判断你请求了什么内容, 我给出对应过得结果
// 两个基础语法
// app.get('请求地址', 处理函数)
// app.post('请求地址', 处理函数)
app.get('/aaa', (req, res) => {
// res.end 只能返回一个 字符串 类型
// const obj = {
// code: 1,
// message: '登录成功'
// }
// // 为了能把 obj 传递回去
// // 需要 把 obj 转换成 字符串
// // josn 格式
// const str = JSON.stringify(obj)
// res.end(str)
// 当你使用 express 的时候, express 为你提供了一个方法叫做 send()
// 你可以向里面填写任意数据类型, express 会自动判断你的数据类型, 决定要不要帮你转换成 字符串
// res.send('hello world')
res.send({ code: 1, message: '注册成功' })
})
app.post('/login', (req, res) => {
// 拿到前段传递来的数据, 进行数据库比对, 告诉他登录成功失败
res.send({
code: 1,
message: '我接收到你用 post 发送的 /login 请求了'
})
})