• Gitee Pages个人简历部署（下）

    部署后效果

    在这里插入图片描述

    在这里插入图片描述 在这里插入图片描述

    密码校验

    在上一篇文章中已经部署好了简历，但如果不想让别人访问自己的简历咋办，很容易想到用密码，但有几个问题需要解决：

    1. 密码不能写在前端代码里，否则别人一个F12就把你代码里外看得清清楚楚的了。
    2. 前端写不了，但这是静态网站，没有后端怎么办？

    鉴于以上情况，我选择使用vercel云函数api来实现这个应该由后端实现的功能。

    思路大体上是：

    1. 用户通过前端输入密码
    2. 前端代码使用post方式将密码发送给vercel的api
    3. api接收到数据后，判断前端输入的密码与提前设置好的密码是否一致，并返回 true/false 给前端
    4. 前端收到true则密码正确，放行；否则不放行。

    前端代码

    前端完整项目

    登录页面

    首先要写一个简单的登录页面

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录title>
		<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">script>

	head>
	<style>
		.container {
			width: 400px;
			height: 200px;
			background-color: aliceblue;
			position: relative;
			margin: 150px auto;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #55557f;

		}
		.myForm {
			width: 300px;
			height: 100px;
		}

		.myForm .submit-btn {
			margin-top: 20px;

		}
		.btn{
			border: #55557f 1px solid;
			margin-top: 10px;
			width: fit-content;
			padding: 5px;
		}
		.btn:hover{
			cursor: pointer;
		}
		.btn:active{
			color: blue;
		}
	style>

	<body>
		<div class="container">
			<div class="content">
				<p>密码输入：p>
				<input type="password" class="pwd_input">
				<div class="btn submit">提交div>
				
			div>

		div>
		<script type="text/javascript">
			var pwd = '';
			var flag = false;
			
			$('.submit').click(function() {
				pwd = $('.pwd_input').val();
				$.post('https://vercel-ver-api.vercel.app/api/ver_js', {'pwd': pwd}, (data_res, textStatus, jqxhr)=>{
					flag = data_res['verify_result'];
					console.log("flag: " + flag);
					if (flag == true) {
						localStorage.setItem('ver', true);
						window.location.href = 'pages/resume1.html';
					} else {
						localStorage.setItem('ver', false);
						alert('密码错误');
					}
				})
				
			});

		script>
		
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79

    在这里插入图片描述

    代码中的下面这部分就是以post方式请求接口https://vercel-ver-api.vercel.app/api/ver_js，将用户输入的密码 pwd传过去，得到响应后就根据返回结果true/false执行不同的逻辑。

    而且，如果密码正确的话，会往本地存储里写入一个键值对 {'ver': true/false} ，重复刷新简历页面时，先判断有无这个键值对，如果有则表明已经验证过密码了，可以直接访问，如果没有就要重定向到密码页面进行输入密码。

    $.post('https://vercel-ver-api.vercel.app/api/ver_js', {'pwd': pwd}, (data_res, textStatus, jqxhr)=>{
    flag = data_res['verify_result'];
    if (flag == true) {
    	localStorage.setItem('ver', true);
    	window.location.href = 'pages/resume1.html';
    } else {
        localStorage.setItem('ver', false);
        alert('密码错误');
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

    简历页面

    为了避免直接输入链接的方式访问页面，在简历的 head 标签里添加下面的代码逻辑

    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
    loginVerify();
    function loginVerify() {
    	var ver = localStorage.getItem("ver");
    	if (ver == null || ver == 'false') {
    		window.location.href = '../index.html';// 这个即登录页面
    	}
    }
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    body标签里添加下面的代码

    <script type="text/javascript">
	$('#exit-btn').click(function(){
		localStorage.clear();
		window.location.href = '../index.html';  
	})
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    vercel部署云函数api

    前往Gitcode下载完整项目

    新建一个项目(注意一定要有 /api 这个目录)

    在这里插入图片描述

    可以用python或者nodejs进行编程，下面以nodejs为例（也就是把下面的代码复制到 ver_js.js 文件里，其它不用管了）

    export default function handler(req, res) {
    var verify_result = false;
    if(req.method === 'POST'){               //使用post方式
        const pwd_req = req.body['pwd'];     // 接收前端发来的密码
        if(pwd_req === 'abc987zyx') verify_result = true;  // 判断密码是否正确
        else verify_result = false;
    }
    var res_data = {'verify_result': verify_result};

    res.setHeader("Access-Control-Allow-Origin", "*");   // 消除跨域访问报错
    res.status(200).send(res_data);         //返回数据到前端
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    然后把上面的代码push到github中，然后在vercel新建工程并导入这个仓库，部署成功后即可通过post方式请求该接口了。

  • 相关阅读:
    护眼灯真能保护眼睛吗？2022双十二买什么样的护眼灯对眼睛好
    Web ui自动化测试框架总结
    LeetCode 第 388 场周赛个人题解
    腾讯魏巍：Eunomia云原生资源编排优化
    Windows安装docker
    Java基础常见知识&面试题总结(中)
    软考学习笔记
    Unity UI 完全解决方案
    Windows与网络基础-4-安装GNS3软件环境
    VSD Viewer 6.16.1(Visio绘图文件阅读器)
  • 原文地址：https://blog.csdn.net/m0_46079750/article/details/126324964