2018-09-08第十五天课

2018-09-08 本文已影响0人无欲而为

HTTP 监听客户端的请求 (地址和端口),默认端口是80
静态HTTP 服务器
koa 框架
更小,更精简,更健壮的框架

热重载: supervisor 装全局也可以
npm i -g supervisor
npm i supervisor
supervisor app 用这个命令启动app 服务器
Shift + "" 控制台.........
客户端发请求,从发到看到内容经历三个过程
服务器: 接收到请求(request)
处理请求 ,生成数据
发送数据 (response)
Koa : request -> middleware -> response
koa 处理了 request 和response ,我们需要做的是编写(注册) 中间件的过程
ctx: koa 处理过的对象 ,直接用就可以,,后期都是在中间件里写
webpack 实现了文件的加载,读取,-> loader ,plugin ->打包并且生成文件
ctx 全称变量 context 是一个对象还是一个属性
可以注册多个中间件
next : 中间件函数 : 迭代器
next() 判断当前用户是否有权限访问网站的内容 ,如果有,调用next函数.
提供了一些好用的API
Application -> Context -> (Request ,Response)
-Application = app
-异步函数: async await
-app.on("error,err => {}")
context 对象 : 对Request Response 进行了封装
-req : Node 中的Request 对象
-res : Node 中的Response 对象
注意: 在koa 中尽量使用koa 提供的封装对象
-state : 用户数据的存储空间
-app : 当前应用程序实例- Application 对象
500Koa 自动给出的错误服务器错误
-ctx.request 封装了很多的对象 : url method
-ctx.response 也封装了很多对象 : body
-ctx.attactment('a.txt') 美[əˈtætʃmənt] 下载一个txt 文件
ctx.body === ctx.response.body
Request 别名
vue ---> Angular koa ------> 全面大框架
中间件生态
koa-static-cache 静态文件代理服务中间件处理静态文件
koa-router 路由处理处理url映射
koa-swig 模版引擎
koa-bodyparser : body解析处理用户提交的数据
koa-multer : formDate解析处理二进制数据的中间件
路由: 映射

app.use(
    KoaStaticCache(__dirname + '/static',{
        // root:__dirname + '/static' //和上面的第一个参数效果一样
        prefix:'/public',//如果当前请求的的url 是以 '/public' 开始 ,则作为静态资源请求
    })
)


//定义在/user  上面的多个子路由: 用户首页和用户收货地址 
const userRouter = new Router();
router.use('/user', userRouter.routes());

userRouter.get('/',(ctx,next) => {
    ctx.body = '用户首页'
});

userRouter.get('/address',(ctx,next) => {
    ctx.body = '用户收货地址'
});

params pe le m s

//把 路由对象挂载到app对象中   一定要写在最后面
app.use( router.routes());

//定义在/user  上面的多个子路由: 用户首页和用户收货地址 
const userRouter = new Router();
userRouter.get('/',(ctx,next) => {
    ctx.body = '用户首页'
});

userRouter.get('/address',(ctx,next) => {
    ctx.body = '用户收货地址'
});
router.use('/user', userRouter.routes());

swing swɪŋ 模版引擎


const Koa = require('koa');//包装过的http
const Router = require('koa-router');
const Swig = require('koa-swig');
const co = require('co');

let users = [
    {username: 'mt'},
    {username: 'mt2'},
    {username: 'mt3'},
    {username: 'mt4'},
    {username: 'mt5'},
    {username: 'mt6'},
    {username: 'mt7'},
    {username: 'mt8'},
    {username: 'mt9'},
    {username: 'mt10'},
    {username: 'mt11'},
    {username: 'mt12'},
]


const app = new Koa();//创建 一个 Http 服务器 监听请求 等同于 http.createSsuperver
const router = new Router();



app.use(router.routes());


const render = Swig({
    root: __dirname + '/views',
    autoescape: true,
    cache: false,
    ext: '.html'
});
app.context.render = co.wrap(render);

router.get('/list', async (ctx, next) => {
    ctx.body = await ctx.render('list.html',{
        users
    });

});


app.listen(80);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1> SKT T1 K - {{Math.random()}} </h1>
    <ul>
        {%for user in users%}
        <li>{{user.username}}</li>
        {%endfor%}
    </ul>
    
</body>
</html>

2018-09-08第十五天课

猜你喜欢

热点阅读