study/pro-blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

实现登录

Browse Source
This commit is contained in:
LittleBoy 2022-05-24 15:06:31 +08:00
parent 3705cf4d8f
commit d5aa3b0e8d
3 changed files with 125 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
modules/user.js
View File

@ -1,3 +1,18 @@
const router = require('express').Router(); const router = require('express').Router();
// 用户登录所需结果
//
router.post('/login', (req, res) => {
const { username, password } = req.body;
if (username == 'admin' && password == 'admin') {
//sql = `select * from users where username=${username} and password=${password}`;
res.send({ status: true })
} else {
res.send({ status: false, message: '用户名或者错误错误' })
}
})
module.exports = router module.exports = router

93
public/login.html
View File

@ -0,0 +1,93 @@
<!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>
<link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
<style>
* {
margin: 0;
padding: 0
}
#app {
display: flex;
align-items: center;
height: 100vh;
background-color: #eee;
}
.login-form {
width: 400px;
margin: auto;
background-color: #fff;
padding: 50px;
border-radius: 5px;
}
.item {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="login-form">
<h2 style="text-align: center;">用户登录</h2>
<div class="item">
<el-input v-model="loginData.username" type="text" placeholder="请输入用户名" />
</div>
<div class="item">
<el-input v-model="loginData.password" type="password" placeholder="请输入登录密码" />
</div>
<div class="item">
<el-button @click="submit" style="width: 100%">登录</el-button>
</div>
</div>
</div>
<script src="./vue/dist/vue.js"></script>
<script src="./element-ui/lib/index.js"></script>
<script type="module">
Vue.config.productionTip = false;
Vue.config.silent = true;
// import Vue from './vue/dist/vue.esm-browser.js'
// vue 通过 Vue.createApp(选项)创建vue实例
import request from './modules/request.js'
new Vue({
el: '#app', // 设置挂载对象
data(){
return {
loginData:{
username:'',
password:''
}
}
},
methods:{
submit(){
request('./api/user/login',this.loginData,'POST').then((ret)=>{
if(ret.status){
// 登录成功
this.$message('登录成功')
//保存登录信息
sessionStorage.setItem('login_username',this.loginData.username)
location.href = './manage.html'
}else{
// 登录失败
this.$message.info(ret.message)
}
})
}
}
})
</script>
</body>
</html>

17
public/manage.html Normal file
View File

@ -0,0 +1,17 @@
<!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>Document</title>
</head>
<body>
<script>
if(!sessionStorage.getItem('login_username')){
alert('没有登录')
location.href = './login.html'
}
</script>
</body>
</html>