• egg.js框架的基本设置 及 使用

    引言

    首先，前端向后端发送网络请求的方式有：

            1、GET请求

            2、POST请求

    然后，能做网络请求的技术有：

            1.浏览器的地址栏 --- 前端给后端发送字段，只能使用GET请求。

                    浏览器地址栏接受的数据会直接读取渲染,如果解析失败会下载。

            2.css中的一些标签，如：

                    (1)img标签 --- 只能发送GET请求

                    (2) link标签 ---  只能发送GET请求

                    (3) 如background-image的url() ---  也只能发送GET请求

                    (4) a标签 ---  只能发送GET请求

                    (5) script标签的src ---  只能发送GET请求

            3.既能发送GET请求又能发送POST请求的技术：

                    (1) form表单的提交

                    (2) AJAX技术，以及基于AJAX封装的框架

    egg框架的下载

            使用脚手架快速创建项目的指令：

                    npm init egg --type=simple

            下载相关依赖文件的指令：

                    npm i

            启动项目的指令：

                    npm run dev

           

    egg框架的设置

             egg框架的默认端口号是：7001;   即访问时在浏览器地址栏输入： http://x.x.x.x:7001

            egg框架的约定规则：

           1 app/router.js：用于配置URL路由规则；

           2 app/controller/** ：用于解析用户的输入，处理后返回相应的结果；

           3 app/service/： 用于编写业务逻辑层；

           4 app/public/： 用于放置静态资源；

           5 config/config.{env}.js： 用于编写配置文件；

           6 config/plugin.js 用于配置需要加载的插件；  

           router 路由：

            是设置用户访问时的网址的设置：

    1.   router.get('/ajax', controller.home.index); //代表controller文件下的home文件夹里的index方法
    2.  
    3.   router.post('/register',controller.home.register) //代表controller文件下的home文件夹里的register方法

            Controller控制器：

            Controller负责解析用户的输入，处理后返回响应的结果。

            1.所有的Controller 文件都必须放在 app/controller目录下

            2.支持多级目录，访问时可以通过目录名级联访问。

    1.   async index() {
    2.     const { ctx } = this;
    3.     ctx.body = 'hi, egg';
    4.   }
    5.  
    6.   async register() {
    7.     const { ctx } = this;
    8.     ctx.body = 'hello world';
    9.   }

            跨域 --- CORS的配置：

            1.下载插件

            npm i --save egg-cors

            2.开启插件，在 config/plugin.js文件中配置：

    1.   cors:{
    2.     enable: true,
    3.     package: 'egg-cors',
    4.   }

            3.配置插件，在config/config.default.js文件中配置：有两种方式：

            方式一：默认全部可访问

    1.   config.cors = {
    2.     origin: '*',
    3.     allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
    4.   };

            方式二：具体指定多个网址可以访问

    1.    config.cors = {
    2.         // origin: ['http://localhost'],
    3.         origin:function(ctx) { //设置允许来自指定域名请求
    4.             console.log(ctx);
    5.             const whiteList = [网址1,网址2，网址3]; 
    6.             let url = ctx.request.header.origin;
    7.             if(whiteList.includes(url)){
    8.                 return url;
    9.             }
    10.             return 'http://localhost' //默认允许本地请求可跨域
    11.         },
    12.         allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
    13.     };

            跨域 --- JSONP的配置：也有两种方式

            方式一：实现JSONP接口：

          在config/config.default.js文件中配置：

    1.  config.jsonp = {
    2.     callback: 'cb', // 识别 query 中的 `cb` 参数
    3.     limit: 100, // 函数名最长为 100 个字符
    4.   };

            然后在router.js文件中写接口：

    1. module.exports = app => {
    2.   const jsonp = app.jsonp();
    3.   app.router.get('/api', jsonp, app.controller.home.api);
    4. };

            方法二：直接在jsonp方法中直接配置：在router.js文件中

    1. module.exports = app => {
    2.   const jsonp = app.jsonp({
    3.   callback: 'cb',
    4.   limit: 100,
    5. });
    6.   app.router.get('/api', jsonp, app.controller.home.api);
    7. };

            跨域 --- 代理的配置

    在controller文件夹中的home.js文件中：

    1. async cors(){
    2.     let data=await this.ctx.curl("网址",{method:"GET",data:{count:123})
    3.     this.ctx.body=data
    4. }

    GET 获取提交的数据

            GET请求传参数给后端，参数会拼接到url中，此方法的特点是速度快，但是它不安全

            后端接收GET请求的数据：ctx.request.query 或者 ctx.query

            router.js：

    router.get('/get1', controller.home.get1);

             home.js：

    1.     async get1() {
    2. 		
    3. 		var k = this.ctx.request.query
    4. 		
    5. 		this.ctx.body = {
    6. 			info: "get1接口的数据"
    7. 		}
    8. 	}

      （1）AJAX技术

    1.                 var xhr=new XMLHttpRequest() 
    2. 			     var url=`http://192.168.1.123:7001/get1?username=xiaozhang&pwd=123`
    3. 				 xhr.open("GET",url)
    4. 			     xhr.send()
    5. 				 xhr.onreadystatechange=()=>{
    6. 					if(xhr.readyState==4&&xhr.status==200){
    7. 					console.log(xhr.responseText)
    8. 				 	}
    9. 				 }

      （2）axios技术

    1.                 axios("网址"，{params:{username:xiaozhang,pwd:123}})
    2. 				.then(res => {
    3. 					console.log(res)
    4. 				})

    也就是将params传入的值直接拼接到网址之后的querystring部分。

    POST获取提交的数据

            将数据转为暗文发送，选择POST方式

            后端接收POST请求的数据：ctx.request.body 而不是 ctx.body

    1、post请求时,会有安全验证问题,简单的处理方式是关闭安全验证：在config/config.default.js文件中配置：

    1.   config.security={
    2.     csrf:{
    3.       enable:false
    4.     }
    5.   };

    2、post数据默认大小是100kb 如需调整可在 config/config.default.js 中覆盖框架的默认值:

    1. 	module.exports = {
    2. 		bodyParser: {
    3. 			jsonLimit: '10mb',
    4. 			formLimit: '10mb',
    5. 		},
    6.    };

    设置POST请求：

    （1）AJAX技术

    1.              var xhr=new XMLHttpRequest()
    2. 			 var url="http://192.168.1.123:7001/post1"
    3. 			 xhr.open("POST",url,true)
    4. 			 //这个函数接受字符串:querystring
    5. 			 //如果"POST"就会把这个请求的数据放在"请求数据包"-HTTPRequestMessage 的请求体中的
    6. 			 //如果是"GET",不会报错 但是也并不会把这个数据拼接到url中发送
    7. 			 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    8. 			 xhr.send(`userid=${userid.value}&pwd=${pwd.value}`)
    9. 			 xhr.onreadystatechange=function(){
    10. 			 	if(xhr.readyState==4&&xhr.status==200){
    11. 			 		console.log(xhr.responseText)
    12. 			 	}
    13. 			 }

    （2）axios技术

    1.              var url="http://192.168.1.123:7001/post1"			
    2. 			 axios.post(url,{username:xiaozhang,pwd:123})
    3. 			 .then(res=>console.log(res))

    router.js：

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

    home.js:

    1.     async post1() {
    2. 		//1.前端POST发送给egg的参数字段
    3. 		let obj=this.ctx.request.body
    4. 		let query=this.ctx.request.query
    5. 		console.log(obj,query)
    6. 		this.ctx.body={info:"post数据",res:obj}
    7. 	}

    获取上传的文件

            1.egg必须启用 file 模式，在config/config.default.js文件中配置：

    1. config.multipart = {
    2.   mode: 'file',
    3. };

            2.把要给后端发送的"大量"数据:文件  处理成表单数据

    1.                 var f1=document.querySelector("#f1")
    2.                 var userid=document.querySelector("#userid")
    3.                 var pwd=document.querySelector("#pwd")
    4. 				var fdata=new FormData()
    5.                  //发送的数据
    6. 				fdata.append("userid",userid.value)
    7. 				fdata.append("pwd",pwd.value)
    8. 				//发送的文件
    9. 				fdata.append("touxiang",f1.files[0])
    10. 				
    11. 				var url="http://192.168.1.123:7001/post2"
    12. 				axios.post(url,fdata)
    13. 				.then(res=>console.log(res))

    router.js:

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

    后端接收：

    1.     async post2(){
    2. 		//1.前端POST发送给egg的参数字段
    3. 		let ziduan=this.ctx.request.body
    4. 		//2.前端POST发送给egg的参数文件
    5. 		let f=this.ctx.request.files
    6. 		console.log(ziduan,f)
    7. 		
    8.         //将接收的文件移动至指定的文件夹
    9. 		if(f[0]){
    10. 			let oldpath=f[0].filepath
    11. 			let fname=path.basename(oldpath)
    12. 			let newpath=__dirname+"/../public/upload/"+fname
    13. 			fs.renameSync(oldpath,newpath)
    14. 		}
    15. 		
    16. 		this.ctx.body={info:"post2的数据"}
    17. 	}

  • 相关阅读:
    java版Spring Cloud之Spark 离线开发框架设计与实现
    分布式.RPC-WebService CXF框架
    手工挖XSS漏洞
    【C++入门：C++世界的奇幻之旅】
    mall ：sa-token项目源码解析
    多快好省，低门槛AI部署工具FastDeploy测试版来了!
    【gcc/g++】2.三大编译方式(直接编译库 静态链接库 动态链接库)
    包装印刷新兴热点、市场空间、技术趋势以及未来发展趋势
    【手把手带你学会KMP算法】
    Linux 常用工具
  • 原文地址：https://blog.csdn.net/z_2532040197/article/details/126212632