您的位置:首页 >> LNMPA >> 和屌丝一起学Node.js—web开发3
和屌丝一起学Node.js—web开发3
[ 孤狼 | 2017-08-14 17:28:18 | LNMPA ]
声  明

本教程仅用于初学Node.js同学使用,内容由本人(孤狼)学习过程中笔记编写,本教程使用Node.js版本为6.11.1。本教程内容可以自由转载,但必须同时附带本声明,或注明出处。PAEA.CN版权所有。

好了,目前来说我们已经基本学习完Node.js的基本用法了,那么我们来实际测试一下吧.我们就做个最基本的用户登录吧.



首先我们要安装一下express框架

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

1.jpg

然后我们输入账户:张三 密码:123456,然后点击登录

2.jpg


后期验证用户这部就需要连接数据库来判断.

OK先到这里.


本节代码下载:链接: https://pan.baidu.com/s/1o7NI8Tc 密码: 9sb2

转载请注明出处:http://gl.paea.cn/lnmpa/content/2017/08/14/115.html