| 声 明 |
本教程仅用于初学Node.js同学使用，内容由本人（孤狼）学习过程中笔记编写，本教程使用Node.js版本为6.11.1。本教程内容可以自由转载，但必须同时附带本声明，或注明出处。PAEA.CN版权所有。 |
好了,目前来说我们已经基本学习完Node.js的基本用法了,那么我们来实际测试一下吧.我们就做个最基本的用户登录吧.
首先我们要安装一下express框架
孤狼 | 
2019-08-18 05:38:59 | 
3430°C | 
0条评论 ]npm install express --save
npm install express-generator -g
express --view=ejs login
cd login&&npm install
set DEBUG=myapp:* & npm start然后我们来制作一下登录界面
login\views\index.ejs
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<style>
html,body{margin:0;padding:0;height:100%;}
body{background-color: rgb(32, 32, 32);}
.login_box{position: absolute;background: #fff;top: 300px;left: 50%;width: 400px;height: 300px;margin-left: -200px;border-radius: 20px;}
.login_name{height: 40px;line-height: 40px;text-align: center;margin-top: 50px;}
.login_pass{height: 40px;line-height: 40px;text-align: center;}
.login_but{height: 40px;line-height: 40px;text-align: center;margin-top: 50px;}
.login_but button{width: 200px;height: 40px;background: rgb(213, 0, 0);border: 0;color: #fff;border-radius: 10px;}
</style>
</head>
<body>
<div class="login_box">
<form name="f1" action="http://127.0.0.1:3000/login" method="post">
<div class="login_name">
账户:<input type="text" id="username" name="username">
</div>
<div class="login_pass">
密码:<input type="password" id="password" name="password">
</div>
</form>
<div class="login_but">
<button onclick="login()">登录</button>
</div>
<script>
function login(){
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
if(!username){
alert("请输入账户");
return false;
}else if(!password){
alert("请输入密码");
return false;
}else{
document.f1.submit();
}
}
</script>
</div>
</body>
</html>login\views\login.ejs
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<style>
html,body{margin:0;padding:0;height:100%;}
body{background-color: rgb(32, 32, 32);}
.login_box{position: absolute;background: #fff;top: 300px;left: 50%;width: 400px;height: 300px;margin-left: -200px;border-radius: 20px;}
.username{height: 100px;text-align: center;line-height: 100px;font-size: 20px;font-weight: bold;color: rgb(16, 0, 255);}
.word{text-align: center;}
</style>
</head>
<body>
<div class="login_box">
<div class="username"><%= username %></div>
<div class="word">登录<%= status %></div>
</div>
</body>
</html>然后我们来制作一下登录操作的控制器
login\routes\index.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;login\routes\login.js
var express = require('express');
var router = express.Router();
router.post('/', function(req, res, next) {
//使用req.query.参数 来接收GET数据
//使用req.body.参数 来接收POST数据
var username=req.body.username;
var password=req.body.password;
if(username=='张三'&&password=='123456'){
res.render('login', { status: '成功',username:username});
}else{
res.render('login', { status: '失败',username:username});
}
});
module.exports = router;然后我们把刚才的控制器加入启动器里
login\app.js
var login = require('./routes/login');
/*...*/
app.use('/login', login);好啦,现在开始运行.记得重启服务器
set DEBUG=myapp:* & npm start打开127.0.0.1:3000
然后我们输入账户:张三 密码:123456,然后点击登录
后期验证用户这部就需要连接数据库来判断.
OK先到这里.
本节代码下载:链接: https://pan.baidu.com/s/1o7NI8Tc 密码: 9sb2
赞赏一个鸡腿
