本文共 2467 字，大约阅读时间需要 8 分钟。

前言

自己前后也参与过几个Web项目，但技术框架杂乱，主要只负责部分工作，对Web应用整体结构理解不深入。技术总是服务于应用，这让我思考：如果有一个需求，我是否能从零开始完整搭建一个应用，而不是基于别人的框架修补？于是选择了当下流行且适合快速开发的框架进行练手，了解整个流程。

技术选型：Bootstrap + Node.js + Express + MySQL

项目目标是实现以下功能：

• 登录功能：用户合法性判断
• 主界面：菜单栏+功能区
• 功能：数据的查询与修改

登录界面

登录界面是应用的门面，选择一个高背景风格会让应用看起来更高大上。虽然美化不擅长，但可以直接搜索Bootstrap登录界面模板，免费且有多种选择，适合个人喜好。这里选择了欧美简约大气风格的模板。

前台逻辑： 点击登录按钮触发AJAX POST请求，发送用户名和密码。根据后台返回结果跳转到主界面或显示错误提示。

$("#login0").click(function() {
    var username = $("#username").val();
    var password = $("#password").val();
    var data = { "uname": username, "upwd": password };
    $.ajax({
        url: '/login',
        type: 'post',
        data: data,
        success: function(data) {
            if(data.status == 'success') {
                location.href = 'main';
            } else if(data.status == 'fail') {
                $("#loginTips").text("登录失败");
                $("#loginTips").toggleClass("hidden");
            }
        },
        error: function(data) {
            if(data.status == 'fail') {
                $("#loginTips").text("登录失败");
                $("#loginTips").toggleClass("hidden");
            }
        }
    });
});

后台逻辑： 使用Express的Router对象定义路由，通过req和res处理请求。res.json用于返回JSON格式的响应。

router.route("/login").get(function(req, res) {
    res.render("login", { title: 'User Login' });
}).post(function(req, res) {
    var uname = req.body.uname;
    var retFail = { status: 'fail' };
    var retSuccess = { status: 'success' };
    console.log("uname: " + uname);
    if(uname == "test") {
        res.json(retFail);
        return;
    }
    req.session.user = { uname: "han", upwd: "pwd" };
    res.json(retSuccess);
});

调试

使用Firefox进行前台调试，查看网络请求记录、方法类型、发送参数、响应数据和CSS样式。可以通过Network-tab和Console-tab深入了解前后台的交互。

Session

需求诞生背景： HTTP协议基于TCP/IP，使用短连接模式，无法标识不同请求之间的关系，因此需要引入Session。

生命周期：

常见用途：

• 登录判断
• 用户状态管理

常见问题：

• 关闭浏览器后仍能访问：Session未失效，SessionID存在Cookie中且有效。

过程中的问题

CSS示例：

.col-sm-offset-4 {
    margin-left: 33.33333333%;
}
.col-sm-4 {
    width: 33.33333333%;
}

div容器特性：

• div是块级元素，独占一行。

结论

通过本次项目实践，熟悉了从零开始搭建Web应用的流程，掌握了 Bootstrap、Node.js、Express 和 MySQL 的基本使用方法。虽然过程中遇到了一些问题，但通过调试和学习逐步解决了这些问题。