nodejs的koa2.0 web框架

最新推荐文章于 2024-07-05 15:40:53 发布

坚持学习前端日记

最新推荐文章于 2024-07-05 15:40:53 发布

阅读量427

点赞数

分类专栏： nodejs 文章标签： nodejs web

本文链接：https://blog.csdn.net/qq_43505774/article/details/106763088

版权

nodejs 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

直接上代码

var koa=require("koa")//koa web框架
var http=require("http")//http服务器创建
var Router=require("koa-router")//路由
var Static=require("koa-static")//静态资源
var Views=require("koa-views")//视图 npm install ejs 搭配使用
var body=require("koa-bodyparser")//用于表单简单提交 文本上传使用koa-body
var file=require("koa-body")//文本上传 通过fs文件流formable可以获取
var path=require("path")
var router=new Router()//路由实例化
var k=new koa()
k.use(Static(__dirname+"/static"))//static是文件夹
k.use(body())//先注册post提交的body转译配置
k.use(file())
router.get("/a",(cxt)=>{
    cxt.body="aaa"
})
router.get("/",async (ctx)=>{
    ctx.body="hello world"
})
router.post("/but",(ctx)=>{
    ctx.set("Access-Control-Allow-Origin","*")   
   ctx.body={
       a:1,
       b:ctx.request.body.pass
   }

})
router.post("/file",(ctx)=>{
    ctx.set("Access-Control-Allow-Origin","*") 

})
k.use(router.routes())//然后配置路由

// k.context.hel=function(){
//     console.log("hello world")
// } k.context==ctx     k.prototype原型

k.use(Views(path.join(__dirname, "views"), {
 extension:"ejs"//视图的配置 在根目录下面创建index.ejs 文件
}));
   
// 在路由中使用   
router.get('/view', async ( ctx ) => {
    let title = 'hello koa2'
    await ctx.render('index', {
        title//这是index文件与ejs后缀结合的模板 title是模板的变量
    })
})
k.on('error',(err)=>{//监听错误
    console.log(err)
})


//k.listen()这个也是监听
http.createServer(k.callback()).listen(5050,()=>{
    console.log(123)//这是http原生监听等同于上面listen
})

post提交

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src="http://localhost:5050/jquery.js">//这是加static静态文件下面的jQuery 设置的静态文件可以省略static
  而express设置的静态文件是匹配路由a.use("/public",express.static('public'))
        </script>
        <script>
            $(function(){
                console.log("123")
                $("button#but").click(function(){
                    const user=$("input#user").val()
                    const pass=$("input#pass").val()
                    $.ajax({
                        url:"http://localhost:5050/but",
                        method:"post",
                        data:{
                            "user":user,
                            "pass":pass
                        },
                        dataType:"json",
                        header:{
                     "Content-Type":"application/x-www-form-urlencoded"
                        },
                        success:function(res){
                            console.log(res)
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <div>
            ni hao
            <input type="text" id="user">
            <input type="text" id="pass">
            <button id="but">点击</button>
            <form action="http://localhost:5050/but" method="POST">
                <input type="text" name="user">
                <input type="text" name="pass">
                <button type="submit">提交</button>
            </form>
        </div>
    </body>