vue登录页面代码
Here's a simple example of a login page implemented using Vue.js:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
/* Some basic styling for the login form */
#app {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
input {
padding: 10px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<h2>Login</h2>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username" required><br>
<input type="password" v-model="password" placeholder="Password" required><br>
<button type="submit">Login</button>
</form>
<p v-if="message" :style="{ color: errorMessage ? 'red' : 'green' }">{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
message: '',
errorMessage: false
},
methods: {
login() {
// Simulating a login request
// In a real application, you would send a request to your server here
if (this.username === 'admin' && this.password === 'password') {
// Successful login
this.message = 'Login successful';
this.errorMessage = false;
} else {
// Failed login
this.message = 'Invalid username or password';
this.errorMessage = true;
}
// You can also redirect the user to another page upon successful login
}
}
});
</script>
</body>
</html>
In this code:
We've used Vue.js to create a simple login form.The v-model directive is used for two-way data binding to bind form inputs to Vue data properties (username and password).@submit.prevent="login" is an event listener that listens for the form submission and calls the login method defined in the Vue instance.Inside the login method, you can place your logic for handling the login process. In this example, it's a simple check for the username and password. In a real application, you would typically send a request to a server to authenticate the user.Based on the result of the login attempt, a message is displayed to the user indicating whether the login was successful or not.
Certainly! Let's continue from where we left off:
In a real-world application, you would typically integrate the login form with a backend server for authentication. Here's how you can extend the example to interact with a backend server using a RESTful API for authentication:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
/* Some basic styling for the login form */
#app {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
input {
padding: 10px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<h2>Login</h2>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username" required><br>
<input type="password" v-model="password" placeholder="Password" required><br>
<button type="submit">Login</button>
</form>
<p v-if="message" :style="{ color: errorMessage ? 'red' : 'green' }">{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
message: '',
errorMessage: false
},
methods: {
login() {
// Send a POST request to the server to authenticate the user
fetch('http://your-backend-api.com/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.username,
password: this.password
})
})
.then(response => {
if (response.ok) {
// Successful login
this.message = 'Login successful';
this.errorMessage = false;
} else {
// Failed login
this.message = 'Invalid username or password';
this.errorMessage = true;
}
})
.catch(error => {
console.error('Error:', error);
});
}
}
});
</script>
</body>
</html>
In this extended example:
The login method now sends a POST request to a backend server at http://your-backend-api.com/login with the provided username and password.Upon receiving a response from the server, it checks whether the login attempt was successful or not.If the response status is ok (200), the login is considered successful, and a message is displayed accordingly.If the response status indicates an authentication failure, an appropriate message is displayed to the user.Error handling is added using .catch() to log any errors that might occur during the request.
Remember to replace http://your-backend-api.com/login with the actual endpoint of your backend server where the authentication is handled. Additionally, ensure that your backend server is properly configured to handle login requests and respond with appropriate status codes and messages.
