WEB 端系统框架使用说明

zxna

已于 2022-05-24 10:18:42 修改

阅读量473

点赞数

文章标签： vue-element-admin 前端开发后台管理 API接口表单验证

于 2022-05-24 10:08:55 首次发布

本文链接：https://blog.csdn.net/qq_32555123/article/details/124940148

版权

一、介绍

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
  }
})

zxna

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WEB 端系统框架使用说明

一、介绍vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。参考以下文档https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/pc端 elementui 组件库:https://element.eleme.cn/#/zh
复制链接

扫一扫