在vue中使用koa

约定不等于承诺〃 2021-08-19 21:36 579阅读 0赞

0.安装Node ,安装完成后可用以下命令查看是否完成安装。

查看node版本 ：   node -v  
  
1.搭建环境

新建文件夹 koa2，并初始化。初始化完成生成packge.json文件，配置项目的配置项

cnpm init -y   //-y ，y即yes的缩写，默认配置

2，安装koa

cnpm i koa -S

安装nodemon（自动重启模块）

cnpm i nodemon -D

3，在项目根目录下面新建app.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

![20191107232019906.png][]

app.js

const Koa = require('koa')
    const app = new Koa()
    
    app.use( async (ctx) => {
      	ctx.body = 'hello world!!你好啊哈哈'
    })
    
    app.listen(3000, () => {
    	console.log('start ok')
    })

4,启动koa

更改package.json中的启动入口文件，即app.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

然后就可以使用命令：**node app.js**  启动服务了。但是使用这个命令，每次代码更改后都要手动执行此命令运行服务，就很麻烦，因此，现在可以使用之前安装的nodemon运行服务了，启动一次，以后它会自动帮我们重启服务。

通过dos窗口进入项目根目录，然后输入命令：

nodemon app.js

![20191107232140437.png][]

（如果报错：无法加载文件 \*\*\*\*\*\*.ps1，因为在此系统中禁止执行脚本。解决办法参考：[https://blog.csdn.net/github\_35186068/article/details/80518681][https_blog.csdn.net_github_35186068_article_details_80518681]

[https://jingyan.baidu.com/article/09ea3ede40cc2dc0aede392c.html][https_jingyan.baidu.com_article_09ea3ede40cc2dc0aede392c.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

出现了remoteSigned，即可正常使用了。）

5，刷新页面

打开浏览器窗口，输入：[http://localhost:3000][http_localhost_3000]

![20191106102427768.png][]

6，更改app.js中的ctx.body内容，重新刷新浏览器页面，可看到页面变化。这是因为刚刚安装了nodemon插件，如果不安装这个插件，那么每次更改app.js中的ctx.body内容，都需要重新启动服务（node app.js）才能实现页面刷新

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]![20191106102628925.png][]

7，使用koa-json。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]输出：![2019110610412375.png][]

感觉输出的json格式不好看，这里来种好看的方式，使用koa-json

安装koa-json

cnpm i koa-json -D

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

app.js中引入koa-json

const json=require('koa-json')
    app.use(json())

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]输出：![20191106104510731.png][]

8，路由-Koa-router

安装命令：

cnpm i koa-router -S

app.js中引入koa-router

const KoaRouter=require('Koa-router')
    const router=new KoaRouter()
    //配置路由模块
    app.use(router.routes()).use(router.allowedMethods())

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]

const Koa = require('koa')
    const app = new Koa()
    
    const KoaRouter=require('Koa-router')
    const router=new KoaRouter()
    //配置路由模块
    app.use(router.routes()).use(router.allowedMethods())
    
    router.get('/test',ctx=>{ctx.body='hello KoaRouter!'})
    
    app.listen(4000, () => {
    	console.log('start ok')
    })

运行效果：![20191107233114751.png][]

10.koa的中间件

11.请求数据获取-koa-bodyparser中间件

对于POST请求的处理，koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中。

## 1、安装 koa-bodyparser ##

cnpm i -S koa-bodyparser

## 2、安装 引入配置中间件 ##

引入   `const bodyParser = require('koa-bodyparser')`  
配置中间件  `app.use(bodyParser())`  
读取post数据 json格式   `ctx.request.body`

例1：

![20191107233532512.png][]

安装koa-views和ejs

cnpm i -S koa-views ejs

app.js

const Koa = require('koa')
    const app = new Koa()
    
    const router=require('Koa-router')()
    const views = require('koa-views')
    
    app.use(views('view',{
    	extension:'ejs'
      }))
      
    router.get('/',async (ctx)=>{
    	await ctx.render('index');
      })
      
    app.use(router.routes()).use(router.allowedMethods())
    app.listen(3000, () => {
    	console.log('Server Started...')
    })

index.ejs

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="/doAdd" method="post">
            用户名: <input type="text" name="username"/>
            <br/>
            密　码: <input type="password" name="password"/>
            <br/>
            <button type="submit">提交</button>
        </form>
    </body>
    </html>

刷新页面

![20191107211414462.png][]

此时来实现‘提交’的功能

app.js

const Koa = require('koa')
    const app = new Koa()
    
    const router=require('Koa-router')()
    const views = require('koa-views')
    var common = require('./module/common.js')
    
    app.use(views('view',{
    	extension:'ejs'
      }))
      
    router.get('/',async (ctx)=>{
    	await ctx.render('index');
      })
    
      router.post('/doAdd', async (ctx) => {
    	var data = await common.getPostData(ctx)
    	console.log(data)
    	ctx.body = data // 提交完成后给浏览器响应的数据
      })
      
    app.use(router.routes()).use(router.allowedMethods())
    app.listen(3000, () => {
    	console.log('Server Started...')
    })

common.js

exports.getPostData=function(ctx){
        //获取数据  异步
        return new Promise(function(resolve,reject){
          try{
            let str='';
            ctx.req.on('data',function(chunk){
              str += chunk;
            })
      
            ctx.req.on('end',function(chunk){
              resolve(str)
            })
          }catch(err){
            reject(err)
          }
        })
      }

