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 图片就不搞出来了