网页版餐厅点餐系统（三）
继续我们的任务，在views目录下新建header.ejs文件代码如下<ul class="nav nav-pills"><li role="presentation" class="active"><a href="/">Home</a></li>
<li role="presentation" class="active"><a href="regist">注册</a></li>
<li role="presentation" class="active"><a href="signin">登录</a></li>
</ul>
把上次建home.ejs文件修改为<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>FISHC RESTAURANT</title>
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">
<script src="bootstrap3/js/jquery.min.js"></script>
<script src="bootstrap3/js/bootstrap.min.js"></script>
</head>
<body class="container">
<%include header.ejs%>
<h1 class="page-header text-center">Welcome to my homepage</h1>
<p class="text-success">本餐厅采用优质伊拉克甲鱼，个头硕大，适于红烧，清炖各种做法。口感较好。品味独特。</p>
<img src="http://img.sucai.redocn.com/attachments/images/200909/20090918/20090918_8de29be1060bf3373acebLRHrYy3fFES.jpg" alt="甲鱼图" class="img-thumbnail">
</body>
</html>
然后启动服务器在网站上就会有一个导航栏。
接下来做登录界面的路由，在上次建的启动文件里添加一行app.get('/regist', function (req,res,next) {
res.render('./regist.ejs');
});代码，然后在views目录下新建regist.ejs文件，代码如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>FISHC RESTAURANT</title>
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">
<script src="bootstrap3/js/jquery.min.js"></script>
<script src="bootstrap3/js/bootstrap.min.js"></script>
<script>
var name=[];
$.post(
'/myjson',
function (data) {
for(i=0;i<data.length;i++){
name=data.username;
}
});
</script>
</head>
<body class="container">
<%include header.ejs%>
<h1 class="page-header text-center">Welcome to regist page</h1>
<div class="input-group">
<span class="input-group-addon">@</span>
<input id="username" style="ime-mode:disabled" type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input id="password" type="password" class="form-control" placeholder="password">
</div>
<button onclick="fn()" class="btn btn-default">submit</button>
<div class="text"></div>
<script type="text/javascript" charset="utf-8">
function fn(){
un = $('#username').val();
pw = $('#password').val();
if(name.indexOf(un)==-1) {
$.post('/doregist', {
'username': un,
'password': pw
}, function (result) {
if (result == '0') {
$('.text').html('您的用户已创建成功，请手动进行登录');
}
});
}else{
$('.text').html('您的用户名与别人重复，请另起个用户名');
}
}
</script>
</body>
</html>
这里我们是用的ajax做的注册页面，因为还没在服务器上建路由，所以按提交按钮没什么作用（ajax技术是不用刷新页面就可以提交内容）。网页上面的script标签里是从myjson路由提取内容到name数组里，下面script标签里的fn（）函数只起一个验证表单如果没有重复的用户名，就把数据上传到doregist路由里。我们下面就做这个doregist路由，把主启动文件修改为：var express = require('express');
var doregist = require('./control/doregist.js');
var app = express();
app.set('view engine','ejs');
app.use(express.static('./public'));
app.get('/',function(req,res,next){
res.render('./home.ejs');
});
app.get('/regist', function (req,res,next) {
res.render('./regist.ejs');
});
app.post('/doregist',doregist);
app.listen(3000);
因为上边require了一个我的doregist.js文件，所以也要建这个文件，在主目录下新建control目录，在control目录下新建doregist.js文件，明天我们再往里写代码，因为要涉及到数据库{:10_323:}
页:
[1]