Nodejs登录demo笔记

最近重温JavaScript，顺便学习了一下Nodejs。
一个能与用户交互的web程序，一般都是从登录做起。虽然有些东西还不是弄的很懂，但基本能实现交互的逻辑。
实现的逻辑：
1.用户访问域名（如http://localhost:3000），server需返回登录的表单。
2.用户输入用户名密码，submit请求登录。
3.服务器需获取用户名和密码，然后返回登录成功或失败的页面。

demo代码结构

node-login-demo/
|
+- controllers/
|  |
|  +- index.js <-- 处理首页的URL（这里直接返回登录表单）
|  |
|  +- signin.js <-- 处理用户登录的URL
|
+- app.js <-- 使用koa与koa-bodyparser的js
|
+- package.json <-- 项目描述文件
|
+- node_modules/ <-- npm安装的所有依赖包，这里用到（koa，koa-bodyparser,koa-router）

下面直接上代码。

建立服务，利用koa框架

app.js

const Koa=require('koa');
const bodyParser = require('koa-bodyparser');
const controller=require('./controller');
const app=new Koa();

app.use(bodyParser());
app.use(controller());

app.listen(3000);
console.log('app started at port 3000...');

controller.js，集中处理url，这里写好后，以后只需在controllers文件夹增加相应的url处理文件即可

const fs=require('fs');

function addMapping(router,mapping){
    for(var url in mapping){
        if(url.startsWith('GET ')){
            var path =url.substring(4);
            router.get(path,mapping[url]);
        }else if(url.startsWith('POST ')){
            var path=url.substring(5);
            router.post(path,mapping[url]);//
            
        }
        else{
            console.log(`invalid URL: ${url}`);
        }
    }
}
//自动扫描controllers目录，找到所有js文件，导入，然后注册每个URL：
function addControllers(router,dir){
    fs.readdirSync(__dirname+'/'+dir).filter((f)=>{
        return f.endsWith('.js');
    }).forEach((f)=>{
        let mapping =require(__dirname+'/'+dir+'/'+f);//加载一个js文件
        addMapping(router,mapping);
    })
}

module.exports=function(dir){
    let 
        controllers_dir=dir||'controllers',
        router=require('koa-router')();
        addControllers(router,controllers_dir);
        return router.routes();
}

package.json，引用依赖的包，填好好只需在根目录运行 `npm install`即可下载所有依赖

{
    "author": "fengxianqi",
    "name":"login demo",
    "version":"v0.0.0",
    "dependencies": {
        "koa": "2.0.0",
        "koa-bodyparser": "3.2.0",
        "koa-router": "7.0.0"
    }
}

controllers文件夹下面的两个文件

//index.js，/表示根域名，即用户访问http://localhost:3000/
module.exports={
    'GET /': async(ctx,next)=>{
        ctx.response.body=`<html>
    <head><title>Sign in</title></head>
    <body>
        <form id='editfile' method='post' action='/signin'>
    <input name="email" type="text"/>
    <input name="password" type="password"/>
    <input type='submit' value='提交'/>
</form>
    </body>
</html>`;
    }
}


//signin.js,用户提交post请求后处理

module.exports={
    'POST /signin':async(ctx,next)=>{
        var 
            email=ctx.request.body.email||'',
            pwd=ctx.request.body.password||'';
            console.log(ctx.request.body.email);
            if(email==='123'&&pwd==='123'){
                ctx.response.body='成功';
                ctx.response.title='登录成功';
            }
            else{
                ctx.response.body='密码错误';
                ctx.response.title='密码错误';
            }
    }
}

运行 `npm app.js` ，然后在浏览器访问`http://localhost:3000/`就可以看到等的界面

这里直接用 ctx.response.body 返回了页面的html代码，在日常的开发中是不可取的，一般会用到模板引擎渲染html或者直接返回写死的html文件，这里只是为了简便就没有用模板引擎。
刚开始学习也不是很懂，特别是很多npm包的用法没有很明白，接下来继续努力。

「一键投喂软糖/蛋糕/布丁/牛奶/冰阔乐！」