node.js 使用express模板 写登录 注册界面

view文件夹:

登录网页:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>kinjaz-Arena</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="stylesheets/style.css" />

<body>

<div class="login-container">
	<h1>kinjaz-Arena大赛VIP登录</h1>
	
	
	<form action="/login" method="post" id="loginForm">
		<div>
			<input type="text" name="username" class="username" placeholder="用户名" autocomplete="off"/>
		</div>
		<div>
			<input type="password" name="password" class="password" placeholder="密码" oncontextmenu="return false" onpaste="return false" />
		</div>
		<button id="submit" type="submit" onclick="login()">登 录</button>
	</form>

	<a href="register">
		<button type="button" class="register-tis" >还有没有账号?</button>
	</a>

</div>


<!-- <script src="javascripts/common.js"></script> -->
<script src="javascripts/jquery.min.js"></script>
<script src="javascripts/common.js"></script>
<!--背景图片自动更换-->
<script src="javascripts/supersized.3.2.7.min.js"></script>
<script src="javascripts/supersized-init.js"></script>
<!--表单验证-->
<script src="javascripts/jquery.validate.min.js?var1.14.0"></script>



</body>
</html>

注册网页:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jQuery背景切换注册登录模板</title>
<link rel="stylesheet" href="css/style.css" />
<body>

<div class="register-container">
	<h1>ShareLink</h1>
	
	<div class="connect">
		<p>Link the world. Share to world.</p>
	</div>
	
	<form action="" method="post" id="registerForm">
		<div>
			<input type="text" name="username" class="username" placeholder="您的用户名" autocomplete="off"/>
		</div>
		<div>
			<input type="password" name="password" class="password" placeholder="输入密码" oncontextmenu="return false" onpaste="return false" />
		</div>
		<div>
			<input type="password" name="confirm_password" class="confirm_password" placeholder="再次输入密码" oncontextmenu="return false" onpaste="return false" />
		</div>
	
		<div>
			<input type="text" name="phone_number" class="phone_number" placeholder="输入手机号码" autocomplete="off" id="number"/>
		</div>
		<div>
			<input type="email" name="email" class="email" placeholder="输入邮箱地址" oncontextmenu="return false" onpaste="return false" />
		</div>

		<button id="submit" type="submit">注 册</button>
	</form>
	<a href="index.html">
		<button type="button" class="register-tis">已经有账号?</button>
	</a>

</div>


<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<!--背景图片自动更换-->
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<!--表单验证-->
<script src="js/jquery.validate.min.js?var1.14.0"></script>

</body>
</html>
<!--
本代码由js代码收集并编辑整理;
尊重他人劳动成果;
转载请保留js代码链接 - www.jsdaima.com
-->

登录成功网页:

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>kinjaz-home</title>
</head>
<body>
    <h3>欢迎进入kinjaz舞团VIP席</h3>
</body>
</html>

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var ejs    = require('ejs');
var session=require('express-session');
// var jsdom = require('jsdom');
// const {JSDOM} = jsdom;
// const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;
// global.document = document;
// global.window = document.defaultView;
 
global.jQuery = require('jquery');
// const $= require('jquery')(require("jsdom").jsdom().defaultView);

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var loginRouter = require('./routes/login');
var registerRouter=require('./routes/register');
var homeRouter=require('./routes/home')

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('.html',ejs.__express);
app.set('view engine','html');


app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser("123"));
app.use(session({
secret:"123",
cookie:{maxAge:6000*20*3},
resave:false,
saveUninitialized:true
  
}));
app.use(express.static(path.join(__dirname, 'public')));

// app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/login',loginRouter);
app.use('/register',registerRouter);
app.use('/home',homeRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

routes文件夹:
home.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

login.js:

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('login');
  next();
});
router.post('/',function(req,res){
   let username=req.body.username;
   let password=req.body.password;
   console.log(username);
   console.log(req.session.user.username)
   if(req.session.user!=undefined &&req.session.user.username==username&&req.session.user.password==password){
         res.send('登录成功');
          
    }else{
        res.send("登录失败,请检查用户名或密码是否正确")
    }
});
module.exports = router;

register.js

var express = require('express');
var router = express.Router();
let User=require('./bean/user');

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('register');
});
router.post('/', function(req, res, next) {
  //获取前端参数
 let user =new User(req.body.username,
  req.body.password,
  req.body.confirm_password,
  req.body.phone_number,
  req.body.email);
 req.session.user=user;
 console.log(user);
 res.render('login')
 
});

module.exports = router;

users.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

js css 图片就不搞出来了

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值