基于Bootstrap+Nodejs的Web应用（一）

前言

自己前后也参与了几个web项目，但技术框架杂，也只参与部分工作，对web应用整体的结构懵懂的很。
同时，觉得技术总是服务于应用。简单地说，如果有一个需求，自己能否从0开始完整的搭一个，不管用哪种技术，而不是基于别人的底子修修补补。
于是，选择了当下流行、适合快速开发的框架做个练手，搞清楚整个流程是怎么回事。
技术选型：bootstrap+nodejs+express+mysql。
将实现的功能包括：

1. 登陆：用户合法性判断
2. 主界面：菜单栏+功能区
3. 功能：数据的查询修改。

github代码：https://github.com/heroicpoem/nodejs

首先是登陆功能。

1.登陆界面

基本布局

登陆界面是应用的面子，一个高BG风格会让应用也高大上许多。美化不擅长，直接搜索bootstrap登陆界面会有好多模板，选择喜欢的就好。
个人喜欢欧美简约大气风格。
这里就好多模板，免费！https://templatemag.com/smash/

基本方法

1. 用ajax向后台post请求
2. 后台获取request传递的用户名+密码
3. 后台校验返回结果
4. 前台根据结果跳转主界面

2.登陆动作

前台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 = 'mian';
                    }else if(data.status == 'fail'){
                        $("#loginTips").text("登陆失败");
                        $("#loginTips").toggleClass("hidden");
                    }
                },
                error: function(data){ 
                    if(data.status == 'fail'){ 
                        $("#loginTips").text("登陆失败");
                        $("#loginTips").toggleClass("hidden");
                    }
                }
            });
        });

后台判断

1. Express的router对象，用路由+方法定义入口。
2. req、res：http必备的请求和响应。
3. res.json：返回json类型的响应
   ps：感觉用模板+数据模式是后台控制前台路径，不灵活。不如简单地做业务接口，故一般用res.json。

router.route("/login").get(function(req,res){    // 到达此路径则渲染login文件，并传出title值供 login.html使用
	//res.render:模板login.html,title参数转换成'User Login'
	res.render("login",{title:'User Login'});
}).post(function(req,res){ 					   // 从此路径检测到post方式则进行post数据的处理操作
	//获取参数
	var uname = req.body.uname;				//获取post上来的 data数据中 uname的值
	var retFail={status:"fail"};
	var retSuccess={status:"success"};
	console.log("!!!!!!!!!!uname:"+uname);
	if(uname=="test"){
		res.json(retFail);
		return;
	};
	console.log("!!!!!!!!!!!!!!!!!!4"+"成功");
	req.session.user = {uname:"han",upwd:"pwd"};
	//res.redirect("/main");
	//res.render("main",{title:'main',uname:'hello world'}); 
	res.json(retSuccess);
	console.log("!!!!!!!!!!!!!!!!!!5"+"成功");
	
});

3.调试

用firefox做前台调试，简直如鱼得水！
可以：

• 在【网络页签】可以查看URL请求记录
• 查看方法类型：get、post
• 查看发送的参数：看变量名与后台是否一致
• 查看发送的cookie：了解cookie的作用机制
• 查看响应数据：看后台res返回的数据正确不
• 查看标签样式：看都有哪些样式，哪些被覆盖

4.session

诞生的需求

http是基于TCP\IP的应用层协议，使用请求-响应-结束的短连接模式。这样这次请求与上次请求有什么关系，就没有办法标志。于是有了session。

生命周期

1. 每次请求，服务器端检查有没有sessionid，无 则创建并返回，保存在client的cookie中
2. 后续browser每次请求，都会带上cookie中的sessionid
3. server根据sessionid判断请求的

常用来进行登录判断。

答疑

1. 为什么登陆后，关闭浏览器，可以直接访问？
   &：session没有失效（失效的条件都没有触发：1、超过20mi；2、cookie失效）
   sessionid存在cookie中，且有效，浏览器重启后，仍然随请求发到server，session也活在server中，故直接登陆。

5.过程中的问题

1. location.href
   &：页签页面打开url。还有其他几种用法：
   父页面打开url：parent.location.href="/url"
   顶层页面打开url：top.location.href="/url"
2. css选择器：多个，父标签之下子标签
   &：元素关系：
   并列： 一次指定多个。 :div,p
   嵌套： 指定x元素下y元素，包含父子关系。 :div p
   父子： 指定父元素x下的y元素，比嵌套更严格。 :div>p
   ps：容易搞混的是并列和嵌套。因为在html中，元素同时指定多个是class=‘class1 class2’，没有,；css选择器中是嵌套关系。
   全部的选择关系，可以参考：link:css选择器
3. bootstrap一些基本原理：
   自适应的原理：使用了百分比方式设定宽度；eg：col-sm-4，是4/12=33%，设置成了父容器的33%的宽度。
   默认左对齐，如果要居中，则使用offset，实际是左外边距。offset-4就是做外边距是父容器的33%。

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

div是block容器，独占一行。