egg项目搭建+AJAX请求+常见问题解决

前端小草籽

已于 2022-09-04 00:21:04 修改

阅读量919

点赞数

分类专栏： node.js 文章标签：前端

于 2022-08-31 23:17:40 首次发布

本文链接：https://blog.csdn.net/weixin_47075145/article/details/126614980

版权

node.js 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

4.注意点：ajax请求时一般不要用 127.0.0.1 或者localhost （本地），用ip最合适。(因为ajax请求是在客户端浏览器里面发起请求的)

3.ajax请求方式为GET或POST时，客户端给服务器传数据的方式区别

1.请求方式为GET时，客户端给服务器传数据方式

2.请求方式为POST时，客户端给服务器传数据方式

3.进行ajax请求时遇到的问题

1.POST请求时，遇到 403 禁止访问

2.POST请求时，遇到404 未找到

3.ajax请求报的错：net::ERR_CONNECTION_TIMED_OUT

1.egg项目搭建

1.egg项目创建命令

egg项目可以创建多个，每次创建都需要执行下面3个指令，但是第一个指令可以手动创建：

01.创建文件夹并进入对应文件夹：mkdir egg-example && cd egg-example

02.初始化egg项目：npm init egg --type=simple

03.安装依赖文件(下载egg项目需要依赖的包)：npm i

启动项目：npm run dev

egg项目里面的app文件夹下面的public:用于放静态资源的

egg项目配置文件（config文件夹里面的代码）一改必须手动重新启动服务器

2.egg项目介绍

客户端(前端页面): html+css+js

服务器：后端服务器，后端的代码就是放在后端服务器egg里面的 前端服务器：前端代码放在前端服务器里面的

客户端可以请求服务器

egg创建的项目：既是后端服务器，也是前端服务器，后端代码放在这个服务器里面的，前端代码也放在这个服务器里面的。

3.egg构建的后端服务器基本信息配置

// 在config/config.default.js
// 配置服务器基本信息
  config.cluster = {
    listen: {
      path: '',
      port: 8000,
      hostname: '',//默认localhost和ip地址,上线时用0.0.0.0
    }
  };

分析：egg框架构建的后端服务器默认端口是 7001 ，这里改为了 8000 .也就是如果开启多个服务器，为了避免端口占用，可以修改端口号。

2.AJAX

写ajax请求代码的html页面地址要和ajax请求代码的html文件在服务器上面的地址相同，不能直接用vscode打开的页面进行ajax请求。

而不能直接用vscode直接打开的页面进行ajax请求：（这样会报跨域）

1.ajax概述

注意点：ajax代码是写在html文件中的script标签中。

01.ajax:Async JavaScript And Xml,也就是异步Javascript和Xml

02.ajax的核心:Javascript，DOM,XMLHTTPRequest(js的一个内置对象),通过XMLHTTPRequest发起异步请求。请求成功后拿到数据，然后会通过JS操作DOM，然后把数据展示到页面中。

03.ajax不是一门新技术，是一系列技术的组合。

注：也就是说，发起网络请求，并不是只能在浏览器地址栏里面输入网址后发起(这种获取到的数据或直接展示到页面中)，也可以利用XMLHTTPRequest(js的一个内置对象),通过XMLHTTPRequest发起异步请求 (这种获取到的数据可以进行处理后展示到页面中)。

2.ajax请求总体步骤

1.初始版 GET请求代码

    <script>
        //1.对象实例化 + 兼容性写法
        let xhr = new XMLHttpRequest()||new ActiveXObject("Micsoft.XMLHTTP");
        //2.和服务器建立连接  参数1:请求方式  参数2:要建立连接的服务器
        xhr.open('GET','http://localhost:8000/login');
        //3.发起请求
        xhr.send();
        //4.监听请求过程（请求过程状态:xhr.readyState一变就会调用这个函数）
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                console.log('请求完成,数据:',xhr.response); //服务器响应的内容xhr.response
                // alert(xhr.response); //得到的是JSON格式字符串,转为对象 JSON.parse(xhr.response)
                alert(JSON.parse(xhr.response).data);
            }
        }
    </script>

