egg框架---(GET,POST)

realllll
111 阅读3分钟

egg框架使用

以下在使用时需要自己配置

	egg的相关插件配置		
	  关闭POST的csrf安全证书验证
	  POST字段和文件上传的限制()	  
	  开启文件上传模式
	  CORS的相关配置
	  JSONP的相关配置

路由Router

路由:指不同的网址去执行不同的分支或者程序

在egg框架中路由:网络请求时,后端的处理顺序:静态文件>路由匹配(按顺序匹配)

注册路由时,路由名不要和静态文件名相同

"/*":为任何网址都能匹配

router.get("/*",controller.home.all)

控制器Controller

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

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

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

如果路由为:

router.get("/test,controller.user.news")

那么在在controller文件夹下有一个user文件中有一个news方法

如果路由为:

router.get("/test,controller.user.home.news")

那么在controller文件夹下有一个user文件夹下有一个home文件中有一个news方法

CROS

JSONP

代理 Proxy

GET请求

网络请求的技术:

1.浏览器地址栏可以做网络请求:前端给后端发送字段,只能发送GET

2.标签:

img-src 只能发送GET请求

link-href 只能发送GET请求

xx-url 只能发送GET请求

a-href 只能发送GET请求

script-src JSONP 只能发送GET请求

GET方法的特点:

get方法不安全,易被截获,但是速度快

GET的使用:

前端:axios()与axios.get()相同

 axios("协议://ip:port/pathname?参数querystring")
 .then(res=>{})

后端:egg后端接受GET字段

this.ctx.request.query

案列:

<body>
    <input type="text" class="box">
    <button onclick="fn()">搜索</button>
    <a href="http://192.168.43.147:7001/public/test.rar">下载</a>
    <script>
        function fn() {
            var searvalue = document.querySelector(".box").value
            // axios("http://192.168.43.147:7001/test1", {
            //         params: {
            //             name: "dsl",
            //             key: searvalue
            //         }
            //     })
            //     .then(res => console.log(res))
            axios(`http://192.168.43.147:7001/test1?name=dsl&key=${searvalue}`, {

                })
                .then(res => console.log(res))
            //     axios("http://192.168.43.147:7001/download")
            //         .then(res => console.log(res))
        }

'use strict';

const Controller = require('egg').Controller;
const fs = require("fs")
const path = require("path")

class HomeController extends Controller {
  async index() {
    const {
      ctx
    } = this;
    ctx.body = 'hi, egg';
  }
  async test1() {
    let a = this.ctx.request.query
    console.log(a, 111);
    this.ctx.body = {
      "age": "20"
    }
  }

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const {
    router,
    controller
  } = app;
  router.get('/', controller.home.index);
  router.get('/test1', controller.home.test1)
  router.get('/download', controller.home.download)
  router.post('/post1', controller.home.post1)
};

image.png

前端

 axios("协议://ip:port/pathname",{params:{参数对象}})
 .then(res=>{})

后端

 this.ctx.request.query

案列:

<body>
    <input type="text" class="box">
    <button onclick="fn()">搜索</button>
    <a href="http://192.168.43.147:7001/public/test.rar">下载</a>
    <script>
        function fn() {
            var searvalue = document.querySelector(".box").value
            axios("http://192.168.43.147:7001/test1", {
                    params: {
                        name: "dsl",
                        key: searvalue
                    }
                })
                .then(res => console.log(res))
            // axios(`http://192.168.43.147:7001/test1?name=dsl&key=${searvalue}`, {

            //     })
            //     .then(res => console.log(res))
            //     axios("http://192.168.43.147:7001/download")
            //         .then(res => console.log(res))
        }
    </script>
</body>

'use strict';

const Controller = require('egg').Controller;
const fs = require("fs")
const path = require("path")

class HomeController extends Controller {
  async index() {
    const {
      ctx
    } = this;
    ctx.body = 'hi, egg';
  }
  async test1() {
    let a = this.ctx.request.query
    console.log(a, 111);
    this.ctx.body = {
      "age": "20"
    }
  }

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const {
    router,
    controller
  } = app;
  router.get('/', controller.home.index);
  router.get('/test1', controller.home.test1)
  router.get('/download', controller.home.download)
  router.post('/post1', controller.home.post1)
};

image.png

image.png

当后端给前端发送一份不能识别的文件时,浏览器会将其下载下来:

