提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

文章目录

1.egg.js简介

（1.1）安装egg.js框架

（1.2）约定规则

（1.3）路由Router

（1.4）控制器Controller

2.get请求

GET能做网络请求的技术有那些？

3.post请求

4.获取上传的文件

（4.1）egg必须启用 file 模式

（4.2）前端发送文件

（4.3）egg接受文件 ctx.request.files[0]

5.做的xx项目注册的流程(面试题)

6.做的xx项目登录的流程(面试题)

1.egg.js简介

（1）egg.js 是『约定优先于配置』的一个 Node.js web 框架

（2）Express的原班人马打造了Koa，阿里在Koa的基础之上封装出Egg，框架的命名和功能符合阿里的企业文化:egg直译为鸡蛋,轻量简洁,功能齐全,免费开源,具备一个完整生命的所有特征,为孵化伟大的互联网企业而生。

基于SSH三大框架完成的注册和登录功能

zip 5星 超过95%的资源 19.09MB

下载

（1.1）安装egg.js框架

安装egg.js框架的快捷键：

        npm init egg --type=simple

        npm i

       启动项目:npm run dev

注:如果安装指令没有报错,运行报错一般就是网络卡,防火墙等原因导致丢包了,删除整个项目文件夹,重新安装项目即可。

（1.2）约定规则

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

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

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

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

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

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

（1.3）路由Router

（1）路由是描述请求URL和具体承担执行动作的Controller的对应。说的直白点，就是用户访问不同的路径时应该有不同的Controller去响应不同的内容。

（2）路由：指不同的网址去执行不同的分支或者程序
         注册路由时，路由名不要和静态文件名冲突，不然的话会优先访问静态文件。
（3）egg中的路由
        网络请求时后端的处理顺序:静态文件>路由匹配(按照顺序匹配)
        "/*"星号路由代表所有网址都能匹配

（1.4）控制器Controller

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

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

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

//如果路由是:
    router.get('/hello', controller.user.news)
//则控制器对应:
    //在controller文件夹下有一个user文件中有一个news方法
 
 
//eg:
//如果路由是:
    router.get('/hello', controller.user.home.news)
//则控制器对应:
    //在controller文件夹下有一个user文件夹下有一个home文件中有一个news方法

2.get请求

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

get总结：

get不关心原生AJAX
 1.GET发送数据的代码
          //参数直接写到url中 querystring
 

 第一种
         axios("协议://ip:port/pathname?参数querystring")
         .then(res=>{})
 第二种
         axios("协议://ip:port/pathname",{params:{参数对象}})
         .then(res=>{}) 
 axios.get()和axios()是一样的
 
 2.egg后端接受GET字段
         this.ctx.request.query

GET能做网络请求的技术有那些？

==>

（1）浏览器地址栏可以做网络请求，前端给后端发送字段，只能发送get

         浏览器的地址栏[只能]发送get请求, 接受的数据会直接读取渲染,如果解析失败会下载

（2）标签：

        img-src(只能发送get):

                返回的数据渲染成图片 如果非图片编码就会"碎裂"

                img.οnlοad=()=>{}

        link-href(只能发送get):

                返回的数据按照功能使用

        xx-url(只能发送get):
        

        a-href(只能发送get):

              并且是点击事件触发了默认事件才会发送get请求发送网络请求给href的网址,后端返回的数据,接受的数据会直接读取渲染,如果解析失败会下载

        script-src（JSONP）(只能发送get)

（3）可以使用多种网络请求方式

        form-action-submit

        AJAX-open-send

3.post请求

java发送get请求和post请求示例

pdf 0星 超过10%的资源 25KB

下载

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

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

// config/config.default.js文件
//关闭csrf
 
   config.security={
     csrf:{
       enable:false
     }
   }

3.2post数据默认大小是100kb

如需调整可在 config/config.default.js 中覆盖框架的默认值:

// config/config.default.js文件
 
	module.exports = {
		bodyParser: {
			jsonLimit: '1mb',
			formLimit: '1mb',
		},
   };

3.3.接收动态路由参数

//路由:
 app.get('/projects/:projectId/app/:appId',controller.form.get );
 
//控制器中获取:
this.ctx.params.projectId
this.ctx.params.appId 

post:发送字段

        axios.post(url,{user:"kangkang",sex:"nan"})

post:发字段和文件

        var fdata=new FormData()

        fdata.append("user","kangkang")

        fdata.append("sex","nan")

        fdata.append("photo",f1.files[0])

        fdata.append("photo",f1.files[1])

        fdata.append("photo",f1.files[2])（最多选择九个）

        axios.post(url,fdata)

后端接收post字段数据的主要代码：

        this.ctx.request.body

后端接收post文件数据：

        this.ctx.request.files数组中文件信息对象filepath

4.获取上传的文件

（4.1）egg必须启用 file 模式

// config/config.default.js文件
config.multipart = {
  mode: 'file',
};

（4.2）前端发送文件

//2.1 表单
"/upload" method="post" enctype="multipart/form-data">
        type="email" name="email" id="email">
        type="password" name="password" id="password">
        type="file" name="touxiang" id="touxiang">
        type="submit" value="上传">
	
 
//2.2 ajax
        let data=new FormData()
		data.append("email",email.value)
		data.append("password",password.value)
		data.append("touxiang",touxiang.files[0])
		axios.post(url,data).then((res)=>{})

（4.3）egg接受文件 ctx.request.files[0]

        对象里面有上传的文件信息,主要包括文件的临时保存路径文件的字段名大小等等

        一般情况文件的临时保存路径在c盘的temp文件夹中 我们需要自己处理移动到项目文件夹中

        文件的名称是被修改过的哈希值命名的,需要自己处理修改文件名

        注意点:fs模块的拷贝方法没有跨盘限制,rename方法有跨盘限制的bug

    async file() {
        console.log(this.ctx.request.files);
		console.log(this.ctx.request.body);
		console.log(this.ctx.request.query); 
		
        const { ctx } = this;
        const file = ctx.request.files[0];
        let to = __dirname+"/../public/upload/"+ file.filename   
        fs.renameSync(file.filePath,to)
        
		// 返回上传图片的网址
        ctx.body = `http://localhost:7001/public/upload/${file.filename}`;
    }

5.做的xx项目注册的流程(面试题)

注册的前端流程

        1.前端表单验证-减轻服务器的负载-DOM操作写特效

                1.1 邮箱验证:绑定change事件 判断value是否符合邮箱正则

                1.2 密码验证:密码要符合格式(自己定制的比如大小写特殊符号),两次密码要一致

                1.3 昵称验证:昵称要符合格式(自己定制的比如大小写特殊符号)

                1.4 身份证的验证:图片的格式和大小清晰度-预览

        2.点击提交按钮时 获取用户交互的信息

                2.1 下载egg-mysql插件并配置

                2.2  写代码操作mysql数据库

                        2.2.1 查询邮箱是否注册过

                        2.2.2 插入数据​​​​​​​

        3.把数据POST发送给后端

        4.等后端返回数据

                如果返回的数据包的业务码是xxx  就操作页面xxx

                如果返回的数据包的业务码是正确 就跳转到登录页面或者直接帮用户登录

6.做的xx项目登录的流程(面试题)

登录的前端流程

        1.前端表单验证-减轻服务器的负载-DOM操作写特效

                1.1 邮箱验证：绑定change事件，判断value是否符合邮箱正则

                1.2 密码验证：密码要符合格式（自己定制的比如大小写特殊符号），两次密码要一致

        2. POST暗文把密码发送给后端--JWT

        3. 等后端返回数据

             如果返回的数据包的业务码是xxx，就操作页面xxx

             如果返回的数据包的业务码是正确，就跳转到首页页面或者其他页面

        4.验证码      

             前端页面渲染就请求验证码==>后端生成验证码然后设置到缓存在把验证码发送前端

             前端获取用户输入的验证码发送给后端==>取出缓存和接受到的对比