实现登录

2022-05-24 15:06:31 +08:00 · 2022-05-24 15:06:31 +08:00 · d5aa3b0e8d
commit d5aa3b0e8d
parent 3705cf4d8f
3 changed files with 125 additions and 0 deletions
--- a/modules/user.js
+++ b/modules/user.js
@ -1,3 +1,18 @@
 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
--- a/public/login.html
+++ b/public/login.html
@ -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>
--- a/public/manage.html
+++ b/public/manage.html
@ -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>