js里面跳转登陆页面
时间: 2023-08-08 09:06:11 浏览: 43
你可以使用以下代码在 JavaScript 中实现跳转到登录页面:
```javascript
window.location.href = "login.html";
```
其中,`login.html` 是你的登录页面的文件名。这行代码会将当前页面重定向到登录页面。如果你希望在新的窗口中打开登录页面,可以使用以下代码:
```javascript
window.open("login.html");
```
希望这能帮到你!
相关问题
在html里面写一个用cookie方法的登录界面,要密码验证
好的,以下是一个用cookie方法的简单登录界面的HTML代码示例,它通过JavaScript来设置和获取cookie:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script type="text/javascript">
// 设置cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// 获取cookie
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// 检查用户名和密码
function checkLogin() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == "" || password == "") {
alert("Please enter both username and password!");
return false;
}
// 检查用户名和密码是否正确
if(username == "admin" && password == "123456") {
// 用户名和密码正确,设置cookie并跳转到主界面
setCookie('username', username, 1); // 设置cookie有效期为1天
window.location.href = "index.html";
} else {
// 用户名或密码不正确,显示错误信息
alert("Invalid username or password!");
return false;
}
}
</script>
</head>
<body>
<h1>Login</h1>
<form action="javascript:void(0)" onsubmit="return checkLogin()">
<label for="username">Username:</label>
<input type="text" name="username" id="username"><br><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password"><br><br>
<input type="submit" name="submit" value="Login">
</form>
</body>
</html>
```
在上面的代码中,我们为表单的提交按钮添加了一个JavaScript事件,当用户点击按钮时,它将调用checkLogin()函数来检查用户名和密码。如果用户名和密码正确,它将调用setCookie()函数来设置一个名为“username”的cookie,有效期为1天,并将用户重定向到主界面。如果用户名或密码不正确,它将显示一个警告框来提示用户。
在主界面中,我们可以使用JavaScript的getCookie()函数来获取保存在cookie中的值,例如:
```html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script type="text/javascript">
// 获取cookie
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// 显示欢迎信息
window.onload = function() {
var username = getCookie("username");
if(username != "") {
document.getElementById("welcome").innerHTML = "Welcome, " + username + "!";
} else {
document.getElementById("welcome").innerHTML = "Please login first!";
}
};
</script>
</head>
<body>
<h1 id="welcome"></h1>
</body>
</html>
```
在上面的代码中,我们使用JavaScript的window.onload事件来在页面加载完成后获取cookie中的“username”值,并根据它来显示欢迎信息。如果cookie中没有保存任何值,则显示登录提示。
vue路由写一个登页跳转到首页 首页里面用element框架写
好的,首先你需要在路由文件中定义两个路径,一个是登陆页的路径,另一个是首页的路径。假设你的登陆页为 `Login.vue`,首页为 `Home.vue`,那么你可以这样定义路由:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home
}
]
})
```
接着,你需要在登陆页中添加一个表单,让用户输入账号和密码,并在提交表单时跳转到首页。可以参考以下代码:
```html
<template>
<div>
<el-form ref="loginForm" :model="loginForm" label-width="80px">
<el-form-item label="账号" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
loginForm: {
username: '',
password: ''
}
}
},
methods: {
login() {
// 在这里编写登陆逻辑,可以使用 axios 发送请求到后端验证账号密码是否正确
// 如果验证通过,就跳转到首页
this.$router.push('/home')
}
}
}
</script>
```
最后,在首页中你可以使用 element-ui 的组件来构建页面,比如 `el-table`、`el-card`、`el-button` 等等。具体可以参考 element-ui 官网上的示例代码。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)