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 路由：

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

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

  router.post('/register',controller.home.register) //代表controller文件下的home文件夹里的register方法

        Controller控制器：

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

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

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

  async index() {
    const { ctx } = this;
    ctx.body = 'hi, egg';
  }

  async register() {
    const { ctx } = this;
    ctx.body = 'hello world';
  }

        跨域 --- CORS的配置：

        1.下载插件

        npm i --save egg-cors

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

  cors:{
    enable: true,
    package: 'egg-cors',
  }

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

        方式一：默认全部可访问

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

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

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

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

        方式一：实现JSONP接口：

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

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

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

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

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

module.exports = app => {
  const jsonp = app.jsonp({
  callback: 'cb',
  limit: 100,
});
  app.router.get('/api', jsonp, app.controller.home.api);
};

        跨域 --- 代理的配置

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

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

GET 获取提交的数据

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

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

        router.js：

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

         home.js：

    async get1() {
		
		var k = this.ctx.request.query
		
		this.ctx.body = {
			info: "get1接口的数据"
		}
	}

  （1）AJAX技术

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

  （2）axios技术

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

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

POST获取提交的数据

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

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

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

  config.security={
    csrf:{
      enable:false
    }
  };

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

	module.exports = {
		bodyParser: {
			jsonLimit: '10mb',
			formLimit: '10mb',
		},
   };

设置POST请求：

（1）AJAX技术

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

（2）axios技术

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

router.js：

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

home.js:

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

获取上传的文件

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

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

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

                var f1=document.querySelector("#f1")
                var userid=document.querySelector("#userid")
                var pwd=document.querySelector("#pwd")
				var fdata=new FormData()
                 //发送的数据
				fdata.append("userid",userid.value)
				fdata.append("pwd",pwd.value)
				//发送的文件
				fdata.append("touxiang",f1.files[0])
				
				var url="http://192.168.1.123:7001/post2"
				axios.post(url,fdata)
				.then(res=>console.log(res))

router.js:

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

后端接收：

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