vue登录页面代码
Certainly! Below is a basic example of a login page using Vue.js. This example assumes you have Vue.js set up in your project. If not, you can include it from a CDN or use a build tool like Vue CLI.
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>
<!-- Include Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="login">
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" required>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" required>
<button type="submit">Login</button>
</form>
<p v-if="error" style="color: red;">{{ error }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
error: ''
},
methods: {
login() {
// Here you can add your login logic
// For simplicity, let's assume a basic authentication
if (this.username === 'user' && this.password === 'password') {
// Successful login
alert('Login successful!');
} else {
// Failed login
this.error = 'Invalid username or password';
}
}
}
});
</script>
</body>
</html>
This example uses a simple form with a username and password input. The login method is called when the form is submitted. In a real-world application, you would replace the basic authentication logic with a call to your server or authentication service.
Remember to adapt this example according to your project structure and security requirements. In a production environment, you should never store passwords in plain text, and you should use secure authentication methods.
Certainly! Continuing from the previous example, here's a more comprehensive Vue.js login page with improved structure and better security practices. This example uses a fake authentication function, but in a real-world scenario, you would replace it with a server-side authentication process.
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>
<!-- Include Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="login">
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" required>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" required>
<button type="submit">Login</button>
</form>
<p v-if="error" style="color: red;">{{ error }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
error: ''
},
methods: {
login() {
// Simulate an asynchronous login process
setTimeout(() => {
// Replace this with a call to your server-side authentication endpoint
// In a real-world scenario, never handle authentication on the client-side
if (this.username === 'user' && this.password === 'password') {
// Successful login
alert('Login successful!');
} else {
// Failed login
this.error = 'Invalid username or password';
}
}, 500); // Simulating a delay to mimic a real server call
}
}
});
</script>
</body>
</html>
This example includes a simulated asynchronous login process with a delay to mimic a server call. In a production environment, you should replace the login method with a call to your server-side authentication endpoint using techniques like Axios or the Fetch API.
Additionally, always remember to secure your authentication process and never expose sensitive information on the client-side. Use HTTPS, and consider incorporating token-based authentication or other secure practices based on your application's requirements.
