一、介绍
vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。参考以下文档
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/
pc端 elementui 组件库:
https://element.eleme.cn/#/zh-CN/component/installation
二、安装与运行
下载项目后,执行下面命令安装依赖包。(有时候遇到网络不好,就把node_modules依赖包删掉重新执行下面命令)
npm install 或 cnpm install 或 yarn install
本地环境代理启动命令(根据README.md)
npm run serve 或 npm run dev
三、调试
请求路径配置
本地开发调试时在根目录的vue.config.js中进行配置
devServer: {
open: true, //是否自动在浏览器打开
https: false, //是否配置https
hot: true,
hotOnly: true, //是否热更新
disableHostCheck: true,
proxy: {
"/proxy": {
target: "http://0.0.0.0/api", // 配置后台Api地址
ws: true,
changOrigin: true,
pathRewrite: {
"^/proxy": ""
}
}
}
}
四、新增页面
以新增一个简单的用户管理页面为例。
1、创建 vue 文件
首先明确创建的页面属于哪个模块,然后去查找或者新建对应的文件目录
如用户管理属于系统管理模块,文件路径便为 views/system-module/user-managemenet
<template>
<div class="user-managemenet">user-managemenet组件</div>
</template>
<script>
export default {
name: 'user-managemenet',
data() {
return {}
},
created() {}, // 页面初始化调用
methods: {}, // 自定义方法
}
</script>
<style lang="scss" scoped>
.user-managemenet {
}
</style>
2、添加路由
找到路由文件 src/router/index.js
{
path: "/system",
component: Layout,
meta: {
title: "系统管理",
icon: "mul"
},
children: [
{ // 字典管理
path: "/dict-management", // 路由路径
name: "dictManagement", // 路由名称
component: () => import("@/views/system-module/dict-management/index.vue"), // 页面组件
meta: {
title: "字典管理" //路由标题
}
},
{ // 新增用户管理
path: "/user-management", // 填写页面路径,一般为组件名
name: "userManagement", // 填写路由名称
component: () =>import("@/views/system-module/user-management/index.vue"),// 引入新增的页面组件
meta: {
title: "用户管理" // 填写路由标题
}
}
}
如新增的为一级菜单,则在与系统管理同级新增对象即可。
3、表单内容框
<div class="content-container">
<div class="table-oper">
<el-button type="success" @click="handleAdd()">新增用户</el-button>
</div>
<div class="table-content">
<el-table :data="tableData">
<el-table-column type="index" width="50" label="序号" />
<el-table-column label="姓名" prop="name" />
<el-table-column label="性别" prop="sex" />
<el-table-column label="年龄" prop="age" />
<el-table-column label="角色" prop="role" />
<el-table-column label="操作" fixed="right" width="180">
<template slot-scope="scope">
<el-link type="primary" @click="handleEdit(scope.row)">编辑</el-link>
<el-link type="danger" @click="handleDel(scope.row)">删除</el-link>
</template>
</el-table-column>
</el-table>
<y-pagination @pagination="pagination" :total="pageForm.totalCount"></y-pagination>
</div>
</div>
4、表格数据
data () {
return {
tableData: [{
id: 1,
name: "王一",
sex: "男",
age: "20",
role: "管理员",
}, {
id: 2,
name: "王一",
sex: "男",
age: "20",
role: "管理员",
}, {
id: 3,
name: "王一",
sex: "男",
age: "20",
role: "管理员",
}]
}
}
基础页面采用统一的布局和Class,避免重复改写样式。
弹窗
弹窗代码:
<el-dialog :visible.sync="postDialogVisible" width="50%" class="edit-dialog" :title="dialogName">
<el-form ref="postForm" :rules="rules" :model="postForm" :inline="true" size="small">
<el-form-item label="姓名" prop="name" required>
<el-input v-model="postForm.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="性别" prop="sex" required>
<el-select class="item-select" placeholder="请选择" v-model="postForm.sex">
<el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="年龄" prop="age" required>
<el-input v-model="postForm.age" placeholder="请输入年龄" />
</el-form-item>
<el-form-item label="角色" prop="role" required>
<el-select class="item-select" placeholder="请选择" v-model="postForm.role">
<el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSave('postForm')">保 存</el-button>
<el-button @click="postDialogVisible = false">取 消</el-button>
</span>
</el-dialog>
新增与编辑建议采用同一个弹窗,通过handleAdd(),handleEdit()改变弹窗标题dialogName。
五、新增接口
与新增 Vue 页面思路类似,需要找到src/api/modules下对应的 api 文件。
不清楚可通过查询路由。系统管理即对应 system-api。
api 文件的命名通常为一级路由 + -api
{
"path": "/system",
"component": Layout,
"meta": {
"title": "系统管理",
"icon": "mul"
}
}
在 system-api 文件中编写新接口
推荐写法
/**
* 系统管理-用户管理-查询用户
*
* @param {*} params
* @param {*} options
* @returns
*/
export function findAllUser(params) {
return request({
url: '/allUserInfo',
method: 'get',
params: params,
})
}
当请求方式为get时 参数为 params: params。 当请求方式为post时 参数为 data: params。
最后在src/api/index.js中导出接口 Api。
import * as systemApi from './modules/system-api'
export { systemApi }
1、表单查询
在 vue 文件中引入 api
import { systemApi } from '@api/index'
页面的基础表单查询,建议采用统一命名。 handleSearch(){} // 查询
参数使用扩展运算符赋值,这样之后接口变动(增加或者删除字段)只需修改页面代码,无需改动方法。
handleSearch () {
const params = { ...this.conditiontForm, ...this.pageForm } // 条件对象 和 分页对象
userManageApi.findAllUser(params).then(res => {
this.tableData = res.data
this.pageForm.totalCount = this.tableData.length
})
}
2、表单提交
在 vue 文件中引入 api
import { systemApi } from '@api/index'
页面的基础增删改表单提交,建议采用统一命名。 handleAdd(){} // 新增 handleEdit(){} // 编辑
handleDel(){} // 删除
这样新增多个页面只需要修改里面调用的 Api 名称,方便后续版本的迭代更新。
参数使用扩展运算符赋值,这样之后接口变动(增加或者删除字段)只需修改页面代码,无需改动方法。
handleAdd () {
const params = { ...this.postForm }
systemApi.addUser(params).then(res => {
if (res.code === "00") {
this.postDialogVisible = false
}
})
}
3、表单校验
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 Form 表单代码:
<el-form ref="postForm" :rules="rules" :model="postForm" :inline="true" size="small">
<el-form-item label="姓名" prop="name" required>
<el-input v-model="postForm.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="性别" prop="sex" required>
<el-select class="item-select" placeholder="请选择" v-model="postForm.sex">
<el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="年龄" prop="age" required>
<el-input v-model="postForm.age" placeholder="请输入年龄" />
</el-form-item>
<el-form-item label="角色" prop="role" required>
<el-select class="item-select" placeholder="请选择" v-model="postForm.role">
<el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
data 里的 rule 规则代码:
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
],
sex: [
{ required: true, message: '请选择性别', trigger: 'blur' }
],
role: [
{ required: true, message: '请选择角色', trigger: 'blur' }
]
}
表单提交时调用校验方法代码:
this.$refs['postForm'].validate((valid) => {
if (valid) {
// 验证通过调用接口
} else {
console.log('error submit!!')
return false
}
})