node.js(接jquery篇)

浅浅的花香味﹌ 2022-12-16 06:10 105阅读 0赞

# node.js #

nodejs概念：是一个js运行的环境，可以让js脱离浏览器独立运行。

也意味着只能使用原生js，DOM和BOM操作无效

## nodejs软件 ##

装好之后node -v:显示版本说明装好了

直接node回车相当于控制台

node js文件路径，就能运行这个文件

## node执行方式 ##

下面是要运行的代码：

for(var i = 0 ; i<3;i++){
        
        console.log("大傻");
    }

cd 文件夹路径 ；然后node 文件名执行该文件；

win10可能会权限不够报错，需要管理员身份运行cmd

vscode:右键终端中打开

到文件所在文件夹shift右键，选在此处打开命令

文件所在地址栏换成cmd敲回车也可以

## 简单命令 ##

window版：

<table> 
 <thead> 
  <tr> 
   <th>操作</th> 
   <th align="center">命令</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>切换盘符</td> 
   <td align="center">D：</td> 
  </tr> 
  <tr> 
   <td>cd</td> 
   <td align="center">跳文件夹/可以按tab键/直接粘贴地址</td> 
  </tr> 
  <tr> 
   <td>dir</td> 
   <td align="center">显示文件夹下文件</td> 
  </tr> 
  <tr> 
   <td>cd…</td> 
   <td align="center">退出一层文件夹 cd…/…/</td> 
  </tr> 
  <tr> 
   <td>cls</td> 
   <td align="center">清屏</td> 
  </tr> 
  <tr> 
   <td>tree</td> 
   <td align="center">毫无用处，装逼用</td> 
  </tr> 
  <tr> 
   <td>ipconfig</td> 
   <td align="center">查ip</td> 
  </tr> 
  <tr> 
   <td>ping 地址</td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td>systeminfo</td> 
   <td align="center">转行修电脑时候用，查看电脑配置信息</td> 
  </tr> 
 </tbody> 
</table>

## 文件目录操作命令 ##

md（make dir）
    
    到达指定文件夹下,md  文件名创建文件夹

rd  a;删除a文件夹        直接越过回收站

xcopy  文件夹  新文件夹名

type nul>a.txt   创建一个新文件

echo 123456 > a.txt   将内容写进a.txt

copy  a.txt  a/b.txt    把文件a复制到b处，肤质的名字不是b.txt

move  a.txt  a;移动

ren a.txt  b.html  改名字

骚操作:之前上网搜的,创建一个.bat后缀的文件 ,里面写ren \*.txt \*.html

点击创建的文件,可以将文件后缀从txt改成html

del  b.html  删除文件

## 导入导出 ##

为了实现模块化开发

如何让a.js里面的数据传送到b,js里面

在js里面，可以将变量放入全局共用，这里类似

引入模块的方法：

require("模块路径");

### 第一步 导出 ###

//a.js
    
    
    var num =10;
    
    
    //第一步，导出：nodejs里面，默认有变量---module----用来实现文件导出操作
    //module对象的属性exports(也是对象)，把这个导出就可以了
    
    
    
    module.exports = {
        
        num:num
    }
    
    //导出注意事项：
    1.可以使用exports直接导出
    module.exports.num =num;  
     这里可以省略module（好处，
     上面的赋值是会改变地址的，这个不改变（复杂类型共用地址））
    2.不要直接给exports赋值，
    在nodejs内部有var exports = module.exports,对象共用内存地址，
    直接赋值让两者脱离关系，失去导出功能

### 第二步 导入 ###

var obj = require("./a.js");//导入的是exports对象，需要一个变量接收
    
    
    ./是必须的，不然误认为node内部的模块，后缀可以省略

然后执行b.js就可以了

node b.js

简单来说，a.js导出 数据，b.js导入数据

## npm ##

nodejs的强大功能是依赖js模块的（js文件）。

模块分为：内置模块（nodejs自带的）;自定义模块（自己写的）;第三方模块（别人写的）

### npm常用命令 ###

下载模块：

npm install jquery     //下载jquery模块
    	npm i jquery			//简写
    	npm i jquery@1.11		//版本号可以写全，可以不写全
    	npm i jquery bootstrap	//同时下载多个模块
    	npm uninstall  jquery	//卸载模块

下载工具：  
如SaaS，gulp,npm,nrm  
工具下载完可在电脑任意路径中使用

npm i  工具名称  -global#安装在全局
    npm i 工具名称  -g#简写

### npm初始化 ###

