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.querythis.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.bodylet query=this.ctx.request.queryconsole.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.filesconsole.log(ziduan,f)//将接收的文件移动至指定的文件夹if(f[0]){let oldpath=f[0].filepathlet fname=path.basename(oldpath)let newpath=__dirname+"/../public/upload/"+fnamefs.renameSync(oldpath,newpath)}this.ctx.body={info:"post2的数据"}}