它是一个基于谷歌v8引擎用于运行javaScript的环境
运行环境=运行时
目前我们学过能够运行js的有两个环境:
1 浏览器 html/css/js
2 node 只能运行js
百度 node.js 即可
1 .zip -->解压即玩,自己配置环境变量
2 .msi -->安装版,自动配置环境变量
node -v
vscode
dos命令
powerShell
node js路径
在code项目下分别新建aa和bb目录
在aa目录下新建a.js,打印任意内容
1 当前地址在code下,执行a.js文件
2 当前地址在aa下,执行a.js文件
3 当前地址在bb下,执行a.js文件
在页面中引入多个js文件,可知这些js文件都是共享的
什么是模块化?
项目功能是非常复杂的,需要根据功能进行拆分,每一个模块都用js文件来描述
作用:复用、便于阅读、模块之前互不干扰(解耦)、便于多人协作开发
每一个js就是一个模块,模块之间的通信靠的就是暴露和引入
require('引入目标js的路径')
注意:
1 引入的js文件的后缀.js可省
2 引入js的执行顺序和引入的位置有关
3 require自带缓存,引入第一次后会把数据缓存起来,如果以后重复引入只会用到缓存中的数据(引入多次无效)
a.js 暴露
module.exports = 值
注意:module.exports只能写一次
b.js引入
let 变量=require('....')
a.js
let name="张三"
let age=18
module.exports ={name,age}
b.js
// let obj=require('./a.js')
// console.log(obj.name,obj.age);
let {name,age}=require('./a.js')
console.log(name,age);
在code项目下分别新建aa和bb目录
aa下新建a.js
bb下新建b.js
a.js用来暴露数据
b.js用来引入和使用数据
要求:
a.js需要暴露以下:
let address="重庆";
function dance(){
console.log('跳舞')
}
let dogs=[
{name:"小黄",color:"red"},
{name:"来福",color:"black"},
{name:"旺财",color:"yellow"},
]
let user={
name:"张三",
age:19
}
b.js:
1 需要接受a.js中所有数据
2 需要执行dance方法
3 最终打印:我叫 张三 ,今年19岁,来自 重庆,我有3条狗,他们的名字分别是 小黄,来福,旺财,颜色分别是red,black,yellow
node 执行b.js文件
讲解:
a.js:
module.exports={
address,
dance,
dogs,
user
}
b.js:
let { address, dance, dogs, user } = require("./a")
dance();
let str=""
let names=dogs.map(item=>item.name).join()
let colors=dogs.map(item=>item.color).join()
//我叫张三,今年19岁,来自 重庆,我有3条狗,他们的名字分别是 小黄,来福,旺财,颜色分别是red,black,yellow
str=`我叫${user.name},今年${user.age}岁,来自 ${address},我有${dogs.length}条狗,
他们的名字分别是${names},颜色分别是${colors}`;
console.log(str);
查看是否报错
a.js
let x=1;
console.log(x)
b.js
require('./a.js')
let x=1;
console.log(x)
前端:ES(ECMAScript) 标准 :js是共享
后端: CommonJS :每一个js文件都是独立的,互不干扰
引用了type="module" 就开启了两个开关:
1 js文件变成独立的
2 能够使用import 、 export 来进行数据的暴露和引入
import 'js路径'
注意:
1 后缀 .js不可省
2 import ‘’ 也有缓存,重复写无效
3 import 引入位置和执行顺序无关(都会先执行)
a.js暴露 b.js引入
前置:html:
a.js
export let x=1;
export let y=2;
b.js --语法要求必须用{}解构
import {x,y} from './a.js'
console.log(x,y);
a.js
let x=1;
let y=2;
export {x,y} ---语法要求 export后必须是{}
b.js
import {x,y} from './a.js'
console.log(x,y);
a.js
let x=1;
let y=2;
export default {x,y} -- 语法:export default 任意数据
b.js
import obj from './a.js' --语法:import 后不能用{},只能用任意变量接受
console.log(obj);
1 页面引入b.js
2 a.js暴露数据,b.js引入数据
3 a.js需要暴露
let address="重庆";
function dance(){
console.log('跳舞')
}
let dogs=[
{name:"小黄",color:"red"},
{name:"来福",color:"black"},
{name:"旺财",color:"yellow"},
]
let user={
name:"张三",
age:19
}
b.js:
1 需要接受a.js中所有数据
2 需要执行dance方法
3 最终打印:我叫 张三 ,今年19岁,来自 重庆,我有3条狗,他们的名字分别是 小黄,来福,旺财,颜色分别是red,black,yellow
4 使用以上三种方式实现
a.js
let user = {
name: "张三",
age: 19
}
export {user as user2}
b.js
import {user2 as user} from './a.js'
console.log(user);
a.js
let user = {
name: "张三",
age: 19
}
export {user}
b.js
import * as xx from './a.js'
console.log(xx.user);
前端
export {} 或者 export default ...
import {} from '' 或者 import ... from ''
后端:
module.exports=...
let obj=require('..')
require('文件名')
如果引入的是第三方或者node自带模块,则require后的路径不要./或../, 直接写要引入的模块名
写服务
// 获取http对象
let http=require('http')
//创建服务
let server=http.createServer((request,response)=>{
//request 接受请求
//response 响应数据
response.write("helloworld")
response.end();
})
//监听
server.listen(8888,()=>{
console.log("8888服务已开启");
})
自己写服务器:让同桌来访问:
操作文件读写
let http=require('fs')
获取路径
let http=require('path')
补充关键词:
console.log(__dirname); 能够获取当前位置的绝对路径
npm 就是 包管理器,我们可以通过npm命令:
1 下载第三方插件
2 上传我们自己的插件
npm是随着node的安装而一并安装的
npm -v
npm config set registry https://registry.npm.taobao.org
目的:在项目的根目录生产package.json文件,
文件作用:
1 描述项目的信息
2 描述项目所依赖的所有插件(重点)
npm init
npm init -y
分为全局下载和局部下载
命令
npm install 插件名 [-g] 下载
npm install 插件名@版本号 [-g] 下载指定版本
npm uninstall 插件名 [-g] 卸载
简写:
install 可以简写成 i
uninstall 可以简写成 uni
会下载到 固定的目录
查看全局下载的路径: npm root -g
比如我的是:C:\Users\86136\AppData\Roaming\npm\node_modules
以后全局下载的插件都会放在node_modules中
使用场景:
在多个项目中都能用到的插件 :开服插件、脚手架插件
会下载到当前项目中的node_modules
注意:全局下载前一定要把当前路径设置为项目的根目录
npm install 插件 --save
npm install 插件 -S
npm i 插件
使用场景:
只在当前项目中使用 :jquery、echarts等
"dependencies": {
"echarts": "^5.3.3",
package-lock.json文件 和 ^
以上都是用来锁版本的,目的就是防止随意更改,导致代码报错
如果想要更新版本,最权威的做法:先卸载再安装
命名:npm i
作用:可以根据package.json的依赖列表进行按需下载
全局下载: npm i 插件 -g
局部下载 npm i 插件
指定版本下载: npm i 插件@版本号 [-g]
卸载:npm uni 插件 [-g]
按需下载: npm i
0 初始化项目
1 全局安装jquery最新版
2 全局卸载jquery最新版
3 局部安装jquery2.x
4 局部卸载jquery2.x
5 根据package.json进行按需下载
express 是一个 基于node.js平台的服务端应用框架,它提供了注入请求、响应等各种功能
整个服务器代码量是很多的,并且每个项目都有大量的重复的代码,为了减压,我们需要拥有一个代码生成器(脚手架)来帮我们生产一部分代码(必要的环境)
前端开发中提的“脚手架”是一个形象的比喻,比喻各类语言的前期工作环境。
在软件开发上(当然也包括前端开发)的脚手架指的就是:有人帮你把这个开发过程中要用到的工具、环境都配置好了,你就可以方便地直接开始做开发,专注你的业务,而不用再花时间去配置这个开发环境,这个开发环境就是脚手架。
通过脚手架生成Express框架
npm i express-generator -g
express 项目名 会在当前路径下生成项目
如果报错:
解决:
1 在win10 系统搜索框输入 Windows PowerShell(选择管理员身份运行)
2 输入set-ExecutionPolicy RemoteSigned,然后选择A
3 输入 get-ExecutionPolicy
4 重启vscode
npm i 下载所需插件
bin
www : 配置服务
public :放前端资源 (html、css、js、图片等)
routes :放后端资源(js)
views --不管他
app.js --入口文件,开服就自动执行app.js
package.json --查看项目信息以及依赖信息的文件
方式1
npm start
缺点:
1 改变了后端代码后需要手动重新开服
2 改变端口必须找到www文件,很麻烦
方式2
node ./app.js
在app.js中最末尾处添加如下代码:
app.listen(5000,()=>{
console.log("5000开服成功");
})
优点:1 改变端口很方便
2 改变了后端代码后需要手动重新开服
方式3
前置1 :
在app.js中最末尾处添加如下代码:
app.listen(5000,()=>{
console.log("5000开服成功");
})
前置2:
全局下载开服插件 : npm i nodemon -g
nodemon ./app.js
好处:热更新(保存代码后自动重新开服)
dependencies 依赖