用node+WebSocket+MySQL+vue仿做学习通的一些功能(二):主页的展示

因为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文件,代码:

DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>主页title>
	<style 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;
		}
	style>
	<script src="./jquery-3.6.0.min.js" type="text/javascript" charset="utf-8">script>
head>
<body>
	<div class="div1">
		<div class="div2">
			<div class="div21">
				
				<div class="div211">用户名:{{msg}}div>
	

			div>
			<div class="div22">
				<ul>
					<li>课程li>
					<li>消息li>
					<li>我的资料li>
				ul>
			div>
		div>
		<div class="div3">
			<ul>
				<li>
					课程
					
				li>
				<li>消息li>
				<li>资料li>
			ul>
		div>
	div>
	<script type="text/javascript">
		var lis = document.querySelectorAll('.div22 ul li');
		var nrs = document.querySelectorAll('.div3 ul li');
		for(var i = 0;i<lis.length;i++){
			lis[i].id=i;
		}
		for(var i = 0;i<lis.length;i++){
			lis[i].addEventListener('click',function(){
				for(var j = 0;j<lis.length;j++){
					lis[j].style.backgroundColor='#00FFFF';
					nrs[j].style.display='none';
				}
				this.style.backgroundColor='#808080';
				nrs[this.id].style.display='block';
			})
		}
		
	script>
body>
html>

页面效果:
用node+WebSocket+MySQL+vue仿做学习通的一些功能(二):主页的展示_第1张图片

你可能感兴趣的:(项目开发,javascript,vue.js,前端)