node.js(接jquery篇)

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版:

操作命令
切换盘符D:
cd跳文件夹/可以按tab键/直接粘贴地址
dir显示文件夹下文件
cd…退出一层文件夹 cd…/…/
cls清屏
tree毫无用处,装逼用
ipconfig查ip
ping 地址
systeminfo转行修电脑时候用,查看电脑配置信息









文件目录操作命令

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文件并响应回去

const http = require("http");
const fs = require("fs");
http.createServer((req,res)=>{
    let url = req.url;//请求地址,可以输出看看
    if(url==="/home.html"){
       let data =  fs.readFileSync("./home.html");
        res.end(data);
    }else if(url ==="/login.html"){
        let data =  fs.readFileSync("./login.html");
        res.end(data);
    }
}).listen(3000,()=>{
    console.log("服务器启动成功,地址是:http://localhost:3000");
});

浏览器地址栏输入

	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("语句","回调函数");

简单操作:

	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("select * from scenics",(err,result)=>{
	if(err){
		console.log("连接失败,错误是:"+err);
		return ;
	}
	console.log(result);
});

//result是数组内包含对象


//添加
db.query("insert user(username,password,tel,email) values('翠花','123456','123445','weqweqweq@qq.com')",(err)=>{
	if(err){
		console.log("添加失败,错误是:"+err);
		return ;
	}
	console.log("添加成功");
});


//修改
db.query("update user set username='张三' where id= 12",(err)=>{
	if(err){
		console.log("修改失败,错误是:"+err);
		return ;
	}
	console.log("修改成功");
});

//删除
db.query("delete from user where id= 12",(err)=>{
	if(err){
		console.log("删除失败,错误是:"+err);
		return ;
	}
	console.log("删除成功");
});

//关闭连接
db.end();



node处理ajax

推荐链接:其他人的博客链接

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值