![20191107233623982.png][]

点击提交

![20191107215904173.png][]=》![20191107215926918.png][]

如果使用**koa-bodyparser 中间件**的话，就不用上面的common.js了，很方便。安装**koa-bodyparser 中间件**

cnpm i koa-bodyparser -S

app.js

运行结果

![20191107220752600.png][]=》![20191107220816352.png][]

12.静态资源加载-koa-static

cnpm i koa-static -s

![20191107234846626.png][] ![20191107234907744.png][]

app.js

const Koa = require('koa')
    const app = new Koa()
    
    const path=require('path')  //这是node提供的
    const static = require('koa-static')
    
    // 配置静态资源
    const staticPath = './static'
    app.use(static(
        path.join( __dirname, staticPath)
    ))
    
    app.use( async ( ctx ) => {
    	ctx.body = 'hello world'
      })
      
    app.listen(4000, () => {
    	console.log('Server Started...')
    })

打开http://localhost:3000/ ,会显示

![20191107235034494.png][]

打开http://localhost:3000/lj.jpg   ,会显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8][]

13.图片文件上传-koa-multer中间件

安装koa-multer

cnpm i koa-multer -S

![20191111123219993.png][]

app.js

index.ejs

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="/upload" method="POST"  enctype="multipart/form-data">
    		<input type="file" name="file"><br>
    		<br>
    		<input type="submit">
    	</form>
    </body>
    </html>

运行效果

![20191111123330689.png][]![20191111123351544.png][]![20191111123401496.png][]

14.在koa中应用MongoDB

[https://www.cnblogs.com/yangzhou33/p/8996316.html][https_www.cnblogs.com_yangzhou33_p_8996316.html]

15.koa中使用cookie、session

[https://www.jianshu.com/p/593a762249f5][https_www.jianshu.com_p_593a762249f5]

[https://segmentfault.com/a/1190000019086415?utm\_source=tag-newest][https_segmentfault.com_a_1190000019086415_utm_source_tag-newest]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/ede6722781864ae6bd86f96f87a7d8bf.png
[20191107232019906.png]: /images/20210725/7c144934b7fc407b90e1db1c4cb405c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/b2c5a5038c644ef696ffe0a0970c87f8.png
[20191107232140437.png]: /images/20210725/e70ae11f351d49aaa4ab9078c740abaf.png
[https_blog.csdn.net_github_35186068_article_details_80518681]: https://blog.csdn.net/github_35186068/article/details/80518681
[https_jingyan.baidu.com_article_09ea3ede40cc2dc0aede392c.html]: https://jingyan.baidu.com/article/09ea3ede40cc2dc0aede392c.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/eadabacd7e2a4c21ab78d732e16d31a7.png
[http_localhost_3000]: http://localhost:3000/
[20191106102427768.png]: /images/20210725/b9db22ca6d7c404fa02b3e8b8cc4f09d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191106102645573.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20191106102628925.png]: /images/20210725/c07404dbbfb94104aa469ffce4e799ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2019110610410785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[2019110610412375.png]: /images/20210725/751edd288d6e400cb667fc930c29600b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/e0658a58e67b40028530725302b57253.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/201911061044387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20191106104510731.png]: /images/20210725/b42ac6bc7f104744b57f01c80966bd60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: /images/20210725/274a26f3cbf74ea08b8c3d29254841b7.png
[20191107233114751.png]: /images/20210725/35f1a990193c410aa79fcda919e23a34.png
[20191107233532512.png]: /images/20210725/e62eff471d8349e094d7d39da37e4c44.png
[20191107211414462.png]: /images/20210725/31d36b52b283450e9631e7bd81d708bc.png
[20191107233623982.png]: /images/20210725/b354f94c5d84439d88083397356c2003.png
[20191107215904173.png]: https://img-blog.csdnimg.cn/20191107215904173.png
[20191107215926918.png]: /images/20210725/7bfdb752ffc14e2ebfa221fe3c29529c.png
[20191107220752600.png]: https://img-blog.csdnimg.cn/20191107220752600.png
[20191107220816352.png]: /images/20210725/220effa3d6b944d3a6d670970f380dc9.png
[20191107234846626.png]: https://img-blog.csdnimg.cn/20191107234846626.png
[20191107234907744.png]: /images/20210725/95d46502cc8b4097b1cd48988cfbcf58.png
[20191107235034494.png]: /images/20210725/1c70c8554d1743bcb6c2eb20dec3cdba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8]: /images/20210725/1166635e74c6484baf44269f4e48e72d.png
[20191111123219993.png]: /images/20210725/52b7b063eb4a44a4a63d6b30efe166e0.png
[20191111123330689.png]: https://img-blog.csdnimg.cn/20191111123330689.png
[20191111123351544.png]: https://img-blog.csdnimg.cn/20191111123351544.png
[20191111123401496.png]: /images/20210725/e4eaee3ba85b415c9a0c585dc04cdb98.png
[https_www.cnblogs.com_yangzhou33_p_8996316.html]: https://www.cnblogs.com/yangzhou33/p/8996316.html
[https_www.jianshu.com_p_593a762249f5]: https://www.jianshu.com/p/593a762249f5
[https_segmentfault.com_a_1190000019086415_utm_source_tag-newest]: https://segmentfault.com/a/1190000019086415?utm_source=tag-newest