项目开发|用node+WebSocket+MySQL+vue仿做学习通的一些功能（二）（主页的展示） vue.js|前端|javascript

因为http是无状态的，所以需要使用session来保存登录状态

//引入express-session，设置session const session = require('express-session'); //设置session的秘钥 app.use(session({secret:'key'}));

在登录成功之后设置登录状态并保存登录账户的用户名：

req.session.flag=1; name=username; res.redirect('/index');

配置模板引擎

//配置模板引擎 app.engine('art',require('express-art-template')); //2.告诉express框架模板存放的位置是什么 app.set('views',path.join(__dirname,'views')) //3.告诉express框架的默认后缀是什么 app.set('views engine','art');

在views文件夹中创建zhuye.art文件：
在有人直接访问/zhuye路径时先判断有没有登录,没有登录就跳转到登录页面，登录了就跳转到主页并且通过render渲染模板并且把用户的name值传过去

app.get('/index',(req,res)=>{ if(req.session.flag&&req.session.flag==1){ res.type('html'); res.render('index',{ msg:name, }); }else{ res.redirect('/login'); } })

在views文件夹中新建index.art文件，代码：

主页 - 锐客网 type="text/css"> *{ margin: 0; padding: 0; } .div1{ width: 1004px; height: 600px; border: 1px solid red; margin: auto; } .div2{ width: 200px; height: 600px; border: 1px solid green; float: left; text-align: center; } .div3{ width: 800px; height: 600px; border: 1px solid gray; float: left; position: relative; } .div21{ width: 100%; height: 100px; border: 1px solid black; } .div211{ width: 100%; height: 50px; line-height: 50px; } .div22 li{ margin-top: 30px; width: 100%; height: 50px; cursor: pointer; list-style: none; text-align: center; line-height: 50px; background-color: #00FFFF; } .div22 li:nth-child(1){ background-color: #808080; } .div3 li{ list-style: none; width: 800px; height: 600px; position: absolute; display: none; } .div3 li:nth-child(1){ display: block; } src="https://www.it610.com/article/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"> 用户名：{{msg}} 课程消息我的资料课程消息资料 type="text/javascript"> var lis = document.querySelectorAll('.div22 ul li'); var nrs = document.querySelectorAll('.div3 ul li'); for(var i = 0; i