本篇博客为本人第一篇技术博客,用于交流与学习,有什么不妥之处,欢迎指正。
Node.js概要
Node.js是单线程应用程序,通过事件的回调支持并发,每一个异步事件都生成一个事件观察者,如果有时间发生,就调用该回调函数,所以性能很高。这一个特性也在读取文件的时候被充分利用。
路由
在开始代码之前,需要清楚http请求与路由的关系,以及后台如何进行操作。
我们看到这个请求:
http://localhost:8888/start?username=xie&id=15333333
引用url模块后对请求进行分析
url.parse(request.url).pathname == start
这里实际上是通过对客户端请求进行解析而去调用不同的函数
var string = url.parse(request.url).query == username=xie&id=15333333
这里则是提取出请求里面的信息通过以下方法访问各个键值对
querystring(string)[“username”] == xie
分析完路径之后,我们再来看路由器是如何处理不同的要求
先建立一个requestHandlers.js文件来定义不同路由决定的函数,并将其模块化。
function start() {
console.log("start");
}
function end() {
console.log("end");
}
exports.start = start;
exports.end = end;
之后在index.js文件中对不同请求建立映射,在route.js文件中对根据映射调用函数。
// index.js
var server = require("./server"),
router = require("./router");
requestHandlers = require("./requestHandlers");
var handle {};
handle["/"] = requestHandlers.start;
handle["/end"] = requestHandlers.end;
handle["/start"] = requestHandlers.start;
server.start(router.route);
// route.js
function route (handle, pathname) {
if (typeof handle[pathname] === "function") {
handle[pathname]();
} else {
console.error();
}
}
exports.route = route;
之前在index.js文件中已经调用了server.js中的start函数,这个函数是整个程序的驱动函数,如下我们定义这个start函数,对8080端口进行监听处理要求。
var http = require("http"),
url = require("url");
function start(route, handle) {
function Onrequest(request, response) {
var pathname = url.parse(request.url).pathname;
route(handle, pathname);
}
http.createServer(Onrequest).listen(8080);
}
exports.start = start;
至此,对于路由处理不同请求的模式已经介绍完毕。
注册程序
前端代码
该注册系统包含了两个页面,分别是注册时候的页面,和注册成功之后显示的信息页面。
- 注册页面的代码
//index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src = "index.js"></script>
</head>
<body>
<div id="all">
<form action=" http://localhost:8000/info " method="post">
<h1>用户注册</h1>
<p id="errorInfo">请输入信息</p>
<p>用户名<input type="text" name="username" id="username" value=""></p>
<p>学号<input type="text" name="id" id="id" value=""></p>
<p>电话<input type="text" name="phone" id="phone" value=""></p>
<p>邮箱<input type="text" name="email" id="email" value=""></p>
<p><input type="submit" id="submit" value="提交">
<input type="button" id="reset" value="重置"></p>
</div>
</body>
</html>
//index.css
body {
width: 300px;
height: 500px;
margin:auto;
padding-top: 100px;
font-family: "黑体";
font-size: 15pt;
position: relative;
background-image: url("back