三、koa 框架#
nodejs框架介绍#
Express 框架
koa框架, 完全支持es6
egg.js框架 阿里开源的
hapi 沃尔玛开源
nestjs 框架, 完全支持ts
(一) koa服务器之hello world#
-
初始化package.json
新建目录koademo并用vscode打开 ,执行 npm init -y
-
创建一个简单的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')
});
- 执行node app.js
- 用浏览器访问 http://localhost:3000
(二) koa服务器完整版#
-
新建server文件夹, 执行
npm init -y
-
添加下面几个文件
package.json, app.js, router.js
-
执行
npm i
-
运行
nodemon app
获取npm run dev
npm i nodemon -g // 使用nodemon app代替node app, 好处是修改了代码不用重启服务器
-
使用浏览器打开
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,因为在此系统中禁止执行脚本。
解决办法:
- 管理员权限打开cmd 输入powershell
- 执行:set-ExecutionPolicy RemoteSigned
- 查看结果是否为RemoteSigned:get-ExecutionPolicy