JavaScript进阶5-学习笔记

文章目录

JavaScript进阶5-学习笔记
例子

JavaScript进阶5-学习笔记

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

前后端分离
Node是什么？是js的运行环境，windows/linux/macos
express--node一个web框架， 构造后端的接口服务依赖管理工具：
1.npm,  node自带, 安装依赖包从国外下载，速度较慢
2.cnpm, 需要手动安装，从国内下载，速度较快
3.yarn, 从国外下载，速度较慢如何构建服务？-----生成package.json(依赖管理，设置命令)---npm init -y(yes)----
安装express依赖包---npm install express -S(保存到package.json)----安装的包在node_modules目录
编写server-run.js---编写第一个接口/api/index---启动命令node express-run.js如何测试接口？-----浏览器(仅限get)----postman接口uri如何定义？------restful api-----api定义规范---
前端(web, 小程序，app。。。)----统一的一个服务接口restful-api 简单的说：资源+行为
资源(app需要访问服务端的文章列表)-----/api/articles----一般使用名词代替
行为(POST, GET, PUT, DELETE)------代表增，查，改，删。/api/articles + GET
/api/articles + POST
/api/articles + PUT
/api/articles + DELETE为什么不用ajax测试？----因为前后端开发是并行---后端只能用工具测试
实现添加接口----/api/articles + POST-----为什么没有拿到前端参数？---需要bodyparser
---npm install body-parser -S---把前端的参数写入数组并返回url相同会不会有冲突？----在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后端接口为什么调不通？-----因为后端的接口参数格式不匹配----先清楚后端参数格式后端接口模拟完毕！！！！前端如何调接口传参数？-----一一对应
1.请求方式Get---/info?name=jack(前端)-----后端接收参数req.query
多个参数?name=webpack&age=10
2.POST/PUT/DEL----{"name":"webpack"}(前端)-----req.body
3.直接拼接在url后面/info:num----/info/100-----后端req.params
4.参数隐藏性， get的参数是暴露，在浏览器地址栏看得到， post/put/del以body的方式传递
5.content-type指定数据的格式-----后端按此格式接收如何发送请求？
1.XMLHttpRequest
2.fetch-----它是XMLHttpRequest升级版----返回的结果是promise对象----axios(三方插件)
3.都是原生的，不用引用问题：
就是get方式，在问号后面动态传参，name=webpack 这个webpack传过去是字符串，如果我从表单里面取到参数data，怎么在？后面写，得不得写成name={{data}}这个样子？
var name = document.querySelector()
"http://localhost:3000/api/articles/100?name="+name

//node服务
var express = require("express");  //导入express框架
var bodyParser = require("body-parser"); //http请求参数解析
var app = express();  //生成实例//配置参数解析
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}))  //解析表单key=valuevar allowCrossDomain = function (req, res, next) {res.header('Access-Control-Allow-Origin', '*');//自定义中间件，设置跨域需要的响应头。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);//第一个接口 method = get
///api/index==uri   req==request res==response
//http://localhost:3000/api/index  协议 域名:端口/uri
app.get("/api/index", function(req, res){res.send("index page.");  //返回数据给前端。
})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);
})
//添加书箱 约定参数{}
app.post("/api/articles", function(req, res){console.log(req.body) //接收参数if (req.body && req.body.name) {//把传递的书箱写入articles.push(req.body.name);res.send(articles);} else {res.send({"msg": "name参数必须！！！"})}
})
//修改
app.put("/api/articles", function(req, res){console.log(req.body) //接收参数//把传递的书箱写入articles.push(req.body.name);res.send(articles);
})
//删除
app.delete("/api/articles", function(req, res){console.log(req.body) //接收参数//把传递的书箱写入articles.push(req.body.name);res.send(articles);
})app.listen(3000, function(){console.log("服务启动，端口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---指定一个接口（url, method）xmlhttp.open("get", "http://localhost:3000/api/articles/100?name=webpack&age=10"); //异步xmlhttp.send(); //发送xmlhttp.onreadystatechange = function() { //接收数据//4--node服务响应完成   200---成功if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {console.log(xmlhttp.responseText) //打印//把拿到的数据展示出来 写入domcontent.innerHTML = xmlhttp.responseText; //conten 简写}}}function addData(){var xmlhttp = new XMLHttpRequest();//open---指定一个接口（url, method）xmlhttp.open("post", "http://localhost:3000/api/articles"); //异步xmlhttp.setRequestHeader("Content-Type", "application/json");//指定参数类型//var data = document.querySelector()xmlhttp.send(JSON.stringify({"name":"webpack"})); //发送xmlhttp.onreadystatechange = function() { //接收数据//4--node服务响应完成   200---成功if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {console.log(xmlhttp.responseText) //打印//把拿到的数据展示出来 写入domcontent.innerHTML = xmlhttp.responseText; //conten 简写}}}function fetchData(){fetch("http://localhost:3000/api/articles/100?name=webpack").then(response => response.json()) //转换.then(data => {console.log(data);content.innerHTML = JSON.stringify(data);})}</script>
</body>
</html>

例子

后面是一个同学的优秀作业，值得借鉴：

JavaScript进阶5-学习笔记相关推荐

7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式本文的 ...
JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! JavaScript 权威指南-学习笔记 ...
JavaScript进阶4-学习笔记
文章目录 JavaScript进阶4-学习笔记递归 JavaScript进阶4-学习笔记前端: 根据Ui写页面,使用vuecli+vue---测试功能---需要数据(json,array,字符串) ...
JavaScript进阶3-学习笔记
文章目录 JavaScript进阶3-学习笔记闭包 JavaScript进阶3-学习笔记 //组件封装什么是封装? 将冗余的代码精简化例如:写代码:a页面有一个函数,b页面也需要这个函数,很多人 ...
JavaScript进阶2-学习笔记
文章目录 JavaScript进阶2-学习笔记 this指针如何改变this指向事件委托.事件冒泡 JavaScript进阶2-学习笔记 this指针 This是什么? this是Javascri ...
JavaScript高级程序设计学习笔记（三）
分享一下第五章(引用类型)的笔记,内容比较多,我拆成了两部分,今天这部分是关于Object.Array.Date和RegExp类型的. 以下的笔记是书上一些我以前学习的时候,没有太重视的js基础知识, ...
vn.py全实战进阶课程学习笔记（零）
目录写在前面 MySQL数据库配置安装mysq 创建数据库 vnpy数据库配置 rqdata数据服务配置申请rqdata试用权限 vnpy参数配置 simnow仿真环境配置准备账号接口登录 ...
36篇博文带你学完opencv :python+opencv进阶版学习笔记目录
基础版学习笔记传送门 36篇博文带你学完opencv :python3+opencv学习笔记汇总目录(基础版) 进阶版笔记项目 opencv进阶学习笔记1: 调用摄像头用法大全(打开摄像头,打开摄像 ...
javascript高程3 学习笔记(二)
ECMAScript function的理解 ECMAScript 函数与其他语言函数最大的不同在于,其不介意传入多少参数以及参数的类型比如函数的形参有两个,但是调用函数传入的参数可以写一个,三个或 ...

JavaScript进阶5-学习笔记

文章目录

JavaScript进阶5-学习笔记

例子

JavaScript进阶5-学习笔记相关推荐

最新文章

热门文章