JavaScript进阶5-学习笔记

最新推荐文章于 2021-08-08 16:54:41 发布

monkeyhlj

最新推荐文章于 2021-08-08 16:54:41 发布

阅读量174

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/hhhmonkey/article/details/118528784

版权

前端学习专栏收录该内容

53 篇文章 2 订阅

订阅专栏

文章目录

- 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=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>

例子

在这里插入图片描述
后面是一个同学的优秀作业，值得借鉴：

monkeyhlj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript进阶5-学习笔记

文章目录JavaScript进阶4-学习笔记JavaScript进阶4-学习笔记参考理解：https://blog.csdn.net/hhhmonkey/article/details/118515517前后端分离Node是什么？是js的运行环境，windows/linux/macosexpress--node一个web框架，构造后端的接口服务依赖管理工具：1.npm, node自带, 安装依赖包从国外下载，速度较慢2.cnpm, 需要手动安装，从国内下载，速度较快3.yarn,
复制链接

扫一扫

专栏目录