JavaScript进阶5-学习笔记

心已赠人 2022-10-13 10:30 231阅读 0赞

### 文章目录 ###

*   *  JavaScript进阶5-学习笔记
     *  例子

## JavaScript进阶5-学习笔记 ##

参考理解：https://blog.csdn.net/hhhmonkey/article/details/118515517  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

前后端分离
    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=value
    
    var 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) //打印 //把拿到的数据展示出来 写入dom content.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) //打印 //把拿到的数据展示出来 写入dom content.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>

## 例子 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]  
后面是一个同学的优秀作业，值得借鉴：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/9f09a2c8468f4e28ab33d197f4e86e36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/0d95b2c0003e46e19aa85bec67ee6399.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/967d5af9588740a0bb4f1d6b9d0355db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/108ba5cbabe64d3880c6747a360ef24c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/8967b9484d354e28ac941067f6735aa8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/17a62bdb29d84b8793a85ef5eb3f1f24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/84c8af34e2334bccb02a16cce480c42d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 7]: /images/20221005/43581fe9c246438aba81dd72d48565e5.png