node.js学习笔记Day3

第一部分：编写静态界面以及ajax请求

第二部分：我在当中遇到的报错

第三部分：我们来解决session存储用户信息的方法

今天我们简单的写一个登录验证的测试练习。

第一部分：编写静态界面以及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 developmentres.locals.message = err.message;res.locals.error = req.app.get('env') === 'development' ? err : {};// render the error pageres.status(err.status || 500);res.render('error');
});server.listen(80, ()=>{console.log("服务器启动...");
});

然后再浏览器的网址栏中访问静态界面的地址去填写登录信息就可以了

第二部分：我在当中遇到的报错

F:\T2009小刘(可以参观，请别破坏！！！)\nodeJS课程\node\myseifAPI\node_modules\express\lib\router\route.js:202throw 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-sessionadded 6 packages, and audited 115 packages in 6s1 package is looking for fundingrun `npm fund` for details5 vulnerabilities (1 low, 4 critical)To address all issues (including breaking changes), run:npm audit fix --forceRun `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 developmentres.locals.message = err.message;res.locals.error = req.app.get('env') === 'development' ? err : {};// render the error pageres.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的配置和一些路由接口的方法暴露。