摘要：前言這是一個(gè)基于實(shí)現(xiàn)的一個(gè)簡(jiǎn)單登入例子，對(duì)于剛上手想進(jìn)一步了解，前端頁(yè)面如何請(qǐng)求到服務(wù)層路由處理數(shù)據(jù)庫(kù)操作返回結(jié)果到頁(yè)面這整個(gè)過(guò)程的同學(xué)比較有用。我們來(lái)看下登入請(qǐng)求處理。操作演示演示用戶(hù)名不存在，密碼錯(cuò)誤及成功登入。

這是一個(gè)基于node實(shí)現(xiàn)的一個(gè)簡(jiǎn)單登入例子，對(duì)于剛上手node想進(jìn)一步了解，前端頁(yè)面如何請(qǐng)求到服務(wù)層 -> 路由處理 -> 數(shù)據(jù)庫(kù)操作 -> 返回結(jié)果到頁(yè)面這整個(gè)過(guò)程的同學(xué)比較有用。這個(gè)例子基于github上兩個(gè)項(xiàng)目（文末有鏈接），自己整理改寫(xiě)，希望有需要的同學(xué)可以看到。

項(xiàng)目源碼地址：https://github.com/linwalker/...

node 使用 Koa框架，node版本7.6以上可以直接使用async/await;

使用mongoose來(lái)與Mongodb數(shù)據(jù)庫(kù)連接交互;

前端使用react與antd-design組件;

webpack 打包構(gòu)建

node.js >= 7.6

mongodb 安裝

robomongo 安裝 （mongodb的可視化工具）

mongodb 新建名為node-login的數(shù)據(jù)庫(kù)，并開(kāi)啟；

npm install 安裝依賴(lài)

npm run build 代碼構(gòu)建

node app 開(kāi)啟服務(wù)，可以訪(fǎng)問(wèn)localhost:3003/home

node-login
    |-- components                   //頁(yè)面組件
        |-- LoginTab.js
        |-- RegisterTab.js
    |-- controller          //路由回調(diào)處理
        |-- user-info.js
    |-- models                 //用戶(hù)模型
        |-- user.js
    |-- pages                    //頁(yè)面js
        |-- home
            |-- home.js
            |-- index.js
        |-- main
    |-- routes                    //路由
    |-- static                    //靜態(tài)文件
    |-- tools                    //webpack構(gòu)建文件
    |-- views                    //頁(yè)面模版
    |-- .babelrc
    |-- app.js                    //入口文件
    |-- config.js                //配置文件
    |-- package.json
    

const Koa = require("koa");
const...
const app = new Koa();

// 配置控制臺(tái)日志中間件
app.use(convert(koaLogger()));

// 使用ctx.body解析中間件
app.use(bodyParser());

// 配置服務(wù)端模板渲染引擎中間件
app.use(views(path.join(__dirname, "./view"), {
    extension: "ejs"
}));

// 配置靜態(tài)資源加載中間件
app.use(convert(koaStatic(
    path.join(__dirname , "./static")
)))

mongoose.Promise = global.Promise;
mongoose.connect(config.database);

// 初始化路由中間件
app.use(routers.routes()).use(routers.allowedMethods())

app.listen(3003);
console.log("The server is on prot 3003")

服務(wù)主要進(jìn)行數(shù)據(jù)庫(kù)連接，路由處理，靜態(tài)文件配置和頁(yè)面模板渲染。

module.exports = {
    "secrect": "linwalkernodelogindemo", //暫未用到，用于后期token驗(yàn)證
    "database": "mongodb://localhost:27017/node-login"http://填寫(xiě)本地 mongodb 連接地址
};

主要設(shè)置連接mongodb數(shù)據(jù)的連接地址

定義登入注冊(cè)的用戶(hù)模型

const mongoose = require("mongoose");
const Schema = mongoose.Schema
const UserSchema = new Schema({
    username: {
        type: String,
        unique: true,
        require: true
    },
    password: {
        type: String,
        require: true
    },
    email: {
        type: String,
    }
});