npm下载装文件的node\_modules不能直接上传，需要初始化  
  
  
初始化指令：

npm init		#需要手动录入项目信息
    npm init -y		#自动录入

> 不要在中文文件夹下运行这个指令。  
> 运行生成package.json文件，将第三方模块记录在里面。

package.json记录对象

"dependencies":{
    			'bootstrap":"^4.5.3"，
    			“jquery”:"^3.5.1"
    		}

> 当文件夹内没有node\_modules，只有package.json时，只需要执行

npm  i

> 在项目开发好后，不需要传node\_modules,只需要传送package.json文件，然后将指令在服务器的项目文件夹内运行一遍就可以了

有的模块项目上线中不需要使用，本地开发使用  
npm指令:

npm i 					##依不依赖都安装
    npm i  模块 --save-dev		##下载将来项目不需要用的模块
    npm i  模块 -D					##简写形式
    npm i 模块 --save		##默认就是依赖的--npm i会安装的
    npm i 模块 -S			##简写

package.json文件内显示:

"dependencies": {
         // 需要依赖的
        "bootstrap": "^4.5.3",
        "jquery": "^3.5.1",
        "laydate": "^1.0.7"
      },
      "devDependencies": {
          // 不需要依赖的
        "gulp-clean": "^0.4.0",
        "gulp-rename": "^2.0.0"
      }

将package.json放入服务器中，安装所有的依赖，不安装所有的非必须依赖.

npm i production

## 安装模块的时候下载失败 ##

1.  ctrl+C:停止，然后重新安装
2.  检查网络
3.  检查镜像源-nrm工具

npm  i nrm -g #下载nrm工具，放在全局
    	nrm test #测每个镜像源网速
    	nrm  ls#查看每个镜像源地址
    
    
    	nrm use 镜像名称 #切换镜像源
    	npm set config registry  镜像源地址#切换镜像源

1.  还失败：清缓存再次尝试

npm cache clean -f			#清除缓存

也可以手动找到对应文件夹清除缓存

1.  命令是有问题的，单词，模块名拼错了，或者没这个模块

## nodejs内置模块：fs模块（file system） ##

我们用来读取和写入文件：

### 读取文件 ###

> 步骤

1.  导入模块

const fs = require("fs");//没有./修饰，是nodejs内置模块

1.  调用方法

同步读取方法：
    let data = fs.readFileSync("./a.html","utf-8");
    参数1：路径
    
    参数2：编码设置（可选）,可选数据
    utf-8去掉得到<buffer  十六进制>buffer，是二进制数据，用十六进制描述二进制数据，data.toString()得到字符串结果
    
    
    
    
    
    异步读取方法：
    fs.readFile("./a.html","utf-8",(err,data){
        
    		if(err){
        
    			console.log("读取失败，错误是:"+err);
    			return ;
    		}
    		console.log(data)
    });
    console.log(123);
    第二个参数也是可选项，去掉结果合同步处理方式一致

1.  对data的处理

### 写入文件 ###

1.  导入模块

const fs = require("fs");

1.  调用方法

同步写入:wirteFileSync
    	fs.writeFileSync("./a.html","要写入的数据");
    	console.log("写入成功");
    	console.log(123);
    	同步操作报错实惠自己显示的，不需要像异步一样操作
    	参数1：要写入的文件
    	参数2：要写入的数据
    	
    异步写入：writeFile
    	fs.writeFileSync("./a.html","写入的数据",err=>{
        
    		if(err){
        
    			console.log("写入失败，错误是err");
    			return ;
    		}
    		console.log("写入成功");
    	});	
    	err:错误信息

注：上述的写入是覆盖掉里面原本内容的，下面是不覆盖的方法（也可以将内容读取出来，然后拼接新内容，再写入覆盖原来的文件）

#### 追加写入 ####

这里将上面的两步结合起来：

const fs = require("fs");
    fs.appendFile("./a.html","追加的数据",err=>{
        
    	if(err){
        
    		console.log("追加写入失败");
    		return ;
    	}
    	console.log("追加写入成功");
    })
    这是异步方法
    appendFileSync是同步的，参数可以参考前面的方法

### 删除文件 ###

const fs = require("fs");
    	fs.unlink("./a.txt",err=>{
        
    	    if(!err){
        
    	        console.log("删除成功");
    	    }
    });

> fs模块就是对文件的操作，可以上官方网站查找，也可以度娘查找

> 步骤都是导入，调用

## nodejs的http模块 ##

做服务器

1.导入

const http = require("http");//导入的是对象

1.  调用

