va_admin_frontend

cool-admin [vue2]

cool-admin 一个很酷的后台权限管理系统，开源免费，模块化、插件化、极速开发 CRUD，方便快速构建迭代后台管理系统， 到论坛 进一步了解

地址

• ⚡️ vue2.x + element-ui

• ⚡️ vue3.x + element-plus + ts + webpack

• 📌 vue3.x + element-plus + ts + vite

• 🌐 码云仓库地址

演示

https://show.cool-admin.com

账户：admin，密码：123456

项目后端

https://github.com/cool-team-official/cool-admin-midway

微信群

微信公众号

在线社区

https://bbs.cool-js.com/

使用条件

请确保您的操作系统上安装了 Node.js（> = 8.9.0）、@vue/cli （> 3.0.0）。

安装项目依赖

推荐使用 yarn：

yarn

解决 node-sass 网络慢的方法：

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

运行应用程序

安装过程完成后，运行以下命令启动服务。您可以在浏览器中预览网站 http://localhost:9000

yarn serve

极速 CRUD

1. vscode 编辑器下输入关键字 cl-crud，会生成对应的模板代码：

   <template>
   	<cl-crud ref="crud" @load="onLoad">
   		<el-row type="flex" align="middle">
   			<!-- 刷新按钮 -->
   			<cl-refresh-btn />
   			<!-- 新增按钮 -->
   			<cl-add-btn />
   			<!-- 删除按钮 -->
   			<cl-multi-delete-btn />
   			<cl-flex1 />
   			<!-- 关键字搜索 -->
   			<cl-search-key />
   		</el-row>
   
   		<el-row>
   			<!-- 数据表格 -->
   			<cl-table v-bind="table"></cl-table>
   		</el-row>
   
   		<el-row type="flex">
   			<cl-flex1 />
   			<!-- 分页控件 -->
   			<cl-pagination />
   		</el-row>
   
   		<!-- 新增、编辑 -->
   		<cl-upsert ref="upsert" v-bind="upsert"></cl-upsert>
   	</cl-crud>
   </template>
   
   <script>
   	export default {
   		data() {
   			return {
   				// 新增、编辑配置
   				upsert: {
   					items: []
   				},
   				// 表格配置
   				table: {
   					columns: []
   				}
   			};
   		},
   		methods: {
   			onLoad({ ctx, app }) {
   				// crud 配置
   				ctx.service().done();
   				// 发送 page 接口请求
   				app.refresh();
   			}
   		}
   	};
   </script>
   

2. 编辑数据表格 cl-table：

   {
   	table: {
   		// 参数与 el-table-column 一致，并支持许多骚操作
   		columns: [
   			// 多选列
   			{
   				type: "selection",
   				width: 60
   			},
   			// 自定义列
   			{
   				label: "昵称",
   				prop: "name"
   			},
   			{
   				label: "账户",
   				prop: "price",
   				sortable: "custom" // 是否添加排序
   			},
   			{
   				label: "状态",
   				prop: "status",
   				// 字典匹配，使用 el-tag 展示
   				dict: [
   					{
   						label: "启用",
   						value: 1,
   						type: "primary"
   					},
   					{
   						label: "禁用",
   						value: 0,
   						type: "danger"
   					}
   				]
   			},
   			{
   				label: "创建时间",
   				prop: "createTime"
   			},
   			// 操作按钮列，默认包含：编辑、删除
   			{
   				type: "op"
   			}
   		];
   	}
   }
   

3. 编辑新增、编辑表单 cl-upsert：

   {
   	upsert: {
   		items: [
   			{
   				label: "昵称",
   				prop: "name",
   				// 参数与 el-form-item 一致
   				props: {},
   				value: "神仙都没用", // 昵称默认值
   				// 渲染参数，支持 slot, 组件实例，jsx
   				component: {
   					name: "el-input", // 可以是任意已注册的组件名
   					props: {}, // 组件的参数
   					on: {} // 组件的回调事件
   				},
   				// 验证规则，与 el-form 一致
   				rules: {
   					required: true,
   					message: "昵称不呢为空"
   				}
   			},
   			{
   				label: "存款",
   				prop: "price",
   				component: {
   					name: "el-input-number",
   					props: {
   						min: 0,
   						max: 10000
   					}
   				}
   			},
   			{
   				label: "状态",
   				prop: "status",
   				value: 1,
   				component: {
   					name: "el-radio-group",
   					options: [
   						{
   							label: "启用",
   							value: 1
   						},
   						{
   							label: "禁用",
   							value: 0
   						}
   					]
   				}
   			}
   		];
   	}
   }
   

4. 绑定 service。在 src/service/ 下新建文件 test.js，并编辑：

   // src/service/test.js
   import { BaseService, Service, Permission } from "cl-admin";
   
   // 请求接口的路径
   @Service("test")
   class Test extends BaseService {
   	// 继承 BaseService 后，拥有 page, list, add, delete, update, info 6个基本接口
   
   	// 自定义其他接口
   	@Permission("product") // 权限装饰器，可选
   	product(id) {
   		// this.request() 参数与 axios 一致
   		return this.request({
   			url: "/product",
   			method: "POST",
   			data: {
   				id
   			}
   		});
   	}
   }
   
   export default Test;
   

在 src/service/ 下的文件，框架会自动根据 目录结构 和 文件名称 格式化成对应的 $service 对象。你现在可以这么使用它：

this.$service.test.page({ page: 1 });
this.$service.test.product(1);

service 编写好后，我们把它绑定在 crud 上：

export default {
	methods: {
		onLoad({ ctx, app }) {
			// 绑定 service，这边指定到 test 即可
			ctx.service(this.$service.test).done();

			// 发起 page 请求
			app.refresh({
				// 请求默认参数
			});
		}
	}
};

1. 效果预览