stdproject/frontend

StdProject Frontend

基于 Vue 3 + Vite + Element Plus 的现代化前端管理系统

技术栈

• Vue 3 - 渐进式 JavaScript 框架
• Vite - 下一代前端构建工具
• Element Plus - 基于 Vue 3 的组件库
• Vue Router - Vue.js 官方路由管理器
• Pinia - Vue 的状态管理库
• Axios - HTTP 客户端
• SCSS - CSS 预处理器
• ESLint - 代码质量检查工具

项目结构

frontend/
├── src/
│   ├── api/                 # API 接口
│   │   ├── auth.js         # 认证相关接口
│   │   ├── user.js         # 用户管理接口
│   │   ├── role.js         # 角色管理接口
│   │   ├── organization.js # 组织管理接口
│   │   └── dictionary.js   # 字典管理接口
│   ├── components/         # 公共组件
│   ├── router/             # 路由配置
│   │   └── index.js        # 路由定义
│   ├── store/              # 状态管理
│   │   ├── app.js          # 应用状态
│   │   └── user.js         # 用户状态
│   ├── styles/             # 样式文件
│   │   └── index.scss      # 全局样式
│   ├── utils/              # 工具函数
│   │   ├── index.js        # 通用工具函数
│   │   └── request.js      # HTTP 请求封装
│   ├── views/              # 页面组件
│   │   ├── Login.vue       # 登录页
│   │   ├── Dashboard.vue   # 仪表盘
│   │   ├── Users.vue       # 用户管理
│   │   ├── Roles.vue       # 角色管理
│   │   ├── Organizations.vue # 组织管理
│   │   └── Dictionaries.vue # 字典管理
│   ├── App.vue             # 根组件
│   └── main.js             # 应用入口
├── package.json            # 项目依赖
├── vite.config.js          # Vite 配置
└── README.md               # 项目说明

功能特性

🔐 认证授权

• JWT Token 认证
• 登录/登出
• 路由守卫
• 权限控制

👥 用户管理

• 用户列表查询
• 用户增删改查
• 用户状态管理
• 密码重置
• 批量操作

🛡️ 角色管理

• 角色列表查询
• 角色增删改查
• 权限分配
• 批量操作

🏢 组织管理

• 组织树形结构
• 组织增删改查
• 层级管理
• 拖拽排序

📚 字典管理

• 字典分类管理
• 字典数据管理
• 动态配置
• 缓存机制

📊 仪表盘

• 数据统计
• 图表展示
• 快捷操作
• 系统概览

开发指南

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0 或 yarn >= 1.22.0

安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

开发模式

# 启动开发服务器
npm run dev

# 或
yarn dev

访问 http://localhost:3000

构建生产版本

# 构建生产版本
npm run build

# 或
yarn build

代码检查

# 运行 ESLint
npm run lint

# 或
yarn lint

预览生产版本

# 预览构建结果
npm run preview

# 或
yarn preview

配置说明

环境变量

创建 .env.local 文件配置本地环境变量：

# API 基础地址
VITE_API_BASE_URL=http://localhost:8080

# 应用标题
VITE_APP_TITLE=StdProject 管理系统

代理配置

开发环境下，Vite 会自动将 /api 开头的请求代理到后端服务器：

// vite.config.js
server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

API 接口

认证接口

• POST /api/auth/login - 用户登录
• POST /api/auth/logout - 用户登出
• GET /api/auth/captcha - 获取验证码
• POST /api/auth/refresh - 刷新 Token

用户接口

• GET /api/users - 获取用户列表
• POST /api/users - 创建用户
• PUT /api/users/:id - 更新用户
• DELETE /api/users/:id - 删除用户

角色接口

• GET /api/roles - 获取角色列表
• POST /api/roles - 创建角色
• PUT /api/roles/:id - 更新角色
• DELETE /api/roles/:id - 删除角色

组织接口

• GET /api/organizations/tree - 获取组织树
• POST /api/organizations - 创建组织
• PUT /api/organizations/:id - 更新组织
• DELETE /api/organizations/:id - 删除组织

字典接口

• GET /api/dictionaries - 获取字典列表
• POST /api/dictionaries - 创建字典
• PUT /api/dictionaries/:id - 更新字典
• DELETE /api/dictionaries/:id - 删除字典

开发规范

代码风格

• 使用 ESLint 进行代码检查
• 遵循 Vue 3 Composition API 规范
• 使用 SCSS 编写样式
• 组件命名使用 PascalCase
• 文件命名使用 kebab-case

组件开发

<template>
  <!-- 模板内容 -->
</template>

<script setup>
// 使用 Composition API
import { ref, reactive, onMounted } from 'vue'

// 响应式数据
const loading = ref(false)
const form = reactive({})

// 生命周期
onMounted(() => {
  // 初始化逻辑
})
</script>

<style lang="scss" scoped>
// 组件样式
</style>

状态管理

使用 Pinia 进行状态管理：

// store/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),
  
  actions: {
    async login(credentials) {
      // 登录逻辑
    }
  }
})

部署说明

构建部署

1. 构建生产版本：

   npm run build
   

2. 将 dist 目录部署到 Web 服务器

Nginx 配置

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;
    
    # 处理 Vue Router 的 history 模式
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # API 代理
    location /api {
        proxy_pass http://backend-server:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

常见问题

Q: 如何添加新的页面？

A:

1. 在 src/views 目录下创建新的 Vue 组件
2. 在 src/router/index.js 中添加路由配置
3. 如需要，在导航菜单中添加对应链接

Q: 如何添加新的 API 接口？

A:

1. 在 src/api 目录下对应的文件中添加接口函数
2. 使用 request 工具发送 HTTP 请求
3. 在组件中导入并使用

Q: 如何自定义主题？

A:

1. 修改 src/styles/index.scss 中的 CSS 变量
2. 覆盖 Element Plus 的主题变量
3. 重新构建项目

贡献指南

1. Fork 项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

联系方式

• 项目地址：GitHub Repository
• 问题反馈：Issues
• 邮箱：your-email@example.com