Node.js学习总结

目录

node

作用:

代码编写(http模块上)

1、引入模块

2、用对应模块启动一个服务

3、服务 在本地服务器 localhost 上的端口号

处理静态文件(fs模块)

1、写入内容

2、读取内容

在服务器打开对应的网页

获取get与post请求发送过来的数据

1、get

2、post

3、前端页面同时有post和get请求时的方法

4、图片上传

后端

前端


node

node 是js的运行环境 运行在服务器上

作用:

1、api接口编写
2、与数据库交互
3、处理静态资源文件

从本地启动一个服务器(服务)  需要给定一个端口=>端口号不能重复 (1-65535)

编写:js文件编写  环境=>node环境  建议安装 git 在js文件夹下右键“git bash here”打开命令行

代码编写(http模块上)

1、引入模块

const http=require("http") //启动服务器模块

2、用对应模块启动一个服务

/requset 接受 前端发送过来的内容
//response 返回数据时用的参数
//回调函数 参数  有人访问服务自动进入回调函数
let server =http.createServer((requset,response)=>{
    console.log("success")
    //返回前端hello world   .write() 返回前端的内容
    res.write("hello world")
    res.end() //发送给前端 固定写法
})

3、服务 在本地服务器 localhost 上的端口号

server.listen(8088) //数字可以在范围内自定义 但不能重复

处理静态文件(fs模块)

1、写入内容

const fs=require("fs")
.writeFile(路径,写入内容,回调函数)
fs.writeFile("./index.txt","hello world",(err,data)=>{
    //err 返回错误信息 data 数据
    if(err){
        console.log("defeat")
    }else{
        console.log("success")
    }
})

2、读取内容

const fs=require("fs")
.readFile(路径,回调函数)
fs.readFile("./index.txt",(err,data)=>{
    //err 返回错误信息 data 数据
    if(err){
        console.log("defeat")
    }else{
        console.log("data")
        //读取的data为buffer进制码(二进制)
    }
})

在服务器打开对应的网页

//访问  localhost:8088/index.html
const http = require("http")
const fs=require("fs")
//req  前端带过来的所有内容
let server = http.createServer((req, res) => {
    //访问 localhost:8088/index.html 返回网页文件
    //获取到用户访问的API地址
    // let {url}=req
    //console.log(req.url)
    //如何返回对应的网页 网页 静态文件 在node中将对应的静态文件读取 返回给前端

    fs.readFile(`.${req.url}`,(err,data)=>{
        if(err){
            res.write("404")
            res.end()
        }else{
            res.write(data)
            res.end()
        }
    })

}).listen(8088, () => {
    console.log("服务器启动成功")
})
//.listen() 只要服务器运行成功 自动运行的内容

获取get与post请求发送过来的数据

1、get

//获取get发送过来的数据
const http=require("http")
const url=require("url")   //url模块 解析前端发送过来的地址和数据的模块
http.createServer((req,res)=>{

     // API接口
    // 写一个 /login接口 前端发送过来 username和upass两个数据
    let{pathname,query}=url.parse(req.url,true)//解构数据
    console.log(pathname)//地址 
    console.log(query)//数据 
}).listen(8088)

2、post

//在post请求中 req.url==接口地址  且参数是分段发送
const querystring = require("querystring")//解析参数对应 的字符串的
 let arr = []
    req.on("data", data => { //on绑定事件 传输数据
        arr.push(data)   //接收到的数据传输到数组中
    })
    req.on("end", () => {//end事件  表示传输完成
        //username=123&upass=123123
        let buffer = Buffer.concat(arr) //转化成一个Buffer对象
        let result = querystring.parse(buffer.toString())//将buffer对象转为js对象

3、前端页面同时有post和get请求时的方法

在服务器启动后先判断方法 分成两个不同的请求分支

if(req.method=="GET"){

}else if(req.method=="POST"){

}

4、图片上传

如何上传图片 =>multiparty模块  图片上传模块

后端

1、npm install multiparty =>下载模块
2、引入模块 const multiparty = require("multiparty")
3、设置存放地址
 if (req.url == "/reg") {
    let form = new multiparty.Form({
        uploadDir:"./www/upload"  //存放地址
    })
4、解析模块
form.parse(req, (err, data, files) => {}
err==错误
data==前端发送过来的数据
flies==上传的图片信息

前端

ajax上传图片 =>form=>formData   (form的enctype属性要改为"multipart/form-data")
 //formData数据传输
    let form=document.getElementById("form1")
    //onsubmit默认提交事件
    form.onsubmit=function(){
        let data=new FormData(form)
        let xhr=new XMLHttpRequest()
        xhr.open(form.method,form.action,true)
        xhr.send(data)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText)
            }
        }
        return false
    }

    注意!!!!在传输过程中 后端解析的url地址前端不可以直接使用 需要后端给一个相应请求
因为src属性不会和整个页面一起加载 是一个单独的ajax请求(get)需要后端单独解析

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qd_yang_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值