xiaojincai
/
yrxinterview


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
							<!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">
    <div style="background-color: #FDC606;box-shadow: 0px 0px 4px 0 rgba(0,0,0,.5);">
        <header>
            <div class="left_nav">
                <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
                <a href="/index.html"><img class="logo" src="img/logo.png" alt="logo"></a>
            </div>
            <div class="nav">
                <a class="act" href="/index.html">主页</a>
                <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
                <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
                <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
                <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
                <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</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>
    </div>
    <transition name="slide">
        <div class="slide" v-if="show">
            <a class="act" href="/index.html">主页</a>
            <a href="https://match.yuanrenxue.cn/" target="_blank">爬虫逆向比赛</a>
            <a href="https://match.yuanrenxue.cn/" target="_blank">采集进阶课程</a>
            <a href="https://tool.yuanrenxue.cn/" target="_blank">采集分析工具</a>
            <a href="https://appmatch.yuanrenxue.cn/" target="_blank">APP题目</a>
            <a href="https://www.yuanrenxue.cn/" target="_blank">关于猿人学</a>
            <a v-if="userInfo" href="/record.html">我的刷题记录</a>
            <a v-if="userInfo" @click="logout">退出登录</a>
        </div>
    </transition>
    <div class="content" style="justify-content: center;width: 930px;margin-bottom: 50px;">
        <p class="navtation"><a href="/index.html">首页</a> - {{showLogin?'登录页':'注册页'}}</p>
        <div class="top_bg" style="min-height: 60vh;">
            
            <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;color: #00f;" @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;color: #00f;" @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>
    <footer>
        <ul>
            <li>
                <b>爬虫比赛</b> <br>
                <a href="https://appmatch.yuanrenxue.cn/"  target="_blank">APP题目</a>
                <a href="https://match.yuanrenxue.cn/"  target="_blank">爬虫逆向比赛</a>
                <a href="https://tool.yuanrenxue.cn/"  target="_blank">采集分析工具</a>
            </li>
            <li>
                <b>爬虫课程</b> <br>
                <a href="https://shop45147253.m.youzan.com/wscgoods/detail/2okabph85ypv1?banner_id=f.86209928~goods.2~1~rVebiaQ5&alg_id=0&slg=0&components_style_layout=0&reft=1744878857227&spm=f.86209928&sf=wx_sm"  target="_blank">爬虫逆向进阶课</a>
                <a href="https://shop45147253.m.youzan.com/wscgoods/detail/2xli2kj7ku3a5zk?banner_id=f.86209928~goods.2~2~lWrtebiJ&alg_id=0&slg=0&components_style_layout=0&reft=1744878880491&spm=f.86209928&sf=wx_sm"  target="_blank">反爬&风控对抗课</a>
                <a href="https://shop45147253.m.youzan.com/wscgoods/detail/361rmliyhfwr184?banner_id=f.86209928~goods.2~3~25r4gDL2&alg_id=0&slg=0&components_style_layout=0&reft=1744878921640&spm=f.86209928&sf=wx_sm"  target="_blank">0基础+爬虫逆向课</a>
            </li>
            <li>
                <b>关于猿人学</b> <br>
                <a href="https://www.yuanrenxue.cn/tricks"  target="_blank">Python技术杂谈</a>
                <a href="https://www.yuanrenxue.cn/earn-money"  target="_blank">Python爬虫挣钱</a>
            </li>
            <li class="contact" style="display: flex;line-height: 30px;">
                <img style="margin-right: 10px;" width="100" height="100" src="img/wx.jpg" alt="">
                扫一扫加我微信 <br>
                备注面试题 <br>
                拉你进面试交流群
            </li>
        </ul>
        <p>成都老猿智能科技有限公司Copyright @ 2025 猿人学面试 蜀ICP备2022000052号-2</p>
    </footer>
</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 => {
                        // alert('注册成功');
                        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>