2.改进版 GET请求代码

注意点1：xhr.responseType = 'json' 设置后会自动让后端响应给前端的JSON格式数据转换成对象的形式，就不用向上面一样，还需要调用JSON.parse()将JSON数据转成对象。但是，如果后端响应给前端的数据不是JSON格式的数据，xhr.responseType = 'json' 就会将起转换成null,所以前端收到的响应数据就是null。且xhr.responseType = 'json' 的设置要在发生请求xhr.send();之前。

注意点2：监听请求过程：xhr.onreadystatechange 是异步非阻塞的代码。

    <script>
        //1.对象实例化+兼容性写法
        let xhr = new XMLHttpRequest()||new ActiveXObject("Micsoft.XMLHTTP");
        //2.和服务器建立连接  参数1:请求方式  参数2:要建立连接的服务器
        xhr.open('GET','http://127.0.0.1:8000/login?admin=520250&pwd=123456');
        //设置后会自动让后端响应给前端的JSON格式数据转换成对象的形式  此时下面xhr.response保存的数据就是对象的形式
        xhr.responseType = 'json';   //要在xhr.send()之前写
        //3.发起请求
        xhr.send();
        //4.监听请求过程（请求过程状态:xhr.readyState一变化就会调用这个函数）
        xhr.onreadystatechange = function(){
            console.log(xhr.readyState);
            if(xhr.readyState == 4){
                console.log('请求过程状态为完成,此时状态码为:',xhr.status);  
                if(xhr.status == 200){
                    console.log('请求过程完成,且状态码为200,表示请求数据成功,数据:',xhr.response);
                }
            }
        }
    </script>

3.POST请求代码

1.post请求时，会有安全验证问题，简单的处理方式是关闭安全验证：

	// config/config.default.js 文件中
	// 配置安全验证 关闭post请求的安全验证
	config.security = {
		csrf: {
      			enable: false,
      			ignoreJSON: true,
   		}
	}

2.后端设置的请求方式要和前端对应上 （关闭后要重启服务器）

router.post('/register', controller.home.register);

3.前面两步设置了才可进行post请求

<script>
    // 创建xhr实列化对象
    let xhr = new XMLHttpRequest();
    // 和服务器建立连接
    xhr.open('post', 'http://192.168.2.197:8888/loginsubmit');
    // 设置请求头  post请求需要设置请求头，不然后端接收不到数据
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 设置响应数据类型
    xhr.responseType = 'json';
    // 向服务器发送数据
    xhr.send(`account=${account.value}&pwd=${pwd.value}`);
    // 监听请求状态
    xhr.onreadystatechange = function () {
        // console.log(xhr.readyState);
        if (xhr.readyState == 4) { //请求完成
            if (xhr.status == 200) { //请求成功
                console.log(xhr.response); //服务器响应的数据
            }
        }
    }
</script>

4.注意点：ajax请求时一般不要用 127.0.0.1 或者localhost （本地），用ip最合适。(因为ajax请求是在客户端浏览器里面发起请求的)

xhr.open('GET','http://127.0.0.1:8000/login?admin=520250&pwd=123456');

因为别人访问到你写的ajax请求代码所在的html页面时，进行ajax请求，如果你的ajax请求代码是这样：xhr.open('GET','http://127.0.0.1:8000/login?admin=520250&pwd=123456');，则访问到的是他自己电脑上这个login路由，而不是你电脑上的login路由。

最好的办法是写成你的ip

xhr.open('GET','http://192.168.0.107/login?admin=520250&pwd=123456');

所以要理解：ajax请求是在客户端浏览器里面发起请求的。

