勾股Admin指南

简介【一键CRUD建表样例,请滚到底部查看】

现今，前端主要是以 React 和 Vue 为代表的 JS 框架盛行的时代，但还是有很多后端开发人员在使用Layui，因为Layui门槛极低，拿来即用，无需涉足各种前端工具的复杂配置，程序员只需面对浏览器本身，就能让业务所需要的一切元素与交互快速实现。

勾股Admin是一款开基于Layui的最新版扩展的Web UI解决方案。封装了Layui的自身调用方法和一些常用的工具函数，整合部分第三方开源的组件。更多是为服务端程序员量身定做，为使用者提供相对完善的前端UI开发方案，相信她是一个很好的前端轮子。

开源项目地址：https://gitee.com/gouguopen/guoguadmin

PS：项目会不定时进行更新，建议⭐star⭐和👁️watch👁️一份。

使用

只需引用一个CSS文件和两个JS文件，声明需要加载的模块，然后初始化操作即可。

1、引用CSS文件，放在页头。

<link rel="stylesheet" href="/assets/gougu/css/gougu.css">

PS：如果是布局母模板需要引入 layout.css。

<link rel="stylesheet" href="/assets/gougu/css/layout.css">

2、声明需要加载的模块，并完成初始化元素操作函数等，放在页脚。

<script>
//声明需要加载的模块
const moduleInit = ['tool', 'admin'];

//初始化操作
function gouguInit() {
	//do something here
}
</script>

3、引用JS文件，放在页面的最下面。

<script src="/assets/layui/layui.js"></script>
<script src="/assets/gougu/gouguInit.js"></script>

PS：如果是项目使用的是模板继承方式开发的话，把引入文件固定写在母模板，然后只需要在子模板声明需要加载的模块，并完成初始化元素操作函数即可。

目录结构


┌── assets					# 静态资源
│   ├── gougu				# 核心文件
│	│	├── images			# 图片文件
│	│	├── module			# 封装或第三方组件
│	│	├── css			    # 样式
│	│	├── gouguInit.js	# Lyui调用文件方法
│	├── icon				# icon文件
│	├── layui				# layui文件
│	├── third_party			# 第三方插件文件
├── json					# 页面展示模拟数据Json格式
├── view					# 页面文件
│	├── base				# 基础组件页面
│	├── form				# 表单组件页面
│	├── home				# 推荐效果页面
│	├── table				# 数据表组件页面
├── index.html				# 入口文件

PS：项目会不定时进行更新，建议⭐star⭐和👁️watch👁️一份。

module 封装或第三方组件


┌── admin.js				# admin组件，一般在布局页面的母页面使用
├── tool.js					# 工具类组件，一般每个页面都使用都到（右侧是针对tool工具类的使用讲解）
├── tag.js					# tag组件
├── tagpicker.js			# tag新增选择组件
├── treeGrid.js				# 树形菜单组件
├── treetable.js			# 树形表格组件
├── formSelects.js			# 表单下来选择选项之间，支持多选、单选
├── tinymce.js				# tinymce富文本编辑器
├── editormd.js				# editormd Markdown编辑器

PS：以上组件都在项目的assets\gougu\module\目录内，会不定时进行更新，建议关注项目，获取更新。

third_party 第三方插件


┌── echart				# 强大的chart插件
├── fullcalendar		# 强大的日历插件
├── prism				# 轻巧实用的代码高亮插件

PS：以上组件都在项目的assets\third_party\目录内，会不定时进行更新，建议关注项目，获取更新。

一键CRUD视频教程

一键CRUD建表样例


