koa框架

三、koa 框架#

nodejs框架介绍#

Express 框架

koa框架, 完全支持es6

egg.js框架 阿里开源的

hapi 沃尔玛开源

nestjs 框架, 完全支持ts

• nodejs框架介绍
• (一) koa服务器之hello world
• (二) koa服务器完整版
• (三) mockjs
• (四) 小项目实战
  • 项目源码下载地址
  • (1) 列表页面
  • (2) 详情页面
  • (3) 添加页面
• (五) 在vscode中不能使用nodemon的解决办法

(一) koa服务器之hello world#

1. 初始化package.json

   新建目录koademo并用vscode打开 ，执行 npm init -y

2. 创建一个简单的koa应用（hello world）

   安装koa模块 npm install koa --save // 有些电脑需要安装指定版本 npm i koa@2.12 在项目根目录新建app.js，app.js代码如下：

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

app.use(function(ctx) {
  ctx.body = 'Hello World';
});

app.listen(3000,function() {
    console.log('服务已启动, 在http://localhost:8888')
});

1. 执行node app.js
2. 用浏览器访问 http://localhost:3000

(二) koa服务器完整版#

1. 新建server文件夹, 执行npm init -y

2. 添加下面几个文件package.json, app.js, router.js

3. 执行 npm i

4. 运行 nodemon app 获取 npm run dev

   npm i nodemon -g  // 使用nodemon app代替node app, 好处是修改了代码不用重启服务器
   

5. 使用浏览器打开 http://localhost:8888

package.json 代码

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "2.12",
    "koa-body": "4.2.0",
    "koa-router": "10.0.0",
    "mockjs": "1.1.0"
  },
  "devDependencies": {
    "koa-static": "5.0.0"
  }
}

app.js代码

var Koa = require("koa");
var app = new Koa();

// 设置静态资源目录
var koaStatic = require("koa-static");
app.use(koaStatic(__dirname + "/public"));
// 用来获取post请求参数
var koaBody = require("koa-body");
app.use(koaBody());

// 跨域设置 
app.use(function (ctx,next) {
  ctx.set("Access-Control-Allow-Origin", "*");
  ctx.set("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
  // 请求头设置
  ctx.set(
    "Access-Control-Allow-Headers",
    `Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild,x-token,sessionToken,token`
  );
  if (ctx.method == "OPTIONS") {
    ctx.body = 200;
  } else {
    next();
  }
});

// 添加路由
var router = require("./router");
app.use(router.routes());

app.listen(8888, function () {
  console.log("服务已启动, 在http://localhost:8888");
});

router.js代码

// 1.导入koa-router
var Router = require("koa-router"); 

// 2.创建一个router对象
var router = new Router();

router.all('/',function(ctx) {
  ctx.body = `<h3>用户管理小项目接口列表</h3>
  <ul>
      <li>
          <a target="_self" href="/list">用户列表</a>
      </li>
      <li>
          <a target="_self" href="/detail">用户详情</a>
      </li>
      <li>
          <a target="_self" href="/add">增加用户</a>
      </li>
      <li>
          <a target="_self" href="/edit">修改用户</a>
      </li>
  </ul>`;
})

// 列表接口
router.all("/list", function (ctx) { 
  ctx.body = '列表';
});
router.all("/add", function (ctx) { 
    ctx.body = '增加';
}); 

// 详情接口
router.all("/detail", function (ctx) {
    ctx.body = '详情';
});
router.all("/edit", function (ctx) {
  ctx.body = "修改";
});

// 删除接口
router.all("/del", function (ctx) {
  ctx.body = '删除';
});

// 导出路由对象
module.exports = router;

(三) mockjs#

mockjs用来模拟数据

var Mock = require('mockjs');
var name = Mock.Random.name();
var cnname = Mock.Random.cname();
console.log(name);
console.log(cnname);

常用方法

1. Random.boolean()   随机布尔值
2. Random.integer( min?, max? )  随机整数min-max之间
3. Random.string( pool?, min?, max? )   随机字符串
4. Random.date( format? )  随机日期
5. Random.word( min?, max? ) 随机字母
6. Random.cparagraph( min?, max? )   中文段落
7. Random.csentence( min?, max? )   中文句子
8. Random.cword( pool?, min?, max? )  汉字
9. Random.name( middle? )  姓名
10. Random.cname()  中文姓名
11. Random.city( prefix? )  市   （prefix是否带前缀省，值为boolean）
12. Random.county( true? )  区县  (true是否带缀省，市)

使用正则

// 生成一个对象
var Mock = require('mockjs'); 
var mock = Mock.mock;
var obj = {
    name: mock(/[a-z]{5}/),
    age: mock(/2[0-9]/),
    sex: mock(/[男女]/)
}
console.log(obj);

// 生成多个
var Mock = require('mockjs'); 
var mock = Mock.mock;  
function made(num) {
    var list = [];
    for(var i=0;i<num;i++) {
        var obj = {
            name: mock(/[a-z]{5}/),
            age: mock(/2[0-9]/),
            sex: mock(/[男女]/)
        }
        list.push(obj);
    }
    return list;
}

var list = made(5);
console.log(list);
// 写入到当前目录的users.json文件中
var fs = require('fs');
fs.writeFileSync('users.json',JSON.stringify(list));

(四) 小项目实战#

项目源码下载地址#

http://soft.huruqing.cn/code/用户管理小项目.zip

http://soft.huruqing.cn/code/用户管理小项目(带编辑).zip

http://soft.huruqing.cn/code/用户管理小项目(mongodb).zip

(1) 列表页面#

模拟数据 data.js

// 生成一个对象
var Mock = require('mockjs'); 
var mock = Mock.mock; 
var Random = Mock.Random; 

function made(count) {
    var list = [];
    for(var i=0;i<count;i++) {
        var obj = {
			userId: mock('@id'),
            name: Random.name(),
            nickName: Random.cname(),
            age: mock(/2[0-9]/),
            sex: mock(/[男女]/),
            work: mock(/前端工程师|java工程师|UI妹子|测试妹子/),
            hobby: mock(/(篮球)? (足球)? (羽毛球)? (乒乓球)?/)
        }   
        list.push(obj);  
    }
    return list;
}

var list = made(5);
console.log(list);

var fs = require('fs');
fs.writeFileSync('users.json',JSON.stringify(list));

列表接口

// 列表接口
router.all("/list", function (ctx) { 
  // 写列表的逻辑, 返回响应的数据
  var users = require('./users.json');
  ctx.body = users;
});

(2) 详情页面#

(3) 添加页面#

获取请求参数

• get请求使用ctx.query.xxx来获取
• post请求使用ctx.request.body来获取

(五) 在vscode中不能使用nodemon的解决办法#

执行nodemon app 出现以下错误的解决办法

无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\nodemon.ps1，因为在此系统中禁止执行脚本。

解决办法:

1. 管理员权限打开cmd 输入powershell
2. 执行：set-ExecutionPolicy RemoteSigned
3. 查看结果是否为RemoteSigned：get-ExecutionPolicy