7.nodejs–egg框架简介、以及get、post请求、做的xx项目登录注册的流程(面试题)

安装 e gg.js框架的快捷键：

        npm init e gg —type=simple

        npm i

       启动项目:npm run dev

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

（1.2）约定规则

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

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

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

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

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

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

（1.3）路由Rout e r

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

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

（1.4）控制器Con t roller

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

1.所有的Con t roller 文件都必须放在 ap p/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中 que ry string

第一种
         axios(“协议://ip:p o rt/path name?参数query string“)
         .t hen(res=>{})
第二种
         axios(“协议://ip:port/path name“,{params:{参数对象}})
         .t hen(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请求

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

3.1 post请求时,会有安全验证问题,简单的处理方式是关闭安全验证：
// config/config.default.js文件
//关闭csrf

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

3.2post数据默认大小是100k b

如需调整可在 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“})

p ost:发字段和文件

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 数组中文件信息对象 file pat h

4.获取上传的文件

（4.1）egg必须启用 file 模式

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

（4.2）前端发送文件

//2.1 表单
<form action="/upload" method="post" enctype="multipart/form-data">
        <input type="email" name="email" id="email">
        <input type="password" name="password" id="password">
        <input type="file" name="touxiang" id="touxiang">
        <input type="submit" value="上传">
</form>	

//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.验证码

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

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