目录
nodejs
一 nodejs 介绍和安装
编辑
1.2 node 运行js文件
1.3 模块化操作
1.4 nodejs 第三方模块
npm 使用
1- 进入到项目文件夹(你想下载到哪个项目)
2- 初始化 npm init -y(如果你想下第三方依赖最好初始化一下)
编辑
编辑
编辑
3- 下载第三方模块
项目依赖
开发依赖
4- npm i 命令
5 - npm换源
二、node 内置模块
http 模块
fs模块 (fileSystem 文件系统)
三、express后端框架
路由 和 中间件
路由:
中间件:其实就是一个函数
自定义中间件
路由中间件 (专门用于处理路由的中间件)
get 请求参数的获取
post 请求获取参数
跨域
静态资源 中间件
express 脚手架创建项目
使用
nodejs
一 nodejs 介绍和安装
现在写项目都是前后端分离
前端: 1.铺页面 2.调接口 3.实现逻辑 调bug
后端: 写接口 连同数据库 返回数据 返回前端
后端语言 java go php nodejs(你可以认为它就是充当后端的一种角色“服务器的一种角色”)....
Node.js 是一个免费的、开源的、跨平台的 JavaScript 运行时环境,允许开发人员在浏览器之外编写
命令行工具和服务器端脚本.
想运行js文件 创建一个html文件 在html文件中 引入js 进而运行js代码
有了node之后 就是让你的js文件脱离浏览器运行
学完nodejs之后,我们就可以做后端, 加上js 写前端 自己写出一个前后端都有的网站
node js 解析js代码 脱离浏览器解析( 没有浏览器安全的限制:比如跨域之前的同源限制 )
安装:
下载地址: Index of /download/release/v16.20.2/
测试安装成功
node --versionnode -v出现版本号就成功
1.2 node 运行js文件
创建one.js
在集成终端打开
或者 在外部 通过cmd打开
输入如下命令
node 文件名.js
实践
推荐切换终端:改power shell为cmd
power shell报错几率比cmd要高
选:选择,选cmd
1.3 模块化操作
nodejs中的模块化操作 是commonjs规范
举个例子:我想在01.js文件里面使用02.js外部文件
test.js文件导出
function fn(){console.log("我是test文件里的fn函数");
}module.exports = { //将fn函数(功能)模块化fn
}
01.js文件中导入
let abc = require("./test");//相当于对导入的对象起别名
实践
之前学前端时候,用的es6的规范
面试: 模块化操作有哪些?
commonjs规范(nodejs里面)
通过module.exports 导出 通过require引入
es6规范(es6前端里面)
其实后端也能用,但一般写的时候默认后端用commonjs规范
#记忆:配对,用啥导出用啥引入。
通过export / export default 导出 通过import 引入
1.4 nodejs 第三方模块
node一定要安装上,第三阶段后面下载东西,都是用node中npm下载。
如何去用node? node xxx.js文件(记住进入到文件的目录)
第三方模块,我们需要使用node 自带的 npm工具下载!!!
下载第三方模块使用npm XXXX 前提 必须安装node
npm 相当于软件商店 任何程序员使用js写的功能可以上传到npm网站上,也可以从npm这个网站上下载别人写好的第三方模块 www.npmjs.com
举例:axios 下载方式三种
1、可以把axios保存到本地 通过script引入 本地引入
2、可以使用cdn方式引入 <script src="http://bootcdn/XXXXXXXX"></script>>
3、可以通过npm下载
npm 使用
1- 进入到项目文件夹(你想下载到哪个项目)
2- 初始化 npm init -y(如果你想下第三方依赖最好初始化一下)
初始化之后 对对应的目录里 生成一个package.json 的文件//这个文件非常重要(也就是管理你所有的第三个模块)
作用:管理你所有的下载依赖,,所有你下载的第三方依赖 都会在package.json 中记录
node_modules所有下载的第三方工具都在里面(上传代码的时候不会把这个包上传),所有的包都在里面非常大,发的时候太久了,删掉在发。自己拿到用npm i (会自动下载package.json记录中的第三个库"依赖") 回车就可以了
下载两个包出现一堆包 _是因为有依赖关系
3- 下载第三方模块
init初始化包文件然后下载第三方模块
第三放模块分两种:一种项目用 一种开发过程中去用
第三阶段会频繁的去用第三方模块。人家写好了直接拿去用。
第三方模块怎么拿到? 需要用npm工具下载
项目依赖
我们项目中要用到的第三方模块,叫项目依赖 就是项目中依赖的模块
下载命令 确定 下载的依赖包名是什么
npm install 包名
简写成
npm i 包名下载完之后 在package.json中记录
package.json"dependencies": {"axios": "^1.3.5","express": "^4.18.2"}
使用第三方模块:
在你创建的js文件中,用谁引入谁
const axios = require("axios");
const express = require("express");
目录含义
package.json 包管理文件
pacjage-lock.json 锁定这些包的版本
node_mudules 所有依赖包的文件夹
开发依赖
帮助运行代码 编译代码 工具 nodemon webpack gulp
nodemon 计算监听你的改变(实时浏览器)
webpack 打包工具
gulp 打包工具
nodemon 监听你的改变 只要变了 马上可以显示
下载安装 development 开发单词
npm install nodemon --save-dev 简写成 npm i nodemon -D 局部安装
后面跟--save-dev标识开发依赖(辅助我们编译代码的不和代码真正相关)
下载完成之后 在package.json 中 有记录的"devDependencies": {"nodemon": "^2.0.22"}
局部安装:只能在你当前项目下使用
npm i nodemon -D
自由start命令比较特殊。不用run,直接npm start。//在script里面可以自己配置命令
全局安装: global 全局 全局安装一直使用
每次创建项目必用才安装全局。想axios就不用了。
npm i nodemon -g
4- npm i 命令
当从别的网站上下载一个项目时,老师课堂上讲的代码在上传的时候 不传node_modules 文件夹的
但是你项目中 要用到这些依赖
下载下来项目之后 使用 npm i 命令 自动的下载包管理文件里的所有依赖
5 - npm换源
下载的第三方依赖 默认从npmjs国外网站下载 服务器在国外
可能导致下载过慢 介于这个问题 国外有很多服务器比如阿里云 npmmirror.com
npmmirror.com 每十分钟和 npmjs 这个网站同步一次
下载包 可以通过npmmirror.com 下载
如何修改npm下载源
npm config set registry https://registry.npmmirror.com
查看下载源
npm config get registry
下载源是需要每次都切换 才能使用国内的服务器,比如明天再创建一个项目 还得切换下载源
比较麻烦,,所以下边 直接把 下载源 永久切换 切换成淘宝镜像
npm i -g cnpm --register=https://registry.npmmirror.com
如果安装了淘宝镜像 以后下载依赖包
cnpm i axios
cnpm i express
....
如果你想使用cnpm 必须安装cnpm 指向淘宝镜像
二、node 内置模块
开发的时候不会用
nodejs 内置了很多模块,不同的模块 提供不同的功能(了解)
http 模块
处理服务器的http请求
// 借助http 内置模块(不需要下载) 创建一个服务器
const http = require("http");const server = http.createServer(function(req,res){// res.end("hello")res.writeHead(200,{"Content-Type":"application/json,charset=UTF8"})//解决乱码let obj = {code:1,message:"获取列表成功",list:[{id:1,goodsname:"小米10"},{id:2,goodsname:"小米11"},{id:3,goodsname:"小米10"}]}res.end(JSON.stringify(obj))
})
// 端口号 0-65535
server.listen(3000,"127.0.0.1",function(){console.log("服务器监听成功");
})
fs模块 (fileSystem 文件系统)
读取文件
const fs = require("fs");
fs.readFile("./test.txt",(err,data)=>{// err 读取失败 报错 // data 读取成功 data指的是读出来的内容if(err){console.log(err,"报错啦");}else{console.log(data.toString());}
})
写入文件
fs.writeFile("./test.txt","快51啦",(err)=>{}) //把之前的内容都替换掉了fs.appendFile("./test.txt","是啊 二阶段也快书结束了",()=>{}) // 在原来内容的基础上追加
之后都是借助node框架去学,搭建后端项目接口也是借助后端框架去搭建。
三、express后端框架
node框架,借助express快速搭建一个nodejs应用。
express 是一个简洁灵活的nodejs应用框架,提供了一系列的函数提供咱们使用
官网:Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网
第一次下载第三方的库第一步初始化(保证项目中有记录包)
npm init -y
下载
npm i express
借助express 创建一个服务器
//就三条代码
const express = require("express");
let app = express();
app.listen(3000,()=>{console.log("服务器开启成功");
})
配置了路由
const express = require("express");
const app = express();app.get("/",(req,res)=>{res.send("hello /")
})app.get("/goodslist",(req,res)=>{res.send("商品列表")
})app.post("/login",(req,res)=>{res.send("登录成功")
})app.listen(3000,()=>{console.log("服务器启动成功");
})
const express = require("express");//引入第三方框架
let app = express();//调用 //aap代表这是我的第三方框架的一个应用(或者说第三方框架的别名)
//上面这个就相当于创建了一个app服务器直接监听就好// 模拟客户端向服务器发起一个get方式网络请求,
app.get("/",(req,res)=>{//斜杠代表根127.0.0.1:3000 请求地址,回调函数(这个函数在这个框架里面叫中间件)res.send("hello")//服务端返回内容
})//模拟客户端向服务器接口发起get请求
app.get("/test/first",(req,res)=>{console.log(req.method,"请求方式");console.log(req.url,"请求方式");res.send("哇塞,你已经成功XXX")
})//模拟客户端向服务器接口发起get请求
app.get("/test/second",(req,res)=>{res.send({//访问这个接口返回code:1,message:"请求成功"})
})//模拟post
app.post("/test/third",(req,res)=>{res.send("请求成功了!")
})//直接监听3000端口,后边是一个回调函数(在这个回调函数里面打一句话)
app.listen(3000,()=>{console.log("服务器开启成功!");//127.0.0.1:3000
})
路由 和 中间件
express完全是由路由 和 中间件构成的框架,本质上来说一个express应用就是为了监听不同的路径 调用各种中间件。
路由:
前端访问不同的地址,后端返回不同的数据 后端配置的 叫后端路由
路由一般是在app上使用的 我们成为应用级路由
中间件:其实就是一个函数
app.use(路径,中间件函数)
// app.use 也可以当做路由使用(get post请求都可以) 也可以调用别的中间件
// app.get / app.post 也可以当做路由使用// 监听这个路径下的所有路由,一旦匹配就会执行中间件函数
// 访问/goodslist /login 。。。 都会经过/ 这个路由
// use 当成路由使用时 不是一种精确的匹配// 中间件函数 三个参数
// 第一个 request 请求 获取到请求方式 参数 请求信息。。
// 第二个 response 响应 返回结果
// 第三个参数 next 下一步app.use("/",(req,res,next)=>{console.log(req.method,"请求方式");console.log(req.url,"请求地址");next();
})/ 路由配置 一般放到最上边 路由的顺序是从上到下的
自定义中间件
test.js
function test(req,res,next){console.log("这是一个自定义中间件");next();
}
module.exports = test;//导出
app.js使用 中间件
use就是使用中间件// app.use("/",test)
app.use(test)
路由中间件 (专门用于处理路由的中间件)
路由中间件是express内置的一个中间件
把所有的路由找个中间件统一管理 router
基本使用:
const express = require("express");
// 找一个人专门管理路由 路由中间件
const router = express.Router()
const app = express();
// 中间件通过使用 生效
app.use(router);router.get("/login",(req,res)=>{res.send("登录成功")
})
router.get("/goodslist",(req,res)=>{res.send("列表成功")
})router.post("/register",(req,res)=>{// XXXXXXres.send("注册成功")
})app.listen(3000,()=>{console.log("服务器监听成功");
})
按照功能拆分模块
需求:
功能模块:用户模块 商品模块 购物车模块
创建router文件夹 在文件夹里 创建一个个模块 .js
user.js
const express = require("express");
const router = express.Router()
router.post("/login",(req,res)=>{res.send("登录成功")
})router.get("/register",(req,res)=>{res.send("注册成功")
})router.post("/edit",(req,res)=>{res.send("修改成功")
})
// ...
module.exports = router
app.js 中使用
const userRouter = require("./router/user");
const goodsRouter = require("./router/goods");
// 中间件通过使用 生效
// app.use(userRouter);
// app.use(goodsRouter);app.use("/user",userRouter);
app.use("/goods",goodsRouter);
get 请求参数的获取
query
router.get("/register",(req,res)=>{console.log(req.query,"request请求参数");let {id,title} = req.queryres.send("注册成功")
})前端访问时:http://localhost:3000/user/register?id=1&title=123
params
router.get("/register/:id/:title",(req,res)=>{console.log(req.params,"request请求参数");let {id,title} = req.queryres.send("注册成功")
})前端访问时:http://localhost:3000/user/register/1/123
post 请求获取参数
需要使用中间件解析
app.js
app.use(express.urlencoded()) //用来解析x-www-form-urlencoded
app.use(express.json()) //用来解析application/json
user.js
通过req.body 获取
router.post("/login",(req,res)=>{// post请求获取参数 就是req.body// 不能够直接获取到// post请求的参数需要解析req.body console.log(req.body);res.send("登录成功")
})
跨域
下载cors模块解决跨域 中间件 npm i cors
npm i cors //重启服务器
app.js
// 引入cors 模块 中间件
// let cors = require("cors")
// app.use(cors())
app.js 中
// 设置跨域访问
app.all("*",function(req,res,next){res.header("Access-Control-Allow-Origin","*")// 允许请求头的类型res.header("Access-Control-Allow-Headers","Content-type,Authorization")// 设置请求的方式res.header("Access-Control-Allow-Methods","GET,POST")next()
})
静态资源 中间件
打开一个网站 我们访问html页面 页面中加载css js 图片等文件 (静态资源)
// 设置静态资源中间件
// 127.0.0.1:3000/XXXX/1.webp
// 访问资源时 默认请求public 里边的资源
app.use(express.static("public"))
创建一个public文件夹,里边存放静态资源
127.0.0.1:3000/XXXX/1.webp 访问
express 脚手架创建项目
前面讲的项目文件都是我们自己创建的,非常麻烦。
如果搭建一个后台后端项目有个项目文件模版就好了。
脚手架的作用:方便你搭建项目(创建项目必用)
eg:去上学 去学校 没有脚手架 走着去
有了脚手架之后 骑电动车去
使用
通过应用生成工具 express-generator 可以快速的创建一个基本骨架,也称脚手架
安装脚手架
npm i express-generator -g
创建项目
express -e demo
-e 是制定了项目中使用模板引擎(是在前后端不分离的时候用的) ejs
如果命令无法识别,去外面手动将node添加到环境变量 然后在VSCode 执行refreshenv
刷新变量。再执行创建命令。#或者在主机cmd创建然后托到VSCode中。
默认情况下,端口号都是3000