vue-element-admin与后台之间的crud

最新推荐文章于 2024-08-08 08:33:51 发布

可乐不加冰哦

最新推荐文章于 2024-08-08 08:33:51 发布

阅读量3.7k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45737653/article/details/104529508

版权

这篇博客介绍了如何在vue-element-admin项目中进行CRUD操作。首先，它概述了vue-element-admin作为前端解决方案的角色，然后详细说明了从安装、创建新页面（如department.vue）、配置路由到启用真实数据的步骤，涉及动态路由、权限验证和axios的使用。

摘要由CSDN通过智能技术生成

1.介绍

vue-element-admin 是一个后台前端解决方案，它基于 vue-cli 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

2.vue-element-admin

https://github.com/PanJiaChen/vue-element-admin

3.安装

npm install 安装依赖前端js库
npm run dev 运行前端项目
npm run build 打包(先不管发布时候使用)

4.修改为你所需要的页面（如：department）

在这里插入图片描述
1.新建一个vue页面（department.vue）

复制一份table的组件，改名为department.vue

2. - 在routes.js中导入department组件

import Department from './views/department/department.vue'

3. - 在routes.js中配置路由

{
   
        path: '/',
        component: Home,
        name: '组织机构',
        iconCls: 'fa fa-id-card-o',
        children: [
            {
    path: '/department', component: Department, name: '部门管理' }
        ]
    },

4.在main.js中关闭mock模拟数据，引入axios

import routes from './routes'

/*import Mock from './mock'
Mock.bootstrap();*/
//引入axios
import axios from 'axios';
//每次发送请求的时候 前面都要添加这个路径 http://localhost:8081/departments/list
axios.defaults.baseURL = 'http://localhost:80'
//把axios赋值给vue里面的$http这个变量
Vue.prototype.$http = axios;

5.真实数据的CRUD（department.vue）

<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getDepartments">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="departments" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index"  width="60">
			</el-table-column>

			<el-table-column prop="id" label="主键id" width="300" sortable>
			</el-table-column>
			<el-table-column prop="name" label="部门"   sortable>
			</el-table-column>

			<el-table-column label="操作" width="150" >
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>