Vue.js + Element UI 实战：企业级后台管理系统开发全流程

sent921

390人浏览 · 2025-12-21 16:43:29

sent921 · 2025-12-21 16:43:29 发布

本文将带你从零开始，一步步构建一个功能完善、界面优雅的后台管理系统。我们将结合Vue.js、Element UI和Mock.js，涵盖组件化开发、状态管理、分页功能、登录认证等核心功能，让你掌握企业级前端项目的开发流程。

🎯 学习目标与项目预览

我们将构建一个包含以下功能的完整系统：

✅ 响应式布局：自适应桌面与移动端
✅ 组件化架构：高复用性卡片组件
✅ 分页数据展示：支持多页切换
✅ 完整登录系统：登录/登出、状态持久化
✅ Mock数据模拟：前后端分离开发

📋 一、项目初始化与基础配置

1.1 项目结构搭建

首先清理并重构项目结构，创建标准的三层架构：

// router/index.js 路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/user',
    name: 'User',
    component: User
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

1.2 插件安装与配置

确保项目中安装并正确配置了必要的依赖：

// package.json 关键依赖
{
  "dependencies": {
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "element-ui": "^2.15.6",
    "axios": "^0.24.0",
    "mockjs": "^1.1.0"
  }
}

// main.js 全局配置
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'
import './mock' // Mock.js配置

Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

🎨 二、页面布局与组件化设计

2.1 使用Element UI容器组件

利用Element UI的Layout组件快速搭建页面框架：

<!-- App.vue 主布局 -->
<template>
  <el-container class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header height="80px">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">关于我们</el-menu-item>
        <el-menu-item index="3">用户管理</el-menu-item>
        <!-- 登录头像区域 -->
        <el-menu-item 
          index="4" 
          class="user-avatar"
          @click="handleLoginClick"
        >
          <el-avatar 
            :src="userAvatar" 
            :size="40"
          ></el-avatar>
        </el-menu-item>
      </el-menu>
    </el-header>
    
    <!-- 主内容区 -->
    <el-main>
      <router-view />
    </el-main>
    
    <!-- 页脚 -->
    <el-footer height="60px">
      <div class="footer-content">
        © 2023 后台管理系统 | 技术支持
      </div>
    </el-footer>
  </el-container>
</template>

2.2 响应式样式设计

/* 全局样式 */
.layout-container {
  height: 100vh;
}

.user-avatar {
  float: right;
  margin-right: 20px;
}

.user-avatar .el-avatar {
  cursor: pointer;
  border: 2px solid #fff;
  transition: all 0.3s ease;
}

.user-avatar .el-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.footer-content {
  text-align: center;
  line-height: 60px;
  color: #999;
  font-size: 14px;
}

🔧 三、组件化开发实践

3.1 创建可复用的卡片组件

<!-- components/SceneIntro.vue -->
<template>
  <el-card class="scene-card" shadow="hover">
    <div class="card-content">
      <el-image
        :src="imageUrl"
        :alt="title"
        class="card-image"
        fit="cover"
      ></el-image>
      <div class="card-info">
        <h3 class="card-title">{{ title }}</h3>
        <p class="card-desc">{{ description }}</p>
        <div class="card-meta">
          <span class="meta-item">
            <i class="el-icon-view"></i>
            {{ viewCount }}
          </span>
          <span class="meta-item">
            <i class="el-icon-star-on"></i>
            {{ likeCount }}
          </span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'SceneIntro',
  props: {
    imageUrl: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '默认标题'
    },
    description: {
      type: String,
      default: '默认描述内容'
    },
    viewCount: {
      type: Number,
      default: 0
    },
    likeCount: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>