-- ----------------------------
-- Table structure for cms_course
-- ----------------------------
DROP TABLE IF EXISTS `cms_course`;
CREATE TABLE `cms_course`  (
  `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT,
  `cate_id` int(11) UNSIGNED NOT NULL DEFAULT 0 COMMENT '分类ID',
  `course_type` tinyint(1) UNSIGNED NOT NULL DEFAULT 0 COMMENT '类型:1线下课程,2视频课程,3音频课,4直播课',
  `type` tinyint(1) UNSIGNED NOT NULL DEFAULT 0 COMMENT '属性:1精华 2热门 3推荐',
  `is_home` tinyint(1) NOT NULL DEFAULT 0 COMMENT '是否首页显示:0否,1是',
  `status` tinyint(1) NOT NULL DEFAULT 1 COMMENT '状态:0下架,1正常',
  `title` varchar(200) NOT NULL DEFAULT '' COMMENT '课程名称',
  `thumb` varchar(255) NOT NULL DEFAULT '' COMMENT '缩略图',
  `desc` varchar(1000) NOT NULL DEFAULT '' COMMENT '课程摘要',
  `content` text NULL COMMENT '课程介绍',
  `speaker` varchar(200) NOT NULL DEFAULT '' COMMENT '主讲老师',
  `base_price` decimal(10, 2) NULL DEFAULT 0.00 COMMENT '基础价格',
  `price` decimal(10, 2) NULL DEFAULT 0.00 COMMENT '实际价格',
  `live_link` varchar(255) NOT NULL DEFAULT '' COMMENT '直播地址',
  `address` varchar(255) NOT NULL DEFAULT '' COMMENT '线下开课地址',
  `start_time` int(10) UNSIGNED NULL DEFAULT 0 COMMENT '课程开始时间',
  `end_time` int(10) UNSIGNED NULL DEFAULT 0 COMMENT '课程结束时间',
  `read` int(11) UNSIGNED NOT NULL DEFAULT 0 COMMENT '阅读量',
  `sort` int(11) UNSIGNED NOT NULL DEFAULT 0 COMMENT '排序',
  `create_time` int(11) NOT NULL DEFAULT 0 COMMENT '创建时间',
  `update_time` int(11) NOT NULL DEFAULT 0 COMMENT '编辑时间',
  `delete_time` int(11) NOT NULL DEFAULT 0 COMMENT '删除时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COMMENT = '课程::crud';

常用方法

<script>
//以下方法在加载了tool模块后可调用
const moduleInit = ['tool'];

//初始化操作
function gouguInit() {
	let tool = layui.tool;
}
</script>


//右侧打开页面，如果不传框架宽度参数的话，打开的窗口会根据1280与1920两个宽度来自适应。
tool.side(url, width);

//关闭右侧打开页面,如果传入delay参数（数字毫秒），则会延迟关闭，不传即立即关闭。
tool.sideClose(delay);

//子页面打开新的tab，参数必填，'url':链接，'title':tab标题。
tool.tabAdd(url,title);

//子页面关闭当前tab
tool.tabClose();

//子页面关闭指定tab，参数id必填，且是数字
tool.tabDelete(id);

//子页面切换到指定tab，参数id必填，且是数字
tool.tabChange(id);

//子页面刷新指定tab，参数id必填，且是数字
tool.tabRefresh(id);

get、post、put、delete请求方法

<script>
//以下方法在加载了tool模块后可调用
const moduleInit = ['tool'];

//初始化操作
function gouguInit() {
	let tool = layui.tool;
}
</script>

/*=================以下是常规的（get、post、put、delete）方法调用====================*/

//get获取。必填参数，'url':请求地址，字符串, 'data':需要传的参数，对象, 'callback':成功回调函数
tool.get(url, data, callback);
//例子：
tool.get("/project/api/get_project", {}, function (res) {
	let data = res.data;
	console.log(data);
});

/*========================华丽的分割线============================*/

//post提交。必填参数，'url':请求地址，字符串, 'data':需要传的参数，对象, 'callback':成功回调函数
tool.post(url, data, callback);
//例子：
let callback = function (e) {
	layer.msg(e.msg);
	if (e.code == 0) {
		setTimeout(function () {
			parent.location.reload();
		}, 1000);					
	}
}
tool.post("/article/cate/cate_add", {id:1,title:'勾股Admin'}, callback);

/*========================华丽的分割线============================*/

//put修改。必填参数，'url':请求地址，字符串, 'data':需要传的参数，对象, 'callback':成功回调函数
tool.put(url, data, callback);
//例子：
let callback = function (e) {
	layer.msg(e.msg);
	if (e.code == 0) {
		parent.layui.tool.close(1000);
	}
}
tool.put("/contract/index/add", {'id':1,'title':'勾股CMS'}, callback);

/*========================华丽的分割线============================*/

//delete删除。必填参数，'url':请求地址，字符串, 'data':需要传的参数，对象, 'callback':成功回调函数
tool.delete(url, data, callback);
//例子：
let callback = function (e) {
	layer.msg(e.msg);
	if (e.code == 0) {
		obj.del();
	}
}
tool.delete("/article/cate/cate_delete", { id: 2}, callback);

ajax的json 与 jsonp请求

/*=================以下是常规的ajax（json、jsonp）方法调用====================*/

//ajax。必填参数，'options':请求参数，对象，'callback':成功回调函数
tool.ajax(options, callback);

//常规json请求例子：
let options = {
		url: '/home/ask/ask',
		type: 'post',
		data: {
			title: '正常的Ajax请求',
			content: '注意：这是一个常规的Ajax请求'
		}
	});
let callback = function(res) {
	if (res.code == 0) {
		layer.msg('问题提交成功，我们会尽快回复您。');
		setTimeout(function() {
			window.location.href = '/home/user/my_ask.html'
		}, 2000);
		return;
	}
	layer.msg('发布失败！');
}
tool.ajax(options, callback);

/*========================华丽的分割线============================*/

//jsonp请求例子：
let options = {
		url: '/home/ask/ask',
		type: 'post',
		data: {
			format:'jsonp',//这个jsonp必须要有
			title: 'jsonp的Ajax请求',
			content: '注意：这是一个jsonp的Ajax请求'
		}
	});
let callback = function(res) {
	if (res.code == 0) {
		layer.msg('问题提交成功，我们会尽快回复您。');
		setTimeout(function() {
			window.location.href = '/home/user/my_ask.html'
		}, 2000);
		return;
	}
	layer.msg('发布失败！');
}
tool.ajax(options, callback);