當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript进阶5-学习笔记

發(fā)布時(shí)間：2024/1/23 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript进阶5-学习笔记小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- JavaScript進(jìn)階5-學(xué)習(xí)筆記
- 例子

JavaScript進(jìn)階5-學(xué)習(xí)筆記

參考理解：https://blog.csdn.net/hhhmonkey/article/details/118515517

前后端分離 Node是什么？是js的運(yùn)行環(huán)境，windows/linux/macos express--node一個(gè)web框架，構(gòu)造后端的接口服務(wù)依賴管理工具： 1.npm, node自帶, 安裝依賴包從國(guó)外下載，速度較慢 2.cnpm, 需要手動(dòng)安裝，從國(guó)內(nèi)下載，速度較快 3.yarn, 從國(guó)外下載，速度較慢如何構(gòu)建服務(wù)？-----生成package.json(依賴管理，設(shè)置命令)---npm init -y(yes)---- 安裝express依賴包---npm install express -S(保存到package.json)----安裝的包在node_modules目錄編寫server-run.js---編寫第一個(gè)接口/api/index---啟動(dòng)命令node express-run.js如何測(cè)試接口？-----瀏覽器(僅限get)----postman接口uri如何定義？------restful api-----api定義規(guī)范--- 前端(web, 小程序，app。。。)----統(tǒng)一的一個(gè)服務(wù)接口restful-api 簡(jiǎn)單的說：資源+行為資源(app需要訪問服務(wù)端的文章列表)-----/api/articles----一般使用名詞代替行為(POST, GET, PUT, DELETE)------代表增，查，改，刪。/api/articles + GET /api/articles + POST /api/articles + PUT /api/articles + DELETE為什么不用ajax測(cè)試？----因?yàn)榍昂蠖碎_發(fā)是并行---后端只能用工具測(cè)試實(shí)現(xiàn)添加接口----/api/articles + POST-----為什么沒有拿到前端參數(shù)？---需要bodyparser ---npm install body-parser -S---把前端的參數(shù)寫入數(shù)組并返回url相同會(huì)不會(huì)有沖突？----在java是不行----另一種方式 /api/articles/query + GET /api/articles/add + POST /api/articles/modify + PUT /api/articles/del + DELETE接口傳參？----- 1.json----{"name":"webpack"} post put delete 2.http://localhost:3000/info?name=jack 3.表單形式formdata, key=value后端接口為什么調(diào)不通？-----因?yàn)楹蠖说慕涌趨?shù)格式不匹配----先清楚后端參數(shù)格式后端接口模擬完畢！！！！前端如何調(diào)接口傳參數(shù)？-----一一對(duì)應(yīng) 1.請(qǐng)求方式Get---/info?name=jack(前端)-----后端接收參數(shù)req.query 多個(gè)參數(shù)?name=webpack&age=10 2.POST/PUT/DEL----{"name":"webpack"}(前端)-----req.body 3.直接拼接在url后面/info:num----/info/100-----后端req.params 4.參數(shù)隱藏性， get的參數(shù)是暴露，在瀏覽器地址欄看得到， post/put/del以body的方式傳遞 5.content-type指定數(shù)據(jù)的格式-----后端按此格式接收如何發(fā)送請(qǐng)求？ 1.XMLHttpRequest 2.fetch-----它是XMLHttpRequest升級(jí)版----返回的結(jié)果是promise對(duì)象----axios(三方插件) 3.都是原生的，不用引用問題：就是get方式，在問號(hào)后面動(dòng)態(tài)傳參，name=webpack 這個(gè)webpack傳過去是字符串，如果我從表單里面取到參數(shù)data，怎么在？后面寫，得不得寫成name={{data}}這個(gè)樣子？ var name = document.querySelector() "http://localhost:3000/api/articles/100?name="+name //node服務(wù) var express = require("express"); //導(dǎo)入express框架 var bodyParser = require("body-parser"); //http請(qǐng)求參數(shù)解析 var app = express(); //生成實(shí)例//配置參數(shù)解析 app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true})) //解析表單key=valuevar allowCrossDomain = function (req, res, next) {res.header('Access-Control-Allow-Origin', '*');//自定義中間件，設(shè)置跨域需要的響應(yīng)頭。res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE'); //允許任何方法res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token'); //允許任何類型next(); }; app.use(allowCrossDomain);//第一個(gè)接口 method = get ///api/index==uri req==request res==response //http://localhost:3000/api/index 協(xié)議域名:端口/uri app.get("/api/index", function(req, res){res.send("index page."); //返回?cái)?shù)據(jù)給前端。 })var account = "admin"; var password = "admin"; var articles = ["小紅書", "精通vue指南", "精通react指南"]; //查詢所有書箱 //接口有添加功能：name app.get("/api/articles/:num", function(req, res){console.log(req.query, req.params); //req.params-----:num//把傳遞的書箱寫入articles.push(req.query.name);res.send(articles); }) //添加書箱約定參數(shù){} app.post("/api/articles", function(req, res){console.log(req.body) //接收參數(shù)if (req.body && req.body.name) {//把傳遞的書箱寫入articles.push(req.body.name);res.send(articles);} else {res.send({"msg": "name參數(shù)必須！！！"})} }) //修改 app.put("/api/articles", function(req, res){console.log(req.body) //接收參數(shù)//把傳遞的書箱寫入articles.push(req.body.name);res.send(articles); }) //刪除 app.delete("/api/articles", function(req, res){console.log(req.body) //接收參數(shù)//把傳遞的書箱寫入articles.push(req.body.name);res.send(articles); })app.listen(3000, function(){console.log("服務(wù)啟動(dòng)，端口3000"); }) <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><button onclick="getData()">查詢文章列表</button><button onclick="addData()">添加文章</button><button onclick="fetchData()">fetch文章</button><div id="content"></div><script>function getData(){var xmlhttp = new XMLHttpRequest();//open---指定一個(gè)接口（url, method）xmlhttp.open("get", "http://localhost:3000/api/articles/100?name=webpack&age=10"); //異步xmlhttp.send(); //發(fā)送xmlhttp.onreadystatechange = function() { //接收數(shù)據(jù)//4--node服務(wù)響應(yīng)完成 200---成功if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {console.log(xmlhttp.responseText) //打印//把拿到的數(shù)據(jù)展示出來寫入domcontent.innerHTML = xmlhttp.responseText; //conten 簡(jiǎn)寫}}}function addData(){var xmlhttp = new XMLHttpRequest();//open---指定一個(gè)接口（url, method）xmlhttp.open("post", "http://localhost:3000/api/articles"); //異步xmlhttp.setRequestHeader("Content-Type", "application/json");//指定參數(shù)類型//var data = document.querySelector()xmlhttp.send(JSON.stringify({"name":"webpack"})); //發(fā)送xmlhttp.onreadystatechange = function() { //接收數(shù)據(jù)//4--node服務(wù)響應(yīng)完成 200---成功if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {console.log(xmlhttp.responseText) //打印//把拿到的數(shù)據(jù)展示出來寫入domcontent.innerHTML = xmlhttp.responseText; //conten 簡(jiǎn)寫}}}function fetchData(){fetch("http://localhost:3000/api/articles/100?name=webpack").then(response => response.json()) //轉(zhuǎn)換.then(data => {console.log(data);content.innerHTML = JSON.stringify(data);})}</script> </body> </html>

例子

后面是一個(gè)同學(xué)的優(yōu)秀作業(yè)，值得借鑒：

總結(jié)

以上是生活随笔為你收集整理的JavaScript进阶5-学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： JavaScript进阶4-学习笔记
下一篇： JS-跨域及其处理