module.exports = mongoose.model("User", UserSchema);

用戶(hù)模型主要三個(gè)數(shù)據(jù)，用戶(hù)名，密碼和郵箱。

路由總?cè)肟?b>/routes/index.js引入所有路由，使用koa-router中間件

const router = require("koa-router")();
const home = require("./home");
const main = require("./main");
const editor = require("./editor");

router.use("/home", home.routes(), home.allowedMethods());
router.use("/main", main.routes(), main.allowedMethods());
router.use("/editor", editor.routes(), editor.allowedMethods());

module.exports = router;

三個(gè)主路由為/home,/main/和/editor，主要來(lái)看下/home：

const router = require("koa-router")();
const userInfoController = require("./../controller/user-info");

const routers = router
    .get("/", async (ctx) => {
        const title = "login home";
        await ctx.render("home", {
            title
        })
    })
    .post("/signup", userInfoController.signUp)
    .post("/signin", userInfoController.signIn)

module.exports = routers;

home.js的get請(qǐng)求返回home頁(yè)面，兩個(gè)post請(qǐng)求，分別是注冊(cè)和登入處理。我們來(lái)看下登入請(qǐng)求處理user-info.js。

const User = require("./../models/user");

module.exports = {
    async signUp (ctx) {
        ...
    },

    async signIn (ctx) {
        let result = {
            success: false,
            message: "用戶(hù)不存在"
        };
        //從請(qǐng)求體中獲得參數(shù)
        const { username,  password } = ctx.request.body;
        //檢查數(shù)據(jù)庫(kù)中是否存在該用戶(hù)名
        await User.findOne({
            username
        }, (err, user) => {
            if (err) {
                throw err;
            }
            if (!user) {
                ctx.body = result;
            } else {
                //判斷密碼是否正確
                if (password === user.password) {
                    ctx.body = {success: true, message: "登入成功"}
                } else {
                    ctx.body = {success: false, message: "密碼錯(cuò)誤"}
                }
            }
        })
    }
}

登入請(qǐng)求處理過(guò)程為先檢查用戶(hù)名是否存在，在判斷密碼是否正確。在來(lái)看下頁(yè)面發(fā)起請(qǐng)求的地方

class LoginTab extends React.Component {
    handleSubmit = async(e) => {
        e.preventDefault();
        let values = await this.getFormValues();
        if (values) {
            fetch("/home/signin", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json; charset=utf-8"
                },
                body: JSON.stringify(values)
            }).then(res => {
                res.json().then(res => {
                    Message.info(res.message);
                    if (res.success) {
                        location.href = "/main";
                    }
                })
            })
        }
    }
    getFormValues() {
        let self = this;
        return new Promise((resolve, reject) => {
            self.props.form.validateFields((err, values) => {
                if (!err) {
                    resolve( values );
                } else {
                    reject( false );
                }
            })
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            

                

                              ...      
                
            
        )
    }
}
export default Form.create()(LoginTab);

表單提交按鈕綁定handleSubmit事件，該事件先獲取表單提交數(shù)據(jù)，再發(fā)起/home/signin的post請(qǐng)求，根據(jù)請(qǐng)求結(jié)果的success值，來(lái)決定是否跳轉(zhuǎn)到成功頁(yè)面。這里用到antd-design表單組件的相應(yīng)屬性。

演示用戶(hù)名不存在，密碼錯(cuò)誤及成功登入。

使用了koa框架，主要是路由和ctx上下文的處理，沒(méi)用過(guò)的同學(xué)可以點(diǎn)擊koa2教程去看看，這是koa的一個(gè)入門(mén)教程寫(xiě)的很不錯(cuò)；

使用了mongoose操作數(shù)據(jù)庫(kù)，栗子中涉及的不難，只是一個(gè)User模型，一個(gè)save保存數(shù)據(jù)和一個(gè)findOne查找，看下文檔就明白，或則看下這篇文章

使用antd-design 組件

這個(gè)例子主要參考了：
項(xiàng)目1
項(xiàng)目2