vue实现后台功能
Vue 实现后台功能的方法
Vue.js 是一个流行的前端框架，适合构建后台管理系统。以下是实现后台功能的常见方法和步骤。
项目初始化
使用 Vue CLI 或 Vite 初始化项目：
# Vue CLI
npm install -g @vue/cli
vue create admin-project
# Vite
npm create vite@latest admin-project --template vue安装常用依赖：
npm install vue-router pinia axios element-plus路由配置
创建路由文件 src/router/index.js：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router状态管理
使用 Pinia 进行状态管理，创建 src/stores/user.js：
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
token: '',
userInfo: {}
}),
actions: {
login(data) {
this.token = data.token
this.userInfo = data.user
}
}
})API 封装
创建 src/api/index.js 封装 axios：
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
})
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
export default instance页面组件
创建登录组件 src/views/Login.vue：
<template>
<el-form @submit.prevent="handleLogin">
<el-input v-model="form.username" placeholder="用户名" />
<el-input v-model="form.password" type="password" placeholder="密码" />
<el-button type="primary" native-type="submit">登录</el-button>
</el-form>
</template>
<script setup>
import { ref } from 'vue'
import { useUserStore } from '../stores/user'
import { useRouter } from 'vue-router'
import api from '../api'
const form = ref({
username: '',
password: ''
})
const userStore = useUserStore()
const router = useRouter()
const handleLogin = async () => {
const res = await api.post('/login', form.value)
userStore.login(res.data)
router.push('/')
}
</script>权限控制
在路由守卫中添加权限检查：
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (to.name !== 'Login' && !token) {
next({ name: 'Login' })
} else {
next()
}
})构建和部署
构建生产环境代码：
npm run build部署到服务器，可将 dist 目录内容上传到 Web 服务器如 Nginx 或 Apache。
常用后台功能实现
表格数据展示：
<template>
<el-table :data="tableData">
<el-table-column prop="id" label="ID" />
<el-table-column prop="name" label="名称" />
</el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import api from '../api'
const tableData = ref([])
onMounted(async () => {
const res = await api.get('/list')
tableData.value = res.data
})
</script>表单验证：
<template>
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item prop="name" label="名称">
<el-input v-model="form.name" />
</el-form-item>
</el-form>
</template>
<script setup>
import { ref } from 'vue'
const form = ref({
name: ''
})
const rules = {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
]
}
</script>以上方法提供了 Vue 实现后台功能的基本框架，可根据实际需求进行扩展和调整。