<body>
    <input type="text" class="box">
    <button onclick="fn()">搜索</button>
    <a href="http://192.168.43.147:7001/public/test.rar">下载</a>
    <script>
        function fn() {
            var searvalue = document.querySelector(".box").value
            // axios("http://192.168.43.147:7001/test1", {
            //         params: {
            //             name: "dsl",
            //             key: searvalue
            //         }
            //     })
            //     .then(res => console.log(res))
            // axios(`http://192.168.43.147:7001/test1?name=dsl&key=${searvalue}`, {

            //     })
            //     .then(res => console.log(res))
                axios("http://192.168.43.147:7001/download")
                    .then(res => console.log(res))
        }
    </script>
</body>

'use strict';

const Controller = require('egg').Controller;
const fs = require("fs")
const path = require("path")

class HomeController extends Controller {
  async index() {
    const {
      ctx
    } = this;
    ctx.body = 'hi, egg';
  }
  async test1() {
    let a = this.ctx.request.query
    console.log(a, 111);
    this.ctx.body = {
      "age": "20"
    }
  }
  async download() {
    this.ctx.body = fs.readFileSync(__dirname + "/../public/test.rar")
  }

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const {
    router,
    controller
  } = app;
  router.get('/', controller.home.index);
  router.get('/test1', controller.home.test1)
  router.get('/download', controller.home.download)
  router.post('/post1', controller.home.post1)
};

image.png

POST

使用POST请求前需要的配置

             关闭POST的csrf安全证书验证
	  POST字段和文件上传的限制()	  
	  开启文件上传模式

POST的特点:相对安全,传送暗纹

POST发送数据的代码: 1.

前端

axios.post(url,{参数字段})
 .then()

后端

this.ctx.request.body
this.ctx.request.files
var f=this.ctx.request.files
f[0].filepath就是用户上传的文件保存在服务器的计算的临时路径,需要移动到项目目录中

前端

 var fdata=new FormData()
  fdata.append("key1","value1字段")
  fdata.append("key2","value2字段")
  fdata.append("key3","value文件1")
    fdata.append("key3","value文件2")//最多9个文件
  ==>value文件是指input节点的files属性中的文件对象: f1.files[0]

 axios.post(url,fdata)
 .then()

后端

this.ctx.request.body
this.ctx.request.files
var f=this.ctx.request.files
f[0].filepath就是用户上传的文件保存在服务器的计算的临时路径,需要移动到项目目录中

案列:

<body>
    账号<input type="text" id="userid"><br>
    密码<input type="text" id="psw"><br>
    文件<input type="file" id="wj" multiple>
    <button onclick="fn()">上传</button>
    <script>
        function fn() {
            //1.获取功能
            var wj = document.querySelector("#wj")
            var userid = document.querySelector("#userid")
            var psw = document.querySelector("#psw")
            //2.声明fdata 对象(表单格式)
            var fdata = new FormData()
            //3.给fdata对象添加成员,最多9个
            fdata.append("zh", userid.value)
            fdata.append("wenjian", wj.files[0])
            //4.发送post请求
            //5.post请求只能用ajax或者表单
            //6.使用post请求时需要配置文件
            axios.post("http://192.168.43.147:7001/post1", fdata)
                .then(res => console.log(res))
        }
    </script>
</body>

 async post1() {
    //1.前端POST发送给egg的参数字段
    let zd = this.ctx.request.body
    //2.前端POST发送给egg的参数文件
    let fl = this.ctx.request.files
    //3.让前端传过来的文件从临时路径中转移到自己设置存放的路径中
    console.log(zd, fl, 111111);
    console.log(__dirname, 12222);
    console.log(fl[0].filepath);
    if (fl[0]) {
      let oldpath = fl[0].filepath
      let fname = path.basename(oldpath)
      let newpath = __dirname + "/../public/updown/" + fname
      console.log(__dirname);
      fs.copyFile(oldpath, newpath, err => {
      //清除默认存放的文件夹
        fs.unlink(oldpath, err => {
          console.log(err);
        })
        console.log(err);
      })
    }
    this.ctx.body = "恭喜你成功上传!"
  }

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const {
    router,
    controller
  } = app;
  router.get('/', controller.home.index);
  router.get('/test1', controller.home.test1)
  router.get('/download', controller.home.download)
  router.post('/post1', controller.home.post1)
};

image.png

image.png

点击上传

image.png

注:移动文件路径时需要注意fs模块的rename方法和copyFile方法的区别,rename方法需要在同一根路径下,也就是同一个磁盘中.copyFile没有这个限制

avatar
文章
阅读
粉丝