//创建服务器方法
    const server = http.cerateServer((req,res)=>{
        
    		//设置响应头，不然响应的中文乱码
    		res.setHeader("content-type","text/html;charset=utf-8");
    		
    		red.end("响应内容");//不写这个是访问不了的
    })
    //监听端口
    server.listen(3000,function(){
        
    	console.log("服务器启动成功，地址是:http://localhost:3000");
    	//ctrl加左键点击cmd输出的地址可以直接跳到页面（小技巧）
    });//这里的回调函数可选
    //注意端口别冲突了
    
    //我们以前是客户端视角，现在要转为服务器视角
    //server.js代码修改一次就需要重启再运行
    //req:客户端请求的信息
    //res:我们要发给客户端的响应

简写版本：

const http = require("http");
    http.createServer((req,res)=>{
        
    	res.setHeader("content-type","text/html;charset=utf-8");
    	res.end("我爱node");
    }).listen(3000,()=>{
        console.log("启动成功,地址是http://localhost:3000");})

vscode打开终端：点击垃圾桶才算关闭，点X没关

## 读取html文件并响应回去 ##

浏览器地址栏输入

localhost:3000/home.html可访问home.html;
    	虽然服务器传的是字符串，
    	但是浏览器解析时会被解析成html文档

## 利用http服务器托管项目静态页面 ##

//通过服务器响应不同的页面
    //const http  = require("http");
    //const fs=require("fs");下面的解构相当于readFileSync = fs.readFileSync
    const {
        readFileSync} = require("fs");
    const {
        createServer}=require("http");
    //创建服务器
    createServer((req,res)=>{
        
        const url =req.url;
        if(url==="/index.html"){
        
           let data=  readFileSync("./static/index.html");
           res.end(data);
        }else if(url==="/css/public.css"){
        
            let data = readFileSync("./static/css/public.css")
            res.end(data);
        }else if(url==="/css/index.css"){
        
            let data = readFileSync("./static/css/index.css")
            res.end(data);
        }else if(url==="/font_2038024_fah3ou33syl/iconfont.css"){
        
            let data = readFileSync("./static/font_2038024_fah3ou33syl/iconfont.css");
            res.end(data);
        }else if(url==="/css/swiper-bundle.min.css"){
        
            let data = readFileSync("./static/css/swiper-bundle.min.css");
            res.end(data);
        }
        else if(url==="/js/ajax.js"){
        
            let data = readFileSync("./static/js/ajax.js");
            res.end(data);
        }
        else if(url==="/js/index.js"){
        
            let data = readFileSync("./static/js/index.js");
            res.end(data);
        }
        else if(url==="/js/swiper-bundle.min.js"){
        
            let data = readFileSync("./static/js/swiper-bundle.min.js");
            res.end(data);
        }
        else if(url==="/js/jquery.lazyload.js"){
        
            let data = readFileSync("./static/js/jquery.lazyload.js");
            res.end(data);
        }else if(url==="favicon"){
        
            return false;
        }
        
    }).listen(3000,()=>{
        
        console.log("服务器启动成功，地址是http://localhost:3000")
    })

req.url:接收请求地址，根据请求地址判断写入什么文件

注：可以先引入index.html;打开浏览器network发现响应html文档但不显示，将status列为pending的进行同样的操作

const {
         readFileSync, readFile } = require("fs");
    const {
         createServer } = require("http");
    createServer((req, res) => {
        
        const url = req.url;
        if (url !== "/favicon.ico") {
        
            let data = readFile("static" + url, (err, data) => {
        
                if (err) {
        
                    console.log("读取失败,错误是" + err);
                    return;
                }
                res.end(data);
            });
        }
    }).listen(3000, () => {
        
        console.log('服务器开启，地址是：http://localhost:3000');
    })
    我的少了一个bootstrap.min.css.map

## nodejs连接数据库 ##

先下载：

npm i mysql [--save-dev]

//导入
    const mysql = require("mysql");
    //创建连接设置连接参数
    var db = mysql.createConnection({
        
    	host:"localhost",
    	user:"root",
    	password:"root",
    	database:"test"
    })
    //连接
    db.connect(err=>{
        
    	if(err){
        
    		console.log("连接失败，错误是"+err);
    		return ;
    	}
    	console.log("连接成功");
    })
    //执行语句
    db.query("语句","回调函数");

简单操作：

## node处理ajax ##

推荐链接:[其他人的博客链接][Link 1]

[Link 1]: https://blog.csdn.net/towrabbit/article/details/81663394