先把写着ajax请求代码的html文件，加载到本地浏览器上面，然后再从本地浏览器上面进行ajax请求。所以如果把ip写成本地ip127.0.0.1就会访问到本地电脑从而找不到对应资源，而不是访问到真的需要请求的资源地址。

所以：ajax请求，是把写着ajax代码的html文件加载到本地加载完后，才会进行里面ajax请求。

这样别人访问到 你写的ajax请求代码所在的html页面时，进行ajax请求，也会访问到你后端服务器，而不是他自己本地电脑。

3.ajax请求方式为GET或POST时，客户端给服务器传数据的方式区别

1.请求方式为GET时，客户端给服务器传数据方式

在客户端传输：

在服务器端接收：

ctx.request.query 或者 ctx.query

  async login() {
    const { ctx } = this;
    //获取客户端传递过来的数据
    console.log(ctx.request.query);
    console.log(ctx.query);
  }
}

分析：服务器端的代码在dos窗口执行，所以结果去dos窗口查看。

2.请求方式为POST时，客户端给服务器传数据方式

1.post请求时，会有安全验证问题，简单的处理方式是关闭安全验证：（关闭后要重启服务器）

	// config/config.default.js 文件中
	// 配置安全验证 关闭post请求的安全验证
	config.security = {
		csrf: {
      			enable: false,
      			ignoreJSON: true,
   		}
	}

2.后端设置的请求方式要和前端对应上

router.post('/register', controller.home.register);

3.然后才是POST请求时，客户端给服务器传递数据方式

01. 需要设置请求头 post请求需要设置请求头，不然后端接收不到数据

 // 设置请求头  post请求需要设置请求头，不然后端接收不到数据
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.open('POST', 'http://127.0.0.1:8000/register');
xhr.responseType = 'json'; //要在xhr.send()之前写
// 设置请求头  post请求需要设置请求头，不然后端接收不到数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//3.发起请求
xhr.send(`admin=666&pwd=1233211234567`);

02.服务器端获取客户端传递过来的数据用 ctx.request.body 结果是一个对象的形式

  async register() {
    const { ctx } = this;
    //获取客户端传递过来的数据
    console.log(ctx.request.body);
  }

分析：服务器端的代码在dos窗口执行，所以结果去dos窗口查看。

成功拿到客户端传给服务器端的数据。

3.进行ajax请求时遇到的问题

1.POST请求时，遇到 403 禁止访问

403：禁止访问（post请求会有安全验证问题，后端必须关闭安全验证）

解决办法:后端关闭POST安全验证

	// config/config.default.js 文件中
	// 配置安全验证 关闭post请求的安全验证
	config.security = {
		csrf: {
      			enable: false,
      			ignoreJSON: true,
   		}
	}

2.POST请求时，遇到404 未找到

但是后端确实写了register这个路由

分析：后端虽然写了路由register,但是它要求的请求方式是 get,所以前端用post请求方式去请求肯定请求不到，这就说明请求方式不是前端开发人员决定的，而是后端开发人员决定的。

所以:解决方法：后端把请求方式改为post (注意改了后端代码要重启服务器)

 router.post('/register', controller.home.register);

3.ajax请求报的错：net::ERR_CONNECTION_TIMED_OUT

分析：ajax请求报的错：ajax去请求的这个服务器挂了（没有启动）

可能是ip地址变了。

前端小草籽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
egg项目搭建+AJAX请求+常见问题解决

客户端(前端页面): html+css+js服务器：后端服务器，后端的代码就是放在后端服务器egg里面的前端服务器：前端代码放在前端服务器里面的客户端可以请求服务器egg创建的项目：既是后端服务器，也是前端服务器，后端代码放在这个服务器里面的，前端代码也放在这个服务器里面的。ajax代码是写在html文件中的script标签中。01.ajax:Async JavaScript And Xml,也就是异步Javascript和Xml02.ajax的核心。..................
复制链接

扫一扫

专栏目录