目录
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)需要后端单独解析