目录
今天我们简单的写一个登录验证的测试练习。
第一部分：编写静态界面以及ajax请求
注意：静态资源统一放在public文件夹里面
然后创造文件login.html，其中我还把Jquery的包导入到了javascript中了。
<!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>用户登录</title>
<script src="../javascripts/jQuery-3.6.0.js"></script>
</head>
<body>
用户名：<input type="text" id="username" /><br>
密码：<input type="text" id="pwd" /><br>
<button id="btn">登录</button>
<script>
$(function () {
//设置点击事件
$("#btn").click(function () {
login();
});
//提交ajax申请方法
function login() {
//获取账号密码方法
let username = $("#username").val();
let pwd = $("#pwd").val();
$.ajax({
url: `http://localhost/main/login?username=${username}&pwd=${pwd}`,
type: "get",
dataType: "json",
success: function (data) {
console.log(data);
}
})
}
})
</script>
</body>
</html>然后在controller文件夹中创建mainController.js方法
//导入dbconfig.js文件
var db = require("../util/dbconfig.js");
async function main(req, res) {
let { username, pwd } = req.query;
let sql = "select userId,userName from user where userName=? and userPwd=?";
let data = await db.opreateDB(sql, [username, pwd]);
//验证信息并返回提示
if (data.length === 0) {
res.send({ status: 400, msg: "用户名或者密码错误" });
} else {
//还差一个session完成持续登录功能
//返回登录的值
res.send({ status: 200, msg: data });
}
};
// module.exports = main;//改成
module.exports = {
main
};然后在routes文件夹内创建路由main.js
var express = require('express');
var router = express.Router();
//导入js文件
var main = require("../controller/mainController.js");
/* GET home page. */
router.get('/login', main.main);
module.exports = router;然后在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 http = require('http');
//导入js文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var mainRouter = require('./routes/main');//导入的路由文件
var app = express();
var server = http.createServer(app);
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//user 表示注册
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/main', mainRouter);//注册路由
// 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');
});
server.listen(80, ()=>{
console.log("服务器启动...");
});
然后再浏览器的网址栏中访问静态界面的地址去填写登录信息就可以了
第二部分：我在当中遇到的报错
F:\T2009小刘(可以参观，请别破坏！！！)\nodeJS课程\node\myseifAPI\node_modules\express\lib\router\route.js:202
throw new Error(msg);
^
Error: Route.get() requires a callback function but got a [object Undefined]
at Route.<computed> [as get] (F:\T2009小刘(可以参观，请别破坏！！！)\nodeJS课程\node\myseifAPI\node_modules\express\lib\router\route.js:202:15)
at Function.proto.<computed> [as get] (F:\T2009小刘(可以参观，请别破坏！！！)\nodeJS课程\node\myseifAPI\node_modules\express\lib\router\index.js:510:19)
at Object.<anonymous> (F:\T2009小刘(可以参观，请别破坏！！！)\nodeJS课程\node\myseifAPI\routes\main.js:7:8)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (F:\T2009小刘(可以参观，请别破坏！！！)\nodeJS课程\node\myseifAPI\app.js:11:18)
[nodemon] app crashed - waiting for file changes before starting...Error: Route.get() requires a callback function but got a [object Undefined]这句话的意思就说我路由中需要一个方法，但是你返回的是一个对象，所以导致的报错。
// module.exports = main;//改成
module.exports = {
main
};就可以解决此问题了。
第三部分：我们来解决session存储用户信息的方法
再使用session还需要利用npm下载安装一个插件express-session
命令是：npm i express-session
PS F:\T2009小刘(可以参观，请别破坏！！！)\nodeJS课程\node\myseifAPI> npm i express-session
added 6 packages, and audited 115 packages in 6s
1 package is looking for funding
run `npm fund` for details
5 vulnerabilities (1 low, 4 critical)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.然后可以再package-lock.json文件中检查是否安装成功
安装成功后到app.js中去配置express-session;
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var http = require('http');
var session = require('express-session');//导入需要配置的session
//导入js文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var mainRouter = require('./routes/main');//导入的路由文件
var app = express();
var server = http.createServer(app);
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//session注册配置必须再路由之前,secret代表加密格式，随便输，cookie代表session过期时间
app.use(session({ secret: "bianmageshizijiqudingyi", cookie: { maxAge: 10000 } }))
//user 表示注册
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/main', mainRouter);//注册路由
// 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');
});
server.listen(80, () => {
console.log("服务器启动...");
});
然后到mainController去使用session存储
//导入dbconfig.js文件
var db = require("../util/dbconfig.js");
async function main(req, res) {
let { username, pwd } = req.query;
let sql = "select userId,userName from user where userName=? and userPwd=?";
let data = await db.opreateDB(sql, [username, pwd]);
//验证信息并返回提示
if (data.length === 0) {
res.send({ status: 400, msg: "用户名或者密码错误" });
} else {
//还差一个session完成持续登录功能
//存储信息user和isLogin两个值
req.session.user = data;
req.session.isLogin = true;
//返回登录的值
res.send({ status: 200, msg: data });
}
};
//专门定义一个方法读取用户信息到sessino
async function getSession(req, res) {
//读取session里面的信息
console.log(req.session.user);
console.log(req.session.isLogin);
//响应界面
res.send({ status: 200, msg: "读取成功" });
}
// module.exports = main;//改成
module.exports = {
main,
getSession
};然后再main里面增加一个路由去测试读取session里面的数据
var express = require('express');
var router = express.Router();
//导入js文件
var main = require("../controller/mainController.js");
/* GET home page. */
router.get('/login', main.main);
router.get('/getSession',main.getSession);
module.exports = router;测试的时候记得先到http://localhost/view/login.html 里面去登录，将值存入session之后再去访问
http://localhost/main/getSession，这样再集成终端中就会打印出你登录成功时的信息
GET /main/getSession 200 17.969 ms - 35
GET /main/login 200 1636.721 ms - 50
GET /view/login.html 200 65.006 ms - 1218
GET /javascripts/jQuery-3.6.0.js 304 1.202 ms - -
GET /main/login?username=dowson&pwd=123 304 42.467 ms - -
GET /main/login?username=dowson&pwd=123 304 126.982 ms - -
[ { userId: 14, userName: 'dowson' } ]
true
GET /main/getSession 304 6.424 ms - -
不然就是两个undefined打印出来了。
然后还有网页上面的存储，分别是两个方法localStorage和sessionStorage
<!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>用户登录</title>
<script src="../javascripts/jQuery-3.6.0.js"></script>
</head>
<body>
用户名：<input type="text" id="username" /><br>
密码：<input type="text" id="pwd" /><br>
<button id="btn">登录</button>
<script>
$(function () {
//设置点击事件
$("#btn").click(function () {
login();
});
//提交ajax申请方法
function login() {
//获取账号密码方法
let username = $("#username").val();
let pwd = $("#pwd").val();
$.ajax({
url: `http://localhost/main/login?username=${username}&pwd=${pwd}`,
type: "get",
dataType: "json",
success: function (data) {
console.log(data);
//网页上存储数据
//1.localStrorage 永久存储
//2.sessionStrirage 当浏览器被关闭后消失
//练习
localStorage.setItem("user", JSON.stringify(data.msg));//存的时候需要把对象转化为json字符串
// sessionStorage.setItem("user", JSON.stringify(data.msg));//同上一模一样的方法
//读取的方法
console.log(localStorage.getItem("user"));
}
})
}
})
</script>
</body>
</html>他们会存储到网页的这个位置
然后今天的学习结束了，值得注意的就是app.js的配置和一些路由接口的方法暴露。
1773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
