vue实现登录界面
创建Vue项目
使用Vue CLI创建一个新项目，确保已安装Node.js和Vue CLI。
vue create login-app进入项目目录并安装必要的依赖。
cd login-app
npm install axios vue-router设置路由
在src/router/index.js中配置路由，确保登录页面有对应的路由。
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router创建登录组件
在src/views/Login.vue中创建登录表单组件。
<template>
<div class="login-container">
<h2>登录</h2>
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="username">用户名</label>
<input v-model="username" type="text" id="username" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input v-model="password" type="password" id="password" required>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败')
}
}
}
}
</script>
<style>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
cursor: pointer;
}
</style>添加API请求拦截
在src/main.js中配置axios全局设置和请求拦截。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
axios.defaults.baseURL = 'http://your-api-url.com'
const app = createApp(App)
app.use(router)
app.config.globalProperties.$axios = axios
app.mount('#app')实现登录状态管理
使用Vuex或Composition API管理登录状态。在src/store/index.js中创建store。
import { createStore } from 'vuex'
export default createStore({
state: {
isAuthenticated: false,
user: null
},
mutations: {
setAuth(state, payload) {
state.isAuthenticated = payload.isAuthenticated
state.user = payload.user
}
},
actions: {
login({ commit }, userData) {
commit('setAuth', {
isAuthenticated: true,
user: userData
})
},
logout({ commit }) {
commit('setAuth', {
isAuthenticated: false,
user: null
})
}
}
})添加路由守卫
在src/router/index.js中添加导航守卫保护需要认证的路由。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})响应式设计优化
在登录组件中添加响应式样式，确保在不同设备上显示良好。
@media (max-width: 600px) {
.login-container {
padding: 10px;
}
}
