如何使用react框架进行两个html页面的切换?
- 项目背景
- 首先是古老的做法
- login.html
- index.html
- 正文->react框架如何设置两个页面的跳转?
- 配置react框架的环境
- react框架如何实现两个页面的跳转?
项目背景
古老的html页面跳转的做法无法在react框架中直接适配,所以非常有必要从新开始学习一下react框架是如何进行两个页面的跳转的.
首先是古老的做法
先温习一下
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-image: url('./src/picture/2.png');
/* 替换为你的图片路径 */
background-size: cover;
/* 背景图片覆盖整个页面 */
}
.login-container {
text-align: center;
background: rgba(255, 255, 255, 0.8);
/* 半透明白色背景 */
padding: 20px;
border-radius: 10px;
}
.form-row {
margin-bottom: 10px;
}
label,
input {
display: inline-block;
vertical-align: middle;
margin: 5px 0;
}
label {
width: 80px;
}
input {
width: 200px;
}
</style>
<script>
function checkLogin() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "我是用户名(用户名填这里)" && password === "我是密码(密码填这里)") {
window.location.href = "index.html";
} else {
alert("用户名或密码不正确，请重试。");
}
}
</script>
</head>
<body>
<div class="login-container">
<h1>登录前的页面</h1>
<form>
<div class="form-row">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-row">
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
</div>
<button type="button" onclick="checkLogin()">登录</button>
</form>
</div>
</body>
</html>
下面这里很重要,只要用户名和密码都对了,就直接跳转了!!!
if (username === "我是用户名(用户名填这里)" && password === "我是密码(密码填这里)") {
window.location.href = "index.html";
} else {
alert("用户名或密码不正确，请重试。");
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>登录后的界面</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#myButton {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
#myButton2 {
position: absolute;
top: 10px;
left: 80px;
z-index: 1;
}
#myButton3 {
position: absolute;
top: 10px;
left: 160px;
z-index: 1;
}
#myButton4 {
position: absolute;
top: 80px;
left: 10px;
z-index: 1;
}
#demo-simple-select-label {
position: absolute;
top: 50px;
z-index: 1;
}
#demo-simple-select {
position: absolute;
top: 50px;
left: 40px;
z-index: 1;
}
/* 可以在这里定义 CSS 样式，也可以使用内联样式,下面这个是文本 */
#highlighted-text0 {
position: absolute;
top: 30px;
/* 设置文本颜色为红色 */
color: red;
/* 设置字体大小 */
font-size: 24px;
/* 设置字体加粗 */
font-weight: bold;
/*位于顶部*/
z-index: 999;
/*左移*/
left: 430px;
}
#highlighted-text1 {
position: absolute;
top: 60px;
/* 设置文本颜色为红色 */
color: red;
/* 设置字体大小 */
font-size: 24px;
/* 设置字体加粗 */
font-weight: bold;
/*位于顶部*/
z-index: 999;
/*左移*/
left: 430px;
}
/* 隐藏下拉框内容 */
.dropdown-content {
position: absolute;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* 下拉框按钮样式 */
.dropdown button {
top: 60px;
position: absolute;
z-index: 1;
padding: 10px;
font-size: 16px;
}
/* 下拉框选项样式 */
.dropdown-content a {
position: absolute;
z-index: 1;
display: block;
padding: 12px 16px;
text-decoration: none;
color: #333;
}
/* 鼠标悬停时改变选项背景颜色 */
.dropdown-content a:hover {
position: absolute;
z-index: 1;
background-color: #ddd;
}
#mySelector {
position: absolute;
top: 40px;
left: 10px;
z-index: 1;
}
/* 自定义选择器的样式 */
.custom-select {
padding: 5px;
/* 调整选择器的内边距以容纳图标 */
}
</style>
</head>
<body>
<select id="mySelector" class="custom-select">
<option value="option0">Please select the attachment</option>
<option value="option1">附件 1</option>
<option value="option2">附件 2</option>
<option value="option3">附件 3</option>
<option value="option4">附件 4</option>
<option value="option5">附件 5</option>
<option value="option6">附件 6(待添加)</option>
<option value="option7">附件 7(待添加)</option>
<option value="option8">附件 8(待添加)</option>
<option value="option9">附件 9(待添加)</option>
<option value="option10">附件 10(待添加)</option>
<option value="option11">附件 11(待添加)</option>
<option value="option12">附件 12(待添加)</option>
<option value="option13">附件 13(待添加)</option>
<option value="option100">瑶瑶领先的mate100!</option>
</select>
<button id="myButton">一键复原</button>
<button id="myButton2">Un Check</button>
<button id="myButton3">Copmpare</button>
<button id="myButton4">Dental arch line</button>
<div id="highlighted-text0">请耐心等待...</div>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
正文->react框架如何设置两个页面的跳转?
配置react框架的环境
(其实之前一直想写一篇如何配置react框架+three.js的环境的文章,但是想想自己大概率不会做太长时间的前端吧,后来就没写,没想到从12月1号一直到了第二年的1月26号)
其实配置react框架+three.js的环境非常简单,下面跟上步伐一起配置:
-
- 创建一个你自己的文件夹(方便管理),名字你随便起,我就叫react-test-three了
mkdir react-test-three
cd react-test-three
-
- npm init vite@latest
然后你按照下面的图片进行选择:
- npm init vite@latest
- 3.进入项目文件夹
执行以下ls,你就可以看到你的项目文件夹了,然后
-
- 初始化项目,请依次执行
npm install
npm install three
npm run dev
至此,react框架+three.js就配置好了!!!
非常nice! 难道不是吗?说实话,偶尔搞搞前端还真不错!
react框架如何实现两个页面的跳转?
待补充…
