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

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

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

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

nodemon app.js

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

https://jingyan.baidu.com/article/09ea3ede40cc2dc0aede392c.html

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

 

5，刷新页面

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

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

 

7，使用koa-json。

输出：

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

安装koa-json

cnpm i koa-json -D

app.js中引入koa-json

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

输出：

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())

 

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')
})

运行效果：

 

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：

安装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>

 刷新页面

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

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)
      }
    })
  }

 

点击提交

=》

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

cnpm i koa-bodyparser -S

app.js

const Koa = require('koa')
const app = new Koa()

const router=require('Koa-router')()
const views = require('koa-views')

var bodyParser = require('koa-bodyparser')
app.use(bodyParser());

app.use(views('view',{
	extension:'ejs'
  }))
  
router.get('/',async (ctx)=>{
	await ctx.render('index');
  })

  router.post('/doAdd', async (ctx) => {
	console.log(ctx.request.body);
	ctx.body = ctx.request.body;  //获取表单提交的数据
  })
  
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000, () => {
	console.log('Server Started...')
})

 运行结果

=》

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

cnpm i koa-static -s

 

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/ ,会显示

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

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

安装koa-multer

cnpm i koa-multer -S

app.js

const Koa = require('koa')
const app = new Koa()

const router=require('Koa-router')()
const views = require('koa-views')

const multer = require('koa-multer');

var storage = multer.diskStorage({
	//定义文件保存路径
	destination:function(req,file,cb){
	    cb(null,'./upload/');//路径根据具体而定。如果不存在的话会需要手动创建一个路径
	},                       
	//修改文件名
	filename:function(req,file,cb){
	    var fileFormat = (file.originalname).split(".");
    	    cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
	}
})
 
var upload = multer({ storage: storage });

app.use(views('view',{
	extension:'ejs'
  }))
  
router.get('/',async (ctx)=>{
	await ctx.render('index');
  })

router.post('/upload',upload.single('file'), async (ctx, next) => {
	ctx.body = {
	  filename: ctx.req.file.filename  //返回文件名 
	}
  })

app.use(router.routes()).use(router.allowedMethods())
app.listen(4000, () => {
	console.log('Server Started...')
})

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>

 运行效果

14.在koa中应用MongoDB

https://www.cnblogs.com/yangzhou33/p/8996316.html

15.koa中使用cookie、session

https://www.jianshu.com/p/593a762249f5

https://segmentfault.com/a/1190000019086415?utm_source=tag-newest

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue