xiaojincai
/
yrxinterview


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<section id="app">
    <header>
        <div class="left_nav">
            <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
            <img class="logo" src="img/logo.jpg" alt="logo">
        </div>
        <div class="nav">
            <a class="act" href="/index.html">猿人学面试</a>
            <a href="">爬虫比赛</a>
            <a href="">关于猿人学</a>
        </div>
        <div class="login">
            <div class="pc">
                <img width="30px" src="img/logo.jpg" alt="logo">
                <div v-if="userInfo" class="menu">
                    {{userInfo.name}}
                    <ul>
                        <li><a href="/record.html">我的刷题记录</a></li>
                        <li @click="logout"><a>退出登录</a></li>
                    </ul>
                </div>
                <a v-else href="/login.html">请先登录</a>
            </div>
            <div class="phone">
                <span v-if="userInfo">{{userInfo.name}}</span>
                <a v-else href="/login.html">请先登录</a>
            </div>
        </div>
    </header>
    <transition name="slide">
        <div class="slide" v-if="show">
            <a class="act" href="/index.html">猿人学面试</a>
            <a href="">爬虫比赛</a>
            <a href="">关于猿人学</a>
        </div>
    </transition>
    <div class="content" style="justify-content: center;width: 930px;">
        <p class="navtation"><a href="/index.html">首页</a> - {{showLogin?'登录页':'注册页'}}</p>
        <div class="top_bg">
            
            <div class="signup">
                <form v-if="!showLogin"  class="form reg" >
                    <label>昵称</label>
                    <input type="text" v-model="form.nickname" placeholder="昵称将会展示出来">
                    <label>注册账号</label>
                    <input type="text" v-model="form.name" placeholder="登录时的账号">
                    <label>登录密码</label>
                    <input type="password" v-model="form.password">
                    <label>确认密码</label>
                    <input type="password" v-model="form.repassword">
                    <label>注册邀请码</label>
                    <input type="text" v-model="form.invitationCode" placeholder="右侧扫码加我微信，免费领取">
                    <button type="button" @click="submitForm">立即注册</button>
                    <p align="center"><a style="cursor: pointer;" @click="showLogin=1">去登录</a></p>
                </form>
                <form v-else  class="form reg"  style="padding: 30px;">
                    <label>账号</label>
                    <input type="text" v-model="loginForm.name" placeholder="账号">
                    <label>密码</label>
                    <input type="password" placeholder="密码" v-model="loginForm.password">
                    <button type="button" @click="login">立即登录</button>
                    <p align="center"><a style="cursor: pointer;" @click="showLogin=0">去注册</a></p>
                </form>
            </div>
            <div class="addvx">
                扫码加我微信 <br>
                <b>免费领取注册邀请码</b><br>
                <img width="50%" src="img/wx.jpg" alt=""><br>
                备注“面试邀请码” <br>
                拉你入猿人学 - 面试交流群
            </div>
        </div>
    </div>
</section>
<script src="js/public.js"></script>
<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return {
                showLogin: false,
                form: {
                    name: "",
                    nickname: "",
                    password: "",
                    repassword: "",
                    invitationCode: ""
                },
                loginForm: {
                    name: "",
                    password: ""
                },
                userInfo: {}, // 添加 userInfo 变量
                show: 0 // 添加 show 变量
            }
        },
        created() {
            const userInfo = JSON.parse(localStorage.getItem('userInfo')); // 获取本地存储的用户信息
            this.userInfo = userInfo;
        },
        methods: {
            submitForm() {
                if (!this.form.name || !this.form.nickname || !this.form.password || !this.form.repassword || !this.form.invitationCode) {
                    alert('所有字段都不能为空');
                    return;
                }
                if (this.form.password !== this.form.repassword) {
                    alert('两次输入的密码不一致');
                    return;
                }
                axios.post(url + '/api/account/regist', this.form)
                    .then(res => {
                        localStorage.setItem('token',res.data.data.token);
                        this.getUser();
                        window.location.href = '/index.html';
                    })
                    .catch(err => {
                        alert('提交失败，请重试');
                        console.error(err);
                    });
            },
            login() {
                if (!this.loginForm.name || !this.loginForm.password) {
                    alert('所有字段都不能为空');
                    return;
                }
                axios.post(url + '/api/account/login', this.loginForm)
                    .then(res => {
                        
                        if(res.data.code==0){
                            // alert('登录成功');
                            localStorage.setItem('token',res.data.data.token);
                            this.getUser();
                            setTimeout(() => {
                                window.location.href = '/index.html';
                            }, 500);
                        }else{
                            alert(res.data.message);
                        }
                    })
                    .catch(err => {
                        alert('登录失败，请重试');
                        console.error(err);
                    });
            },
            getUser(){
                // 获取token
                const token = localStorage.getItem('token');
                axios.get(url + '/api/account/userinfo', {
                    headers: {
                        'Authorization': `${token}`
                    }
                })
                .then(res => {
                    if (res.data.code === 0) {
                        localStorage.setItem('userInfo', JSON.stringify(res.data.data));
                    } 
                })
            },
            logout() { // 添加 logout 方法
                localStorage.removeItem('userInfo');
                localStorage.removeItem('token');
                this.userInfo = null;
            }
        }
    }).mount('#app');
</script>
</body>
</html>