.scene-card {
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.scene-card:hover {
  transform: translateY(-5px);
}

.card-content {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: 180px;
  border-radius: 4px 4px 0 0;
}

.card-info {
  padding: 15px;
}

.card-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

.card-desc {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
}

.meta-item i {
  margin-right: 5px;
}
</style>

3.2 在页面中使用组件

<!-- About.vue -->
<template>
  <div class="about-page">
    <!-- 轮播图卡片 -->
    <el-card class="main-card" shadow="always">
      <el-carousel height="300px">
        <el-carousel-item v-for="item in carouselItems" :key="item.id">
          <el-image
            :src="item.url"
            :alt="item.title"
            fit="cover"
            style="width: 100%; height: 100%;"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-card>
    
    <!-- 用户信息卡片 -->
    <el-row :gutter="20" class="card-row">
      <el-col :span="12">
        <el-card class="user-card" shadow="hover">
          <user-info :user-data="userData" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="stats-card" shadow="hover">
          <!-- 统计数据卡片 -->
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 场景介绍卡片 -->
    <el-row :gutter="20" class="scene-row">
      <el-col 
        v-for="(scene, index) in sceneList" 
        :key="index"
        :xs="24" :sm="12" :md="8" :lg="6"
      >
        <scene-intro
          :image-url="scene.image"
          :title="scene.title"
          :description="scene.desc"
          :view-count="scene.views"
          :like-count="scene.likes"
        />
      </el-col>
    </el-row>
    
    <!-- 分页组件 -->
    <el-pagination
      class="pagination"
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      layout="prev, pager, next, jumper"
      background
    >
    </el-pagination>
  </div>
</template>

🔐 四、登录功能实现

4.1 登录对话框组件

<!-- components/LoginDialog.vue -->
<template>
  <el-dialog
    title="用户登录"
    :visible.sync="dialogVisible"
    width="400px"
    :before-close="handleClose"
  >
    <el-form 
      ref="loginForm" 
      :model="loginForm" 
      :rules="loginRules" 
      label-width="80px"
    >
      <el-form-item label="账号" prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入账号"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          @keyup.enter.native="handleLogin"
        ></el-input>
      </el-form-item>
    </el-form>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button 
        type="primary" 
        @click="handleLogin"
        :loading="loading"
      >
        登 录
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'LoginDialog',
  data() {
    return {
      dialogVisible: false,
      loading: false,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.loginForm.resetFields()
      })
    },
    hide() {
      this.dialogVisible = false
    },
    handleClose(done) {
      this.$confirm('确定要关闭登录窗口吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        done()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          this.loading = true
          try {
            // 模拟登录请求
            const response = await this.$http.post('/api/login', this.loginForm)
            
            if (response.data.success) {
              // 登录成功处理
              const userInfo = response.data.data
              this.$store.commit('SET_USER_INFO', userInfo)
              localStorage.setItem('userInfo', JSON.stringify(userInfo))
              
              this.$message.success('登录成功！')
              this.dialogVisible = false
              
              // 触发全局登录成功事件
              this.$emit('login-success', userInfo)
            } else {
              this.$message.error(response.data.message || '登录失败')
            }
          } catch (error) {
            this.$message.error('网络请求失败，请检查网络连接')
          } finally {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

4.2 登录状态管理

// store/modules/user.js
const state = {
  userInfo: JSON.parse(localStorage.getItem('userInfo')) || null,
  isLogin: !!localStorage.getItem('userInfo')
}

const mutations = {
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo
    state.isLogin = true
    localStorage.setItem('userInfo', JSON.stringify(userInfo))
  },
  CLEAR_USER_INFO(state) {
    state.userInfo = null
    state.isLogin = false
    localStorage.removeItem('userInfo')
  }
}

const actions = {
  login({ commit }, userInfo) {
    return new Promise((resolve) => {
      // 模拟登录API调用
      setTimeout(() => {
        commit('SET_USER_INFO', userInfo)
        resolve({ success: true, data: userInfo })
      }, 500)
    })
  },
  logout({ commit }) {
    commit('CLEAR_USER_INFO')
    return Promise.resolve()
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

4.3 头像点击与登录状态同步

<!-- App.vue 中头像区域 -->
<template>
  <!-- ... 其他代码 ... -->
  <el-menu-item 
    v-if="!isLogin"
    index="login"
    class="user-avatar"
    @click="showLoginDialog"
  >
    <el-avatar 
      src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      :size="40"
    ></el-avatar>
  </el-menu-item>
  
  <el-submenu 
    v-else
    index="user-menu"
    class="user-avatar"
  >
    <template slot="title">
      <el-avatar 
        :src="userInfo.avatar"
        :size="40"
      ></el-avatar>
      <span class="username">{{ userInfo.username }}</span>
    </template>
    <el-menu-item index="profile">
      <i class="el-icon-user"></i>
      个人中心
    </el-menu-item>
    <el-menu-item index="settings">
      <i class="el-icon-setting"></i>
      系统设置
    </el-menu-item>
    <el-menu-item index="logout" @click="handleLogout">
      <i class="el-icon-switch-button"></i>
      退出登录
    </el-menu-item>
  </el-submenu>
  <!-- ... 其他代码 ... -->
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('user', ['isLogin', 'userInfo'])
  },
  methods: {
    ...mapActions('user', ['logout']),
    showLoginDialog() {
      this.$refs.loginDialog.show()
    },
    async handleLogout() {
      try {
        await this.$confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await this.logout()
        this.$message.success('已退出登录')
        this.$router.push('/')
      } catch (error) {
        // 用户取消退出
      }
    },
    handleLoginSuccess(userInfo) {
      this.$message.success(`欢迎回来，${userInfo.username}！`)
    }
  },
  mounted() {
    // 检查登录状态
    if (this.isLogin) {
      console.log('用户已登录:', this.userInfo)
    }
  }
}
</script>

📊 五、分页与数据展示

5.1 Mock.js 数据模拟

// mock.js
import Mock from 'mockjs'

// 模拟登录接口
Mock.mock('/api/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body)
  
  if (username === 'admin' && password === '123456') {
    return Mock.mock({
      success: true,
      message: '登录成功',
      data: {
        id: '@id',
        username: 'admin',
        nickname: '管理员',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        token: '@string(32)',
        role: 'admin'
      }
    })
  } else {
    return {
      success: false,
      message: '账号或密码错误'
    }
  }
})

// 模拟分页数据
Mock.mock(/\/api\/scenes\?page=\d+&size=\d+/, 'get', (options) => {
  const url = new URL(options.url)
  const page = parseInt(url.searchParams.get('page')) || 1
  const size = parseInt(url.searchParams.get('size')) || 8
  
  const total = 32
  const totalPages = Math.ceil(total / size)
  
  const data = Mock.mock({
    [`list|${size}`]: [{
      'id|+1': (page - 1) * size + 1,
      'title': '@ctitle(6, 12)',
      'desc': '@cparagraph(1, 3)',
      'image': '@image("300x200", "@color", "@ctitle(2,4)")',
      'views|100-1000': 1,
      'likes|50-500': 1,
      'createTime': '@datetime'
    }],
    page,
    size,
    total,
    totalPages
  })
  
  return {
    success: true,
    data
  }
})

5.2 分页组件实现

<!-- About.vue 分页相关代码 -->
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 8,
      totalItems: 0,
      sceneList: [],
      loading: false
    }
  },
  created() {
    this.fetchSceneData()
  },
  methods: {
    async fetchSceneData() {
      this.loading = true
      try {
        const response = await this.$http.get('/api/scenes', {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        })
        
        if (response.data.success) {
          const data = response.data.data
          this.sceneList = data.list
          this.totalItems = data.total
        }
      } catch (error) {
        console.error('获取数据失败:', error)
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchSceneData()
      // 滚动到顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>

🚀 六、项目优化与扩展

6.1 响应式设计优化

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .layout-container .el-header {
    padding: 0 10px;
  }
  
  .user-avatar .username {
    display: none;
  }
  
  .scene-row .el-col {
    margin-bottom: 15px;
  }
  
  .pagination {
    padding: 10px 0;
  }
}

@media screen and (max-width: 480px) {
  .el-dialog {
    width: 90% !important;
  }
  
  .scene-card .card-image {
    height: 150px;
  }
}

6.2 路由守卫（权限控制）

// router/index.js 添加路由守卫
router.beforeEach((to, from, next) => {
  const isLogin = !!localStorage.getItem('userInfo')
  
  // 需要登录的页面
  const authPages = ['User', 'Settings']
  
  if (authPages.includes(to.name) && !isLogin) {
    next({ name: 'Home' })
    Message.warning('请先登录')
  } else {
    next()
  }
})

6.3 错误处理与加载状态

<!-- 全局加载组件 -->
<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        // 数据获取逻辑
      } catch (error) {
        this.$message.error('加载失败：' + error.message)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>