<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>RBAC &#8211; 个人随笔</title>
	<atom:link href="/label/rbac/feed" rel="self" type="application/rss+xml" />
	<link>/</link>
	<description></description>
	<lastBuildDate>Mon, 11 Jun 2018 13:38:35 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.1</generator>

<image>
	<url>/wp-content/uploads/2022/01/cropped-截屏2022-01-01-18.57.09-32x32.png</url>
	<title>RBAC &#8211; 个人随笔</title>
	<link>/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>TP5 商城（一）环境部署、数据表、后台首页、用户 CURD、Ajax 状态切换、后台登录、后台退出、后台防翻墙、RBAC</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/7682.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/7682.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 09 Jun 2018 00:40:08 +0000</pubDate>
				<category><![CDATA[TP5.0]]></category>
		<category><![CDATA[TP5.0商城]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[Ajax 状态切换]]></category>
		<category><![CDATA[RBAC]]></category>
		<category><![CDATA[后台登录]]></category>
		<category><![CDATA[后台退出]]></category>
		<category><![CDATA[后台防翻墙]]></category>
		<category><![CDATA[后台首页]]></category>
		<category><![CDATA[数据表]]></category>
		<category><![CDATA[环境部署]]></category>
		<category><![CDATA[用户 CURD]]></category>
		<guid isPermaLink="false">/?p=7682</guid>

					<description><![CDATA[商城实战第一天 电商介绍 电子商务模式介绍 现在的电子商务平台主要分为以下几种类型： B2C ：全称-Busi [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1>商城实战第一天</h1>
<h1>电商介绍</h1>
<h2>电子商务模式介绍</h2>
<p>现在的电子商务平台主要分为以下几种类型：</p>
<ul>
<li>B2C ：全称-Business to Consumer , 即企业与消费者之间的电子商务。</li>
</ul>
<p>常见的有B2C网站有：天猫（商家入驻（实体店,保证金20W），需要营业许可证等资料）、京东(商家也可入驻)、当当网、唯品会、凡客、小米、华为、oppo等</p>
<ul>
<li>C2C: 全称-Consumer to Consumer，即消费者与消费者之间的电子商务。</li>
</ul>
<p>典型的C2C网站就是国内的淘宝（需要交保证金2000元左右），还有58同城，二手交易网站如：闲鱼二手交易网。</p>
<ul>
<li>O2O: 全称-Online to Offline,线上与线下相结合的电子商务。</li>
</ul>
<p>常见的有：苏宁、美团、国美、滴滴打车等。</p>
<ul>
<li>B2B：全称-Business to Business 即企业与企业之间的电子商务。（阿里妈妈）</li>
</ul>
<h2>常见的开源商城</h2>
<h3>（1）Ecshop</h3>
<p>ECShop是一款B2C独立网店系统，适合企业及个人快速构建个性化网上商店。系统是基于PHP语言及MYSQL数据库构架开发的跨平台开源程序。</p>
<p>网址：<a href="/goto/c9pa" rel="nofollow">http://www.ecshop.com/</a></p>
<p><img fetchpriority="high" decoding="async" width="1105" height="498" class="wp-image-7684" src="/wp-content/uploads/2018/06/word-image-286.png" srcset="/wp-content/uploads/2018/06/word-image-286.png 1105w, /wp-content/uploads/2018/06/word-image-286-300x135.png 300w, /wp-content/uploads/2018/06/word-image-286-768x346.png 768w, /wp-content/uploads/2018/06/word-image-286-1024x461.png 1024w" sizes="(max-width: 1105px) 100vw, 1105px" /></p>
<p>特点：开源、免费(个人学习使用没有任何问题)。但是企业使用用来盈利的话需要一定的授权费用（3000元左右）。</p>
<h3>（2）shopex</h3>
<p>网址：<a href="/goto/zptp" rel="nofollow">http://www.shopex.cn/</a></p>
<p>&nbsp;</p>
<p><img decoding="async" width="1087" height="468" class="wp-image-7685" src="/wp-content/uploads/2018/06/word-image-287.png" srcset="/wp-content/uploads/2018/06/word-image-287.png 1087w, /wp-content/uploads/2018/06/word-image-287-300x129.png 300w, /wp-content/uploads/2018/06/word-image-287-768x331.png 768w, /wp-content/uploads/2018/06/word-image-287-1024x441.png 1024w" sizes="(max-width: 1087px) 100vw, 1087px" /></p>
<p>特点：商业版，代码是加密过的。</p>
<h3>（3）shopnc</h3>
<p>网址: <a href="/goto/ajli" rel="nofollow">http://www.shopnc.net/</a></p>
<p>演示地址： <a href="/goto/ubug" rel="nofollow">http://b2b2c.shopnctest.com/dema/shop/index.php</a></p>
<p><img decoding="async" width="1104" height="416" class="wp-image-7686" src="/wp-content/uploads/2018/06/word-image-288.png" srcset="/wp-content/uploads/2018/06/word-image-288.png 1104w, /wp-content/uploads/2018/06/word-image-288-300x113.png 300w, /wp-content/uploads/2018/06/word-image-288-768x289.png 768w, /wp-content/uploads/2018/06/word-image-288-1024x386.png 1024w" sizes="(max-width: 1104px) 100vw, 1104px" /></p>
<p>特点：不开源、不免费</p>
<p>小结：</p>
<p>开源不代表免费，可以自己学习研究使用，但是以盈利为目的使用需要交一定的授权费用。</p>
<h2>安装Ecshop开源商城</h2>
<p>现在的Ecshop主要有以下两个版本：</p>
<ul>
<li>3.0版本：需要php5.4版本以上</li>
<li>2.7版本：需要在php5.3以下（如：phpstudy集成环境进行php降级），当然5.4、5、5版本也是可以的，只是需要修改部分代码。</li>
</ul>
<p>这里建议安装Ecshop的兼容版本，已经兼容各个php版本。</p>
<p><img loading="lazy" decoding="async" width="246" height="27" class="wp-image-7687" src="/wp-content/uploads/2018/06/word-image-289.png" /></p>
<h3>域名部署访问 ecshop</h3>
<p>一般把第三方开源项目部署在自己的机子上面域名前建议加个vendor,如：vendor.shop.com。明确知道这个程序是第三方程序。本地自己开发的项目话建议使用local进行开头，如:local.shop.com。</p>
<p>步骤1：把ecshop开源程序的所有的文件复制到我们的项目目录</p>
<p><img loading="lazy" decoding="async" width="841" height="424" class="wp-image-7688" src="/wp-content/uploads/2018/06/word-image-290.png" srcset="/wp-content/uploads/2018/06/word-image-290.png 841w, /wp-content/uploads/2018/06/word-image-290-300x151.png 300w, /wp-content/uploads/2018/06/word-image-290-768x387.png 768w" sizes="(max-width: 841px) 100vw, 841px" /></p>
<p>步骤2：配置虚拟主机，如域名为上面的vendor.ecshop.com</p>
<ol>
<li>phpstudy设置虚拟主机</li>
<li>设置host文件映射</li>
<li>重启phpstudy</li>
</ol>
<p>步骤3：输入域名进行安装配置</p>
<ol>
<li>勾选</li>
</ol>
<p><img loading="lazy" decoding="async" width="1088" height="661" class="wp-image-7689" src="/wp-content/uploads/2018/06/word-image-291.png" srcset="/wp-content/uploads/2018/06/word-image-291.png 1088w, /wp-content/uploads/2018/06/word-image-291-300x182.png 300w, /wp-content/uploads/2018/06/word-image-291-768x467.png 768w, /wp-content/uploads/2018/06/word-image-291-1024x622.png 1024w" sizes="(max-width: 1088px) 100vw, 1088px" /></p>
<p>b、配置系统</p>
<p><img loading="lazy" decoding="async" width="861" height="267" class="wp-image-7690" src="/wp-content/uploads/2018/06/word-image-292.png" srcset="/wp-content/uploads/2018/06/word-image-292.png 861w, /wp-content/uploads/2018/06/word-image-292-300x93.png 300w, /wp-content/uploads/2018/06/word-image-292-768x238.png 768w" sizes="(max-width: 861px) 100vw, 861px" /></p>
<p>c、配置数据库的信息</p>
<p><img loading="lazy" decoding="async" width="777" height="650" class="wp-image-7691" src="/wp-content/uploads/2018/06/word-image-293.png" srcset="/wp-content/uploads/2018/06/word-image-293.png 777w, /wp-content/uploads/2018/06/word-image-293-300x251.png 300w, /wp-content/uploads/2018/06/word-image-293-768x642.png 768w" sizes="(max-width: 777px) 100vw, 777px" /> <img loading="lazy" decoding="async" width="834" height="242" class="wp-image-7692" src="/wp-content/uploads/2018/06/word-image-294.png" srcset="/wp-content/uploads/2018/06/word-image-294.png 834w, /wp-content/uploads/2018/06/word-image-294-300x87.png 300w, /wp-content/uploads/2018/06/word-image-294-768x223.png 768w" sizes="(max-width: 834px) 100vw, 834px" /></p>
<p>访问ecshop前台：<a href="/goto/z1k0" rel="nofollow">http:/域名/</a></p>
<p>访问ecshop后台：<a href="/goto/1knx" rel="nofollow">http:/域名/admin/</a></p>
<p><img loading="lazy" decoding="async" width="781" height="382" class="wp-image-7693" src="/wp-content/uploads/2018/06/word-image-295.png" srcset="/wp-content/uploads/2018/06/word-image-295.png 781w, /wp-content/uploads/2018/06/word-image-295-300x147.png 300w, /wp-content/uploads/2018/06/word-image-295-768x376.png 768w" sizes="(max-width: 781px) 100vw, 781px" /></p>
<h1>部署tp5商城项目环境</h1>
<h2>部署虚拟主机</h2>
<p>三步：</p>
<p>步骤1：把tp5项目程序复制指定虚拟目录</p>
<p>步骤2：使用phpstudy配置域名如为：<a href="/goto/x9uh" rel="nofollow">www.php15shop.com</a>，虚拟目录需要绑定到public目录下面</p>
<p>步骤3：设置hosts文件映射</p>
<p>最后访问如下，说明配置成功：</p>
<p><img loading="lazy" decoding="async" width="693" height="379" class="wp-image-7694" src="/wp-content/uploads/2018/06/word-image-296.png" srcset="/wp-content/uploads/2018/06/word-image-296.png 693w, /wp-content/uploads/2018/06/word-image-296-300x164.png 300w" sizes="(max-width: 693px) 100vw, 693px" /></p>
<h2>导入商城项目所有数据表</h2>
<p>建议使用navicat可视化工具进行完成，找到对应的sql文件，进行导入。</p>
<p>要先创建一个数据库，如php15shop</p>
<p><img loading="lazy" decoding="async" width="736" height="210" class="wp-image-7695" src="/wp-content/uploads/2018/06/word-image-297.png" srcset="/wp-content/uploads/2018/06/word-image-297.png 736w, /wp-content/uploads/2018/06/word-image-297-300x86.png 300w" sizes="(max-width: 736px) 100vw, 736px" /></p>
<p>&nbsp;</p>
<p>每张表的字段信息可以参考数据库文档：</p>
<p><img loading="lazy" decoding="async" width="652" height="66" class="wp-image-7696" src="/wp-content/uploads/2018/06/word-image-298.png" srcset="/wp-content/uploads/2018/06/word-image-298.png 652w, /wp-content/uploads/2018/06/word-image-298-300x30.png 300w" sizes="(max-width: 652px) 100vw, 652px" /></p>
<h2>项目前的一些配置</h2>
<p>我们可以先把数据库、控制器后缀、静态资源目录等一些基本配置先定义好。</p>
<ul>
<li>数据库配置</li>
</ul>
<p><img loading="lazy" decoding="async" width="935" height="629" class="wp-image-7697" src="/wp-content/uploads/2018/06/word-image-299.png" srcset="/wp-content/uploads/2018/06/word-image-299.png 935w, /wp-content/uploads/2018/06/word-image-299-300x202.png 300w, /wp-content/uploads/2018/06/word-image-299-768x517.png 768w" sizes="(max-width: 935px) 100vw, 935px" /></p>
<ul>
<li>控制器后缀</li>
</ul>
<p><img loading="lazy" decoding="async" width="798" height="303" class="wp-image-7698" src="/wp-content/uploads/2018/06/word-image-300.png" srcset="/wp-content/uploads/2018/06/word-image-300.png 798w, /wp-content/uploads/2018/06/word-image-300-300x114.png 300w, /wp-content/uploads/2018/06/word-image-300-768x292.png 768w" sizes="(max-width: 798px) 100vw, 798px" /></p>
<ul>
<li>配置静态资源路径，把后台静态资源放到相应的目录,配置后台密码加密验salt</li>
</ul>
<p><img loading="lazy" decoding="async" width="767" height="329" class="wp-image-7699" src="/wp-content/uploads/2018/06/word-image-301.png" srcset="/wp-content/uploads/2018/06/word-image-301.png 767w, /wp-content/uploads/2018/06/word-image-301-300x129.png 300w" sizes="(max-width: 767px) 100vw, 767px" /></p>
<ul>
<li>先设置默认模块为admin、开发前台时（项目上线）设置为home</li>
</ul>
<p><img loading="lazy" decoding="async" width="785" height="161" class="wp-image-7700" src="/wp-content/uploads/2018/06/word-image-302.png" srcset="/wp-content/uploads/2018/06/word-image-302.png 785w, /wp-content/uploads/2018/06/word-image-302-300x62.png 300w, /wp-content/uploads/2018/06/word-image-302-768x158.png 768w" sizes="(max-width: 785px) 100vw, 785px" /></p>
<ul>
<li>并且开启调试模式,页面trace调试，看到错误的详细信息</li>
</ul>
<p><img loading="lazy" decoding="async" width="866" height="277" class="wp-image-7701" src="/wp-content/uploads/2018/06/word-image-303.png" srcset="/wp-content/uploads/2018/06/word-image-303.png 866w, /wp-content/uploads/2018/06/word-image-303-300x96.png 300w, /wp-content/uploads/2018/06/word-image-303-768x246.png 768w" sizes="(max-width: 866px) 100vw, 866px" /></p>
<p>开启页面trace调试，页面右下角多处一个图标。</p>
<p><img loading="lazy" decoding="async" width="153" height="49" class="wp-image-7702" src="/wp-content/uploads/2018/06/word-image-304.png" srcset="/wp-content/uploads/2018/06/word-image-304.png 153w, /wp-content/uploads/2018/06/word-image-304-150x49.png 150w" sizes="(max-width: 153px) 100vw, 153px" /></p>
<ul>
<li>开启模型获取数据返回关联数组的配置</li>
</ul>
<p><img loading="lazy" decoding="async" width="901" height="177" class="wp-image-7703" src="/wp-content/uploads/2018/06/word-image-305.png" srcset="/wp-content/uploads/2018/06/word-image-305.png 901w, /wp-content/uploads/2018/06/word-image-305-300x59.png 300w, /wp-content/uploads/2018/06/word-image-305-768x151.png 768w" sizes="(max-width: 901px) 100vw, 901px" /></p>
<ul>
<li>修改重写文件.htaccess隐藏单一入口文件访问</li>
</ul>
<p>这里需要在httpd.conf开启rewrite重写模块，和在虚拟主机中把 AllowOverride None改为 AllowOverride All，这两步在安装phpstudy的时候和配置虚拟主机时其已经帮我们设置好了。</p>
<p>只需要改修改重写文件.htaccess，前面加个问号?</p>
<h1>三、搭建后台首页</h1>
<p><img loading="lazy" decoding="async" width="844" height="270" class="wp-image-7704" src="/wp-content/uploads/2018/06/word-image-306.png" srcset="/wp-content/uploads/2018/06/word-image-306.png 844w, /wp-content/uploads/2018/06/word-image-306-300x96.png 300w, /wp-content/uploads/2018/06/word-image-306-768x246.png 768w" sizes="(max-width: 844px) 100vw, 844px" /></p>
<p>步骤1：在后台admin建立一个index控制器，分别建立top、main、left、index</p>
<p><img loading="lazy" decoding="async" width="774" height="613" class="wp-image-7705" src="/wp-content/uploads/2018/06/word-image-307.png" srcset="/wp-content/uploads/2018/06/word-image-307.png 774w, /wp-content/uploads/2018/06/word-image-307-300x238.png 300w, /wp-content/uploads/2018/06/word-image-307-768x608.png 768w" sizes="(max-width: 774px) 100vw, 774px" /></p>
<p>步骤2：复制后台指定的模板到指定的目录，并且修改每个模板的静态资源路径</p>
<p><img loading="lazy" decoding="async" width="1264" height="457" class="wp-image-7706" src="/wp-content/uploads/2018/06/word-image-308.png" srcset="/wp-content/uploads/2018/06/word-image-308.png 1264w, /wp-content/uploads/2018/06/word-image-308-300x108.png 300w, /wp-content/uploads/2018/06/word-image-308-768x278.png 768w, /wp-content/uploads/2018/06/word-image-308-1024x370.png 1024w" sizes="(max-width: 1264px) 100vw, 1264px" /></p>
<p>访问效果：</p>
<p><img loading="lazy" decoding="async" width="744" height="432" class="wp-image-7707" src="/wp-content/uploads/2018/06/word-image-309.png" srcset="/wp-content/uploads/2018/06/word-image-309.png 744w, /wp-content/uploads/2018/06/word-image-309-300x174.png 300w" sizes="(max-width: 744px) 100vw, 744px" /></p>
<h1>四、用户表的CURD操作</h1>
<h3>完成用户的添加功能</h3>
<p>步骤1：在后台创建User控制器，并建立一个add方法输出模板内容</p>
<p><img loading="lazy" decoding="async" width="794" height="286" class="wp-image-7708" src="/wp-content/uploads/2018/06/word-image-310.png" srcset="/wp-content/uploads/2018/06/word-image-310.png 794w, /wp-content/uploads/2018/06/word-image-310-300x108.png 300w, /wp-content/uploads/2018/06/word-image-310-768x277.png 768w" sizes="(max-width: 794px) 100vw, 794px" /></p>
<p>步骤2：修改add.html模板的name名称</p>
<p><img loading="lazy" decoding="async" width="1286" height="622" class="wp-image-7709" src="/wp-content/uploads/2018/06/word-image-311.png" srcset="/wp-content/uploads/2018/06/word-image-311.png 1286w, /wp-content/uploads/2018/06/word-image-311-300x145.png 300w, /wp-content/uploads/2018/06/word-image-311-768x371.png 768w, /wp-content/uploads/2018/06/word-image-311-1024x495.png 1024w" sizes="(max-width: 1286px) 100vw, 1286px" /></p>
<p>步骤3：定义当前表的验证器</p>
<p><img loading="lazy" decoding="async" width="1209" height="714" class="wp-image-7710" src="/wp-content/uploads/2018/06/word-image-312.png" srcset="/wp-content/uploads/2018/06/word-image-312.png 1209w, /wp-content/uploads/2018/06/word-image-312-300x177.png 300w, /wp-content/uploads/2018/06/word-image-312-768x454.png 768w, /wp-content/uploads/2018/06/word-image-312-1024x605.png 1024w" sizes="(max-width: 1209px) 100vw, 1209px" /></p>
<p>步骤4：在模型中定义前入库的钩子事件，完成密码字段的加密</p>
<p><img loading="lazy" decoding="async" width="1101" height="436" class="wp-image-7711" src="/wp-content/uploads/2018/06/word-image-313.png" srcset="/wp-content/uploads/2018/06/word-image-313.png 1101w, /wp-content/uploads/2018/06/word-image-313-300x119.png 300w, /wp-content/uploads/2018/06/word-image-313-768x304.png 768w, /wp-content/uploads/2018/06/word-image-313-1024x406.png 1024w" sizes="(max-width: 1101px) 100vw, 1101px" /></p>
<p>步骤5：控制器完成验证入库操作</p>
<p><img loading="lazy" decoding="async" width="1191" height="699" class="wp-image-7712" src="/wp-content/uploads/2018/06/word-image-314.png" srcset="/wp-content/uploads/2018/06/word-image-314.png 1191w, /wp-content/uploads/2018/06/word-image-314-300x176.png 300w, /wp-content/uploads/2018/06/word-image-314-768x451.png 768w, /wp-content/uploads/2018/06/word-image-314-1024x601.png 1024w" sizes="(max-width: 1191px) 100vw, 1191px" /></p>
<h3>完成用户列表功能及分页</h3>
<p>步骤1：在后台User控制器建立一个index方法，取出所有的用户数据，并分配到模板中</p>
<p><img loading="lazy" decoding="async" width="831" height="395" class="wp-image-7713" src="/wp-content/uploads/2018/06/word-image-315.png" srcset="/wp-content/uploads/2018/06/word-image-315.png 831w, /wp-content/uploads/2018/06/word-image-315-300x143.png 300w, /wp-content/uploads/2018/06/word-image-315-768x365.png 768w" sizes="(max-width: 831px) 100vw, 831px" /></p>
<p>步骤2：模板遍历数据</p>
<p><img loading="lazy" decoding="async" width="1039" height="601" class="wp-image-7714" src="/wp-content/uploads/2018/06/word-image-316.png" srcset="/wp-content/uploads/2018/06/word-image-316.png 1039w, /wp-content/uploads/2018/06/word-image-316-300x174.png 300w, /wp-content/uploads/2018/06/word-image-316-768x444.png 768w, /wp-content/uploads/2018/06/word-image-316-1024x592.png 1024w" sizes="(max-width: 1039px) 100vw, 1039px" /></p>
<p>效果：</p>
<p><img loading="lazy" decoding="async" width="941" height="192" class="wp-image-7715" src="/wp-content/uploads/2018/06/word-image-317.png" srcset="/wp-content/uploads/2018/06/word-image-317.png 941w, /wp-content/uploads/2018/06/word-image-317-300x61.png 300w, /wp-content/uploads/2018/06/word-image-317-768x157.png 768w" sizes="(max-width: 941px) 100vw, 941px" /></p>
<h3>完成用户的编辑功能</h3>
<p>编辑用户的时候，密码选项需要考虑两种情况：</p>
<p>①如密码和确认密码都为空，说明用户不想修改密码，则保留原来的密码。</p>
<p>②如果两个密码有一个不为空，说明用户想修改密码，则必须要求用户两次密码一致。</p>
<p>代码如下：</p>
<p>步骤1：给编辑的设置一个链接地址，携带一个主键值</p>
<p><img loading="lazy" decoding="async" width="1260" height="305" class="wp-image-7716" src="/wp-content/uploads/2018/06/word-image-318.png" srcset="/wp-content/uploads/2018/06/word-image-318.png 1260w, /wp-content/uploads/2018/06/word-image-318-300x73.png 300w, /wp-content/uploads/2018/06/word-image-318-768x186.png 768w, /wp-content/uploads/2018/06/word-image-318-1024x248.png 1024w" sizes="(max-width: 1260px) 100vw, 1260px" /></p>
<p>步骤2：使用jquery-validate对密码字段进行验证</p>
<p><img loading="lazy" decoding="async" width="1008" height="318" class="wp-image-7717" src="/wp-content/uploads/2018/06/word-image-319.png" srcset="/wp-content/uploads/2018/06/word-image-319.png 1008w, /wp-content/uploads/2018/06/word-image-319-300x95.png 300w, /wp-content/uploads/2018/06/word-image-319-768x242.png 768w" sizes="(max-width: 1008px) 100vw, 1008px" /></p>
<p>规则如下：</p>
<p><img loading="lazy" decoding="async" width="841" height="711" class="wp-image-7718" src="/wp-content/uploads/2018/06/word-image-320.png" srcset="/wp-content/uploads/2018/06/word-image-320.png 841w, /wp-content/uploads/2018/06/word-image-320-300x254.png 300w, /wp-content/uploads/2018/06/word-image-320-768x649.png 768w" sizes="(max-width: 841px) 100vw, 841px" /> <img loading="lazy" decoding="async" width="590" height="144" class="wp-image-7719" src="/wp-content/uploads/2018/06/word-image-321.png" srcset="/wp-content/uploads/2018/06/word-image-321.png 590w, /wp-content/uploads/2018/06/word-image-321-300x73.png 300w" sizes="(max-width: 590px) 100vw, 590px" /></p>
<p>注：要修改style.css文件样式，因为有样式冲突</p>
<p><img loading="lazy" decoding="async" width="1138" height="179" class="wp-image-7720" src="/wp-content/uploads/2018/06/word-image-322.png" srcset="/wp-content/uploads/2018/06/word-image-322.png 1138w, /wp-content/uploads/2018/06/word-image-322-300x47.png 300w, /wp-content/uploads/2018/06/word-image-322-768x121.png 768w, /wp-content/uploads/2018/06/word-image-322-1024x161.png 1024w" sizes="(max-width: 1138px) 100vw, 1138px" /></p>
<p>设置upd.html模板内容回显数据：</p>
<p><img loading="lazy" decoding="async" width="1270" height="671" class="wp-image-7721" src="/wp-content/uploads/2018/06/word-image-323.png" srcset="/wp-content/uploads/2018/06/word-image-323.png 1270w, /wp-content/uploads/2018/06/word-image-323-300x159.png 300w, /wp-content/uploads/2018/06/word-image-323-768x406.png 768w, /wp-content/uploads/2018/06/word-image-323-1024x541.png 1024w" sizes="(max-width: 1270px) 100vw, 1270px" /></p>
<p>步骤3：upd方法中完成编辑的验证编辑入库</p>
<p><img loading="lazy" decoding="async" width="1160" height="520" class="wp-image-7722" src="/wp-content/uploads/2018/06/word-image-324.png" srcset="/wp-content/uploads/2018/06/word-image-324.png 1160w, /wp-content/uploads/2018/06/word-image-324-300x134.png 300w, /wp-content/uploads/2018/06/word-image-324-768x344.png 768w, /wp-content/uploads/2018/06/word-image-324-1024x459.png 1024w" sizes="(max-width: 1160px) 100vw, 1160px" /></p>
<p>同时修改编辑场景的验证器：</p>
<p><img loading="lazy" decoding="async" width="1002" height="485" class="wp-image-7723" src="/wp-content/uploads/2018/06/word-image-325.png" srcset="/wp-content/uploads/2018/06/word-image-325.png 1002w, /wp-content/uploads/2018/06/word-image-325-300x145.png 300w, /wp-content/uploads/2018/06/word-image-325-768x372.png 768w" sizes="(max-width: 1002px) 100vw, 1002px" /></p>
<h3>ajax控制用户的登录状态</h3>
<p>步骤1：先给标签加一个a标签，并且阻止默认行为，同时加一个is_active和user_id属性，目的是获取当前记录的状态值和主键值，并且绑定类名为changeActive。</p>
<p><img loading="lazy" decoding="async" width="1197" height="259" class="wp-image-7724" src="/wp-content/uploads/2018/06/word-image-326.png" srcset="/wp-content/uploads/2018/06/word-image-326.png 1197w, /wp-content/uploads/2018/06/word-image-326-300x65.png 300w, /wp-content/uploads/2018/06/word-image-326-768x166.png 768w, /wp-content/uploads/2018/06/word-image-326-1024x222.png 1024w" sizes="(max-width: 1197px) 100vw, 1197px" /></p>
<p>步骤2：给class=changeActive 绑定单击事件，发送ajax请求</p>
<p><img loading="lazy" decoding="async" width="1244" height="493" class="wp-image-7725" src="/wp-content/uploads/2018/06/word-image-327.png" srcset="/wp-content/uploads/2018/06/word-image-327.png 1244w, /wp-content/uploads/2018/06/word-image-327-300x119.png 300w, /wp-content/uploads/2018/06/word-image-327-768x304.png 768w, /wp-content/uploads/2018/06/word-image-327-1024x406.png 1024w" sizes="(max-width: 1244px) 100vw, 1244px" /></p>
<p>步骤3：在User控制器建立一个ajaxChangeActive方法，完成状态的更改</p>
<p><img loading="lazy" decoding="async" width="831" height="646" class="wp-image-7726" src="/wp-content/uploads/2018/06/word-image-328.png" srcset="/wp-content/uploads/2018/06/word-image-328.png 831w, /wp-content/uploads/2018/06/word-image-328-300x233.png 300w, /wp-content/uploads/2018/06/word-image-328-768x597.png 768w" sizes="(max-width: 831px) 100vw, 831px" /></p>
<p>注意：由于更改状态值的时候会触发编辑的前钩子，这时候没有携带密码字段前钩子会直接报错，解决办法：对前钩子有没有密码字段进行isset判断即可:</p>
<p><img loading="lazy" decoding="async" width="971" height="482" class="wp-image-7727" src="/wp-content/uploads/2018/06/word-image-329.png" srcset="/wp-content/uploads/2018/06/word-image-329.png 971w, /wp-content/uploads/2018/06/word-image-329-300x149.png 300w, /wp-content/uploads/2018/06/word-image-329-768x381.png 768w" sizes="(max-width: 971px) 100vw, 971px" /></p>
<p>提示：调试ajax的时候，务必要打开控制器network进行调试。可以打开response选项看报啥错，这样可以快速定位到错误的原因。</p>
<h1>五、完成后台用户登录|退出|防翻墙功能</h1>
<h2>完成后台登录功能</h2>
<p>步骤1：在后台建立一个Public控制器，并建立一个login方法，输出登录模板同时，同时完成登录的功能实现</p>
<p><img loading="lazy" decoding="async" width="1135" height="651" class="wp-image-7728" src="/wp-content/uploads/2018/06/word-image-330.png" srcset="/wp-content/uploads/2018/06/word-image-330.png 1135w, /wp-content/uploads/2018/06/word-image-330-300x172.png 300w, /wp-content/uploads/2018/06/word-image-330-768x441.png 768w, /wp-content/uploads/2018/06/word-image-330-1024x587.png 1024w" sizes="(max-width: 1135px) 100vw, 1135px" /></p>
<p>同时在User模型中，定义一个checkUser的方法，检测用户名和密码是否相等</p>
<p><img loading="lazy" decoding="async" width="1030" height="529" class="wp-image-7729" src="/wp-content/uploads/2018/06/word-image-331.png" srcset="/wp-content/uploads/2018/06/word-image-331.png 1030w, /wp-content/uploads/2018/06/word-image-331-300x154.png 300w, /wp-content/uploads/2018/06/word-image-331-768x394.png 768w, /wp-content/uploads/2018/06/word-image-331-1024x526.png 1024w" sizes="(max-width: 1030px) 100vw, 1030px" /></p>
<p>步骤2：修改login.html模板内容，显示验证码</p>
<p><img loading="lazy" decoding="async" width="1267" height="689" class="wp-image-7730" src="/wp-content/uploads/2018/06/word-image-332.png" srcset="/wp-content/uploads/2018/06/word-image-332.png 1267w, /wp-content/uploads/2018/06/word-image-332-300x163.png 300w, /wp-content/uploads/2018/06/word-image-332-768x418.png 768w, /wp-content/uploads/2018/06/word-image-332-1024x557.png 1024w" sizes="(max-width: 1267px) 100vw, 1267px" /> <img loading="lazy" decoding="async" width="1167" height="425" class="wp-image-7731" src="/wp-content/uploads/2018/06/word-image-333.png" srcset="/wp-content/uploads/2018/06/word-image-333.png 1167w, /wp-content/uploads/2018/06/word-image-333-300x109.png 300w, /wp-content/uploads/2018/06/word-image-333-768x280.png 768w, /wp-content/uploads/2018/06/word-image-333-1024x373.png 1024w" sizes="(max-width: 1167px) 100vw, 1167px" /></p>
<p>步骤3：在验证器中定义登录场景的验证规则</p>
<p><img loading="lazy" decoding="async" width="1264" height="690" class="wp-image-7732" src="/wp-content/uploads/2018/06/word-image-334.png" srcset="/wp-content/uploads/2018/06/word-image-334.png 1264w, /wp-content/uploads/2018/06/word-image-334-300x164.png 300w, /wp-content/uploads/2018/06/word-image-334-768x419.png 768w, /wp-content/uploads/2018/06/word-image-334-1024x559.png 1024w" sizes="(max-width: 1264px) 100vw, 1264px" /></p>
<p>登录成功，在top.html中回显用户名</p>
<p><img loading="lazy" decoding="async" width="1024" height="214" class="wp-image-7733" src="/wp-content/uploads/2018/06/word-image-335.png" srcset="/wp-content/uploads/2018/06/word-image-335.png 1024w, /wp-content/uploads/2018/06/word-image-335-300x63.png 300w, /wp-content/uploads/2018/06/word-image-335-768x161.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h2>完成后台退出功能</h2>
<p>步骤1：在后台Public控制器建立一个logout的退出方法</p>
<p><img loading="lazy" decoding="async" width="831" height="296" class="wp-image-7734" src="/wp-content/uploads/2018/06/word-image-336.png" srcset="/wp-content/uploads/2018/06/word-image-336.png 831w, /wp-content/uploads/2018/06/word-image-336-300x107.png 300w, /wp-content/uploads/2018/06/word-image-336-768x274.png 768w" sizes="(max-width: 831px) 100vw, 831px" /></p>
<h2>防用户翻墙</h2>
<p>防翻墙思想：建立一个父控制器如：CommonController,在此控制器的构造函数中做session的判断，其他需要进行验证session的控制器就继承此公共控制器即可防止翻墙，某些控制器不需要session判断则不继承即可。（如:PublicController）</p>
<p><img loading="lazy" decoding="async" width="991" height="358" class="wp-image-7735" src="/wp-content/uploads/2018/06/word-image-337.png" srcset="/wp-content/uploads/2018/06/word-image-337.png 991w, /wp-content/uploads/2018/06/word-image-337-300x108.png 300w, /wp-content/uploads/2018/06/word-image-337-768x277.png 768w" sizes="(max-width: 991px) 100vw, 991px" /></p>
<p>其中Index 和User控制器需要继承Common，public不需要继承</p>
<p><img loading="lazy" decoding="async" width="831" height="164" class="wp-image-7736" src="/wp-content/uploads/2018/06/word-image-338.png" srcset="/wp-content/uploads/2018/06/word-image-338.png 831w, /wp-content/uploads/2018/06/word-image-338-300x59.png 300w, /wp-content/uploads/2018/06/word-image-338-768x152.png 768w" sizes="(max-width: 831px) 100vw, 831px" /> <img loading="lazy" decoding="async" width="834" height="172" class="wp-image-7737" src="/wp-content/uploads/2018/06/word-image-339.png" srcset="/wp-content/uploads/2018/06/word-image-339.png 834w, /wp-content/uploads/2018/06/word-image-339-300x62.png 300w, /wp-content/uploads/2018/06/word-image-339-768x158.png 768w" sizes="(max-width: 834px) 100vw, 834px" /></p>
<h1>六、RBAC权限控制</h1>
<h2>RBAC介绍</h2>
<p>RBAC: Role Based Access Controller ,即基于角色的访问权限控制。</p>
<p>简单的说,用户登录可以属于不同的角色，不同的角色拥有的后台访问菜单权限也不一样。</p>
<p>如：</p>
<p>如下面的每个菜单就是一个权限。</p>
<p><img loading="lazy" decoding="async" width="190" height="124" class="wp-image-7738" src="/wp-content/uploads/2018/06/word-image-340.png" /></p>
<p>后台菜单中权限一般只控制到两级权限，权限级别太深难以维护，具体要看项目需求。</p>
<p>一级权限：如：商品管理。</p>
<p>二级权限：如：商品添加、商品列表。</p>
<p>三级权限：如：商品列表中的编辑或删除操作</p>
<h2>RBAC表的表设计</h2>
<p>一般RBAC权限控制都3张表和5张表，其核心都是一样。</p>
<p>3张表：后台用户表、角色表、权限表。</p>
<p>而5张表仅把用户表和角色表、角色表和权限表其相关联的字段分别使用一个表来维护。且表多了维护起来更加繁琐。</p>
<p>这里我们采用3张表来做权限控制。</p>
<p>三张表的关系如下：</p>
<p><img loading="lazy" decoding="async" width="749" height="293" class="wp-image-7739" src="/wp-content/uploads/2018/06/word-image-341.png" srcset="/wp-content/uploads/2018/06/word-image-341.png 749w, /wp-content/uploads/2018/06/word-image-341-300x117.png 300w" sizes="(max-width: 749px) 100vw, 749px" /></p>
<p>分析：</p>
<ul>
<li>用户表通过角色字段role_id，找到与其关联的角色表role_id。</li>
<li>角色表通过所拥有的所有权限字段auth_id_list，找到与其关联的权限表的auth_id。</li>
</ul>
<p>控制权限图解：</p>
<p><img loading="lazy" decoding="async" width="1127" height="449" class="wp-image-7740" src="/wp-content/uploads/2018/06/word-image-342.png" srcset="/wp-content/uploads/2018/06/word-image-342.png 1127w, /wp-content/uploads/2018/06/word-image-342-300x120.png 300w, /wp-content/uploads/2018/06/word-image-342-768x306.png 768w, /wp-content/uploads/2018/06/word-image-342-1024x408.png 1024w" sizes="(max-width: 1127px) 100vw, 1127px" /></p>
<p>可见，一个用户对应着一个角色，一个角色可以拥有多个权限。</p>
<h1>七、RBAC功能实现</h1>
<h2>权限表的curd操作</h2>
<h3>（1）完成权限的添加</h3>
<p>步骤1：在后台建立一个Auth控制器，并建立一个add方法，输出模板内容，并完成添加权限的实现</p>
<p><img loading="lazy" decoding="async" width="1028" height="717" class="wp-image-7741" src="/wp-content/uploads/2018/06/word-image-343.png" srcset="/wp-content/uploads/2018/06/word-image-343.png 1028w, /wp-content/uploads/2018/06/word-image-343-300x209.png 300w, /wp-content/uploads/2018/06/word-image-343-768x536.png 768w, /wp-content/uploads/2018/06/word-image-343-1024x714.png 1024w" sizes="(max-width: 1028px) 100vw, 1028px" /></p>
<p>同时在Auth模型中取出权限的无限级分类数据：</p>
<p><img loading="lazy" decoding="async" width="965" height="680" class="wp-image-7742" src="/wp-content/uploads/2018/06/word-image-344.png" srcset="/wp-content/uploads/2018/06/word-image-344.png 965w, /wp-content/uploads/2018/06/word-image-344-300x211.png 300w, /wp-content/uploads/2018/06/word-image-344-768x541.png 768w" sizes="(max-width: 965px) 100vw, 965px" /></p>
<p>步骤2：设置add.html模板内容</p>
<p><img loading="lazy" decoding="async" width="1230" height="699" class="wp-image-7743" src="/wp-content/uploads/2018/06/word-image-345.png" srcset="/wp-content/uploads/2018/06/word-image-345.png 1230w, /wp-content/uploads/2018/06/word-image-345-300x170.png 300w, /wp-content/uploads/2018/06/word-image-345-768x436.png 768w, /wp-content/uploads/2018/06/word-image-345-1024x582.png 1024w" sizes="(max-width: 1230px) 100vw, 1230px" /></p>
<p>当选择顶级权限时，控制器名和方法名不可用，否则可用。因为顶级权限没有控制器名和方法名。</p>
<p><img loading="lazy" decoding="async" width="1179" height="481" class="wp-image-7744" src="/wp-content/uploads/2018/06/word-image-346.png" srcset="/wp-content/uploads/2018/06/word-image-346.png 1179w, /wp-content/uploads/2018/06/word-image-346-300x122.png 300w, /wp-content/uploads/2018/06/word-image-346-768x313.png 768w, /wp-content/uploads/2018/06/word-image-346-1024x418.png 1024w" sizes="(max-width: 1179px) 100vw, 1179px" /></p>
<p>注意：表单input设置disabled和readonly的区别</p>
<p>相同点：都不可以编辑input中的数据</p>
<p>不同点：设置disabled时，php中通过$_POST接收不到input框name的属性值</p>
<p>设置readonly时，php中通过$_POST可以收到input的name的属性值</p>
<p>步骤3：定义Auth验证器，进行验证</p>
<p><img loading="lazy" decoding="async" width="773" height="636" class="wp-image-7745" src="/wp-content/uploads/2018/06/word-image-347.png" srcset="/wp-content/uploads/2018/06/word-image-347.png 773w, /wp-content/uploads/2018/06/word-image-347-300x247.png 300w, /wp-content/uploads/2018/06/word-image-347-768x632.png 768w" sizes="(max-width: 773px) 100vw, 773px" /></p>
<p>模板效果：</p>
<p><img loading="lazy" decoding="async" width="542" height="323" class="wp-image-7746" src="/wp-content/uploads/2018/06/word-image-348.png" srcset="/wp-content/uploads/2018/06/word-image-348.png 542w, /wp-content/uploads/2018/06/word-image-348-300x180.png 300w" sizes="(max-width: 542px) 100vw, 542px" /></p>
<h3>完成权限的列表展示</h3>
<h3>完成权限的编辑</h3>
<h3>完成权限的删除</h3>
<h2>角色表的curd操作</h2>
<h3>添加角色及分配权限</h3>
<p>注：一般系统角色名为超级管理员都会拥有所有的权限，其权限字段auth_id_list可以手动设置为*。</p>
<h3>（2）角色的列表展示</h3>
<p>把一个角色所拥有的权限都查出来，这里需要利用到两个mysql函数：</p>
<p>FIND_IN_SET和group_concat(字段)</p>
<ul>
<li>FIND_IN_SET(str,strlist) :</li>
</ul>
<p>作用：查询出子串str，是否在由逗号分隔的目标字符串strlist中存在。</p>
<p>如：判断5是否在字符串1,2,3,4,5中存在：FIND_IN_SET(5,‘1,2,3,4,5’) ，存在则返回所在目标字符串strlist的所在位置，不存在则返回0。</p>
<p><img loading="lazy" decoding="async" width="643" height="83" class="wp-image-7747" src="/wp-content/uploads/2018/06/word-image-349.png" srcset="/wp-content/uploads/2018/06/word-image-349.png 643w, /wp-content/uploads/2018/06/word-image-349-300x39.png 300w" sizes="(max-width: 643px) 100vw, 643px" /> <img loading="lazy" decoding="async" width="476" height="77" class="wp-image-7748" src="/wp-content/uploads/2018/06/word-image-350.png" srcset="/wp-content/uploads/2018/06/word-image-350.png 476w, /wp-content/uploads/2018/06/word-image-350-300x49.png 300w" sizes="(max-width: 476px) 100vw, 476px" /></p>
<ul>
<li>group_concat(字段)</li>
</ul>
<p>作用：主要根据某个字段进行分组，把相同字段的值连接在一起。</p>
<p>默认连接符号是逗号 ，如果用|连接则：</p>
<p>group_concat(字段名 SEPARATOR “|”)</p>
<p>例：如下是表tp_article表中的一些数据</p>
<p><img loading="lazy" decoding="async" width="400" height="150" class="wp-image-7749" src="/wp-content/uploads/2018/06/word-image-351.png" srcset="/wp-content/uploads/2018/06/word-image-351.png 400w, /wp-content/uploads/2018/06/word-image-351-300x113.png 300w" sizes="(max-width: 400px) 100vw, 400px" /></p>
<p>根据cat_id字段进行分组，把具有相同cat_id的title字段值连接在一起。</p>
<p><img loading="lazy" decoding="async" width="766" height="159" class="wp-image-7750" src="/wp-content/uploads/2018/06/word-image-352.png" srcset="/wp-content/uploads/2018/06/word-image-352.png 766w, /wp-content/uploads/2018/06/word-image-352-300x62.png 300w" sizes="(max-width: 766px) 100vw, 766px" /></p>
<h3>（3）完成角色编辑功能</h3>
<h3>（4）完成角色删除功能</h3>
<h1>实现不同用户登录展示不同后台菜单</h1>
<h1>八、权限防翻墙</h1>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/7682.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>TP5 商城（二）RBAC、权限增删改查、角色增删改查、不同用户显示不同后台、权限防翻墙</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/7751.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/7751.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 09 Jun 2018 00:39:13 +0000</pubDate>
				<category><![CDATA[TP5.0]]></category>
		<category><![CDATA[TP5.0商城]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[RBAC]]></category>
		<category><![CDATA[不同用户显示不同后台]]></category>
		<category><![CDATA[权限增删改查]]></category>
		<category><![CDATA[权限防翻墙]]></category>
		<category><![CDATA[角色增删改查]]></category>
		<guid isPermaLink="false">/?p=7751</guid>

					<description><![CDATA[一、RBAC功能实现 权限表的curd操作 （1）完成权限的添加 步骤1：在后台建立一个Auth控制器，并建立 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1>一、RBAC功能实现</h1>
<h2>权限表的curd操作</h2>
<h3>（1）完成权限的添加</h3>
<p>步骤1：在后台建立一个Auth控制器，并建立一个add方法，输出模板内容，并完成添加权限的实现</p>
<p><img loading="lazy" decoding="async" width="1028" height="717" class="wp-image-7825" src="/wp-content/uploads/2018/06/word-image-424.png" srcset="/wp-content/uploads/2018/06/word-image-424.png 1028w, /wp-content/uploads/2018/06/word-image-424-300x209.png 300w, /wp-content/uploads/2018/06/word-image-424-768x536.png 768w, /wp-content/uploads/2018/06/word-image-424-1024x714.png 1024w" sizes="(max-width: 1028px) 100vw, 1028px" /></p>
<p>同时在Auth模型中取出权限的无限级分类数据：</p>
<p><img loading="lazy" decoding="async" width="965" height="680" class="wp-image-7826" src="/wp-content/uploads/2018/06/word-image-425.png" srcset="/wp-content/uploads/2018/06/word-image-425.png 965w, /wp-content/uploads/2018/06/word-image-425-300x211.png 300w, /wp-content/uploads/2018/06/word-image-425-768x541.png 768w" sizes="(max-width: 965px) 100vw, 965px" /></p>
<p>步骤2：设置add.html模板内容</p>
<p><img loading="lazy" decoding="async" width="1230" height="699" class="wp-image-7827" src="/wp-content/uploads/2018/06/word-image-426.png" srcset="/wp-content/uploads/2018/06/word-image-426.png 1230w, /wp-content/uploads/2018/06/word-image-426-300x170.png 300w, /wp-content/uploads/2018/06/word-image-426-768x436.png 768w, /wp-content/uploads/2018/06/word-image-426-1024x582.png 1024w" sizes="(max-width: 1230px) 100vw, 1230px" /></p>
<p>当选择顶级权限时，控制器名和方法名不可用，否则可用。因为顶级权限没有控制器名和方法名。</p>
<p><img loading="lazy" decoding="async" width="1179" height="481" class="wp-image-7828" src="/wp-content/uploads/2018/06/word-image-427.png" srcset="/wp-content/uploads/2018/06/word-image-427.png 1179w, /wp-content/uploads/2018/06/word-image-427-300x122.png 300w, /wp-content/uploads/2018/06/word-image-427-768x313.png 768w, /wp-content/uploads/2018/06/word-image-427-1024x418.png 1024w" sizes="(max-width: 1179px) 100vw, 1179px" /></p>
<p>注意：表单input设置disabled和readonly的区别</p>
<p>相同点：都不可以编辑input中的数据</p>
<p>不同点：设置disabled时，php中通过$_POST接收不到input框name的属性值</p>
<p>设置readonly时，php中通过$_POST可以收到input的name的属性值</p>
<p>步骤3：定义Auth验证器，进行验证</p>
<p><img loading="lazy" decoding="async" width="773" height="636" class="wp-image-7829" src="/wp-content/uploads/2018/06/word-image-428.png" srcset="/wp-content/uploads/2018/06/word-image-428.png 773w, /wp-content/uploads/2018/06/word-image-428-300x247.png 300w, /wp-content/uploads/2018/06/word-image-428-768x632.png 768w" sizes="(max-width: 773px) 100vw, 773px" /></p>
<p>模板效果：</p>
<p><img loading="lazy" decoding="async" width="542" height="323" class="wp-image-7830" src="/wp-content/uploads/2018/06/word-image-429.png" srcset="/wp-content/uploads/2018/06/word-image-429.png 542w, /wp-content/uploads/2018/06/word-image-429-300x180.png 300w" sizes="(max-width: 542px) 100vw, 542px" /></p>
<h3>完成权限的列表展示</h3>
<p>步骤1：在后台的Auth控制器中建立一个index方法，取出所有的权限数据，分配到模板中。</p>
<p><img loading="lazy" decoding="async" width="1021" height="355" class="wp-image-7832" src="/wp-content/uploads/2018/06/word-image-430.png" srcset="/wp-content/uploads/2018/06/word-image-430.png 1021w, /wp-content/uploads/2018/06/word-image-430-300x104.png 300w, /wp-content/uploads/2018/06/word-image-430-768x267.png 768w" sizes="(max-width: 1021px) 100vw, 1021px" /></p>
<p>注：需要指定getAuthsSon方法返回的结果下标值：</p>
<p><img loading="lazy" decoding="async" width="994" height="413" class="wp-image-7833" src="/wp-content/uploads/2018/06/word-image-431.png" srcset="/wp-content/uploads/2018/06/word-image-431.png 994w, /wp-content/uploads/2018/06/word-image-431-300x125.png 300w, /wp-content/uploads/2018/06/word-image-431-768x319.png 768w" sizes="(max-width: 994px) 100vw, 994px" /></p>
<p>步骤：模板中遍历数据</p>
<p><img loading="lazy" decoding="async" width="1267" height="529" class="wp-image-7834" src="/wp-content/uploads/2018/06/word-image-432.png" srcset="/wp-content/uploads/2018/06/word-image-432.png 1267w, /wp-content/uploads/2018/06/word-image-432-300x125.png 300w, /wp-content/uploads/2018/06/word-image-432-768x321.png 768w, /wp-content/uploads/2018/06/word-image-432-1024x428.png 1024w" sizes="(max-width: 1267px) 100vw, 1267px" /></p>
<p>效果：</p>
<p><img loading="lazy" decoding="async" width="967" height="329" class="wp-image-7835" src="/wp-content/uploads/2018/06/word-image-433.png" srcset="/wp-content/uploads/2018/06/word-image-433.png 967w, /wp-content/uploads/2018/06/word-image-433-300x102.png 300w, /wp-content/uploads/2018/06/word-image-433-768x261.png 768w" sizes="(max-width: 967px) 100vw, 967px" /></p>
<h3>完成权限的编辑</h3>
<p>编辑一个角色注意的地方：</p>
<p>a、不能以当前分类作为父权限 b.不能以当前子孙作为父权限</p>
<p>步骤1：修改编辑的链接地址</p>
<p><img loading="lazy" decoding="async" width="1155" height="428" class="wp-image-7836" src="/wp-content/uploads/2018/06/word-image-434.png" srcset="/wp-content/uploads/2018/06/word-image-434.png 1155w, /wp-content/uploads/2018/06/word-image-434-300x111.png 300w, /wp-content/uploads/2018/06/word-image-434-768x285.png 768w, /wp-content/uploads/2018/06/word-image-434-1024x379.png 1024w" sizes="(max-width: 1155px) 100vw, 1155px" /></p>
<p>步骤2：在Auth控制器建立一个upd的完成编辑功能</p>
<p><img loading="lazy" decoding="async" width="1056" height="699" class="wp-image-7837" src="/wp-content/uploads/2018/06/word-image-435.png" srcset="/wp-content/uploads/2018/06/word-image-435.png 1056w, /wp-content/uploads/2018/06/word-image-435-300x199.png 300w, /wp-content/uploads/2018/06/word-image-435-768x508.png 768w, /wp-content/uploads/2018/06/word-image-435-1024x678.png 1024w" sizes="(max-width: 1056px) 100vw, 1056px" /></p>
<p>步骤3：模板回显数据</p>
<p><img loading="lazy" decoding="async" width="1262" height="673" class="wp-image-7838" src="/wp-content/uploads/2018/06/word-image-436.png" srcset="/wp-content/uploads/2018/06/word-image-436.png 1262w, /wp-content/uploads/2018/06/word-image-436-300x160.png 300w, /wp-content/uploads/2018/06/word-image-436-768x410.png 768w, /wp-content/uploads/2018/06/word-image-436-1024x546.png 1024w" sizes="(max-width: 1262px) 100vw, 1262px" /> <img loading="lazy" decoding="async" width="1189" height="503" class="wp-image-7839" src="/wp-content/uploads/2018/06/word-image-437.png" srcset="/wp-content/uploads/2018/06/word-image-437.png 1189w, /wp-content/uploads/2018/06/word-image-437-300x127.png 300w, /wp-content/uploads/2018/06/word-image-437-768x325.png 768w, /wp-content/uploads/2018/06/word-image-437-1024x433.png 1024w" sizes="(max-width: 1189px) 100vw, 1189px" /></p>
<p>步骤4：需要考虑编辑注意的地方</p>
<p>a、不能以当前分类作为父权限 b.不能以当前子孙作为父权限</p>
<p><img loading="lazy" decoding="async" width="671" height="258" class="wp-image-7840" src="/wp-content/uploads/2018/06/word-image-438.png" srcset="/wp-content/uploads/2018/06/word-image-438.png 671w, /wp-content/uploads/2018/06/word-image-438-300x115.png 300w" sizes="(max-width: 671px) 100vw, 671px" /></p>
<p>解决办法：通过js递归实现，把当前权限以及子孙权限给删除即可。</p>
<p><img loading="lazy" decoding="async" width="1249" height="301" class="wp-image-7841" src="/wp-content/uploads/2018/06/word-image-439.png" srcset="/wp-content/uploads/2018/06/word-image-439.png 1249w, /wp-content/uploads/2018/06/word-image-439-300x72.png 300w, /wp-content/uploads/2018/06/word-image-439-768x185.png 768w, /wp-content/uploads/2018/06/word-image-439-1024x247.png 1024w" sizes="(max-width: 1249px) 100vw, 1249px" /> <img loading="lazy" decoding="async" width="1108" height="542" class="wp-image-7842" src="/wp-content/uploads/2018/06/word-image-440.png" srcset="/wp-content/uploads/2018/06/word-image-440.png 1108w, /wp-content/uploads/2018/06/word-image-440-300x147.png 300w, /wp-content/uploads/2018/06/word-image-440-768x376.png 768w, /wp-content/uploads/2018/06/word-image-440-1024x501.png 1024w" sizes="(max-width: 1108px) 100vw, 1108px" /></p>
<h3>【作业】完成权限的删除</h3>
<p>自行完成</p>
<p><img loading="lazy" decoding="async" width="603" height="415" class="wp-image-7843" src="/wp-content/uploads/2018/06/word-image-441.png" srcset="/wp-content/uploads/2018/06/word-image-441.png 603w, /wp-content/uploads/2018/06/word-image-441-300x206.png 300w" sizes="(max-width: 603px) 100vw, 603px" /></p>
<p>未考虑子分类 直接删除全部</p>
<h2>角色表的curd操作</h2>
<p><img loading="lazy" decoding="async" width="749" height="293" class="wp-image-7844" src="/wp-content/uploads/2018/06/word-image-442.png" srcset="/wp-content/uploads/2018/06/word-image-442.png 749w, /wp-content/uploads/2018/06/word-image-442-300x117.png 300w" sizes="(max-width: 749px) 100vw, 749px" /></p>
<p>分析：</p>
<ul>
<li>用户表通过角色字段role_id，找到与其关联的角色表role_id。</li>
<li>角色表通过所拥有的所有权限字段auth_id_list，找到与其关联的权限表的auth_id。</li>
</ul>
<h3>添加角色及分配权限</h3>
<p>步骤1：在后台建立一个Role控制器，并建立一个add方法，获取所有的权限</p>
<p><img loading="lazy" decoding="async" width="1023" height="699" class="wp-image-7845" src="/wp-content/uploads/2018/06/word-image-443.png" srcset="/wp-content/uploads/2018/06/word-image-443.png 1023w, /wp-content/uploads/2018/06/word-image-443-300x205.png 300w, /wp-content/uploads/2018/06/word-image-443-768x525.png 768w" sizes="(max-width: 1023px) 100vw, 1023px" /></p>
<p>我们这里取出所有的权限需要一定技巧，两个：</p>
<p>技巧一：取出所有的权限：并且以auth_id为每个元素的下标。</p>
<p>技巧二：取出所有的权限，通过pid进行分组，把具有相同的pid划分为同一组</p>
<p>其中上面变量$auths和$children的打印结果如下：</p>
<p><img loading="lazy" decoding="async" width="337" height="285" class="wp-image-7846" src="/wp-content/uploads/2018/06/word-image-444.png" srcset="/wp-content/uploads/2018/06/word-image-444.png 337w, /wp-content/uploads/2018/06/word-image-444-300x254.png 300w" sizes="(max-width: 337px) 100vw, 337px" /></p>
<p>其中pid=0,有两个元素即auth_id为46和49。其他以此类推。</p>
<p><img loading="lazy" decoding="async" width="479" height="270" class="wp-image-7847" src="/wp-content/uploads/2018/06/word-image-445.png" srcset="/wp-content/uploads/2018/06/word-image-445.png 479w, /wp-content/uploads/2018/06/word-image-445-300x169.png 300w" sizes="(max-width: 479px) 100vw, 479px" /></p>
<p>步骤2：模板中遍历权限，这里需要参考课件的权限布局文件：</p>
<p><img loading="lazy" decoding="async" width="442" height="67" class="wp-image-7848" src="/wp-content/uploads/2018/06/word-image-446.png" srcset="/wp-content/uploads/2018/06/word-image-446.png 442w, /wp-content/uploads/2018/06/word-image-446-300x45.png 300w" sizes="(max-width: 442px) 100vw, 442px" /></p>
<p>注意：如下一级中有个二级，二级中有三级、</p>
<p><img loading="lazy" decoding="async" width="520" height="106" class="wp-image-7849" src="/wp-content/uploads/2018/06/word-image-447.png" srcset="/wp-content/uploads/2018/06/word-image-447.png 520w, /wp-content/uploads/2018/06/word-image-447-300x61.png 300w" sizes="(max-width: 520px) 100vw, 520px" /> <img loading="lazy" decoding="async" width="1298" height="691" class="wp-image-7850" src="/wp-content/uploads/2018/06/word-image-448.png" srcset="/wp-content/uploads/2018/06/word-image-448.png 1298w, /wp-content/uploads/2018/06/word-image-448-300x160.png 300w, /wp-content/uploads/2018/06/word-image-448-768x409.png 768w, /wp-content/uploads/2018/06/word-image-448-1024x545.png 1024w" sizes="(max-width: 1298px) 100vw, 1298px" /></p>
<p>结果如下：</p>
<p><img loading="lazy" decoding="async" width="680" height="312" class="wp-image-7851" src="/wp-content/uploads/2018/06/word-image-449.png" srcset="/wp-content/uploads/2018/06/word-image-449.png 680w, /wp-content/uploads/2018/06/word-image-449-300x138.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></p>
<p>步骤3：进行添加权限入库</p>
<p><img loading="lazy" decoding="async" width="966" height="529" class="wp-image-7852" src="/wp-content/uploads/2018/06/word-image-450.png" srcset="/wp-content/uploads/2018/06/word-image-450.png 966w, /wp-content/uploads/2018/06/word-image-450-300x164.png 300w, /wp-content/uploads/2018/06/word-image-450-768x421.png 768w" sizes="(max-width: 966px) 100vw, 966px" /></p>
<p>同时给表角色表添加模型和验证器</p>
<p>模型：</p>
<p><img loading="lazy" decoding="async" width="842" height="401" class="wp-image-7853" src="/wp-content/uploads/2018/06/word-image-451.png" srcset="/wp-content/uploads/2018/06/word-image-451.png 842w, /wp-content/uploads/2018/06/word-image-451-300x143.png 300w, /wp-content/uploads/2018/06/word-image-451-768x366.png 768w" sizes="(max-width: 842px) 100vw, 842px" /></p>
<p>验证器：</p>
<p><img loading="lazy" decoding="async" width="707" height="519" class="wp-image-7854" src="/wp-content/uploads/2018/06/word-image-452.png" srcset="/wp-content/uploads/2018/06/word-image-452.png 707w, /wp-content/uploads/2018/06/word-image-452-300x220.png 300w" sizes="(max-width: 707px) 100vw, 707px" /></p>
<p>数据库存储的格式：</p>
<p><img loading="lazy" decoding="async" width="667" height="118" class="wp-image-7855" src="/wp-content/uploads/2018/06/word-image-453.png" srcset="/wp-content/uploads/2018/06/word-image-453.png 667w, /wp-content/uploads/2018/06/word-image-453-300x53.png 300w" sizes="(max-width: 667px) 100vw, 667px" /></p>
<p>注：一般系统角色名为超级管理员都会拥有所有的权限，其权限字段auth_id_list可以手动设置为*。</p>
<h3>（2）完成添加权限分配的特效操作</h3>
<p>role/add.html模板文件：</p>
<p><img loading="lazy" decoding="async" width="1326" height="697" class="wp-image-7856" src="/wp-content/uploads/2018/06/word-image-454.png" srcset="/wp-content/uploads/2018/06/word-image-454.png 1326w, /wp-content/uploads/2018/06/word-image-454-300x158.png 300w, /wp-content/uploads/2018/06/word-image-454-768x404.png 768w, /wp-content/uploads/2018/06/word-image-454-1024x538.png 1024w" sizes="(max-width: 1326px) 100vw, 1326px" /></p>
<p>特效代码：</p>
<p><img loading="lazy" decoding="async" width="912" height="488" class="wp-image-7857" src="/wp-content/uploads/2018/06/word-image-455.png" srcset="/wp-content/uploads/2018/06/word-image-455.png 912w, /wp-content/uploads/2018/06/word-image-455-300x161.png 300w, /wp-content/uploads/2018/06/word-image-455-768x411.png 768w" sizes="(max-width: 912px) 100vw, 912px" /></p>
<p>效果：</p>
<p><img loading="lazy" decoding="async" width="703" height="336" class="wp-image-7858" src="/wp-content/uploads/2018/06/word-image-456.png" srcset="/wp-content/uploads/2018/06/word-image-456.png 703w, /wp-content/uploads/2018/06/word-image-456-300x143.png 300w" sizes="(max-width: 703px) 100vw, 703px" /></p>
<h3>（3）【重要】小结</h3>
<ol>
<li>记住，以后去公司做有关权限分配的时候，可以直接参考以下的模板布局</li>
</ol>
<p><img loading="lazy" decoding="async" width="686" height="76" class="wp-image-7859" src="/wp-content/uploads/2018/06/word-image-457.png" srcset="/wp-content/uploads/2018/06/word-image-457.png 686w, /wp-content/uploads/2018/06/word-image-457-300x33.png 300w" sizes="(max-width: 686px) 100vw, 686px" /></p>
<p>b、以后在模板中凡是需要取出含有（父子孙）层级关系的数据，可以使用下面这个技巧。</p>
<p>技巧一：取出所有的权限：并且以auth_id为每个元素的下标。</p>
<p>技巧二：取出所有的权限，通过pid进行分组，把具有相同的pid划分为同一组</p>
<p>此技巧的典型使用场景有：</p>
<ol>
<li>如遍历权限可以用到，上面代码就是。</li>
</ol>
<p><img loading="lazy" decoding="async" width="617" height="128" class="wp-image-7860" src="/wp-content/uploads/2018/06/word-image-458.png" srcset="/wp-content/uploads/2018/06/word-image-458.png 617w, /wp-content/uploads/2018/06/word-image-458-300x62.png 300w" sizes="(max-width: 617px) 100vw, 617px" /></p>
<ol>
<li>如京东商城遍历三级分类菜单</li>
</ol>
<p><img loading="lazy" decoding="async" width="839" height="53" class="wp-image-7861" src="/wp-content/uploads/2018/06/word-image-459.png" srcset="/wp-content/uploads/2018/06/word-image-459.png 839w, /wp-content/uploads/2018/06/word-image-459-300x19.png 300w, /wp-content/uploads/2018/06/word-image-459-768x49.png 768w" sizes="(max-width: 839px) 100vw, 839px" /></p>
<p>3、分类菜单的折叠</p>
<p><img loading="lazy" decoding="async" width="230" height="342" class="wp-image-7862" src="/wp-content/uploads/2018/06/word-image-460.png" srcset="/wp-content/uploads/2018/06/word-image-460.png 230w, /wp-content/uploads/2018/06/word-image-460-202x300.png 202w" sizes="(max-width: 230px) 100vw, 230px" /></p>
<h3>（4）角色的列表展示</h3>
<p>把一个角色所拥有的权限都查出来，这里需要利用到两个mysql函数：</p>
<p>FIND_IN_SET和group_concat(字段)</p>
<ul>
<li>FIND_IN_SET(str,strlist) :</li>
</ul>
<p>作用：查询出子串str，是否在由逗号分隔的目标字符串strlist中存在。</p>
<p>如：判断5是否在字符串1,2,3,4,5中存在：FIND_IN_SET(5,‘1,2,3,4,5’) ，存在则返回所在目标字符串strlist的所在位置，不存在则返回0。</p>
<p>执行函数mysql函数： select 函数名();</p>
<p><img loading="lazy" decoding="async" width="643" height="83" class="wp-image-7863" src="/wp-content/uploads/2018/06/word-image-461.png" srcset="/wp-content/uploads/2018/06/word-image-461.png 643w, /wp-content/uploads/2018/06/word-image-461-300x39.png 300w" sizes="(max-width: 643px) 100vw, 643px" /> <img loading="lazy" decoding="async" width="476" height="77" class="wp-image-7864" src="/wp-content/uploads/2018/06/word-image-462.png" srcset="/wp-content/uploads/2018/06/word-image-462.png 476w, /wp-content/uploads/2018/06/word-image-462-300x49.png 300w" sizes="(max-width: 476px) 100vw, 476px" /></p>
<ul>
<li>group_concat(字段)</li>
</ul>
<p>作用：主要根据某个字段进行分组，把相同字段的值连接在一起。</p>
<p>默认连接符号是逗号 ，如果用|连接则：</p>
<p>group_concat(字段名 SEPARATOR “|”)</p>
<p>例：如下是表tp_article表中的一些数据</p>
<p><img loading="lazy" decoding="async" width="400" height="150" class="wp-image-7865" src="/wp-content/uploads/2018/06/word-image-463.png" srcset="/wp-content/uploads/2018/06/word-image-463.png 400w, /wp-content/uploads/2018/06/word-image-463-300x113.png 300w" sizes="(max-width: 400px) 100vw, 400px" /></p>
<p>根据cat_id字段进行分组，把具有相同cat_id的title字段值连接在一起。</p>
<p><img loading="lazy" decoding="async" width="766" height="159" class="wp-image-7866" src="/wp-content/uploads/2018/06/word-image-464.png" srcset="/wp-content/uploads/2018/06/word-image-464.png 766w, /wp-content/uploads/2018/06/word-image-464-300x62.png 300w" sizes="(max-width: 766px) 100vw, 766px" /></p>
<p>查询出当前角色所拥有的全部权限拼接在一起：</p>
<p><img loading="lazy" decoding="async" width="1117" height="403" class="wp-image-7867" src="/wp-content/uploads/2018/06/word-image-465.png" srcset="/wp-content/uploads/2018/06/word-image-465.png 1117w, /wp-content/uploads/2018/06/word-image-465-300x108.png 300w, /wp-content/uploads/2018/06/word-image-465-768x277.png 768w, /wp-content/uploads/2018/06/word-image-465-1024x369.png 1024w" sizes="(max-width: 1117px) 100vw, 1117px" /></p>
<h3>完成角色编辑功能（给角色分配权限）</h3>
<p>步骤1：修改role/index.html的链接地址</p>
<p><img loading="lazy" decoding="async" width="1283" height="476" class="wp-image-7868" src="/wp-content/uploads/2018/06/word-image-466.png" srcset="/wp-content/uploads/2018/06/word-image-466.png 1283w, /wp-content/uploads/2018/06/word-image-466-300x111.png 300w, /wp-content/uploads/2018/06/word-image-466-768x285.png 768w, /wp-content/uploads/2018/06/word-image-466-1024x380.png 1024w" sizes="(max-width: 1283px) 100vw, 1283px" /></p>
<p>步骤2：在admin-RoleController-upd的方法中完成数据的回显到模板中</p>
<p>注意： 模块-控制器-方法</p>
<p><img loading="lazy" decoding="async" width="879" height="699" class="wp-image-7869" src="/wp-content/uploads/2018/06/word-image-467.png" srcset="/wp-content/uploads/2018/06/word-image-467.png 879w, /wp-content/uploads/2018/06/word-image-467-300x239.png 300w, /wp-content/uploads/2018/06/word-image-467-768x611.png 768w" sizes="(max-width: 879px) 100vw, 879px" /></p>
<p>步骤3：复制添加角色的add.html模板即可，改名为html.进行回显数据和把角色已有的权限默认选中</p>
<p><img loading="lazy" decoding="async" width="1122" height="620" class="wp-image-7870" src="/wp-content/uploads/2018/06/word-image-468.png" srcset="/wp-content/uploads/2018/06/word-image-468.png 1122w, /wp-content/uploads/2018/06/word-image-468-300x166.png 300w, /wp-content/uploads/2018/06/word-image-468-768x424.png 768w, /wp-content/uploads/2018/06/word-image-468-1024x566.png 1024w" sizes="(max-width: 1122px) 100vw, 1122px" /></p>
<p>已有权限默认选中：</p>
<p><img loading="lazy" decoding="async" width="1160" height="587" class="wp-image-7871" src="/wp-content/uploads/2018/06/word-image-469.png" srcset="/wp-content/uploads/2018/06/word-image-469.png 1160w, /wp-content/uploads/2018/06/word-image-469-300x152.png 300w, /wp-content/uploads/2018/06/word-image-469-768x389.png 768w, /wp-content/uploads/2018/06/word-image-469-1024x518.png 1024w" sizes="(max-width: 1160px) 100vw, 1160px" /></p>
<p>效果：</p>
<p><img loading="lazy" decoding="async" width="661" height="295" class="wp-image-7872" src="/wp-content/uploads/2018/06/word-image-470.png" srcset="/wp-content/uploads/2018/06/word-image-470.png 661w, /wp-content/uploads/2018/06/word-image-470-300x134.png 300w" sizes="(max-width: 661px) 100vw, 661px" /></p>
<h3>（6）【作业】完成角色删除功能</h3>
<p>自行完成</p>
<p><img loading="lazy" decoding="async" width="636" height="397" class="wp-image-7873" src="/wp-content/uploads/2018/06/word-image-471.png" srcset="/wp-content/uploads/2018/06/word-image-471.png 636w, /wp-content/uploads/2018/06/word-image-471-300x187.png 300w" sizes="(max-width: 636px) 100vw, 636px" /></p>
<h3>（7）添加用户分配权限</h3>
<p>步骤1：修改admin-view-user-add.html模板内容，加一个显示角色的下拉框</p>
<h1>实现不同用户登录展示不同后台菜单</h1>
<h2>思路</h2>
<p><img loading="lazy" decoding="async" width="848" height="291" class="wp-image-7874" src="/wp-content/uploads/2018/06/word-image-472.png" srcset="/wp-content/uploads/2018/06/word-image-472.png 848w, /wp-content/uploads/2018/06/word-image-472-300x103.png 300w, /wp-content/uploads/2018/06/word-image-472-768x264.png 768w" sizes="(max-width: 848px) 100vw, 848px" /></p>
<ol>
<li>用户登录成功的时候，获取到role_id。</li>
<li>通过role_id获取角色表的auth_id_list字段</li>
<li>通过权限表auth_id 只要在auth_id_list字段存在即可，查出所拥有的权限</li>
</ol>
<p>超级管理员auth_id_list字段的值为*，代表拥有后台操作的所有权限。</p>
<h2>代码实现</h2>
<p>步骤1：在用户登录成功的模型的checkUser方法中，通过角色id把当前角色所有的权限写入到session。</p>
<p><img loading="lazy" decoding="async" width="973" height="627" class="wp-image-7875" src="/wp-content/uploads/2018/06/word-image-473.png" srcset="/wp-content/uploads/2018/06/word-image-473.png 973w, /wp-content/uploads/2018/06/word-image-473-300x193.png 300w, /wp-content/uploads/2018/06/word-image-473-768x495.png 768w" sizes="(max-width: 973px) 100vw, 973px" /></p>
<p>步骤2：定义user模型中定义writeAuthToSession方法把权限写入到session中</p>
<p>注：后台left.html模板文件中，只需要显示一级和二级的权限即可：</p>
<p>我们需要构造出一个特定数据结构的数据：</p>
<p>如下：通过每个顶级（pid=0）的元素加个一个sonsAuth下标存储其对应的子级权限</p>
<p>[</p>
<p>auth_name=&gt;‘用户管理’</p>
<p>auth_id =&gt;46</p>
<p>pid =&gt; 0</p>
<p>&#8230;&#8230;</p>
<p>sonsAuth=&gt;[</p>
<p>[auth_name=&gt;用户列表,’pid’=&gt;46]</p>
<p>[auth_name=&gt;用户添加,’pid’=&gt;46]</p>
<p>&#8230;..</p>
<p>]</p>
<p>]</p>
<p>超级管理员：</p>
<p><img loading="lazy" decoding="async" width="1265" height="387" class="wp-image-7876" src="/wp-content/uploads/2018/06/word-image-474.png" srcset="/wp-content/uploads/2018/06/word-image-474.png 1265w, /wp-content/uploads/2018/06/word-image-474-300x92.png 300w, /wp-content/uploads/2018/06/word-image-474-768x235.png 768w, /wp-content/uploads/2018/06/word-image-474-1024x313.png 1024w" sizes="(max-width: 1265px) 100vw, 1265px" /></p>
<p>非超级管理员：</p>
<p><img loading="lazy" decoding="async" width="1163" height="577" class="wp-image-7877" src="/wp-content/uploads/2018/06/word-image-475.png" srcset="/wp-content/uploads/2018/06/word-image-475.png 1163w, /wp-content/uploads/2018/06/word-image-475-300x149.png 300w, /wp-content/uploads/2018/06/word-image-475-768x381.png 768w, /wp-content/uploads/2018/06/word-image-475-1024x508.png 1024w" sizes="(max-width: 1163px) 100vw, 1163px" /></p>
<p>步骤3：在left.html取出session中的权限，遍历访问的菜单</p>
<p><img loading="lazy" decoding="async" width="1235" height="668" class="wp-image-7878" src="/wp-content/uploads/2018/06/word-image-476.png" srcset="/wp-content/uploads/2018/06/word-image-476.png 1235w, /wp-content/uploads/2018/06/word-image-476-300x162.png 300w, /wp-content/uploads/2018/06/word-image-476-768x415.png 768w, /wp-content/uploads/2018/06/word-image-476-1024x554.png 1024w" sizes="(max-width: 1235px) 100vw, 1235px" /></p>
<p>效果：</p>
<p><img loading="lazy" decoding="async" width="219" height="159" class="wp-image-7879" src="/wp-content/uploads/2018/06/word-image-477.png" /></p>
<h1>权限防翻墙</h1>
<p>如下：</p>
<p><img loading="lazy" decoding="async" width="1347" height="258" class="wp-image-7880" src="/wp-content/uploads/2018/06/word-image-478.png" srcset="/wp-content/uploads/2018/06/word-image-478.png 1347w, /wp-content/uploads/2018/06/word-image-478-300x57.png 300w, /wp-content/uploads/2018/06/word-image-478-768x147.png 768w, /wp-content/uploads/2018/06/word-image-478-1024x196.png 1024w" sizes="(max-width: 1347px) 100vw, 1347px" /></p>
<p>解决办法：在common控制器中的_initialize的方法中，做防翻墙的操作。</p>
<p>1、要先获取到用户所访问的控制器名和方法名，在去做相关判断是否有权限</p>
<p><img loading="lazy" decoding="async" width="1111" height="626" class="wp-image-7881" src="/wp-content/uploads/2018/06/word-image-479.png" srcset="/wp-content/uploads/2018/06/word-image-479.png 1111w, /wp-content/uploads/2018/06/word-image-479-300x169.png 300w, /wp-content/uploads/2018/06/word-image-479-768x433.png 768w, /wp-content/uploads/2018/06/word-image-479-1024x577.png 1024w" sizes="(max-width: 1111px) 100vw, 1111px" /></p>
<ol>
<li>把用户可以访问的权限存储在session中</li>
</ol>
<p>超级管理员：</p>
<p><img loading="lazy" decoding="async" width="1240" height="517" class="wp-image-7882" src="/wp-content/uploads/2018/06/word-image-480.png" srcset="/wp-content/uploads/2018/06/word-image-480.png 1240w, /wp-content/uploads/2018/06/word-image-480-300x125.png 300w, /wp-content/uploads/2018/06/word-image-480-768x320.png 768w, /wp-content/uploads/2018/06/word-image-480-1024x427.png 1024w" sizes="(max-width: 1240px) 100vw, 1240px" /></p>
<p>非超级管理员：</p>
<p><img loading="lazy" decoding="async" width="998" height="625" class="wp-image-7883" src="/wp-content/uploads/2018/06/word-image-481.png" srcset="/wp-content/uploads/2018/06/word-image-481.png 998w, /wp-content/uploads/2018/06/word-image-481-300x188.png 300w, /wp-content/uploads/2018/06/word-image-481-768x481.png 768w" sizes="(max-width: 998px) 100vw, 998px" /></p>
<p>今天重点：</p>
<ol>
<li>一张牛逼的图</li>
<li>怎么构造满足我们要求的数组结构数据</li>
</ol>
<h1>四、商品有关的基本概念</h1>
<p>这里主要涉及到以下几个概念：</p>
<ul>
<li>商品类型：不同的网站的卖的商品是不一样的，比如化妆品网站专门卖化妆品、手机网站专门卖手机、汽车网站专门卖汽车。</li>
<li>商品属性：不同的商品类型对应的商品属性也是不一样的。</li>
</ul>
<p>比如卖汽车网站，商品(汽车)属性有轴距、变速箱、驱动方式、进气方式、排量等</p>
<p>比如卖电脑网站，商品（电脑）属性有尺寸、内存、cpu、操作系统、系统核数等</p>
<p>比如卖手机网站，商品（手机）属性有尺寸、内存、系统、颜色、网络类型、电池容量等</p>
<p>商品类型决定了商品属性</p>
<ul>
<li>商品分类</li>
</ul>
<p>一个电商网站卖的商品不一样，其商品分类也是不一样的。</p>
<p>比如：卖汽车分类有：国产（吉利、 广汽）、日产(本田、丰田)、德国（奔驰、宝马）、韩国（起亚、现代）。</p>
<p>比如：卖手机分类有: 小米、华为、三星、苹果、oppo、vivo、魅族。</p>
<ul>
<li>商品（产品+属性=商品）</li>
</ul>
<p>如：iphoneX+64G , iphoneX+256G</p>
<h3>商品类型</h3>
<p>不同的商品类型会有不同的属性</p>
<p>可以在ecshop后台中新建一个商品类型，如下：建立一个汽车商品类型</p>
<p><img loading="lazy" decoding="async" width="1344" height="238" class="wp-image-7884" src="/wp-content/uploads/2018/06/word-image-482.png" srcset="/wp-content/uploads/2018/06/word-image-482.png 1344w, /wp-content/uploads/2018/06/word-image-482-300x53.png 300w, /wp-content/uploads/2018/06/word-image-482-768x136.png 768w, /wp-content/uploads/2018/06/word-image-482-1024x181.png 1024w" sizes="(max-width: 1344px) 100vw, 1344px" /> <img loading="lazy" decoding="async" width="797" height="395" class="wp-image-7885" src="/wp-content/uploads/2018/06/word-image-483.png" srcset="/wp-content/uploads/2018/06/word-image-483.png 797w, /wp-content/uploads/2018/06/word-image-483-300x149.png 300w, /wp-content/uploads/2018/06/word-image-483-768x381.png 768w" sizes="(max-width: 797px) 100vw, 797px" /></p>
<p>属性分组：有些属性是可以归为一组的，参考京东电脑商品：</p>
<p><img loading="lazy" decoding="async" width="546" height="381" class="wp-image-7886" src="/wp-content/uploads/2018/06/word-image-484.png" srcset="/wp-content/uploads/2018/06/word-image-484.png 546w, /wp-content/uploads/2018/06/word-image-484-300x209.png 300w" sizes="(max-width: 546px) 100vw, 546px" /></p>
<h3>商品属性</h3>
<p>给商品类型添加商品属性： 商品类型&#8211;&gt;属性列表：</p>
<p><img loading="lazy" decoding="async" width="1147" height="34" class="wp-image-7887" src="/wp-content/uploads/2018/06/word-image-485.png" srcset="/wp-content/uploads/2018/06/word-image-485.png 1147w, /wp-content/uploads/2018/06/word-image-485-300x9.png 300w, /wp-content/uploads/2018/06/word-image-485-768x23.png 768w, /wp-content/uploads/2018/06/word-image-485-1024x30.png 1024w" sizes="(max-width: 1147px) 100vw, 1147px" /> <img loading="lazy" decoding="async" width="1142" height="200" class="wp-image-7888" src="/wp-content/uploads/2018/06/word-image-486.png" srcset="/wp-content/uploads/2018/06/word-image-486.png 1142w, /wp-content/uploads/2018/06/word-image-486-300x53.png 300w, /wp-content/uploads/2018/06/word-image-486-768x135.png 768w, /wp-content/uploads/2018/06/word-image-486-1024x179.png 1024w" sizes="(max-width: 1142px) 100vw, 1142px" /></p>
<p>给汽车类型商品添加进气方式的属性：</p>
<p><img loading="lazy" decoding="async" width="658" height="419" class="wp-image-7889" src="/wp-content/uploads/2018/06/word-image-487.png" srcset="/wp-content/uploads/2018/06/word-image-487.png 658w, /wp-content/uploads/2018/06/word-image-487-300x191.png 300w" sizes="(max-width: 658px) 100vw, 658px" /></p>
<p>单选属性： 指买商品的时候，可以选择一个属性，不同的属性价格不一样</p>
<p><img loading="lazy" decoding="async" width="676" height="145" class="wp-image-7890" src="/wp-content/uploads/2018/06/word-image-488.png" srcset="/wp-content/uploads/2018/06/word-image-488.png 676w, /wp-content/uploads/2018/06/word-image-488-300x64.png 300w" sizes="(max-width: 676px) 100vw, 676px" /></p>
<p>唯一属性：只能看不能选。</p>
<p><img loading="lazy" decoding="async" width="802" height="232" class="wp-image-7891" src="/wp-content/uploads/2018/06/word-image-489.png" srcset="/wp-content/uploads/2018/06/word-image-489.png 802w, /wp-content/uploads/2018/06/word-image-489-300x87.png 300w, /wp-content/uploads/2018/06/word-image-489-768x222.png 768w" sizes="(max-width: 802px) 100vw, 802px" /></p>
<p>复选属性：可以选择多个，一般买商品的附加配件都是复选的。</p>
<p><img loading="lazy" decoding="async" width="1016" height="261" class="wp-image-7892" src="/wp-content/uploads/2018/06/word-image-490.png" srcset="/wp-content/uploads/2018/06/word-image-490.png 1016w, /wp-content/uploads/2018/06/word-image-490-300x77.png 300w, /wp-content/uploads/2018/06/word-image-490-768x197.png 768w" sizes="(max-width: 1016px) 100vw, 1016px" /></p>
<p>当在后台添加一个商品的时候要选择一个商品类型，选择了一个商品类型就决定了这个商品的有哪些属性，如下是添加商品设置其商品属性：</p>
<p><img loading="lazy" decoding="async" width="921" height="440" class="wp-image-7893" src="/wp-content/uploads/2018/06/word-image-491.png" srcset="/wp-content/uploads/2018/06/word-image-491.png 921w, /wp-content/uploads/2018/06/word-image-491-300x143.png 300w, /wp-content/uploads/2018/06/word-image-491-768x367.png 768w" sizes="(max-width: 921px) 100vw, 921px" /></p>
<p>添加属性的特点：</p>
<p>唯一属性（只能看，不能选）：前面没有【+】，不可以设置价格</p>
<p>单选属性（可选择）：前面有【+】，点击+即可复制多个，不同的单选属性可设置不同的价格</p>
<p>属性值手工输入：对应的是个input框，需要自己输入。</p>
<p>属性值是列表选择： 对应的是个select下拉框，需选中一个属性值。</p>
<h3>商品分类</h3>
<p>一般一个网站决定卖什么类型商品就决定了其商品分类。</p>
<p>如卖汽车网站：分类有国产、日系、德系、韩系等</p>
<p>如卖化妆品网站：分类洗面奶、乳液、面膜、保湿、祛痘、眼霜等</p>
<p><img loading="lazy" decoding="async" width="1323" height="236" class="wp-image-7894" src="/wp-content/uploads/2018/06/word-image-492.png" srcset="/wp-content/uploads/2018/06/word-image-492.png 1323w, /wp-content/uploads/2018/06/word-image-492-300x54.png 300w, /wp-content/uploads/2018/06/word-image-492-768x137.png 768w, /wp-content/uploads/2018/06/word-image-492-1024x183.png 1024w" sizes="(max-width: 1323px) 100vw, 1323px" /></p>
<h1>五、完成商品类型的curd</h1>
<h2>商品类型介绍</h2>
<p>商品类型：不同的网站的卖的商品类型是不一样的，比如化妆品网站专卖化妆品、手机网站专卖手机、二手汽车网站专买二手汽车。</p>
<p>网站决定卖什么商品类型，也就决定了商品的商品属性</p>
<h2>商品类型的增加</h2>
<h2>商品类型的列表</h2>
<h2>商品类型的编辑</h2>
<h2>【作业】商品类型的删除</h2>
<h1>六、完成商品属性的curd</h1>
<h2>1、商品属性的认识</h2>
<p>网站决定卖什么商品类型，也就决定了商品的商品属性</p>
<p>可以参考ecshop添加属性的方式:</p>
<p><img loading="lazy" decoding="async" width="960" height="427" class="wp-image-7895" src="/wp-content/uploads/2018/06/word-image-493.png" srcset="/wp-content/uploads/2018/06/word-image-493.png 960w, /wp-content/uploads/2018/06/word-image-493-300x133.png 300w, /wp-content/uploads/2018/06/word-image-493-768x342.png 768w" sizes="(max-width: 960px) 100vw, 960px" /></p>
<p>属性这里重点两种属性：唯一属性和单选属性</p>
<p>唯一属性：只能看，不能选。</p>
<p><img loading="lazy" decoding="async" width="389" height="55" class="wp-image-7896" src="/wp-content/uploads/2018/06/word-image-494.png" srcset="/wp-content/uploads/2018/06/word-image-494.png 389w, /wp-content/uploads/2018/06/word-image-494-300x42.png 300w" sizes="(max-width: 389px) 100vw, 389px" /></p>
<p>单选属性：我们购买商品的时候，可以选择的，后面添加商品的时候，不同的单选属性价格也是不一样的，如iphone6银色和iphone黑色价格是不一样的。</p>
<p><img loading="lazy" decoding="async" width="678" height="186" class="wp-image-7897" src="/wp-content/uploads/2018/06/word-image-495.png" srcset="/wp-content/uploads/2018/06/word-image-495.png 678w, /wp-content/uploads/2018/06/word-image-495-300x82.png 300w" sizes="(max-width: 678px) 100vw, 678px" /></p>
<p>②属性的值的录入方式</p>
<p><img loading="lazy" decoding="async" width="643" height="114" class="wp-image-7898" src="/wp-content/uploads/2018/06/word-image-496.png" srcset="/wp-content/uploads/2018/06/word-image-496.png 643w, /wp-content/uploads/2018/06/word-image-496-300x53.png 300w" sizes="(max-width: 643px) 100vw, 643px" /></p>
<p>手工输入：不可以输入属性值，且可选值列表是禁用状态，只能在添加商品的时候输入属性值。</p>
<p>列表选择：在可选择列表输入一些我们指定的属性值，添加商品的时候，从中选中一个属性值即可。</p>
<p>表结构：</p>
<h2>完成商品属性的添加</h2>
<h2>完成商品属性的列表</h2>
<h2>完成商品属性的编辑</h2>
<h2>完成商品属性的删除</h2>
<h2>完成商品类型列表中属性的查看</h2>
<h1>七、完成商品分类的curd</h1>
<h2>1、分析分类表结构</h2>
<p>表字段结构如下：</p>
<h2>完成商品分类的添加</h2>
<h2>完成商品分类的列表</h2>
<h2>4、完成商品分类的编辑</h2>
<h2>5、【作业】完成商品分类的删除</h2>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/7751.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Laravel在线教育平台（二） Datatables 表格插件、RBAC、权限分配数据处理、中间件鉴权</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5944.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5944.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 19 May 2018 15:54:11 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[Laravel在线教育平台]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[Datatables表格插件]]></category>
		<category><![CDATA[RBAC]]></category>
		<category><![CDATA[中间件鉴权]]></category>
		<category><![CDATA[权限分配数据处理]]></category>
		<guid isPermaLink="false">/?p=5944</guid>

					<description><![CDATA[Laravel框架实战-在线教育平台（2） 一、管理员管理 Datatables说明 Datatables是一 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1><a id="post-5944-_Toc487817413"></a>Laravel框架实战-在线教育平台（2）<a id="post-5944-_Toc487817414"></a></h1>
<h1>一、管理员管理</h1>
<h2>Datatables说明 </h2>
<p>
  Datatables是一款基于jQuery表格插件
</p>
<h2>管理员列表</h2>
<h3>︴效果</h3>
<p><img loading="lazy" decoding="async" width="1344" height="418" src="/wp-content/uploads/2018/05/word-image-5403.png" class="wp-image-5945" srcset="/wp-content/uploads/2018/05/word-image-5403.png 1344w, /wp-content/uploads/2018/05/word-image-5403-300x93.png 300w, /wp-content/uploads/2018/05/word-image-5403-768x239.png 768w, /wp-content/uploads/2018/05/word-image-5403-1024x318.png 1024w" sizes="(max-width: 1344px) 100vw, 1344px" /></p>
<h3>显示视图</h3>
<ul>
<li>
    步骤1：定义路由  admin\admin\index   AdminController@index
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1010" height="444" src="/wp-content/uploads/2018/05/word-image-5404.png" class="wp-image-5946" srcset="/wp-content/uploads/2018/05/word-image-5404.png 1010w, /wp-content/uploads/2018/05/word-image-5404-300x132.png 300w, /wp-content/uploads/2018/05/word-image-5404-768x338.png 768w" sizes="(max-width: 1010px) 100vw, 1010px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法  并且 调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1007" height="476" src="/wp-content/uploads/2018/05/word-image-5405.png" class="wp-image-5947" srcset="/wp-content/uploads/2018/05/word-image-5405.png 1007w, /wp-content/uploads/2018/05/word-image-5405-300x142.png 300w, /wp-content/uploads/2018/05/word-image-5405-768x363.png 768w" sizes="(max-width: 1007px) 100vw, 1007px" /></p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1249" height="668" src="/wp-content/uploads/2018/05/word-image-5406.png" class="wp-image-5948" srcset="/wp-content/uploads/2018/05/word-image-5406.png 1249w, /wp-content/uploads/2018/05/word-image-5406-300x160.png 300w, /wp-content/uploads/2018/05/word-image-5406-768x411.png 768w, /wp-content/uploads/2018/05/word-image-5406-1024x548.png 1024w" sizes="(max-width: 1249px) 100vw, 1249px" /></p>
<h3>数据处理：使用datatables插件展示数据（客户端分页）</h3>
<ul>
<li>
    步骤1：修改路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1161" height="320" src="/wp-content/uploads/2018/05/word-image-5407.png" class="wp-image-5949" srcset="/wp-content/uploads/2018/05/word-image-5407.png 1161w, /wp-content/uploads/2018/05/word-image-5407-300x83.png 300w, /wp-content/uploads/2018/05/word-image-5407-768x212.png 768w, /wp-content/uploads/2018/05/word-image-5407-1024x282.png 1024w" sizes="(max-width: 1161px) 100vw, 1161px" /></p>
<ul>
<li>
    步骤2：更改控制器方法
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1191" height="566" src="/wp-content/uploads/2018/05/word-image-5408.png" class="wp-image-5950" srcset="/wp-content/uploads/2018/05/word-image-5408.png 1191w, /wp-content/uploads/2018/05/word-image-5408-300x143.png 300w, /wp-content/uploads/2018/05/word-image-5408-768x365.png 768w, /wp-content/uploads/2018/05/word-image-5408-1024x487.png 1024w" sizes="(max-width: 1191px) 100vw, 1191px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Admin;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class AdminController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.获取数据
</p>
<p>
              $admins = Admin::select(&#8216;id&#8217;, &#8216;username&#8217;, &#8216;mobile&#8217;, &#8217;email&#8217;, &#8216;role_id&#8217;, &#8216;state&#8217;, &#8216;created_at&#8217;)-&gt;get();
</p>
<p>
              //3.响应json数据
</p>
<p>
              return response()-&gt;json([
</p>
<p>
                  &#8216;data&#8217; =&gt; $admins
</p>
<p>
              ]);
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图并传递数据
</p>
<p>
              return view(&#8216;admin.admin.index&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：视图显示数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1233" height="684" src="/wp-content/uploads/2018/05/word-image-5409.png" class="wp-image-5951" srcset="/wp-content/uploads/2018/05/word-image-5409.png 1233w, /wp-content/uploads/2018/05/word-image-5409-300x166.png 300w, /wp-content/uploads/2018/05/word-image-5409-768x426.png 768w, /wp-content/uploads/2018/05/word-image-5409-1024x568.png 1024w" sizes="(max-width: 1233px) 100vw, 1233px" /></p>
<p>
  $(&#8216;table&#8217;).dataTable({
</p>
<p>
      ajax: {
</p>
<p>
  		url: &#8220;{{ url(&#8216;admin/admin/index&#8217;) }}&#8221;,
</p>
<p>
          &#8220;type&#8221;: &#8220;post&#8221;,
</p>
<p>
          &#8216;headers&#8217;: { &#8216;X-CSRF-TOKEN&#8217; : &#8216;{{ csrf_token() }}&#8217; },
</p>
<p>
  		&#8220;data&#8221;: function (data) {
</p>
<p>
  			// data.startTime = $(&#8216;#datemin&#8217;).val();
</p>
<p>
  			// data.endTime = $(&#8216;#datemax&#8217;).val();
</p>
<p>
  			// data.username = $(&#8216;#username&#8217;).val();
</p>
<p>
  		}
</p>
<p>
  	},
</p>
<p>
      //columns
</p>
<p>
      //作用：设置服务端返回数据填充规则
</p>
<p>
      //语法：{&#8220;data&#8221;: &#8220;键&#8221;，&#8221;defaultContent&#8221;: &#8220;默认值&#8221;}
</p>
<p>
      &#8220;columns&#8221;: [
</p>
<p>
          { &#8220;data&#8221;: &#8220;tmp1&#8221;,  defaultContent: &#8220;占位，复选框&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;id&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;username&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;mobile&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;email&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;role_id&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;created_at&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;state&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;tmp2&#8221;, defaultContent: &#8220;占位，操作&#8221; },
</p>
<p>
      ],
</p>
<p>
      //createdRow
</p>
<p>
      //作用：创建tr时回调
</p>
<p>
      //row:创建好的tr的dom对象
</p>
<p>
      //data:数据源，代表服务器端返回的每条记录的实体信息
</p>
<p>
      //dataIndex:数据源的索引号码
</p>
<p>
      &#8220;createdRow&#8221;: function(row, data, dataIndex) {
</p>
<p>
  		//匹配每一行的第一列
</p>
<p>
  		$(row).find(&#8220;td:first&#8221;).html(&#8220;&lt;input type=&#8217;checkbox&#8217; name=&#8217;choose[]&#8217; value='&#8221;+data.id+&#8221;&#8216; /&gt;&#8221;)
</p>
<p>
  		//匹配每一行的第八列
</p>
<p>
  		if (data.state == 1) {
</p>
<p>
  			$(row).find(&#8220;td:eq(7)&#8221;).html(&#8216;&lt;span class=&#8221;label label-success radius&#8221;&gt;已启用&lt;/span&gt;&#8217;);
</p>
<p>
  		} else {
</p>
<p>
  			$(row).find(&#8220;td:eq(7)&#8221;).html(&#8216;&lt;span class=&#8221;label radius&#8221;&gt;已停用&lt;/span&gt;&#8217;);
</p>
<p>
  		}
</p>
<p>
  		//匹配每一行的最后一列
</p>
<p>
  		var lastHtml = &#8216;&lt;a style=&#8221;text-decoration:none&#8221; onClick=&#8221;admin_start(this,10001)&#8221; href=&#8221;javascript:;&#8221; title=&#8221;启用&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe615;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_edit(\&#8217;管理员编辑\&#8217;,\&#8217;admin-add.html\&#8217;,2,800,500)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_del(this,1)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&#8217;;
</p>
<p>
  		$(row).find(&#8220;td:last&#8221;).html(lastHtml);
</p>
<p>
  	},
</p>
<p>
  	searching : false, 		 //禁用搜索
</p>
<p>
      bLengthChange: false,   //去掉每页显示多少条数据方法
</p>
<p>
  });
</p>
<p>
  响应json数据：return response()-&gt;json([&#8216;data&#8217; =&gt; $admins]);
</p>
<h3>数据处理：使用datatables插件展示数据（服务端分页）</h3>
<ul>
<li>
    步骤1：修改视图（搜索的id和name， datatables）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1146" height="423" src="/wp-content/uploads/2018/05/word-image-5410.png" class="wp-image-5952" srcset="/wp-content/uploads/2018/05/word-image-5410.png 1146w, /wp-content/uploads/2018/05/word-image-5410-300x111.png 300w, /wp-content/uploads/2018/05/word-image-5410-768x283.png 768w, /wp-content/uploads/2018/05/word-image-5410-1024x378.png 1024w" sizes="(max-width: 1146px) 100vw, 1146px" /><br />
<img loading="lazy" decoding="async" width="911" height="337" src="/wp-content/uploads/2018/05/word-image-5411.png" class="wp-image-5953" srcset="/wp-content/uploads/2018/05/word-image-5411.png 911w, /wp-content/uploads/2018/05/word-image-5411-300x111.png 300w, /wp-content/uploads/2018/05/word-image-5411-768x284.png 768w" sizes="(max-width: 911px) 100vw, 911px" /><br />
<img loading="lazy" decoding="async" width="709" height="390" src="/wp-content/uploads/2018/05/word-image-5412.png" class="wp-image-5954" srcset="/wp-content/uploads/2018/05/word-image-5412.png 709w, /wp-content/uploads/2018/05/word-image-5412-300x165.png 300w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p>
  var table  = $(&#8216;table&#8217;).dataTable({
</p>
<p>
      //开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）
</p>
<p>
      &#8220;serverSide&#8221;: true,
</p>
<p>
      ajax: {
</p>
<p>
  		url: &#8220;{{ url(&#8216;admin/admin/index&#8217;) }}&#8221;,
</p>
<p>
          &#8220;type&#8221;: &#8220;post&#8221;,
</p>
<p>
          &#8216;headers&#8217;: { &#8216;X-CSRF-TOKEN&#8217; : &#8216;{{ csrf_token() }}&#8217; },
</p>
<p>
  		&#8220;data&#8221;: function (data) {
</p>
<p>
  			data.startTime = $(&#8216;#startTime&#8217;).val();
</p>
<p>
  			data.endTime = $(&#8216;#endTime&#8217;).val();
</p>
<p>
  			data.username = $(&#8216;#username&#8217;).val();
</p>
<p>
  		}
</p>
<p>
  	},
</p>
<p>
      //columns
</p>
<p>
      //作用：设置服务端返回数据填充规则
</p>
<p>
      //语法：{&#8220;data&#8221;: &#8220;键&#8221;，&#8221;defaultContent&#8221;: &#8220;默认值&#8221;}
</p>
<p>
      &#8220;columns&#8221;: [
</p>
<p>
          { &#8220;data&#8221;: &#8220;tmp1&#8221;,  defaultContent: &#8220;&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;id&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;username&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;mobile&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;email&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;role_id&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;created_at&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;state&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;tmp2&#8221;, defaultContent: &#8220;操作&#8221; },
</p>
<p>
      ],
</p>
<p>
      //createdRow
</p>
<p>
      //作用：创建tr时回调
</p>
<p>
      //row:创建好的tr的dom对象
</p>
<p>
      //data:数据源，代表服务器端返回的每条记录的实体信息
</p>
<p>
      //dataIndex:数据源的索引号码
</p>
<p>
      &#8220;createdRow&#8221;: function(row, data, dataIndex) {
</p>
<p>
  		//匹配每一行的第一列
</p>
<p>
  		$(row).find(&#8220;td:first&#8221;).html(&#8220;&lt;input type=&#8217;checkbox&#8217; name=&#8217;choose[]&#8217; value='&#8221;+data.id+&#8221;&#8216; /&gt;&#8221;)
</p>
<p>
  		//匹配每一行的第八列
</p>
<p>
  		if (data.state == 1) {
</p>
<p>
  			$(row).find(&#8220;td:eq(7)&#8221;).html(&#8216;&lt;span class=&#8221;label label-success radius&#8221;&gt;已启用&lt;/span&gt;&#8217;);
</p>
<p>
  		} else {
</p>
<p>
  			$(row).find(&#8220;td:eq(7)&#8221;).html(&#8216;&lt;span class=&#8221;label radius&#8221;&gt;已停用&lt;/span&gt;&#8217;);
</p>
<p>
  		}
</p>
<p>
  		//匹配每一行的最后一列
</p>
<p>
  		var lastHtml = &#8216;&lt;a style=&#8221;text-decoration:none&#8221; onClick=&#8221;admin_start(this,10001)&#8221; href=&#8221;javascript:;&#8221; title=&#8221;启用&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe615;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_edit(\&#8217;管理员编辑\&#8217;,\&#8217;admin-add.html\&#8217;,2,800,500)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_del(this,1)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&#8217;;
</p>
<p>
  		$(row).find(&#8220;td:last&#8221;).html(lastHtml);
</p>
<p>
  	},
</p>
<p>
  	searching : false, 		 //禁用搜索
</p>
<p>
      bLengthChange: false,   //去掉每页显示多少条数据方法
</p>
<p>
  });
</p>
<p>
  //点击按钮后重新发送HTTP请求
</p>
<p>
  $(&#8216;#searchd&#8217;).click(function(){
</p>
<p>
      //需要重新带参数请求数据
</p>
<p>
      table.api().ajax.reload();
</p>
<p>
  });
</p>
<ul>
<li>
    步骤2：控制器方法（接受起始位置和结束位置）增加limit过滤
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1120" height="639" src="/wp-content/uploads/2018/05/word-image-5413.png" class="wp-image-5955" srcset="/wp-content/uploads/2018/05/word-image-5413.png 1120w, /wp-content/uploads/2018/05/word-image-5413-300x171.png 300w, /wp-content/uploads/2018/05/word-image-5413-768x438.png 768w, /wp-content/uploads/2018/05/word-image-5413-1024x584.png 1024w" sizes="(max-width: 1120px) 100vw, 1120px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Admin;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class AdminController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.接受数据
</p>
<p>
              $postData = $request-&gt;only([&#8216;start&#8217;, &#8216;length&#8217;, &#8216;startTime&#8217;, &#8216;endTime&#8217;, &#8216;username&#8217;, &#8216;draw&#8217;]);
</p>
<p>
              //3.组装模型
</p>
<p>
              <strong>$admins = Admin::select(&#8216;id&#8217;, &#8216;username&#8217;, &#8216;mobile&#8217;, &#8217;email&#8217;, &#8216;role_id&#8217;, &#8216;state&#8217;, &#8216;created_at&#8217;);</strong>
</p>
<p>
              //4.模型过滤组装
</p>
<p>
              if ($postData[&#8216;username&#8217;]) $admins-&gt;where(&#8216;username&#8217;, &#8216;like&#8217;, &#8216;%&#8217;. $postData[&#8216;username&#8217;] .&#8217;%&#8217;);
</p>
<p>
              if ($postData[&#8216;startTime&#8217;]) $admins-&gt;where(&#8216;created_at&#8217;, &#8216;&gt;&#8217;, strtotime($postData[&#8216;startTime&#8217;]));
</p>
<p>
              if ($postData[&#8216;endTime&#8217;]) $admins-&gt;where(&#8216;created_at&#8217;, &#8216;&lt;&#8216;, strtotime($postData[&#8216;endTime&#8217;]));
</p>
<p>
              //5.响应json数据
</p>
<p>
              return response()-&gt;json([
</p>
<p>
                  &#8216;draw&#8217; =&gt; (int)$postData[&#8216;draw&#8217;],       //必须，HTTP请求发送什么就响应什么
</p>
<p>
                  &#8216;recordsTotal&#8217; =&gt; Admin::count(),       //必须，admin表总记录数
</p>
<p>
                  &#8216;recordsFiltered&#8217; =&gt; $admins-&gt;count(),  //必须，admin表总记录数（增加where条件）
</p>
<p>
                  &#8216;data&#8217; =&gt; $admins-&gt;offset($postData[&#8216;start&#8217;])-&gt;limit($postData[&#8216;length&#8217;])-&gt;get()
</p>
<p>
              ]);
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图并传递数据
</p>
<p>
              return view(&#8216;admin.admin.index&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<h1><a id="post-5944-_Toc487817417"></a>RBAC准备</h1>
<h2>说明</h2>
<p>
  RBAC：role-based access control（角色权限控制）
</p>
<p>
  在很多网站的后台会使用RBAC去实现权限管理。
</p>
<p>
  常见的RBAC实现方式有：三表方式、五表方式。
</p>
<p>
  三表：管理员表、角色表、权限表。
</p>
<p>
  五表：管理员表、角色表、权限表、管理员和角色表、角色和权限表
</p>
<p><img loading="lazy" decoding="async" width="956" height="356" src="/wp-content/uploads/2018/05/word-image-5414.png" class="wp-image-5956" srcset="/wp-content/uploads/2018/05/word-image-5414.png 956w, /wp-content/uploads/2018/05/word-image-5414-300x112.png 300w, /wp-content/uploads/2018/05/word-image-5414-768x286.png 768w" sizes="(max-width: 956px) 100vw, 956px" /></p>
<h2><a id="post-5944-_Toc487817418"></a>设计角色表和权限表</h2>
<h3>1）设计角色表</h3>
<p><strong>后台角色表</strong>
</p>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="7">
<p>
  role
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  role_name
</p>
</td>
<td>
<p>
  varchar(20)
</p>
</td>
<td>
<p>
  角色名称，如：超级管理员
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  auth_ids
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  权限表主键id集合，如1,2,3
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  auth_ac
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  权限对应的控制器方法集合,如：
</p>
<p>
  admincontroller@index,indexcontroller@index
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  update_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<p>
  步骤1：创建迁移文件并书写
</p>
<p><img loading="lazy" decoding="async" width="1277" height="573" src="/wp-content/uploads/2018/05/word-image-5415.png" class="wp-image-5957" srcset="/wp-content/uploads/2018/05/word-image-5415.png 1277w, /wp-content/uploads/2018/05/word-image-5415-300x135.png 300w, /wp-content/uploads/2018/05/word-image-5415-768x345.png 768w, /wp-content/uploads/2018/05/word-image-5415-1024x459.png 1024w" sizes="(max-width: 1277px) 100vw, 1277px" /></p>
<p>
  Schema::create(&#8216;role&#8217;, function (Blueprint $table) {
</p>
<p>
      $table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;role_name&#8217;, 20)-&gt;comment(&#8216;角色名称&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;auth_ids&#8217;)-&gt;comment(&#8216;权限表ID集合,如:1,2,3&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;auth_ac&#8217;)-&gt;comment(&#8216;权限表对应控制器方法集合,如:admincontroller@index,indexcontroller@index&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  });
</p>
<p>
  步骤2：执行
</p>
<p><img loading="lazy" decoding="async" width="516" height="321" src="/wp-content/uploads/2018/05/word-image-5416.png" class="wp-image-5958" srcset="/wp-content/uploads/2018/05/word-image-5416.png 516w, /wp-content/uploads/2018/05/word-image-5416-300x187.png 300w" sizes="(max-width: 516px) 100vw, 516px" /></p>
<h3>2）设计权限表</h3>
<p><strong>后台权限表</strong>
</p>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  auth
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  auth_name
</p>
</td>
<td>
<p>
  varchar(20)
</p>
</td>
<td>
<p>
  权限名称，如：管理员管理
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  controller
</p>
</td>
<td>
<p>
  varchar(40)
</p>
</td>
<td>
<p>
  控制器名
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  action
</p>
</td>
<td>
<p>
  varchar(30)
</p>
</td>
<td>
<p>
  权限对应的方法名称
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  pid
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  等级：0-顶级，其他-子级（最多2级）
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  is_nav
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  是否菜单显示：1-是，0-否
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  1
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  7
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  8
</p>
</td>
<td>
<p>
  update_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<p>
  步骤1：创建数据迁移并书写代码
</p>
<p><img loading="lazy" decoding="async" width="1236" height="432" src="/wp-content/uploads/2018/05/word-image-5417.png" class="wp-image-5959" srcset="/wp-content/uploads/2018/05/word-image-5417.png 1236w, /wp-content/uploads/2018/05/word-image-5417-300x105.png 300w, /wp-content/uploads/2018/05/word-image-5417-768x268.png 768w, /wp-content/uploads/2018/05/word-image-5417-1024x358.png 1024w" sizes="(max-width: 1236px) 100vw, 1236px" /></p>
<p>
  Schema::create(&#8216;auth&#8217;, function (Blueprint $table) {
</p>
<p>
      $table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;auth_name&#8217;, 20)-&gt;comment(&#8216;权限名称&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;controller&#8217;, 40)-&gt;comment(&#8216;控制器名&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;action&#8217;, 30)-&gt;comment(&#8216;方法名&#8217;);
</p>
<p>
      $table-&gt;unsignedTinyInteger(&#8216;pid&#8217;)-&gt;default(0)-&gt;comment(&#8216;等级:0-顶级,其他-子级（最多2级）&#8217;);
</p>
<p>
      $table-&gt;unsignedTinyInteger(&#8216;is_nav&#8217;)-&gt;default(1)-&gt;comment(&#8216;是否菜单显示:1-是,0-否&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  });
</p>
<p>
  步骤2：执行
</p>
<p><img loading="lazy" decoding="async" width="598" height="349" src="/wp-content/uploads/2018/05/word-image-5418.png" class="wp-image-5960" srcset="/wp-content/uploads/2018/05/word-image-5418.png 598w, /wp-content/uploads/2018/05/word-image-5418-300x175.png 300w" sizes="(max-width: 598px) 100vw, 598px" /></p>
<h2><a id="post-5944-_Toc487817419"></a>3、了解三张表之间的关系</h2>
<p><img loading="lazy" decoding="async" width="854" height="238" src="/wp-content/uploads/2018/05/word-image-5419.png" class="wp-image-5961" srcset="/wp-content/uploads/2018/05/word-image-5419.png 854w, /wp-content/uploads/2018/05/word-image-5419-300x84.png 300w, /wp-content/uploads/2018/05/word-image-5419-768x214.png 768w" sizes="(max-width: 854px) 100vw, 854px" /></p>
<h2><a id="post-5944-_Toc487817420"></a>4、模拟数据</h2>
<p><img loading="lazy" decoding="async" width="888" height="130" src="/wp-content/uploads/2018/05/word-image-5420.png" class="wp-image-5962" srcset="/wp-content/uploads/2018/05/word-image-5420.png 888w, /wp-content/uploads/2018/05/word-image-5420-300x44.png 300w, /wp-content/uploads/2018/05/word-image-5420-768x112.png 768w" sizes="(max-width: 888px) 100vw, 888px" /></p>
<p>
  INSERT INTO `admin` VALUES (null, &#8216;@php12&#8217;, &#8216;$2y$10$SZ50r80SEK4zMaHVkODqVupVLufzQuZQ4lHBm46QDsGwY5yeXL3lK&#8217;, &#8216;1&#8217;, &#8216;18888888888&#8217;, &#8216;8@itcast.cn&#8217;, &#8216;1&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;, &#8216;1&#8217;, &#8221;);
</p>
<p><strong>#密码是：admin888</strong>
</p>
<p><img loading="lazy" decoding="async" width="1239" height="178" src="/wp-content/uploads/2018/05/word-image-5421.png" class="wp-image-5963" srcset="/wp-content/uploads/2018/05/word-image-5421.png 1239w, /wp-content/uploads/2018/05/word-image-5421-300x43.png 300w, /wp-content/uploads/2018/05/word-image-5421-768x110.png 768w, /wp-content/uploads/2018/05/word-image-5421-1024x147.png 1024w" sizes="(max-width: 1239px) 100vw, 1239px" /></p>
<p>
  INSERT INTO `role` VALUES (&#8216;1&#8217;, &#8216;超级管理员&#8217;, &#8216;1,2,3,4,5,6,7,8,10,9&#8217;, &#8216;OrderController@add,OrderController@update,OrderController@update,MemberController@add,MemberController@update,ArticleController@update,ArticleController@add&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;);
</p>
<p>
  INSERT INTO `role` VALUES (&#8216;2&#8217;, &#8216;网站编辑&#8217;, &#8216;8,10,9&#8217;, &#8216;ArticleController@add,ArticleController@update&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;);
</p>
<p>
  INSERT INTO `role` VALUES (&#8216;3&#8217;, &#8216;水电费&#8217;, &#8216;1,2,4,5,6,7,8,9&#8217;, &#8216;OrderController@add,OrderController@update,MemberController@add,MemberController@update,ArticleController@add&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;);
</p>
<p><img loading="lazy" decoding="async" width="749" height="327" src="/wp-content/uploads/2018/05/word-image-5422.png" class="wp-image-5964" srcset="/wp-content/uploads/2018/05/word-image-5422.png 749w, /wp-content/uploads/2018/05/word-image-5422-300x131.png 300w" sizes="(max-width: 749px) 100vw, 749px" /></p>
<p>
  INSERT INTO `auth` VALUES
</p>
<p>
  (&#8216;1&#8217;, &#8216;订单管理&#8217;, &#8216;OrderController&#8217;, &#8221;, &#8216;0&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;2&#8217;, &#8216;订单添加&#8217;, &#8216;OrderController&#8217;, &#8216;add&#8217;, &#8216;1&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;3&#8217;, &#8216;订单修改&#8217;, &#8216;OrderController&#8217;, &#8216;update&#8217;, &#8216;1&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;4&#8217;, &#8216;订单列表&#8217;, &#8216;OrderController&#8217;, &#8216;update&#8217;, &#8216;1&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;5&#8217;, &#8216;会员管理&#8217;, &#8216;MemberController&#8217;, &#8221;, &#8216;0&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;6&#8217;, &#8216;会员添加&#8217;, &#8216;MemberController&#8217;, &#8216;add&#8217;, &#8216;5&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;7&#8217;, &#8216;会员修改&#8217;, &#8216;MemberController&#8217;, &#8216;update&#8217;, &#8216;5&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;8&#8217;, &#8216;文章管理&#8217;, &#8216;ArticleController&#8217;, &#8221;, &#8216;0&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;9&#8217;, &#8216;文章添加&#8217;, &#8216;ArticleController&#8217;, &#8216;add&#8217;, &#8216;8&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8217;10&#8217;, &#8216;文章修改&#8217;, &#8216;ArticleController&#8217;, &#8216;update&#8217;, &#8216;8&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;);
</p>
<p>
  补充：在有数据的基础上，将之前遗留的管理员身份显示完全
</p>
<p><img loading="lazy" decoding="async" width="254" height="61" src="/wp-content/uploads/2018/05/word-image-5423.png" class="wp-image-5965" /></p>
<p><strong>通过ORM解决这个问题</strong>（<strong>关联模型</strong>）：
</p>
<p>
  用户表和角色表是一对一的关系：使用hasOne方法
</p>
<p><img loading="lazy" decoding="async" width="460" height="48" src="/wp-content/uploads/2018/05/word-image-5424.png" class="wp-image-5966" srcset="/wp-content/uploads/2018/05/word-image-5424.png 460w, /wp-content/uploads/2018/05/word-image-5424-300x31.png 300w" sizes="(max-width: 460px) 100vw, 460px" /></p>
<p>
  需要在Admin模型中关联Role模型：
</p>
<p><img loading="lazy" decoding="async" width="655" height="181" src="/wp-content/uploads/2018/05/word-image-5425.png" class="wp-image-5967" srcset="/wp-content/uploads/2018/05/word-image-5425.png 655w, /wp-content/uploads/2018/05/word-image-5425-300x83.png 300w" sizes="(max-width: 655px) 100vw, 655px" /></p>
<p>
  创建Role模型：
</p>
<p><img loading="lazy" decoding="async" width="405" height="82" src="/wp-content/uploads/2018/05/word-image-5426.png" class="wp-image-5968" srcset="/wp-content/uploads/2018/05/word-image-5426.png 405w, /wp-content/uploads/2018/05/word-image-5426-300x61.png 300w" sizes="(max-width: 405px) 100vw, 405px" /><br />
<img loading="lazy" decoding="async" width="794" height="317" src="/wp-content/uploads/2018/05/word-image-5427.png" class="wp-image-5969" srcset="/wp-content/uploads/2018/05/word-image-5427.png 794w, /wp-content/uploads/2018/05/word-image-5427-300x120.png 300w, /wp-content/uploads/2018/05/word-image-5427-768x307.png 768w" sizes="(max-width: 794px) 100vw, 794px" /></p>
<p>
  去显示用户身份（模版文件admin/inedx/index.blade.php）：
</p>
<p>
  在之前调用guard的时候其实已经实例化了Admin模型，所以可以直接调用Admin模型中的关联方法，取出结果集中的第1条记录，显示出角色名称：
</p>
<p><img loading="lazy" decoding="async" width="670" height="122" src="/wp-content/uploads/2018/05/word-image-5428.png" class="wp-image-5970" srcset="/wp-content/uploads/2018/05/word-image-5428.png 670w, /wp-content/uploads/2018/05/word-image-5428-300x55.png 300w" sizes="(max-width: 670px) 100vw, 670px" /></p>
<p>
  显示效果：
</p>
<p><img loading="lazy" decoding="async" width="183" height="67" src="/wp-content/uploads/2018/05/word-image-5429.png" class="wp-image-5971" /></p>
<h1><a id="post-5944-_Toc487817421"></a>三、权限管理</h1>
<h2>︴效果</h2>
<p>
  列表
</p>
<p><img loading="lazy" decoding="async" width="1311" height="629" src="/wp-content/uploads/2018/05/word-image-5430.png" class="wp-image-5972" srcset="/wp-content/uploads/2018/05/word-image-5430.png 1311w, /wp-content/uploads/2018/05/word-image-5430-300x144.png 300w, /wp-content/uploads/2018/05/word-image-5430-768x368.png 768w, /wp-content/uploads/2018/05/word-image-5430-1024x491.png 1024w" sizes="(max-width: 1311px) 100vw, 1311px" /></p>
<p>
  添加
</p>
<p><img loading="lazy" decoding="async" width="931" height="480" src="/wp-content/uploads/2018/05/word-image-5431.png" class="wp-image-5973" srcset="/wp-content/uploads/2018/05/word-image-5431.png 931w, /wp-content/uploads/2018/05/word-image-5431-300x155.png 300w, /wp-content/uploads/2018/05/word-image-5431-768x396.png 768w" sizes="(max-width: 931px) 100vw, 931px" /></p>
<h2>列表功能</h2>
<h3>1）显示列表（模板文件：admin-permission.html）</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1117" height="263" src="/wp-content/uploads/2018/05/word-image-5432.png" class="wp-image-5974" srcset="/wp-content/uploads/2018/05/word-image-5432.png 1117w, /wp-content/uploads/2018/05/word-image-5432-300x71.png 300w, /wp-content/uploads/2018/05/word-image-5432-768x181.png 768w, /wp-content/uploads/2018/05/word-image-5432-1024x241.png 1024w" sizes="(max-width: 1117px) 100vw, 1117px" /></p>
<p>
  Route::get(&#8216;admin/auth/index&#8217;, &#8216;Admin\AuthController@index&#8217;);
</p>
<ul>
<li>
    步骤2：创建控制器和方法，并调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="978" height="491" src="/wp-content/uploads/2018/05/word-image-5433.png" class="wp-image-5975" srcset="/wp-content/uploads/2018/05/word-image-5433.png 978w, /wp-content/uploads/2018/05/word-image-5433-300x151.png 300w, /wp-content/uploads/2018/05/word-image-5433-768x386.png 768w" sizes="(max-width: 978px) 100vw, 978px" /></p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1165" height="651" src="/wp-content/uploads/2018/05/word-image-5434.png" class="wp-image-5976" srcset="/wp-content/uploads/2018/05/word-image-5434.png 1165w, /wp-content/uploads/2018/05/word-image-5434-300x168.png 300w, /wp-content/uploads/2018/05/word-image-5434-768x429.png 768w, /wp-content/uploads/2018/05/word-image-5434-1024x572.png 1024w" sizes="(max-width: 1165px) 100vw, 1165px" /></p>
<h3>数据处理</h3>
<ul>
<li>
    步骤1：创建Auth模型
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="967" height="577" src="/wp-content/uploads/2018/05/word-image-5435.png" class="wp-image-5977" srcset="/wp-content/uploads/2018/05/word-image-5435.png 967w, /wp-content/uploads/2018/05/word-image-5435-300x179.png 300w, /wp-content/uploads/2018/05/word-image-5435-768x458.png 768w" sizes="(max-width: 967px) 100vw, 967px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Auth extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;auth&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;auth_name&#8217;, &#8216;controller&#8217;, &#8216;action&#8217;, &#8216;pid&#8217;, &#8216;is_nav&#8217;];
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：修改控制器方法查询所有数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1076" height="478" src="/wp-content/uploads/2018/05/word-image-5436.png" class="wp-image-5978" srcset="/wp-content/uploads/2018/05/word-image-5436.png 1076w, /wp-content/uploads/2018/05/word-image-5436-300x133.png 300w, /wp-content/uploads/2018/05/word-image-5436-768x341.png 768w, /wp-content/uploads/2018/05/word-image-5436-1024x455.png 1024w" sizes="(max-width: 1076px) 100vw, 1076px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Auth;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class AuthController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
          //1.查询所有数据（注；因为权限节点数据不是很多所以直接显示）
</p>
<p>
          $auths = Auth::get();
</p>
<p>
          //2.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.auth.index&#8217;, compact(&#8216;auths&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤1：实现视图客户端分页
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1270" height="387" src="/wp-content/uploads/2018/05/word-image-5437.png" class="wp-image-5979" srcset="/wp-content/uploads/2018/05/word-image-5437.png 1270w, /wp-content/uploads/2018/05/word-image-5437-300x91.png 300w, /wp-content/uploads/2018/05/word-image-5437-768x234.png 768w, /wp-content/uploads/2018/05/word-image-5437-1024x312.png 1024w" sizes="(max-width: 1270px) 100vw, 1270px" /><br />
<img loading="lazy" decoding="async" width="1253" height="539" src="/wp-content/uploads/2018/05/word-image-5438.png" class="wp-image-5980" srcset="/wp-content/uploads/2018/05/word-image-5438.png 1253w, /wp-content/uploads/2018/05/word-image-5438-300x129.png 300w, /wp-content/uploads/2018/05/word-image-5438-768x330.png 768w, /wp-content/uploads/2018/05/word-image-5438-1024x440.png 1024w" sizes="(max-width: 1253px) 100vw, 1253px" /><br />
<img loading="lazy" decoding="async" width="861" height="511" src="/wp-content/uploads/2018/05/word-image-5439.png" class="wp-image-5981" srcset="/wp-content/uploads/2018/05/word-image-5439.png 861w, /wp-content/uploads/2018/05/word-image-5439-300x178.png 300w, /wp-content/uploads/2018/05/word-image-5439-768x456.png 768w" sizes="(max-width: 861px) 100vw, 861px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;权限管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 权限管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;权限名称&#8221; id=&#8221;search_content&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;button&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;search&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜权限节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt; &lt;span class=&#8221;l&#8221;&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除&lt;/a&gt; &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加权限节点&#8217;,&#8217;admin-permission-add.html&#8217;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加权限节点&lt;/a&gt;&lt;/span&gt; &lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			&lt;tr&gt;
</p>
<p>
  				&lt;th scope=&#8221;col&#8221; colspan=&#8221;8&#8243;&gt;权限节点&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;ID&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;权限名称&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;控制器名&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;方法名&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;上级权限ID&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;是否作为导航&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			@foreach ($auths as $auth)
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;{{ $auth-&gt;id }}&#8221; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;id }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;auth_name }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;controller }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;action }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;pid }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;
</p>
<p>
  					@if ($auth-&gt;is_nav)
</p>
<p>
  						是
</p>
<p>
  					@else
</p>
<p>
  						否
</p>
<p>
  					@endif
</p>
<p>
  				&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			@endforeach
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  var table = $(&#8216;table&#8217;).DataTable({
</p>
<p>
      iDisplayLength:2,	    //限制每页显示条数
</p>
<p>
      // searching : false, 		 //禁用搜索
</p>
<p>
      bLengthChange: false,   //去掉每页显示多少条数据方法
</p>
<p>
  });
</p>
<p>
  //客户端搜索功能更
</p>
<p>
  $(&#8216;#search&#8217;).click(function(){
</p>
<p>
      var search_content = $(&#8216;#search_content&#8217;).val();
</p>
<p>
      table.search(search_content).draw();
</p>
<p>
  });
</p>
<p>
  $(function(){
</p>
<p>
      $(&#8216;#DataTables_Table_0_filter&#8217;).hide();
</p>
<p>
  });
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-权限-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-权限-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-权限-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h2>添加功能</h2>
<h3>1）显示添加页（模板文件：admin-add.html）</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1027" height="269" src="/wp-content/uploads/2018/05/word-image-5440.png" class="wp-image-5982" srcset="/wp-content/uploads/2018/05/word-image-5440.png 1027w, /wp-content/uploads/2018/05/word-image-5440-300x79.png 300w, /wp-content/uploads/2018/05/word-image-5440-768x201.png 768w, /wp-content/uploads/2018/05/word-image-5440-1024x268.png 1024w" sizes="(max-width: 1027px) 100vw, 1027px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法、并获取所有顶级传递传递给视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="865" height="373" src="/wp-content/uploads/2018/05/word-image-5441.png" class="wp-image-5983" srcset="/wp-content/uploads/2018/05/word-image-5441.png 865w, /wp-content/uploads/2018/05/word-image-5441-300x129.png 300w, /wp-content/uploads/2018/05/word-image-5441-768x331.png 768w" sizes="(max-width: 865px) 100vw, 865px" /></p>
<p>
  //添加
</p>
<p>
  public function add()
</p>
<p>
  {
</p>
<p>
      //1.查询所有顶级权限
</p>
<p>
      $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
      //2.加载视图并传递数据
</p>
<p>
      return view(&#8216;admin.auth.add&#8217;, compact(&#8216;topAuths&#8217;));
</p>
<p>
  }
</p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1210" height="662" src="/wp-content/uploads/2018/05/word-image-5442.png" class="wp-image-5984" srcset="/wp-content/uploads/2018/05/word-image-5442.png 1210w, /wp-content/uploads/2018/05/word-image-5442-300x164.png 300w, /wp-content/uploads/2018/05/word-image-5442-768x420.png 768w, /wp-content/uploads/2018/05/word-image-5442-1024x560.png 1024w" sizes="(max-width: 1210px) 100vw, 1210px" /><br />
<img loading="lazy" decoding="async" width="799" height="532" src="/wp-content/uploads/2018/05/word-image-5443.png" class="wp-image-5985" srcset="/wp-content/uploads/2018/05/word-image-5443.png 799w, /wp-content/uploads/2018/05/word-image-5443-300x200.png 300w, /wp-content/uploads/2018/05/word-image-5443-768x511.png 768w" sizes="(max-width: 799px) 100vw, 799px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;添加管理员 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-add&#8221;&gt;
</p>
<p>
  		{{ csrf_field() }}
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;权限名称：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; value=&#8221;&#8221; placeholder=&#8221;&#8221; id=&#8221;auth_name&#8221; name=&#8221;auth_name&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;控制器名称：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; autocomplete=&#8221;off&#8221; value=&#8221;&#8221; placeholder=&#8221;控制器名称&#8221; id=&#8221;controller&#8221; name=&#8221;controller&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;方法名：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; autocomplete=&#8221;off&#8221;  placeholder=&#8221;方法名&#8221; id=&#8221;action&#8221; name=&#8221;action&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;作为导航：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9 skin-minimal&#8221;&gt;
</p>
<p>
  			&lt;div class=&#8221;radio-box&#8221;&gt;
</p>
<p>
  				&lt;input type=&#8221;radio&#8221; name=&#8221;is_nav&#8221; value=&#8221;1&#8243; id=&#8221;sex-1&#8243; checked&gt;
</p>
<p>
  				&lt;label for=&#8221;sex-1&#8243;&gt;是&lt;/label&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			&lt;div class=&#8221;radio-box&#8221;&gt;
</p>
<p>
  				&lt;input type=&#8221;radio&#8221; name=&#8221;is_nav&#8221; value=&#8221;0&#8243; id=&#8221;sex-2&#8243; &gt;
</p>
<p>
  				&lt;label for=&#8221;sex-2&#8243;&gt;否&lt;/label&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;上级权限：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt; &lt;span class=&#8221;select-box&#8221; style=&#8221;width:150px;&#8221;&gt;
</p>
<p>
  			&lt;select class=&#8221;select&#8221; name=&#8221;pid&#8221; size=&#8221;1&#8243;&gt;
</p>
<p>
  				&lt;option value=&#8221;0&#8243;&gt;顶级权限&lt;/option&gt;
</p>
<p>
  				@foreach ($topAuths as $topAuths)
</p>
<p>
  				&lt;option value=&#8221;{{ $topAuths-&gt;id }}&#8221;&gt;{{ $topAuths-&gt;auth_name }}&lt;/option&gt;
</p>
<p>
  				@endforeach
</p>
<p>
  			&lt;/select&gt;
</p>
<p>
  			&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  			&lt;input class=&#8221;btn btn-primary radius&#8221; type=&#8221;submit&#8221; value=&#8221;&amp;nbsp;&amp;nbsp;提交&amp;nbsp;&amp;nbsp;&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	$(&#8216;.skin-minimal input&#8217;).iCheck({
</p>
<p>
  		checkboxClass: &#8216;icheckbox-blue&#8217;,
</p>
<p>
  		radioClass: &#8216;iradio-blue&#8217;,
</p>
<p>
  		increaseArea: &#8216;20%&#8217;
</p>
<p>
  	});
</p>
</p>
<p>
  	$(&#8220;#form-admin-add&#8221;).validate({
</p>
<p>
  		rules:{
</p>
<p>
  			atuh_name:{
</p>
<p>
  				required:true,
</p>
<p>
  				minlength:4,
</p>
<p>
  				maxlength:16
</p>
<p>
  			},
</p>
<p>
  			controller:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  			action:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  		},
</p>
<p>
  		onkeyup:false,
</p>
<p>
  		focusCleanup:true,
</p>
<p>
  		success:&#8221;valid&#8221;,
</p>
<p>
  		submitHandler:function(form){
</p>
<p>
  			$(form).ajaxSubmit({
</p>
<p>
  				type: &#8216;post&#8217;,
</p>
<p>
  				url: &#8220;{{ url(&#8216;admin/auth/add&#8217;) }}&#8221;,
</p>
<p>
  				success: function(data){
</p>
<p>
  				    //在父元素提示
</p>
<p>
                      parent.layer.msg(&#8216;添加成功!&#8217;,{icon:1,time:1000});
</p>
<p>
  					//成功则关闭窗口
</p>
<p>
                      var index = parent.layer.getFrameIndex(window.name);
</p>
<p>
                      parent.$(&#8216;.btn-refresh&#8217;).click();
</p>
<p>
                      parent.layer.close(index);
</p>
<p>
  				},
</p>
<p>
                  error: function(XmlHttpRequest, textStatus, errorThrown){
</p>
<p>
  					layer.msg(&#8216;error!&#8217;,{icon:1,time:1000});
</p>
<p>
  				}
</p>
<p>
  			});
</p>
<p>
  		}
</p>
<p>
  	});
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<ul>
<li>
    步骤4：打开列表页设置添加按钮连接
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="805" height="469" src="/wp-content/uploads/2018/05/word-image-5444.png" class="wp-image-5986" srcset="/wp-content/uploads/2018/05/word-image-5444.png 805w, /wp-content/uploads/2018/05/word-image-5444-300x175.png 300w, /wp-content/uploads/2018/05/word-image-5444-768x447.png 768w" sizes="(max-width: 805px) 100vw, 805px" /><br />
<img loading="lazy" decoding="async" width="1207" height="424" src="/wp-content/uploads/2018/05/word-image-5445.png" class="wp-image-5987" srcset="/wp-content/uploads/2018/05/word-image-5445.png 1207w, /wp-content/uploads/2018/05/word-image-5445-300x105.png 300w, /wp-content/uploads/2018/05/word-image-5445-768x270.png 768w, /wp-content/uploads/2018/05/word-image-5445-1024x360.png 1024w" sizes="(max-width: 1207px) 100vw, 1207px" /></p>
<p>
  &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加权限节点&#8217;,'{{ url(&#8216;admin/auth/add&#8217;) }}&#8217;,&#8217;400&#8242;,&#8217;360&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;
</p>
<p>
  	&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加权限节点
</p>
<p>
  &lt;/a&gt;
</p>
<h3>1）添加数据处理</h3>
<ul>
<li>
    步骤1：修改路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1015" height="423" src="/wp-content/uploads/2018/05/word-image-5446.png" class="wp-image-5988" srcset="/wp-content/uploads/2018/05/word-image-5446.png 1015w, /wp-content/uploads/2018/05/word-image-5446-300x125.png 300w, /wp-content/uploads/2018/05/word-image-5446-768x320.png 768w" sizes="(max-width: 1015px) 100vw, 1015px" /></p>
<ul>
<li>
    步骤2：更改控制器方法代码
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1171" height="546" src="/wp-content/uploads/2018/05/word-image-5447.png" class="wp-image-5989" srcset="/wp-content/uploads/2018/05/word-image-5447.png 1171w, /wp-content/uploads/2018/05/word-image-5447-300x140.png 300w, /wp-content/uploads/2018/05/word-image-5447-768x358.png 768w, /wp-content/uploads/2018/05/word-image-5447-1024x477.png 1024w" sizes="(max-width: 1171px) 100vw, 1171px" /></p>
<p>
  //添加
</p>
<p>
  public function add(Request $request)
</p>
<p>
  {
</p>
<p>
      //1.判断HTTP请求类型
</p>
<p>
      if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
          //2.接受数据
</p>
<p>
          $postData = $request-&gt;only([&#8216;auth_name&#8217;, &#8216;controller&#8217;, &#8216;action&#8217;, &#8216;is_nav&#8217;, &#8216;pid&#8217;]);
</p>
<p>
          //3.调用模型批量设置属性创建数据
</p>
<p>
          $rs = Auth::create($postData);
</p>
<p>
          //4.判断状态
</p>
<p>
          echo $rs ? 1 : 0;
</p>
<p>
      } else {
</p>
<p>
          //2.查询所有顶级权限
</p>
<p>
          $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
          //3.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.auth.add&#8217;, compact(&#8216;topAuths&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<h1><a id="post-5944-_Toc487817425"></a>四、角色管理</h1>
<h2>︴效果</h2>
<p>
  列表
</p>
<p><img loading="lazy" decoding="async" width="1329" height="288" src="/wp-content/uploads/2018/05/word-image-5448.png" class="wp-image-5990" srcset="/wp-content/uploads/2018/05/word-image-5448.png 1329w, /wp-content/uploads/2018/05/word-image-5448-300x65.png 300w, /wp-content/uploads/2018/05/word-image-5448-768x166.png 768w, /wp-content/uploads/2018/05/word-image-5448-1024x222.png 1024w" sizes="(max-width: 1329px) 100vw, 1329px" /></p>
<p>
  添加
</p>
<p><img loading="lazy" decoding="async" width="1184" height="306" src="/wp-content/uploads/2018/05/word-image-5449.png" class="wp-image-5991" srcset="/wp-content/uploads/2018/05/word-image-5449.png 1184w, /wp-content/uploads/2018/05/word-image-5449-300x78.png 300w, /wp-content/uploads/2018/05/word-image-5449-768x198.png 768w, /wp-content/uploads/2018/05/word-image-5449-1024x265.png 1024w" sizes="(max-width: 1184px) 100vw, 1184px" /></p>
<h2>1、列表功能</h2>
<h3>1）显示列表（模板文件：admin-role.html）</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1003" height="304" src="/wp-content/uploads/2018/05/word-image-5450.png" class="wp-image-5992" srcset="/wp-content/uploads/2018/05/word-image-5450.png 1003w, /wp-content/uploads/2018/05/word-image-5450-300x91.png 300w, /wp-content/uploads/2018/05/word-image-5450-768x233.png 768w" sizes="(max-width: 1003px) 100vw, 1003px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法，并调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="848" height="540" src="/wp-content/uploads/2018/05/word-image-5451.png" class="wp-image-5993" srcset="/wp-content/uploads/2018/05/word-image-5451.png 848w, /wp-content/uploads/2018/05/word-image-5451-300x191.png 300w, /wp-content/uploads/2018/05/word-image-5451-768x489.png 768w" sizes="(max-width: 848px) 100vw, 848px" /></p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1040" height="590" src="/wp-content/uploads/2018/05/word-image-5452.png" class="wp-image-5994" srcset="/wp-content/uploads/2018/05/word-image-5452.png 1040w, /wp-content/uploads/2018/05/word-image-5452-300x170.png 300w, /wp-content/uploads/2018/05/word-image-5452-768x436.png 768w, /wp-content/uploads/2018/05/word-image-5452-1024x581.png 1024w" sizes="(max-width: 1040px) 100vw, 1040px" /></p>
<h3>2）数据处理</h3>
<ul>
<li>
    步骤1：创建模型
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="977" height="615" src="/wp-content/uploads/2018/05/word-image-5453.png" class="wp-image-5995" srcset="/wp-content/uploads/2018/05/word-image-5453.png 977w, /wp-content/uploads/2018/05/word-image-5453-300x189.png 300w, /wp-content/uploads/2018/05/word-image-5453-768x483.png 768w" sizes="(max-width: 977px) 100vw, 977px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Role extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;role&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;role_name&#8217;, &#8216;auth_ids&#8217;, &#8216;auth_ac&#8217;];
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：控制器调用数据，并传递给视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="781" height="467" src="/wp-content/uploads/2018/05/word-image-5454.png" class="wp-image-5996" srcset="/wp-content/uploads/2018/05/word-image-5454.png 781w, /wp-content/uploads/2018/05/word-image-5454-300x179.png 300w, /wp-content/uploads/2018/05/word-image-5454-768x459.png 768w" sizes="(max-width: 781px) 100vw, 781px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Role;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class RoleController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
          //1.通过内置分页功能获取数据，每页显示2条
</p>
<p>
          $roles = Role::paginate(2);
</p>
<p>
          //2.加载视图
</p>
<p>
          return view(&#8216;admin.role.index&#8217;, compact(&#8216;roles&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤3：循环显示
  </li>
<li><a href="https://www.cnblogs.com/lamp01/p/6869762.html">https://www.cnblogs.com/lamp01/p/6869762.html</a>
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="889" height="582" src="/wp-content/uploads/2018/05/word-image-5455.png" class="wp-image-5997" srcset="/wp-content/uploads/2018/05/word-image-5455.png 889w, /wp-content/uploads/2018/05/word-image-5455-300x196.png 300w, /wp-content/uploads/2018/05/word-image-5455-768x503.png 768w" sizes="(max-width: 889px) 100vw, 889px" /><br />
<img loading="lazy" decoding="async" width="1184" height="530" src="/wp-content/uploads/2018/05/word-image-5456.png" class="wp-image-5998" srcset="/wp-content/uploads/2018/05/word-image-5456.png 1184w, /wp-content/uploads/2018/05/word-image-5456-300x134.png 300w, /wp-content/uploads/2018/05/word-image-5456-768x344.png 768w, /wp-content/uploads/2018/05/word-image-5456-1024x458.png 1024w" sizes="(max-width: 1184px) 100vw, 1184px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;style type=&#8221;text/css&#8221;&gt;
</p>
<p>
  	/*分页CSS样式*/
</p>
<p>
  	#pull_right{
</p>
<p>
  		text-align:center;
</p>
<p>
  	}
</p>
<p>
  	.pull-right {
</p>
<p>
  		/*float: left!important;*/
</p>
<p>
  	}
</p>
<p>
  	.pagination {
</p>
<p>
  		display: inline-block;
</p>
<p>
  		padding-left: 0;
</p>
<p>
  		margin: 20px 0;
</p>
<p>
  		border-radius: 4px;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li {
</p>
<p>
  		display: inline;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li &gt; a,
</p>
<p>
  	.pagination &gt; li &gt; span {
</p>
<p>
  		position: relative;
</p>
<p>
  		float: left;
</p>
<p>
  		padding: 6px 12px;
</p>
<p>
  		margin-left: -1px;
</p>
<p>
  		line-height: 1.42857143;
</p>
<p>
  		color: #428bca;
</p>
<p>
  		text-decoration: none;
</p>
<p>
  		background-color: #fff;
</p>
<p>
  		border: 1px solid #ddd;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li:first-child &gt; a,
</p>
<p>
  	.pagination &gt; li:first-child &gt; span {
</p>
<p>
  		margin-left: 0;
</p>
<p>
  		border-top-left-radius: 4px;
</p>
<p>
  		border-bottom-left-radius: 4px;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li:last-child &gt; a,
</p>
<p>
  	.pagination &gt; li:last-child &gt; span {
</p>
<p>
  		border-top-right-radius: 4px;
</p>
<p>
  		border-bottom-right-radius: 4px;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li &gt; a:hover,
</p>
<p>
  	.pagination &gt; li &gt; span:hover,
</p>
<p>
  	.pagination &gt; li &gt; a:focus,
</p>
<p>
  	.pagination &gt; li &gt; span:focus {
</p>
<p>
  		color: #2a6496;
</p>
<p>
  		background-color: #eee;
</p>
<p>
  		border-color: #ddd;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; .active &gt; a,
</p>
<p>
  	.pagination &gt; .active &gt; span,
</p>
<p>
  	.pagination &gt; .active &gt; a:hover,
</p>
<p>
  	.pagination &gt; .active &gt; span:hover,
</p>
<p>
  	.pagination &gt; .active &gt; a:focus,
</p>
<p>
  	.pagination &gt; .active &gt; span:focus {
</p>
<p>
  		z-index: 2;
</p>
<p>
  		color: #fff;
</p>
<p>
  		cursor: default;
</p>
<p>
  		background-color: #428bca;
</p>
<p>
  		border-color: #428bca;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; .disabled &gt; span,
</p>
<p>
  	.pagination &gt; .disabled &gt; span:hover,
</p>
<p>
  	.pagination &gt; .disabled &gt; span:focus,
</p>
<p>
  	.pagination &gt; .disabled &gt; a,
</p>
<p>
  	.pagination &gt; .disabled &gt; a:hover,
</p>
<p>
  	.pagination &gt; .disabled &gt; a:focus {
</p>
<p>
  		color: #777;
</p>
<p>
  		cursor: not-allowed;
</p>
<p>
  		background-color: #fff;
</p>
<p>
  		border-color: #ddd;
</p>
<p>
  	}
</p>
<p>
  	.clear{
</p>
<p>
  		clear: both;
</p>
<p>
  	}
</p>
<p>
  &lt;/style&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;角色管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 角色管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray&#8221;&gt; &lt;span class=&#8221;l&#8221;&gt; &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除&lt;/a&gt; &lt;a class=&#8221;btn btn-primary radius&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_add(&#8216;添加角色&#8217;,&#8217;admin-role-add.html&#8217;,&#8217;800&#8242;)&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加角色&lt;/a&gt; &lt;/span&gt; &lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-hover table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			&lt;tr&gt;
</p>
<p>
  				&lt;th scope=&#8221;col&#8221; colspan=&#8221;6&#8243;&gt;角色管理&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;&#8221;&gt;&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;40&#8243;&gt;ID&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;200&#8243;&gt;角色名&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;70&#8243;&gt;操作&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			@foreach ($roles as $role)
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;{{ $role-&gt;id }}&#8221; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $role-&gt;id }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $role-&gt;role_name }}&lt;/td&gt;
</p>
<p>
  				&lt;td class=&#8221;f-14&#8243;&gt;
</p>
<p>
  					&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_edit(&#8216;角色编辑&#8217;,&#8217;admin-role-add.html&#8217;,&#8217;1&#8242;)&#8221; style=&#8221;text-decoration:none&#8221;&gt;
</p>
<p>
  						&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;
</p>
<p>
  					&lt;/a&gt;
</p>
<p>
  					&lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;
</p>
<p>
  						&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;
</p>
<p>
  					&lt;/a&gt;
</p>
<p>
  					&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;
</p>
<p>
  						分配权限
</p>
<p>
  					&lt;/a&gt;
</p>
<p>
  				&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			@endforeach
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  	&lt;div id=&#8221;pull_right&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;pull-right&#8221;&gt;
</p>
<p>
  			{!! $roles-&gt;links() !!}
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  /*管理员-角色-添加*/
</p>
<p>
  function admin_role_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-角色-编辑*/
</p>
<p>
  function admin_role_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-角色-删除*/
</p>
<p>
  function admin_role_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;角色删除须谨慎，确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h2>2、权限分配数据处理【难点】</h2>
<h3>1）显示分配视图（模板文件：admin-role-add.html）</h3>
<ul>
<li>
    步骤1：打开角色列表，点击分配权限按钮弹框设置
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1149" height="188" src="/wp-content/uploads/2018/05/word-image-5457.png" class="wp-image-5999" srcset="/wp-content/uploads/2018/05/word-image-5457.png 1149w, /wp-content/uploads/2018/05/word-image-5457-300x49.png 300w, /wp-content/uploads/2018/05/word-image-5457-768x126.png 768w, /wp-content/uploads/2018/05/word-image-5457-1024x168.png 1024w" sizes="(max-width: 1149px) 100vw, 1149px" /></p>
<p>
  &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_assign(&#8216;分配权限&#8217;,'{{ url(&#8216;admin/role/assignAuth&#8217;) }}?role_id={{$role-&gt;id}}&#8217;,860,400)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;
</p>
<p>
  分配权限
</p>
<p>
  &lt;/a&gt;
</p>
<p><img loading="lazy" decoding="async" width="647" height="232" src="/wp-content/uploads/2018/05/word-image-5458.png" class="wp-image-6000" srcset="/wp-content/uploads/2018/05/word-image-5458.png 647w, /wp-content/uploads/2018/05/word-image-5458-300x108.png 300w" sizes="(max-width: 647px) 100vw, 647px" /></p>
<p>
  /*管理员-角色-权限分配*/
</p>
<p>
  function admin_role_assign(title,url,w,h){
</p>
<p>
      layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1144" height="160" src="/wp-content/uploads/2018/05/word-image-5459.png" class="wp-image-6001" srcset="/wp-content/uploads/2018/05/word-image-5459.png 1144w, /wp-content/uploads/2018/05/word-image-5459-300x42.png 300w, /wp-content/uploads/2018/05/word-image-5459-768x107.png 768w, /wp-content/uploads/2018/05/word-image-5459-1024x143.png 1024w" sizes="(max-width: 1144px) 100vw, 1144px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法，并调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="905" height="481" src="/wp-content/uploads/2018/05/word-image-5460.png" class="wp-image-6002" srcset="/wp-content/uploads/2018/05/word-image-5460.png 905w, /wp-content/uploads/2018/05/word-image-5460-300x159.png 300w, /wp-content/uploads/2018/05/word-image-5460-768x408.png 768w" sizes="(max-width: 905px) 100vw, 905px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Auth;
</p>
<p>
  use App\Http\Model\Role;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class RoleController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
          //1.通过内置分页功能获取数据，每页显示2条
</p>
<p>
          $roles = Role::paginate(2);
</p>
<p>
          //2.加载视图
</p>
<p>
          return view(&#8216;admin.role.index&#8217;, compact(&#8216;roles&#8217;));
</p>
<p>
      }
</p>
<p>
      //分配权限
</p>
<p>
      public function assignAuth(Request $request)
</p>
<p>
      {
</p>
<p>
          return view(&#8216;admin.role.assignAuth&#8217;);
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1147" height="612" src="/wp-content/uploads/2018/05/word-image-5461.png" class="wp-image-6003" srcset="/wp-content/uploads/2018/05/word-image-5461.png 1147w, /wp-content/uploads/2018/05/word-image-5461-300x160.png 300w, /wp-content/uploads/2018/05/word-image-5461-768x410.png 768w, /wp-content/uploads/2018/05/word-image-5461-1024x546.png 1024w" sizes="(max-width: 1147px) 100vw, 1147px" /></p>
<p>
  &lt;!&#8211;_meta 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;Bookmark&#8221; href=&#8221;/favicon.ico&#8221; &gt;
</p>
<p>
  &lt;link rel=&#8221;Shortcut Icon&#8221; href=&#8221;/favicon.ico&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;!&#8211;/meta 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;title&gt;新建网站角色 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form action=&#8221;&#8221; method=&#8221;post&#8221; class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-role-add&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  			&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;权限名称：&lt;/label&gt;
</p>
<p>
  			&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  				&lt;dl class=&#8221;permission-list&#8221;&gt;
</p>
<p>
  					&lt;dt&gt;
</p>
<p>
  						&lt;label&gt;
</p>
<p>
  							&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0&#8243; id=&#8221;user-Character-0&#8243;&gt;
</p>
<p>
  							资讯管理&lt;/label&gt;
</p>
<p>
  					&lt;/dt&gt;
</p>
<p>
  					&lt;dd&gt;
</p>
<p>
  						&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  							&lt;dt&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0&#8243; id=&#8221;user-Character-0-0&#8243;&gt;
</p>
<p>
  									栏目管理&lt;/label&gt;
</p>
<p>
  							&lt;/dt&gt;
</p>
<p>
  							&lt;dd&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-0&#8243;&gt;
</p>
<p>
  									添加&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-1&#8243;&gt;
</p>
<p>
  									修改&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-2&#8243;&gt;
</p>
<p>
  									删除&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-3&#8243;&gt;
</p>
<p>
  									查看&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-4&#8243;&gt;
</p>
<p>
  									审核&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;c-orange&#8221;&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-5&#8243;&gt; 只能操作自己发布的&lt;/label&gt;
</p>
<p>
  							&lt;/dd&gt;
</p>
<p>
  						&lt;/dl&gt;
</p>
<p>
  						&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  							&lt;dt&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1&#8243; id=&#8221;user-Character-0-1&#8243;&gt;
</p>
<p>
  									文章管理&lt;/label&gt;
</p>
<p>
  							&lt;/dt&gt;
</p>
<p>
  							&lt;dd&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-0&#8243;&gt;
</p>
<p>
  									添加&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-1&#8243;&gt;
</p>
<p>
  									修改&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-2&#8243;&gt;
</p>
<p>
  									删除&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-3&#8243;&gt;
</p>
<p>
  									查看&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-4&#8243;&gt;
</p>
<p>
  									审核&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;c-orange&#8221;&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-2-0&#8243; id=&#8221;user-Character-0-2-5&#8243;&gt; 只能操作自己发布的&lt;/label&gt;
</p>
<p>
  							&lt;/dd&gt;
</p>
<p>
  						&lt;/dl&gt;
</p>
<p>
  					&lt;/dd&gt;
</p>
<p>
  				&lt;/dl&gt;
</p>
<p>
  				&lt;dl class=&#8221;permission-list&#8221;&gt;
</p>
<p>
  					&lt;dt&gt;
</p>
<p>
  						&lt;label&gt;
</p>
<p>
  							&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0&#8243; id=&#8221;user-Character-1&#8243;&gt;
</p>
<p>
  							用户中心&lt;/label&gt;
</p>
<p>
  					&lt;/dt&gt;
</p>
<p>
  					&lt;dd&gt;
</p>
<p>
  						&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  							&lt;dt&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0&#8243; id=&#8221;user-Character-1-0&#8243;&gt;
</p>
<p>
  									用户管理&lt;/label&gt;
</p>
<p>
  							&lt;/dt&gt;
</p>
<p>
  							&lt;dd&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-0&#8243;&gt;
</p>
<p>
  									添加&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-1&#8243;&gt;
</p>
<p>
  									修改&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-2&#8243;&gt;
</p>
<p>
  									删除&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-3&#8243;&gt;
</p>
<p>
  									查看&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-4&#8243;&gt;
</p>
<p>
  									审核&lt;/label&gt;
</p>
<p>
  							&lt;/dd&gt;
</p>
<p>
  						&lt;/dl&gt;
</p>
<p>
  					&lt;/dd&gt;
</p>
<p>
  				&lt;/dl&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  		&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  			&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  				&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success radius&#8221; id=&#8221;admin-role-save&#8221; name=&#8221;admin-role-save&#8221;&gt;&lt;i class=&#8221;icon-ok&#8221;&gt;&lt;/i&gt; 确定&lt;/button&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	$(&#8220;.permission-list dt input:checkbox&#8221;).click(function(){
</p>
<p>
  		$(this).closest(&#8220;dl&#8221;).find(&#8220;dd input:checkbox&#8221;).prop(&#8220;checked&#8221;,$(this).prop(&#8220;checked&#8221;));
</p>
<p>
  	});
</p>
<p>
  	$(&#8220;.permission-list2 dd input:checkbox&#8221;).click(function(){
</p>
<p>
  		var l =$(this).parent().parent().find(&#8220;input:checked&#8221;).length;
</p>
<p>
  		var l2=$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;.permission-list2 dd&#8221;).find(&#8220;input:checked&#8221;).length;
</p>
<p>
  		if($(this).prop(&#8220;checked&#8221;)){
</p>
<p>
  			$(this).closest(&#8220;dl&#8221;).find(&#8220;dt input:checkbox&#8221;).prop(&#8220;checked&#8221;,true);
</p>
<p>
  			$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;dt&#8221;).first().find(&#8220;input:checkbox&#8221;).prop(&#8220;checked&#8221;,true);
</p>
<p>
  		}
</p>
<p>
  		else{
</p>
<p>
  			if(l==0){
</p>
<p>
  				$(this).closest(&#8220;dl&#8221;).find(&#8220;dt input:checkbox&#8221;).prop(&#8220;checked&#8221;,false);
</p>
<p>
  			}
</p>
<p>
  			if(l2==0){
</p>
<p>
  				$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;dt&#8221;).first().find(&#8220;input:checkbox&#8221;).prop(&#8220;checked&#8221;,false);
</p>
<p>
  			}
</p>
<p>
  		}
</p>
<p>
  	});
</p>
</p>
<p>
  	$(&#8220;#form-admin-role-add&#8221;).validate({
</p>
<p>
  		rules:{
</p>
<p>
  			roleName:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  		},
</p>
<p>
  		onkeyup:false,
</p>
<p>
  		focusCleanup:true,
</p>
<p>
  		success:&#8221;valid&#8221;,
</p>
<p>
  		submitHandler:function(form){
</p>
<p>
  			$(form).ajaxSubmit();
</p>
<p>
  			var index = parent.layer.getFrameIndex(window.name);
</p>
<p>
  			parent.layer.close(index);
</p>
<p>
  		}
</p>
<p>
  	});
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h3>2）数据数据动态化（显示所有权限，和默认选中权限）</h3>
<ul>
<li>
    步骤1：查询所有顶级权限和子级权限
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="901" height="217" src="/wp-content/uploads/2018/05/word-image-5462.png" class="wp-image-6004" srcset="/wp-content/uploads/2018/05/word-image-5462.png 901w, /wp-content/uploads/2018/05/word-image-5462-300x72.png 300w, /wp-content/uploads/2018/05/word-image-5462-768x185.png 768w" sizes="(max-width: 901px) 100vw, 901px" /></p>
<p>
  //分配权限
</p>
<p>
  public function assignAuth(Request $request)
</p>
<p>
  {
</p>
<p>
      //【显示所有权限节点功能】
</p>
<p>
      //1.查询所有顶级权限
</p>
<p>
      $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
      //2.查询所有子级权限
</p>
<p>
      $sonAuths = Auth::where(&#8216;pid&#8217;, &#8216;&lt;&gt;&#8217;, 0)-&gt;get();
</p>
<p>
      //4.加载视图
</p>
<p>
      return view(&#8216;admin.role.assignAuth&#8217;, compact(&#8216;topAuths&#8217;, &#8216;sonAuths&#8217;));
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：视图循环显示所有权限（规则：先老子后儿子）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="893" height="584" src="/wp-content/uploads/2018/05/word-image-5463.png" class="wp-image-6005" srcset="/wp-content/uploads/2018/05/word-image-5463.png 893w, /wp-content/uploads/2018/05/word-image-5463-300x196.png 300w, /wp-content/uploads/2018/05/word-image-5463-768x502.png 768w" sizes="(max-width: 893px) 100vw, 893px" /></p>
<p>
  &lt;form action=&#8221;&#8221; method=&#8221;post&#8221; class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-role-add&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;权限名称：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			<strong>@foreach($topAuths as $topAuth)</strong>
</p>
<p><strong>			&lt;dl class=&#8221;permission-list&#8221;&gt;</strong>
</p>
<p><strong>				&lt;dd&gt;</strong>
</p>
<p><strong>					&lt;dl class=&#8221;cl permission-list2&#8243;&gt;</strong>
</p>
<p><strong>						&lt;dt&gt;</strong>
</p>
<p><strong>							&lt;label class=&#8221;&#8221;&gt;</strong>
</p>
<p><strong>								&lt;input </strong>
</p>
<p><strong>									type=&#8221;checkbox&#8221; </strong>
</p>
<p><strong>									value=&#8221;&#8221; </strong>
</p>
<p><strong>									name=&#8221;user-Character-1-0&#8243; </strong>
</p>
<p><strong>									id=&#8221;user-Character-1-0&#8243;</strong>
</p>
<p><strong>								&gt;</strong>
</p>
<p><strong>								{{ $topAuth-&gt;auth_name}}</strong>
</p>
<p><strong>							&lt;/label&gt;</strong>
</p>
<p><strong>						&lt;/dt&gt;</strong>
</p>
<p><strong>						&lt;dd&gt;</strong>
</p>
<p><strong>							@foreach($sonAuths as $sonAuth)</strong>
</p>
<p><strong>								&lt;!&#8211; 父元素的ID  == 子元素PID &#8211;&gt;</strong>
</p>
<p><strong>								@if ($topAuth-&gt;id == $sonAuth-&gt;pid) </strong>
</p>
<p><strong>								&lt;label class=&#8221;&#8221;&gt;</strong>
</p>
<p><strong>									&lt;input </strong>
</p>
<p><strong>										type=&#8221;checkbox&#8221; </strong>
</p>
<p><strong>										value=&#8221;&#8221; </strong>
</p>
<p><strong>										name=&#8221;user-Character-1-0-0&#8243; </strong>
</p>
<p><strong>										id=&#8221;user-Character-1-0-0&#8243;</strong>
</p>
<p><strong>									&gt;</strong>
</p>
<p><strong>									{{ $sonAuth-&gt;auth_name}}</strong>
</p>
<p><strong>								&lt;/label&gt;</strong>
</p>
<p><strong>								@endif</strong>
</p>
<p><strong>							@endforeach</strong>
</p>
<p><strong>						&lt;/dd&gt;</strong>
</p>
<p><strong>					&lt;/dl&gt;</strong>
</p>
<p><strong>				&lt;/dd&gt;</strong>
</p>
<p><strong>			&lt;/dl&gt;</strong>
</p>
<p><strong>			@endforeach</strong>
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  			&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success radius&#8221; id=&#8221;admin-role-save&#8221; name=&#8221;admin-role-save&#8221;&gt;&lt;i class=&#8221;icon-ok&#8221;&gt;&lt;/i&gt; 确定&lt;/button&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  &lt;/form&gt;
</p>
<ul>
<li>
    步骤3：根据角色ID获取所有权限，默认选中已有权限
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1165" height="323" src="/wp-content/uploads/2018/05/word-image-5464.png" class="wp-image-6006" srcset="/wp-content/uploads/2018/05/word-image-5464.png 1165w, /wp-content/uploads/2018/05/word-image-5464-300x83.png 300w, /wp-content/uploads/2018/05/word-image-5464-768x213.png 768w, /wp-content/uploads/2018/05/word-image-5464-1024x284.png 1024w" sizes="(max-width: 1165px) 100vw, 1165px" /></p>
<p>
  //分配权限
</p>
<p>
  public function assignAuth(Request $request)
</p>
<p>
  {
</p>
<p>
      //【显示所有权限节点功能】
</p>
<p>
      //1.查询所有顶级权限
</p>
<p>
      $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
      //2.查询所有子级权限
</p>
<p>
      $sonAuths = Auth::where(&#8216;pid&#8217;, &#8216;&lt;&gt;&#8217;, 0)-&gt;get();
</p>
<p>
      <strong>//【根据角色ID获取角色的所有权限】</strong>
</p>
<p><strong>    $role = Role::where(&#8216;id&#8217;, $request-&gt;input(&#8216;role_id&#8217;))-&gt;first();</strong>
</p>
<p><strong>    $authArr = !empty($role-&gt;auth_ids) ? explode(&#8216;,&#8217;, $role-&gt;auth_ids) : [];</strong>
</p>
<p>
      //4.加载视图
</p>
<p>
      return view(&#8216;admin.role.assignAuth&#8217;, compact(&#8216;topAuths&#8217;, &#8216;sonAuths&#8217;, <strong>&#8216;authArr&#8217;</strong>));
</p>
<p>
  }
</p>
<p><img loading="lazy" decoding="async" width="855" height="646" src="/wp-content/uploads/2018/05/word-image-5465.png" class="wp-image-6007" srcset="/wp-content/uploads/2018/05/word-image-5465.png 855w, /wp-content/uploads/2018/05/word-image-5465-300x227.png 300w, /wp-content/uploads/2018/05/word-image-5465-768x580.png 768w" sizes="(max-width: 855px) 100vw, 855px" /></p>
<p>
  @foreach($topAuths as $topAuth)
</p>
<p>
  &lt;dl class=&#8221;permission-list&#8221;&gt;
</p>
<p>
  	&lt;dd&gt;
</p>
<p>
  		&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  			&lt;dt&gt;
</p>
<p>
  				&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  					&lt;input
</p>
<p>
  						type=&#8221;checkbox&#8221;
</p>
<p>
  						value=&#8221;&#8221;
</p>
<p>
  						name=&#8221;user-Character-1-0&#8243;
</p>
<p>
  						id=&#8221;user-Character-1-0&#8243;
</p>
<p>
  						<strong>@if(in_array($topAuth-&gt;id, $authArr)) </strong>
</p>
<p><strong>							checked=checked</strong>
</p>
<p><strong>						@endif</strong>
</p>
<p>
  					&gt;
</p>
<p>
  					{{ $topAuth-&gt;auth_name}}
</p>
<p>
  				&lt;/label&gt;
</p>
<p>
  			&lt;/dt&gt;
</p>
<p>
  			&lt;dd&gt;
</p>
<p>
  				@foreach($sonAuths as $sonAuth)
</p>
<p>
  					&lt;!&#8211; 父元素的ID  == 子元素PID &#8211;&gt;
</p>
<p>
  					@if ($topAuth-&gt;id == $sonAuth-&gt;pid)
</p>
<p>
  					&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  						&lt;input
</p>
<p>
  							type=&#8221;checkbox&#8221;
</p>
<p>
  							value=&#8221;&#8221;
</p>
<p>
  							name=&#8221;user-Character-1-0-0&#8243;
</p>
<p>
  							id=&#8221;user-Character-1-0-0&#8243;
</p>
<p>
  							<strong>@if(in_array($sonAuth-&gt;id, $authArr)) </strong>
</p>
<p><strong>								checked=checked</strong>
</p>
<p><strong>							@endif</strong>
</p>
<p>
  						&gt;
</p>
<p>
  						{{ $sonAuth-&gt;auth_name}}
</p>
<p>
  					&lt;/label&gt;
</p>
<p>
  					@endif
</p>
<p>
  				@endforeach
</p>
<p>
  			&lt;/dd&gt;
</p>
<p>
  		&lt;/dl&gt;
</p>
<p>
  	&lt;/dd&gt;
</p>
<p>
  &lt;/dl&gt;
</p>
<p>
  @endforeach
</p>
<h3>3）保存更改角色权限</h3>
<ul>
<li>
    步骤1：更改表单
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="865" height="606" src="/wp-content/uploads/2018/05/word-image-5466.png" class="wp-image-6008" srcset="/wp-content/uploads/2018/05/word-image-5466.png 865w, /wp-content/uploads/2018/05/word-image-5466-300x210.png 300w, /wp-content/uploads/2018/05/word-image-5466-768x538.png 768w" sizes="(max-width: 865px) 100vw, 865px" /><br />
<img loading="lazy" decoding="async" width="964" height="502" src="/wp-content/uploads/2018/05/word-image-5467.png" class="wp-image-6009" srcset="/wp-content/uploads/2018/05/word-image-5467.png 964w, /wp-content/uploads/2018/05/word-image-5467-300x156.png 300w, /wp-content/uploads/2018/05/word-image-5467-768x400.png 768w" sizes="(max-width: 964px) 100vw, 964px" /></p>
<p>
  &lt;!&#8211;_meta 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;Bookmark&#8221; href=&#8221;/favicon.ico&#8221; &gt;
</p>
<p>
  &lt;link rel=&#8221;Shortcut Icon&#8221; href=&#8221;/favicon.ico&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;!&#8211;/meta 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;title&gt;新建网站角色 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form action=&#8221;&#8221; method=&#8221;post&#8221; class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-role-add&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  			&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;权限名称：&lt;/label&gt;
</p>
<p>
  			&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  				@foreach($topAuths as $topAuth)
</p>
<p>
  				&lt;dl class=&#8221;permission-list&#8221;&gt;
</p>
<p>
  					&lt;dd&gt;
</p>
<p>
  						&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  							&lt;dt&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input
</p>
<p>
  										type=&#8221;checkbox&#8221;
</p>
<p><strong>										value=&#8221;{{ $topAuth-&gt;id }}&#8221; </strong>
</p>
<p><strong>										name=&#8221;auth[]&#8221; </strong>
</p>
<p>
  										id=&#8221;user-Character-1-0&#8243;
</p>
<p>
  										@if(in_array($topAuth-&gt;id, $authArr))
</p>
<p>
  											checked=checked
</p>
<p>
  										@endif
</p>
<p>
  									&gt;
</p>
<p>
  									{{ $topAuth-&gt;auth_name}}
</p>
<p>
  								&lt;/label&gt;
</p>
<p>
  							&lt;/dt&gt;
</p>
<p>
  							&lt;dd&gt;
</p>
<p>
  								@foreach($sonAuths as $sonAuth)
</p>
<p>
  									&lt;!&#8211; 父元素的ID  == 子元素PID &#8211;&gt;
</p>
<p>
  									@if ($topAuth-&gt;id == $sonAuth-&gt;pid)
</p>
<p>
  									&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  										&lt;input
</p>
<p>
  											type=&#8221;checkbox&#8221;
</p>
<p><strong>											value=&#8221;{{ $sonAuth-&gt;id }}&#8221; </strong>
</p>
<p><strong>											name=&#8221;auth[]&#8221; </strong>
</p>
<p>
  											id=&#8221;user-Character-1-0-0&#8243;
</p>
<p>
  											@if(in_array($sonAuth-&gt;id, $authArr))
</p>
<p>
  												checked=checked
</p>
<p>
  											@endif
</p>
<p>
  										&gt;
</p>
<p>
  										{{ $sonAuth-&gt;auth_name}}
</p>
<p>
  									&lt;/label&gt;
</p>
<p>
  									@endif
</p>
<p>
  								@endforeach
</p>
<p>
  							&lt;/dd&gt;
</p>
<p>
  						&lt;/dl&gt;
</p>
<p>
  					&lt;/dd&gt;
</p>
<p>
  				&lt;/dl&gt;
</p>
<p>
  				@endforeach
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  		&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  			&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  				&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success radius&#8221; id=&#8221;admin-role-save&#8221; name=&#8221;admin-role-save&#8221;&gt;&lt;i class=&#8221;icon-ok&#8221;&gt;&lt;/i&gt; 确定&lt;/button&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	$(&#8220;.permission-list dt input:checkbox&#8221;).click(function(){
</p>
<p>
  		$(this).closest(&#8220;dl&#8221;).find(&#8220;dd input:checkbox&#8221;).prop(&#8220;checked&#8221;,$(this).prop(&#8220;checked&#8221;));
</p>
<p>
  	});
</p>
<p>
  	$(&#8220;.permission-list2 dd input:checkbox&#8221;).click(function(){
</p>
<p>
  		var l =$(this).parent().parent().find(&#8220;input:checked&#8221;).length;
</p>
<p>
  		var l2=$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;.permission-list2 dd&#8221;).find(&#8220;input:checked&#8221;).length;
</p>
<p>
  		if($(this).prop(&#8220;checked&#8221;)){
</p>
<p>
  			$(this).closest(&#8220;dl&#8221;).find(&#8220;dt input:checkbox&#8221;).prop(&#8220;checked&#8221;,true);
</p>
<p>
  			$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;dt&#8221;).first().find(&#8220;input:checkbox&#8221;).prop(&#8220;checked&#8221;,true);
</p>
<p>
  		}
</p>
<p>
  		else{
</p>
<p>
  			if(l==0){
</p>
<p>
  				$(this).closest(&#8220;dl&#8221;).find(&#8220;dt input:checkbox&#8221;).prop(&#8220;checked&#8221;,false);
</p>
<p>
  			}
</p>
<p>
  			if(l2==0){
</p>
<p>
  				$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;dt&#8221;).first().find(&#8220;input:checkbox&#8221;).prop(&#8220;checked&#8221;,false);
</p>
<p>
  			}
</p>
<p>
  		}
</p>
<p>
  	});
</p>
</p>
<p>
  	<strong>$(&#8220;#form-admin-role-add&#8221;).validate({</strong>
</p>
<p><strong>		rules:{</strong>
</p>
<p><strong>		},</strong>
</p>
<p><strong>		onkeyup:false,</strong>
</p>
<p><strong>		focusCleanup:true,</strong>
</p>
<p><strong>		success:&#8221;valid&#8221;,</strong>
</p>
<p><strong>		submitHandler:function(form){</strong>
</p>
<p><strong>			$(form).ajaxSubmit({</strong>
</p>
<p><strong>				type: &#8216;post&#8217;,</strong>
</p>
<p><strong>				url: window.location,</strong>
</p>
<p><strong>				success: function(data){</strong>
</p>
<p><strong>				    //在父元素提示</strong>
</p>
<p><strong>                    parent.layer.msg(&#8216;更新成功!&#8217;,{icon:1,time:1000});</strong>
</p>
<p><strong>					//成功则关闭窗口</strong>
</p>
<p><strong>                    var index = parent.layer.getFrameIndex(window.name);</strong>
</p>
<p><strong>                    parent.$(&#8216;.btn-refresh&#8217;).click();</strong>
</p>
<p><strong>                    parent.layer.close(index);</strong>
</p>
<p><strong>				},</strong>
</p>
<p><strong>                error: function(XmlHttpRequest, textStatus, errorThrown){</strong>
</p>
<p><strong>					layer.msg(&#8216;error!&#8217;,{icon:1,time:1000});</strong>
</p>
<p><strong>				}</strong>
</p>
<p><strong>			});</strong>
</p>
<p><strong>		}</strong>
</p>
<p><strong>	});</strong>
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<ul>
<li>
    步骤2：更改路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1217" height="267" src="/wp-content/uploads/2018/05/word-image-5468.png" class="wp-image-6010" srcset="/wp-content/uploads/2018/05/word-image-5468.png 1217w, /wp-content/uploads/2018/05/word-image-5468-300x66.png 300w, /wp-content/uploads/2018/05/word-image-5468-768x168.png 768w, /wp-content/uploads/2018/05/word-image-5468-1024x225.png 1024w" sizes="(max-width: 1217px) 100vw, 1217px" /></p>
<ul>
<li>
    步骤3：控制器方法接受处理数据
  </li>
</ul>
<p><strong>控制器</strong>
</p>
<p><img loading="lazy" decoding="async" width="1136" height="649" src="/wp-content/uploads/2018/05/word-image-5469.png" class="wp-image-6011" srcset="/wp-content/uploads/2018/05/word-image-5469.png 1136w, /wp-content/uploads/2018/05/word-image-5469-300x171.png 300w, /wp-content/uploads/2018/05/word-image-5469-768x439.png 768w, /wp-content/uploads/2018/05/word-image-5469-1024x585.png 1024w" sizes="(max-width: 1136px) 100vw, 1136px" /></p>
<p>
  //分配权限
</p>
<p>
  public function assignAuth(Request $request)
</p>
<p>
  {
</p>
<p>
      //1.判断HTTP请求类型
</p>
<p>
      if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
          //2.获取数据
</p>
<p>
          $postData = $request-&gt;only([&#8216;auth&#8217;]);
</p>
<p>
          //3.更新数据
</p>
<p>
          $rs = Role::updateAuth($request-&gt;input(&#8216;role_id&#8217;), $postData[&#8216;auth&#8217;]);
</p>
<p>
          //4.判断状态
</p>
<p>
          echo $rs ? 1 : 0;
</p>
<p>
      } else {
</p>
<p>
          //【显示所有权限节点功能】
</p>
<p>
          //1.查询所有顶级权限
</p>
<p>
          $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
          //2.查询所有子级权限
</p>
<p>
          $sonAuths = Auth::where(&#8216;pid&#8217;, &#8216;&lt;&gt;&#8217;, 0)-&gt;get();
</p>
<p>
          //【根据角色ID获取角色的所有权限】
</p>
<p>
          $role = Role::where(&#8216;id&#8217;, $request-&gt;input(&#8216;role_id&#8217;))-&gt;first();
</p>
<p>
          $authArr = !empty($role-&gt;auth_ids) ? explode(&#8216;,&#8217;, $role-&gt;auth_ids) : [];
</p>
<p>
          //4.加载视图
</p>
<p>
          return view(&#8216;admin.role.assignAuth&#8217;, compact(&#8216;topAuths&#8217;, &#8216;sonAuths&#8217;, &#8216;authArr&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<p><strong>模型</strong>
</p>
<p><img loading="lazy" decoding="async" width="1086" height="537" src="/wp-content/uploads/2018/05/word-image-5470.png" class="wp-image-6012" srcset="/wp-content/uploads/2018/05/word-image-5470.png 1086w, /wp-content/uploads/2018/05/word-image-5470-300x148.png 300w, /wp-content/uploads/2018/05/word-image-5470-768x380.png 768w, /wp-content/uploads/2018/05/word-image-5470-1024x506.png 1024w" sizes="(max-width: 1086px) 100vw, 1086px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Role extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;role&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;role_name&#8217;, &#8216;auth_ids&#8217;, &#8216;auth_ac&#8217;];
</p>
<p>
     <strong> /**</strong>
</p>
<p><strong>     * 更改角色权限</strong>
</p>
<p><strong>     * @param  int   $role_id  角色ID</strong>
</p>
<p><strong>     * @param  array $authArr  权限数组</strong>
</p>
<p><strong>     * @return bool</strong>
</p>
<p><strong>     */</strong>
</p>
<p><strong>    public static function updateAuth($role_id, $authArr)</strong>
</p>
<p><strong>    {</strong>
</p>
<p><strong>        //1.将选中的权限划分为字符串，逗号分隔</strong>
</p>
<p><strong>        $data[&#8216;auth_ids&#8217;] = implode(&#8216;,&#8217;, $authArr);</strong>
</p>
<p><strong>        //2.根据权限ID获取对应控制器方法</strong>
</p>
<p><strong>        $auths = Auth::select(&#8216;controller&#8217;, &#8216;action&#8217;)-&gt;whereIn(&#8216;id&#8217;, $authArr)-&gt;get();</strong>
</p>
<p><strong>        foreach ($auths as $auth) {</strong>
</p>
<p><strong>            $temp[] = $auth-&gt;controller .&#8217;@&#8217;.$auth-&gt;action;</strong>
</p>
<p><strong>        }</strong>
</p>
<p><strong>        //3.划分控制器和方法</strong>
</p>
<p><strong>        $data[&#8216;auth_ac&#8217;] = implode(&#8216;,&#8217;, $temp);</strong>
</p>
<p><strong>        //4.更新数据库</strong>
</p>
<p><strong>        return self::where(&#8216;id&#8217;, $role_id)-&gt;update($data);</strong>
</p>
<p><strong>    }</strong>
</p>
<p>
  }
</p>
<h1>管理员登录系统显示所属角色</h1>
<h2>︴效果（后台首页右上角）</h2>
<p><img loading="lazy" decoding="async" width="819" height="176" src="/wp-content/uploads/2018/05/word-image-5471.png" class="wp-image-6013" srcset="/wp-content/uploads/2018/05/word-image-5471.png 819w, /wp-content/uploads/2018/05/word-image-5471-300x64.png 300w, /wp-content/uploads/2018/05/word-image-5471-768x165.png 768w" sizes="(max-width: 819px) 100vw, 819px" /></p>
<h2>︴步骤</h2>
<ul>
<li>
    步骤1：admin模型关联角色表
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="941" height="497" src="/wp-content/uploads/2018/05/word-image-5472.png" class="wp-image-6014" srcset="/wp-content/uploads/2018/05/word-image-5472.png 941w, /wp-content/uploads/2018/05/word-image-5472-300x158.png 300w, /wp-content/uploads/2018/05/word-image-5472-768x406.png 768w" sizes="(max-width: 941px) 100vw, 941px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Auth\Authenticatable;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Admin extends Model implements \Illuminate\Contracts\Auth\Authenticatable
</p>
<p>
  {
</p>
<p>
      use Authenticatable;
</p>
<p>
      /**
</p>
<p>
       * 声明表名
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;admin&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 关联角色表（1:1）
</p>
<p>
       * @return \Illuminate\Database\Eloquent\Relations\HasOne
</p>
<p>
       */
</p>
<p>
      public function role()
</p>
<p>
      {
</p>
<p>
          return $this -&gt; hasOne(&#8216;App\Http\Model\Role&#8217;, &#8216;id&#8217;, &#8216;role_id&#8217;);
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：视图修改显示角色
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1205" height="267" src="/wp-content/uploads/2018/05/word-image-5473.png" class="wp-image-6015" srcset="/wp-content/uploads/2018/05/word-image-5473.png 1205w, /wp-content/uploads/2018/05/word-image-5473-300x66.png 300w, /wp-content/uploads/2018/05/word-image-5473-768x170.png 768w, /wp-content/uploads/2018/05/word-image-5473-1024x227.png 1024w" sizes="(max-width: 1205px) 100vw, 1205px" /></p>
<p>
  {{ Auth::guard(&#8216;admin&#8217;)-&gt;user()-&gt;role()-&gt;first()-&gt;role_name }}
</p>
<p>
  脚下留心：role()对应模型中的方法名
</p>
<h1><a id="post-5944-_Toc487817428"></a>使用中间件鉴权</h1>
<h2>︴效果</h2>
<p><img loading="lazy" decoding="async" width="881" height="229" src="/wp-content/uploads/2018/05/word-image-5474.png" class="wp-image-6016" srcset="/wp-content/uploads/2018/05/word-image-5474.png 881w, /wp-content/uploads/2018/05/word-image-5474-300x78.png 300w, /wp-content/uploads/2018/05/word-image-5474-768x200.png 768w" sizes="(max-width: 881px) 100vw, 881px" /></p>
<h2>1、说明</h2>
<p>
  在ThinkPHP中使用RBAC鉴权的时候会创建一个基础/中间控制器的控制器，然后在其中的构造/初始化方法中来进行权限判断。
</p>
<p>
  在laravel中可以通过中间件的方法来实现rbac鉴权，其原理和ThinkPHP中的原理是一样的，使用中间件可以省去更改控制器的继承关系。
</p>
<h2>2、使用</h2>
<ul>
<li>
    步骤1：创建中间件并书写代码
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1262" height="600" src="/wp-content/uploads/2018/05/word-image-5475.png" class="wp-image-6017" srcset="/wp-content/uploads/2018/05/word-image-5475.png 1262w, /wp-content/uploads/2018/05/word-image-5475-300x143.png 300w, /wp-content/uploads/2018/05/word-image-5475-768x365.png 768w, /wp-content/uploads/2018/05/word-image-5475-1024x487.png 1024w" sizes="(max-width: 1262px) 100vw, 1262px" /></p>
<p>
  public function handle($request, Closure $next)
</p>
<p>
  {
</p>
<p>
      //1.获取当前的路由（包含控制器和方法的地址）
</p>
<p>
      $route = strtolower(Route::currentRouteAction()); //&#8221;App\Http\Controllers\Admin\IndexController@index&#8221;
</p>
<p>
      //2.获取当前角色权限
</p>
<p>
      $ac = Auth::guard(&#8216;admin&#8217;)-&gt;user()-&gt;role()-&gt;first()-&gt;auth_ac;
</p>
<p>
      //3.组装权限：默认全部用户都有后台首页路由的权限
</p>
<p>
      $ac = strtolower($ac . &#8216;,IndexController@index,IndexController@welcome&#8217;);
</p>
<p>
      //4.比较范围是否存在包含关系,可以使用strpos进行比较，也可以转化成数组进行in_array
</p>
<p>
      $array = explode(&#8216;\\&#8217;,$route);
</p>
<p>
      //dd(prev($array));
</p>
<p>
      if(strpos($ac,end($array)) === false){    //end是将数组的指针移向最后一个元素并且返回其值
</p>
<p>
          //echo &#8216;您没有访问权限&#8217;;die;
</p>
<p>
          return redirect(&#8216;admin/login&#8217;)-&gt;withErrors([&#8216;errors&#8217; =&gt; &#8216;您没有访问权限&#8217;]);
</p>
<p>
      }
</p>
<p>
      return $next($request);
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：激活中间件
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1035" height="402" src="/wp-content/uploads/2018/05/word-image-5476.png" class="wp-image-6018" srcset="/wp-content/uploads/2018/05/word-image-5476.png 1035w, /wp-content/uploads/2018/05/word-image-5476-300x117.png 300w, /wp-content/uploads/2018/05/word-image-5476-768x298.png 768w, /wp-content/uploads/2018/05/word-image-5476-1024x398.png 1024w" sizes="(max-width: 1035px) 100vw, 1035px" /></p>
<ul>
<li>
    步骤3：使用
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1217" height="606" src="/wp-content/uploads/2018/05/word-image-5477.png" class="wp-image-6019" srcset="/wp-content/uploads/2018/05/word-image-5477.png 1217w, /wp-content/uploads/2018/05/word-image-5477-300x149.png 300w, /wp-content/uploads/2018/05/word-image-5477-768x382.png 768w, /wp-content/uploads/2018/05/word-image-5477-1024x510.png 1024w" sizes="(max-width: 1217px) 100vw, 1217px" /></p>
<h1><a id="post-5944-_Toc487817429"></a>︴作业</h1>
<p>
  1）实现今天的代码；
</p>
<p>
  2）完善RBAC三部分管理模块的后续CURD操作；</p>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5944.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>TP3.2商城 （四）RBAC、角色、用户、权限</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/4470.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/4470.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 19 May 2018 12:48:53 +0000</pubDate>
				<category><![CDATA[TP3.2]]></category>
		<category><![CDATA[TP3.2商城]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[RBAC]]></category>
		<category><![CDATA[权限]]></category>
		<category><![CDATA[用户]]></category>
		<category><![CDATA[角色]]></category>
		<guid isPermaLink="false">/?p=4470</guid>

					<description><![CDATA[RBAC权限认证概述 权限概述 权限也就是用户是否能够访问后台某个页面。权限即控制器中的某一个方法。对于是否有 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1>RBAC权限认证概述</h1>
<h2>权限概述</h2>
<p>
  权限也就是用户是否能够访问后台某个页面。权限即控制器中的某一个方法。对于是否有权访问访问某个方法的操作经常使用的就是RBAC方式实现
</p>
<h2>RBAC方式控制权限</h2>
<p>
  RBAC基于角色的权限控制系统。一个用户属于某一种角色。而角色对应拥有哪些权限信息。因此用户就拥有了角色所对应的权限信息
</p>
<p>
  <br />
  关于权限说明：权限信息即后台中所对应的控制器及方法。此信息需要保存到数据表中。当检查用户是否具备权限时，通过使用当前用户访问的控制器跟方法名称与已经拥有的权限进行对比即可。在赋予权限过程中。如果直接给用户赋予权限操作麻烦。可以使用角色赋予权限。用户归属角色。用户自动的就拥有了权限
</p>
<p><img loading="lazy" decoding="async" width="1095" height="447" src="/wp-content/uploads/2018/05/word-image-4001.png" class="wp-image-4471" srcset="/wp-content/uploads/2018/05/word-image-4001.png 1095w, /wp-content/uploads/2018/05/word-image-4001-300x122.png 300w, /wp-content/uploads/2018/05/word-image-4001-768x314.png 768w, /wp-content/uploads/2018/05/word-image-4001-1024x418.png 1024w" sizes="(max-width: 1095px) 100vw, 1095px" /></p>
<h2>1.3、RBAC具体要实现的功能</h2>
<p>
  1、用户的管理功能(后台用户的增删改查)
</p>
<p>
  2、角色的管理功能(增删改查)
</p>
<p>
  3、权限信息的增删改查操作
</p>
<p>
  4、给用户分配角色
</p>
<p>
  5、给角色分配权限信息
</p>
<p>
  6、针对后台中每一个方法进行判断是否拥有权限(根据当前用户访问的控制器方法跟当前用户归属的角色对应的权限信息进行比较)
</p>
<p>
  7、根据权限信息生成后台首页的导航菜单
</p>
<p>
  8、预留一个超级管理员用户
</p>
<p>
  9、预留一个超级管理员角色
</p>
<h1>2、创建数据表</h1>
<h2>2.1、创建角色表</h2>
<p>
  CREATE TABLE `shop_role` (
</p>
<p>
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
</p>
<p>
    `role_name` varchar(255) NOT NULL DEFAULT &#8221; COMMENT &#8216;角色名称&#8217;,
</p>
<p>
    PRIMARY KEY (`id`)
</p>
<p>
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
</p>
<h2>2.2、创建用户角色中间表</h2>
<p>
  CREATE TABLE `shop_admin_role` (
</p>
<p>
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
</p>
<p>
    `admin_id` int(11) NOT NULL DEFAULT &#8216;0&#8217; COMMENT &#8216;后台用户id 关联admin表中的id字段&#8217;,
</p>
<p>
    `role_id` int(11) NOT NULL DEFAULT &#8216;0&#8217; COMMENT &#8216;角色ID 关联角色表中的ID字段&#8217;,
</p>
<p>
    PRIMARY KEY (`id`)
</p>
<p>
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=&#8217;用户角色中间表&#8217;;
</p>
<h2>2.3、创建权限表</h2>
<p>
  CREATE TABLE `shop_rule` (
</p>
<p>
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
</p>
<p>
    `rule_name` varchar(255) NOT NULL DEFAULT &#8221; COMMENT &#8216;权限名称&#8217;,
</p>
<p>
    `module_name` varchar(255) NOT NULL DEFAULT &#8216;admin&#8217; COMMENT &#8216;模块名称&#8217;,
</p>
<p>
    `controller_name` varchar(255) NOT NULL DEFAULT &#8221; COMMENT &#8216;控制器名称&#8217;,
</p>
<p>
    `action_name` varchar(255) NOT NULL DEFAULT &#8221; COMMENT &#8216;操作名称&#8217;,
</p>
<p>
    `parent_id` int(11) NOT NULL DEFAULT &#8216;0&#8217; COMMENT &#8216;上级权限id&#8217;,
</p>
<p>
    `is_show` tinyint(4) NOT NULL DEFAULT &#8216;1&#8217; COMMENT &#8216;是否导航菜单显示 1显示 0不显示&#8217;,
</p>
<p>
    PRIMARY KEY (`id`)
</p>
<p>
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=&#8217;权限表&#8217;;
</p>
<h2>2.4、创建角色权限中间表</h2>
<p>
  CREATE TABLE `shop_role_rule` (
</p>
<p>
    `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
</p>
<p>
    `role_id` int(11) NOT NULL DEFAULT &#8216;0&#8217; COMMENT &#8216;角色ID&#8217;,
</p>
<p>
    `rule_id` int(11) NOT NULL DEFAULT &#8216;0&#8217; COMMENT &#8216;权限ID&#8217;,
</p>
<p>
    PRIMARY KEY (`id`)
</p>
<p>
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=&#8217;角色权限中间表&#8217;;
</p>
<p><img loading="lazy" decoding="async" width="1052" height="516" src="/wp-content/uploads/2018/05/word-image-4002.png" class="wp-image-4472" srcset="/wp-content/uploads/2018/05/word-image-4002.png 1052w, /wp-content/uploads/2018/05/word-image-4002-300x147.png 300w, /wp-content/uploads/2018/05/word-image-4002-768x377.png 768w, /wp-content/uploads/2018/05/word-image-4002-1024x502.png 1024w" sizes="(max-width: 1052px) 100vw, 1052px" /></p>
<h1>3、角色管理功能</h1>
<h2>3.1、实现角色的添加</h2>
<p>
  ①创建控制器增加生成模型的方法
</p>
<p><img loading="lazy" decoding="async" width="862" height="532" src="/wp-content/uploads/2018/05/word-image-4003.png" class="wp-image-4473" srcset="/wp-content/uploads/2018/05/word-image-4003.png 862w, /wp-content/uploads/2018/05/word-image-4003-300x185.png 300w, /wp-content/uploads/2018/05/word-image-4003-768x474.png 768w" sizes="(max-width: 862px) 100vw, 862px" /></p>
<p>
  ②创建方法处理角色添加
</p>
<p><img loading="lazy" decoding="async" width="1024" height="599" src="/wp-content/uploads/2018/05/word-image-4004.png" class="wp-image-4474" srcset="/wp-content/uploads/2018/05/word-image-4004.png 1024w, /wp-content/uploads/2018/05/word-image-4004-300x175.png 300w, /wp-content/uploads/2018/05/word-image-4004-768x449.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>
  ③创建自定义模型
</p>
<p><img loading="lazy" decoding="async" width="1078" height="635" src="/wp-content/uploads/2018/05/word-image-4005.png" class="wp-image-4475" srcset="/wp-content/uploads/2018/05/word-image-4005.png 1078w, /wp-content/uploads/2018/05/word-image-4005-300x177.png 300w, /wp-content/uploads/2018/05/word-image-4005-768x452.png 768w, /wp-content/uploads/2018/05/word-image-4005-1024x603.png 1024w" sizes="(max-width: 1078px) 100vw, 1078px" /></p>
<p>
  ④处理模板
</p>
<p><img loading="lazy" decoding="async" width="1081" height="697" src="/wp-content/uploads/2018/05/word-image-4006.png" class="wp-image-4476" srcset="/wp-content/uploads/2018/05/word-image-4006.png 1081w, /wp-content/uploads/2018/05/word-image-4006-300x193.png 300w, /wp-content/uploads/2018/05/word-image-4006-768x495.png 768w, /wp-content/uploads/2018/05/word-image-4006-1024x660.png 1024w" sizes="(max-width: 1081px) 100vw, 1081px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="934" height="248" src="/wp-content/uploads/2018/05/word-image-4007.png" class="wp-image-4477" srcset="/wp-content/uploads/2018/05/word-image-4007.png 934w, /wp-content/uploads/2018/05/word-image-4007-300x80.png 300w, /wp-content/uploads/2018/05/word-image-4007-768x204.png 768w" sizes="(max-width: 934px) 100vw, 934px" /><br />
<img loading="lazy" decoding="async" width="472" height="199" src="/wp-content/uploads/2018/05/word-image-4008.png" class="wp-image-4478" srcset="/wp-content/uploads/2018/05/word-image-4008.png 472w, /wp-content/uploads/2018/05/word-image-4008-300x126.png 300w" sizes="(max-width: 472px) 100vw, 472px" /></p>
<h2>3.2、列表显示</h2>
<p>
  ①创建方法
</p>
<p><img loading="lazy" decoding="async" width="883" height="396" src="/wp-content/uploads/2018/05/word-image-4009.png" class="wp-image-4479" srcset="/wp-content/uploads/2018/05/word-image-4009.png 883w, /wp-content/uploads/2018/05/word-image-4009-300x135.png 300w, /wp-content/uploads/2018/05/word-image-4009-768x344.png 768w" sizes="(max-width: 883px) 100vw, 883px" /></p>
<p>
  ②实现listData方法
</p>
<p><img loading="lazy" decoding="async" width="956" height="668" src="/wp-content/uploads/2018/05/word-image-4010.png" class="wp-image-4480" srcset="/wp-content/uploads/2018/05/word-image-4010.png 956w, /wp-content/uploads/2018/05/word-image-4010-300x210.png 300w, /wp-content/uploads/2018/05/word-image-4010-768x537.png 768w" sizes="(max-width: 956px) 100vw, 956px" /></p>
<p>
  ③处理模板
</p>
<p><img loading="lazy" decoding="async" width="1067" height="695" src="/wp-content/uploads/2018/05/word-image-4011.png" class="wp-image-4481" srcset="/wp-content/uploads/2018/05/word-image-4011.png 1067w, /wp-content/uploads/2018/05/word-image-4011-300x195.png 300w, /wp-content/uploads/2018/05/word-image-4011-768x500.png 768w, /wp-content/uploads/2018/05/word-image-4011-1024x667.png 1024w" sizes="(max-width: 1067px) 100vw, 1067px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="1247" height="327" src="/wp-content/uploads/2018/05/word-image-4012.png" class="wp-image-4482" srcset="/wp-content/uploads/2018/05/word-image-4012.png 1247w, /wp-content/uploads/2018/05/word-image-4012-300x79.png 300w, /wp-content/uploads/2018/05/word-image-4012-768x201.png 768w, /wp-content/uploads/2018/05/word-image-4012-1024x269.png 1024w" sizes="(max-width: 1247px) 100vw, 1247px" /></p>
<h2>3.3、角色删除</h2>
<p>
  ①修改角色列表中参数名称
</p>
<p><img loading="lazy" decoding="async" width="1058" height="446" src="/wp-content/uploads/2018/05/word-image-4013.png" class="wp-image-4483" srcset="/wp-content/uploads/2018/05/word-image-4013.png 1058w, /wp-content/uploads/2018/05/word-image-4013-300x126.png 300w, /wp-content/uploads/2018/05/word-image-4013-768x324.png 768w, /wp-content/uploads/2018/05/word-image-4013-1024x432.png 1024w" sizes="(max-width: 1058px) 100vw, 1058px" /></p>
<p>
  ②创建方法实现删除
</p>
<p><img loading="lazy" decoding="async" width="924" height="519" src="/wp-content/uploads/2018/05/word-image-4014.png" class="wp-image-4484" srcset="/wp-content/uploads/2018/05/word-image-4014.png 924w, /wp-content/uploads/2018/05/word-image-4014-300x169.png 300w, /wp-content/uploads/2018/05/word-image-4014-768x431.png 768w" sizes="(max-width: 924px) 100vw, 924px" /></p>
<p>
  ③修改模型增加dels方法
</p>
<p><img loading="lazy" decoding="async" width="939" height="389" src="/wp-content/uploads/2018/05/word-image-4015.png" class="wp-image-4485" srcset="/wp-content/uploads/2018/05/word-image-4015.png 939w, /wp-content/uploads/2018/05/word-image-4015-300x124.png 300w, /wp-content/uploads/2018/05/word-image-4015-768x318.png 768w" sizes="(max-width: 939px) 100vw, 939px" /></p>
<p>
  ④再次修改控制器方法对超级管理进行过滤
</p>
<p><img loading="lazy" decoding="async" width="885" height="582" src="/wp-content/uploads/2018/05/word-image-4016.png" class="wp-image-4486" srcset="/wp-content/uploads/2018/05/word-image-4016.png 885w, /wp-content/uploads/2018/05/word-image-4016-300x197.png 300w, /wp-content/uploads/2018/05/word-image-4016-768x505.png 768w" sizes="(max-width: 885px) 100vw, 885px" /></p>
<h2>3.4、编辑功能</h2>
<p>
  ①创建方法实现显示模板及数据提交
</p>
<p><img loading="lazy" decoding="async" width="1047" height="692" src="/wp-content/uploads/2018/05/word-image-4017.png" class="wp-image-4487" srcset="/wp-content/uploads/2018/05/word-image-4017.png 1047w, /wp-content/uploads/2018/05/word-image-4017-300x198.png 300w, /wp-content/uploads/2018/05/word-image-4017-768x508.png 768w, /wp-content/uploads/2018/05/word-image-4017-1024x677.png 1024w" sizes="(max-width: 1047px) 100vw, 1047px" /></p>
<p>
  ②创建模板
</p>
<p><img loading="lazy" decoding="async" width="1079" height="706" src="/wp-content/uploads/2018/05/word-image-4018.png" class="wp-image-4488" srcset="/wp-content/uploads/2018/05/word-image-4018.png 1079w, /wp-content/uploads/2018/05/word-image-4018-300x196.png 300w, /wp-content/uploads/2018/05/word-image-4018-768x503.png 768w, /wp-content/uploads/2018/05/word-image-4018-1024x670.png 1024w" sizes="(max-width: 1079px) 100vw, 1079px" /></p>
<p>
  效果
</p>
<p><img loading="lazy" decoding="async" width="938" height="243" src="/wp-content/uploads/2018/05/word-image-4019.png" class="wp-image-4489" srcset="/wp-content/uploads/2018/05/word-image-4019.png 938w, /wp-content/uploads/2018/05/word-image-4019-300x78.png 300w, /wp-content/uploads/2018/05/word-image-4019-768x199.png 768w" sizes="(max-width: 938px) 100vw, 938px" /></p>
<h1>用户管理功能</h1>
<h2>4.1、用户添加</h2>
<h3>4.1.1、实现添加的表单</h3>
<p>
  ①创建控制器方法显示模板
</p>
<p><img loading="lazy" decoding="async" width="879" height="584" src="/wp-content/uploads/2018/05/word-image-4020.png" class="wp-image-4490" srcset="/wp-content/uploads/2018/05/word-image-4020.png 879w, /wp-content/uploads/2018/05/word-image-4020-300x199.png 300w, /wp-content/uploads/2018/05/word-image-4020-768x510.png 768w" sizes="(max-width: 879px) 100vw, 879px" /></p>
<p>
  ②创建模板
</p>
<p><img loading="lazy" decoding="async" width="1054" height="687" src="/wp-content/uploads/2018/05/word-image-4021.png" class="wp-image-4491" srcset="/wp-content/uploads/2018/05/word-image-4021.png 1054w, /wp-content/uploads/2018/05/word-image-4021-300x196.png 300w, /wp-content/uploads/2018/05/word-image-4021-768x501.png 768w, /wp-content/uploads/2018/05/word-image-4021-1024x667.png 1024w" sizes="(max-width: 1054px) 100vw, 1054px" /></p>
<p>
  效果
</p>
<p><img loading="lazy" decoding="async" width="967" height="277" src="/wp-content/uploads/2018/05/word-image-4022.png" class="wp-image-4492" srcset="/wp-content/uploads/2018/05/word-image-4022.png 967w, /wp-content/uploads/2018/05/word-image-4022-300x86.png 300w, /wp-content/uploads/2018/05/word-image-4022-768x220.png 768w" sizes="(max-width: 967px) 100vw, 967px" /></p>
<h3>4.1.2、实现数据的添加入库</h3>
<p>
  ①修改add方法处理表单提交
</p>
<p><img loading="lazy" decoding="async" width="1073" height="678" src="/wp-content/uploads/2018/05/word-image-4023.png" class="wp-image-4493" srcset="/wp-content/uploads/2018/05/word-image-4023.png 1073w, /wp-content/uploads/2018/05/word-image-4023-300x190.png 300w, /wp-content/uploads/2018/05/word-image-4023-768x485.png 768w, /wp-content/uploads/2018/05/word-image-4023-1024x647.png 1024w" sizes="(max-width: 1073px) 100vw, 1073px" /></p>
<p>
  ②创建模型下insert方法
</p>
<p><img loading="lazy" decoding="async" width="1064" height="699" src="/wp-content/uploads/2018/05/word-image-4024.png" class="wp-image-4494" srcset="/wp-content/uploads/2018/05/word-image-4024.png 1064w, /wp-content/uploads/2018/05/word-image-4024-300x197.png 300w, /wp-content/uploads/2018/05/word-image-4024-768x505.png 768w, /wp-content/uploads/2018/05/word-image-4024-1024x673.png 1024w" sizes="(max-width: 1064px) 100vw, 1064px" /><br />
<img loading="lazy" decoding="async" width="1058" height="536" src="/wp-content/uploads/2018/05/word-image-4025.png" class="wp-image-4495" srcset="/wp-content/uploads/2018/05/word-image-4025.png 1058w, /wp-content/uploads/2018/05/word-image-4025-300x152.png 300w, /wp-content/uploads/2018/05/word-image-4025-768x389.png 768w, /wp-content/uploads/2018/05/word-image-4025-1024x519.png 1024w" sizes="(max-width: 1058px) 100vw, 1058px" /></p>
<p>
  结果如下
</p>
<p><img loading="lazy" decoding="async" width="695" height="300" src="/wp-content/uploads/2018/05/word-image-4026.png" class="wp-image-4496" srcset="/wp-content/uploads/2018/05/word-image-4026.png 695w, /wp-content/uploads/2018/05/word-image-4026-300x129.png 300w" sizes="(max-width: 695px) 100vw, 695px" /><br />
<img loading="lazy" decoding="async" width="892" height="271" src="/wp-content/uploads/2018/05/word-image-4027.png" class="wp-image-4497" srcset="/wp-content/uploads/2018/05/word-image-4027.png 892w, /wp-content/uploads/2018/05/word-image-4027-300x91.png 300w, /wp-content/uploads/2018/05/word-image-4027-768x233.png 768w" sizes="(max-width: 892px) 100vw, 892px" /></p>
<h2>4.2、实现用户的列表显示</h2>
<p>
  ①创建方法获取数据
</p>
<p><img loading="lazy" decoding="async" width="812" height="426" src="/wp-content/uploads/2018/05/word-image-4028.png" class="wp-image-4498" srcset="/wp-content/uploads/2018/05/word-image-4028.png 812w, /wp-content/uploads/2018/05/word-image-4028-300x157.png 300w, /wp-content/uploads/2018/05/word-image-4028-768x403.png 768w" sizes="(max-width: 812px) 100vw, 812px" /></p>
<p>
  ②实现模型下的listData方法
</p>
<p><img loading="lazy" decoding="async" width="1059" height="703" src="/wp-content/uploads/2018/05/word-image-4029.png" class="wp-image-4499" srcset="/wp-content/uploads/2018/05/word-image-4029.png 1059w, /wp-content/uploads/2018/05/word-image-4029-300x199.png 300w, /wp-content/uploads/2018/05/word-image-4029-768x510.png 768w, /wp-content/uploads/2018/05/word-image-4029-1024x680.png 1024w" sizes="(max-width: 1059px) 100vw, 1059px" /></p>
<p>
  ③处理模板
</p>
<p><img loading="lazy" decoding="async" width="1088" height="636" src="/wp-content/uploads/2018/05/word-image-4030.png" class="wp-image-4500" srcset="/wp-content/uploads/2018/05/word-image-4030.png 1088w, /wp-content/uploads/2018/05/word-image-4030-300x175.png 300w, /wp-content/uploads/2018/05/word-image-4030-768x449.png 768w, /wp-content/uploads/2018/05/word-image-4030-1024x599.png 1024w" sizes="(max-width: 1088px) 100vw, 1088px" /></p>
<p>
  效果
</p>
<p><img loading="lazy" decoding="async" width="1360" height="260" src="/wp-content/uploads/2018/05/word-image-4031.png" class="wp-image-4501" srcset="/wp-content/uploads/2018/05/word-image-4031.png 1360w, /wp-content/uploads/2018/05/word-image-4031-300x57.png 300w, /wp-content/uploads/2018/05/word-image-4031-768x147.png 768w, /wp-content/uploads/2018/05/word-image-4031-1024x196.png 1024w" sizes="(max-width: 1360px) 100vw, 1360px" /></p>
<h2>4.3、实现用户的删除功能</h2>
<p>
  ①创建方法
</p>
<p><img loading="lazy" decoding="async" width="874" height="391" src="/wp-content/uploads/2018/05/word-image-4032.png" class="wp-image-4502" srcset="/wp-content/uploads/2018/05/word-image-4032.png 874w, /wp-content/uploads/2018/05/word-image-4032-300x134.png 300w, /wp-content/uploads/2018/05/word-image-4032-768x344.png 768w" sizes="(max-width: 874px) 100vw, 874px" /></p>
<p>
  ②实现dels方法
</p>
<p><img loading="lazy" decoding="async" width="1052" height="444" src="/wp-content/uploads/2018/05/word-image-4033.png" class="wp-image-4503" srcset="/wp-content/uploads/2018/05/word-image-4033.png 1052w, /wp-content/uploads/2018/05/word-image-4033-300x127.png 300w, /wp-content/uploads/2018/05/word-image-4033-768x324.png 768w, /wp-content/uploads/2018/05/word-image-4033-1024x432.png 1024w" sizes="(max-width: 1052px) 100vw, 1052px" /></p>
<p>
  ④限制预留的超级管理不能删除
</p>
<p><img loading="lazy" decoding="async" width="969" height="469" src="/wp-content/uploads/2018/05/word-image-4034.png" class="wp-image-4504" srcset="/wp-content/uploads/2018/05/word-image-4034.png 969w, /wp-content/uploads/2018/05/word-image-4034-300x145.png 300w, /wp-content/uploads/2018/05/word-image-4034-768x372.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></p>
<h2>4.4、用户编辑功能</h2>
<h3>4.4.1、显示原始信息</h3>
<p>
  ①创建方法获取用户的信息
</p>
<p><img loading="lazy" decoding="async" width="1114" height="670" src="/wp-content/uploads/2018/05/word-image-4035.png" class="wp-image-4505" srcset="/wp-content/uploads/2018/05/word-image-4035.png 1114w, /wp-content/uploads/2018/05/word-image-4035-300x180.png 300w, /wp-content/uploads/2018/05/word-image-4035-768x462.png 768w, /wp-content/uploads/2018/05/word-image-4035-1024x616.png 1024w" sizes="(max-width: 1114px) 100vw, 1114px" /></p>
<p>
  ②模型下实现方法
</p>
<p><img loading="lazy" decoding="async" width="1050" height="477" src="/wp-content/uploads/2018/05/word-image-4036.png" class="wp-image-4506" srcset="/wp-content/uploads/2018/05/word-image-4036.png 1050w, /wp-content/uploads/2018/05/word-image-4036-300x136.png 300w, /wp-content/uploads/2018/05/word-image-4036-768x349.png 768w, /wp-content/uploads/2018/05/word-image-4036-1024x465.png 1024w" sizes="(max-width: 1050px) 100vw, 1050px" /></p>
<p>
  调用此方法获取到的数据如下
</p>
<p><img loading="lazy" decoding="async" width="676" height="226" src="/wp-content/uploads/2018/05/word-image-4037.png" class="wp-image-4507" srcset="/wp-content/uploads/2018/05/word-image-4037.png 676w, /wp-content/uploads/2018/05/word-image-4037-300x100.png 300w" sizes="(max-width: 676px) 100vw, 676px" /></p>
<p>
  ③处理模板显示
</p>
<p><img loading="lazy" decoding="async" width="1070" height="706" src="/wp-content/uploads/2018/05/word-image-4038.png" class="wp-image-4508" srcset="/wp-content/uploads/2018/05/word-image-4038.png 1070w, /wp-content/uploads/2018/05/word-image-4038-300x198.png 300w, /wp-content/uploads/2018/05/word-image-4038-768x507.png 768w, /wp-content/uploads/2018/05/word-image-4038-1024x676.png 1024w" sizes="(max-width: 1070px) 100vw, 1070px" /></p>
<p>
  最终效果如下
</p>
<p><img loading="lazy" decoding="async" width="1049" height="412" src="/wp-content/uploads/2018/05/word-image-4039.png" class="wp-image-4509" srcset="/wp-content/uploads/2018/05/word-image-4039.png 1049w, /wp-content/uploads/2018/05/word-image-4039-300x118.png 300w, /wp-content/uploads/2018/05/word-image-4039-768x302.png 768w, /wp-content/uploads/2018/05/word-image-4039-1024x402.png 1024w" sizes="(max-width: 1049px) 100vw, 1049px" /></p>
<h3>4.4.2、实现用户信息修改入库</h3>
<p>
  ①修改方法代码
</p>
<p><img loading="lazy" decoding="async" width="1083" height="597" src="/wp-content/uploads/2018/05/word-image-4040.png" class="wp-image-4510" srcset="/wp-content/uploads/2018/05/word-image-4040.png 1083w, /wp-content/uploads/2018/05/word-image-4040-300x165.png 300w, /wp-content/uploads/2018/05/word-image-4040-768x423.png 768w, /wp-content/uploads/2018/05/word-image-4040-1024x564.png 1024w" sizes="(max-width: 1083px) 100vw, 1083px" /></p>
<p>
  ②实现update方法进修改
</p>
<p><img loading="lazy" decoding="async" width="1077" height="623" src="/wp-content/uploads/2018/05/word-image-4041.png" class="wp-image-4511" srcset="/wp-content/uploads/2018/05/word-image-4041.png 1077w, /wp-content/uploads/2018/05/word-image-4041-300x174.png 300w, /wp-content/uploads/2018/05/word-image-4041-768x444.png 768w, /wp-content/uploads/2018/05/word-image-4041-1024x592.png 1024w" sizes="(max-width: 1077px) 100vw, 1077px" /><br />
<img loading="lazy" decoding="async" width="1043" height="525" src="/wp-content/uploads/2018/05/word-image-4042.png" class="wp-image-4512" srcset="/wp-content/uploads/2018/05/word-image-4042.png 1043w, /wp-content/uploads/2018/05/word-image-4042-300x151.png 300w, /wp-content/uploads/2018/05/word-image-4042-768x387.png 768w, /wp-content/uploads/2018/05/word-image-4042-1024x515.png 1024w" sizes="(max-width: 1043px) 100vw, 1043px" /></p>
<p>
  具体效果数据变化即可
</p>
<p><img loading="lazy" decoding="async" width="631" height="140" src="/wp-content/uploads/2018/05/word-image-4043.png" class="wp-image-4513" srcset="/wp-content/uploads/2018/05/word-image-4043.png 631w, /wp-content/uploads/2018/05/word-image-4043-300x67.png 300w" sizes="(max-width: 631px) 100vw, 631px" /></p>
<h1>权限管理</h1>
<h2>5.1、权限添加</h2>
<h3>5.1.1、显示添加模板</h3>
<p>
  ①复制分类的控制器修改
</p>
<p><img loading="lazy" decoding="async" width="991" height="524" src="/wp-content/uploads/2018/05/word-image-4044.png" class="wp-image-4514" srcset="/wp-content/uploads/2018/05/word-image-4044.png 991w, /wp-content/uploads/2018/05/word-image-4044-300x159.png 300w, /wp-content/uploads/2018/05/word-image-4044-768x406.png 768w" sizes="(max-width: 991px) 100vw, 991px" /></p>
<p>
  ②复制分类的模型并且修改
</p>
<p><img loading="lazy" decoding="async" width="847" height="529" src="/wp-content/uploads/2018/05/word-image-4045.png" class="wp-image-4515" srcset="/wp-content/uploads/2018/05/word-image-4045.png 847w, /wp-content/uploads/2018/05/word-image-4045-300x187.png 300w, /wp-content/uploads/2018/05/word-image-4045-768x480.png 768w" sizes="(max-width: 847px) 100vw, 847px" /></p>
<p>
  ③复制视图
</p>
<p><img loading="lazy" decoding="async" width="1045" height="461" src="/wp-content/uploads/2018/05/word-image-4046.png" class="wp-image-4516" srcset="/wp-content/uploads/2018/05/word-image-4046.png 1045w, /wp-content/uploads/2018/05/word-image-4046-300x132.png 300w, /wp-content/uploads/2018/05/word-image-4046-768x339.png 768w, /wp-content/uploads/2018/05/word-image-4046-1024x452.png 1024w" sizes="(max-width: 1045px) 100vw, 1045px" /></p>
<p>
  ④修改添加控制器显示模板
</p>
<p><img loading="lazy" decoding="async" width="1072" height="486" src="/wp-content/uploads/2018/05/word-image-4047.png" class="wp-image-4517" srcset="/wp-content/uploads/2018/05/word-image-4047.png 1072w, /wp-content/uploads/2018/05/word-image-4047-300x136.png 300w, /wp-content/uploads/2018/05/word-image-4047-768x348.png 768w, /wp-content/uploads/2018/05/word-image-4047-1024x464.png 1024w" sizes="(max-width: 1072px) 100vw, 1072px" /></p>
<p>
  ⑤修改模型
</p>
<p><img loading="lazy" decoding="async" width="1035" height="669" src="/wp-content/uploads/2018/05/word-image-4048.png" class="wp-image-4518" srcset="/wp-content/uploads/2018/05/word-image-4048.png 1035w, /wp-content/uploads/2018/05/word-image-4048-300x194.png 300w, /wp-content/uploads/2018/05/word-image-4048-768x496.png 768w, /wp-content/uploads/2018/05/word-image-4048-1024x662.png 1024w" sizes="(max-width: 1035px) 100vw, 1035px" /></p>
<p>
  ⑥修改视图模板
</p>
<p><img loading="lazy" decoding="async" width="1040" height="675" src="/wp-content/uploads/2018/05/word-image-4049.png" class="wp-image-4519" srcset="/wp-content/uploads/2018/05/word-image-4049.png 1040w, /wp-content/uploads/2018/05/word-image-4049-300x195.png 300w, /wp-content/uploads/2018/05/word-image-4049-768x498.png 768w, /wp-content/uploads/2018/05/word-image-4049-1024x665.png 1024w" sizes="(max-width: 1040px) 100vw, 1040px" /></p>
<h3>5.1.2、实现添加数据提交</h3>
<p>
  ①修改添加处理表单提交
</p>
<p><img loading="lazy" decoding="async" width="897" height="659" src="/wp-content/uploads/2018/05/word-image-4050.png" class="wp-image-4520" srcset="/wp-content/uploads/2018/05/word-image-4050.png 897w, /wp-content/uploads/2018/05/word-image-4050-300x220.png 300w, /wp-content/uploads/2018/05/word-image-4050-768x564.png 768w" sizes="(max-width: 897px) 100vw, 897px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="824" height="347" src="/wp-content/uploads/2018/05/word-image-4051.png" class="wp-image-4521" srcset="/wp-content/uploads/2018/05/word-image-4051.png 824w, /wp-content/uploads/2018/05/word-image-4051-300x126.png 300w, /wp-content/uploads/2018/05/word-image-4051-768x323.png 768w" sizes="(max-width: 824px) 100vw, 824px" /><br />
<img loading="lazy" decoding="async" width="876" height="194" src="/wp-content/uploads/2018/05/word-image-4052.png" class="wp-image-4522" srcset="/wp-content/uploads/2018/05/word-image-4052.png 876w, /wp-content/uploads/2018/05/word-image-4052-300x66.png 300w, /wp-content/uploads/2018/05/word-image-4052-768x170.png 768w" sizes="(max-width: 876px) 100vw, 876px" /></p>
<h2>5.2、权限列表显示</h2>
<p>
  ①修改index方法
</p>
<p><img loading="lazy" decoding="async" width="851" height="417" src="/wp-content/uploads/2018/05/word-image-4053.png" class="wp-image-4523" srcset="/wp-content/uploads/2018/05/word-image-4053.png 851w, /wp-content/uploads/2018/05/word-image-4053-300x147.png 300w, /wp-content/uploads/2018/05/word-image-4053-768x376.png 768w" sizes="(max-width: 851px) 100vw, 851px" /></p>
<p>
  ②修改模板
</p>
<p><img loading="lazy" decoding="async" width="1056" height="648" src="/wp-content/uploads/2018/05/word-image-4054.png" class="wp-image-4524" srcset="/wp-content/uploads/2018/05/word-image-4054.png 1056w, /wp-content/uploads/2018/05/word-image-4054-300x184.png 300w, /wp-content/uploads/2018/05/word-image-4054-768x471.png 768w, /wp-content/uploads/2018/05/word-image-4054-1024x628.png 1024w" sizes="(max-width: 1056px) 100vw, 1056px" /></p>
<h2>5.3、权限删除功能</h2>
<p>
  ①修改dels方法
</p>
<p><img loading="lazy" decoding="async" width="946" height="590" src="/wp-content/uploads/2018/05/word-image-4055.png" class="wp-image-4525" srcset="/wp-content/uploads/2018/05/word-image-4055.png 946w, /wp-content/uploads/2018/05/word-image-4055-300x187.png 300w, /wp-content/uploads/2018/05/word-image-4055-768x479.png 768w" sizes="(max-width: 946px) 100vw, 946px" /></p>
<p>
  ②修改模型下的dels方法
</p>
<p><img loading="lazy" decoding="async" width="1046" height="525" src="/wp-content/uploads/2018/05/word-image-4056.png" class="wp-image-4526" srcset="/wp-content/uploads/2018/05/word-image-4056.png 1046w, /wp-content/uploads/2018/05/word-image-4056-300x151.png 300w, /wp-content/uploads/2018/05/word-image-4056-768x385.png 768w, /wp-content/uploads/2018/05/word-image-4056-1024x514.png 1024w" sizes="(max-width: 1046px) 100vw, 1046px" /></p>
<h2>5.4、权限的编辑</h2>
<p>
  ①修改edit方法显示原始信息
</p>
<p><img loading="lazy" decoding="async" width="1026" height="578" src="/wp-content/uploads/2018/05/word-image-4057.png" class="wp-image-4527" srcset="/wp-content/uploads/2018/05/word-image-4057.png 1026w, /wp-content/uploads/2018/05/word-image-4057-300x169.png 300w, /wp-content/uploads/2018/05/word-image-4057-768x433.png 768w, /wp-content/uploads/2018/05/word-image-4057-1024x577.png 1024w" sizes="(max-width: 1026px) 100vw, 1026px" /></p>
<p>
  ②修改模板
</p>
<p><img loading="lazy" decoding="async" width="1055" height="648" src="/wp-content/uploads/2018/05/word-image-4058.png" class="wp-image-4528" srcset="/wp-content/uploads/2018/05/word-image-4058.png 1055w, /wp-content/uploads/2018/05/word-image-4058-300x184.png 300w, /wp-content/uploads/2018/05/word-image-4058-768x472.png 768w, /wp-content/uploads/2018/05/word-image-4058-1024x629.png 1024w" sizes="(max-width: 1055px) 100vw, 1055px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="949" height="382" src="/wp-content/uploads/2018/05/word-image-4059.png" class="wp-image-4529" srcset="/wp-content/uploads/2018/05/word-image-4059.png 949w, /wp-content/uploads/2018/05/word-image-4059-300x121.png 300w, /wp-content/uploads/2018/05/word-image-4059-768x309.png 768w" sizes="(max-width: 949px) 100vw, 949px" /></p>
<p>
  ③修改edit方法处理表单提交
</p>
<p><img loading="lazy" decoding="async" width="999" height="660" src="/wp-content/uploads/2018/05/word-image-4060.png" class="wp-image-4530" srcset="/wp-content/uploads/2018/05/word-image-4060.png 999w, /wp-content/uploads/2018/05/word-image-4060-300x198.png 300w, /wp-content/uploads/2018/05/word-image-4060-768x507.png 768w" sizes="(max-width: 999px) 100vw, 999px" /></p>
<p>
  ④修改模型下的update方法
</p>
<p><img loading="lazy" decoding="async" width="1033" height="688" src="/wp-content/uploads/2018/05/word-image-4061.png" class="wp-image-4531" srcset="/wp-content/uploads/2018/05/word-image-4061.png 1033w, /wp-content/uploads/2018/05/word-image-4061-300x200.png 300w, /wp-content/uploads/2018/05/word-image-4061-768x512.png 768w, /wp-content/uploads/2018/05/word-image-4061-1024x682.png 1024w" sizes="(max-width: 1033px) 100vw, 1033px" /></p>
<p>
  ⑤修改getTree方法
</p>
<p><img loading="lazy" decoding="async" width="1060" height="713" src="/wp-content/uploads/2018/05/word-image-4062.png" class="wp-image-4532" srcset="/wp-content/uploads/2018/05/word-image-4062.png 1060w, /wp-content/uploads/2018/05/word-image-4062-300x202.png 300w, /wp-content/uploads/2018/05/word-image-4062-768x517.png 768w, /wp-content/uploads/2018/05/word-image-4062-1024x689.png 1024w" sizes="(max-width: 1060px) 100vw, 1060px" /></p>
<h1>为角色赋予权限</h1>
<h2>6.1、显示权限信息</h2>
<p>
  ①修改角色列表增加权限分配的入口
</p>
<p><img loading="lazy" decoding="async" width="1083" height="546" src="/wp-content/uploads/2018/05/word-image-4063.png" class="wp-image-4533" srcset="/wp-content/uploads/2018/05/word-image-4063.png 1083w, /wp-content/uploads/2018/05/word-image-4063-300x151.png 300w, /wp-content/uploads/2018/05/word-image-4063-768x387.png 768w, /wp-content/uploads/2018/05/word-image-4063-1024x516.png 1024w" sizes="(max-width: 1083px) 100vw, 1083px" /><br />
<img loading="lazy" decoding="async" width="1322" height="329" src="/wp-content/uploads/2018/05/word-image-4064.png" class="wp-image-4534" srcset="/wp-content/uploads/2018/05/word-image-4064.png 1322w, /wp-content/uploads/2018/05/word-image-4064-300x75.png 300w, /wp-content/uploads/2018/05/word-image-4064-768x191.png 768w, /wp-content/uploads/2018/05/word-image-4064-1024x255.png 1024w" sizes="(max-width: 1322px) 100vw, 1322px" /></p>
<p>
  ②创建方法获取所有的权限信息
</p>
<p><img loading="lazy" decoding="async" width="983" height="649" src="/wp-content/uploads/2018/05/word-image-4065.png" class="wp-image-4535" srcset="/wp-content/uploads/2018/05/word-image-4065.png 983w, /wp-content/uploads/2018/05/word-image-4065-300x198.png 300w, /wp-content/uploads/2018/05/word-image-4065-768x507.png 768w" sizes="(max-width: 983px) 100vw, 983px" /></p>
<p>
  ③拷贝模板
</p>
<p><img loading="lazy" decoding="async" width="1188" height="452" src="/wp-content/uploads/2018/05/word-image-4066.png" class="wp-image-4536" srcset="/wp-content/uploads/2018/05/word-image-4066.png 1188w, /wp-content/uploads/2018/05/word-image-4066-300x114.png 300w, /wp-content/uploads/2018/05/word-image-4066-768x292.png 768w, /wp-content/uploads/2018/05/word-image-4066-1024x390.png 1024w" sizes="(max-width: 1188px) 100vw, 1188px" /></p>
<p>
  ④修改模板显示数据
</p>
<p><img loading="lazy" decoding="async" width="1068" height="676" src="/wp-content/uploads/2018/05/word-image-4067.png" class="wp-image-4537" srcset="/wp-content/uploads/2018/05/word-image-4067.png 1068w, /wp-content/uploads/2018/05/word-image-4067-300x190.png 300w, /wp-content/uploads/2018/05/word-image-4067-768x486.png 768w, /wp-content/uploads/2018/05/word-image-4067-1024x648.png 1024w" sizes="(max-width: 1068px) 100vw, 1068px" /><br />
<img loading="lazy" decoding="async" width="1060" height="578" src="/wp-content/uploads/2018/05/word-image-4068.png" class="wp-image-4538" srcset="/wp-content/uploads/2018/05/word-image-4068.png 1060w, /wp-content/uploads/2018/05/word-image-4068-300x164.png 300w, /wp-content/uploads/2018/05/word-image-4068-768x419.png 768w, /wp-content/uploads/2018/05/word-image-4068-1024x558.png 1024w" sizes="(max-width: 1060px) 100vw, 1060px" /><br />
<img loading="lazy" decoding="async" width="1060" height="418" src="/wp-content/uploads/2018/05/word-image-4069.png" class="wp-image-4539" srcset="/wp-content/uploads/2018/05/word-image-4069.png 1060w, /wp-content/uploads/2018/05/word-image-4069-300x118.png 300w, /wp-content/uploads/2018/05/word-image-4069-768x303.png 768w, /wp-content/uploads/2018/05/word-image-4069-1024x404.png 1024w" sizes="(max-width: 1060px) 100vw, 1060px" /></p>
<p>
  效果如下
</p>
<p><img loading="lazy" decoding="async" width="1000" height="271" src="/wp-content/uploads/2018/05/word-image-4070.png" class="wp-image-4540" srcset="/wp-content/uploads/2018/05/word-image-4070.png 1000w, /wp-content/uploads/2018/05/word-image-4070-300x81.png 300w, /wp-content/uploads/2018/05/word-image-4070-768x208.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p>
<h2>6.2、实现权限信息的入库</h2>
<p>
  ①修改控制器方法处理表单提交
</p>
<p><img loading="lazy" decoding="async" width="985" height="657" src="/wp-content/uploads/2018/05/word-image-4071.png" class="wp-image-4541" srcset="/wp-content/uploads/2018/05/word-image-4071.png 985w, /wp-content/uploads/2018/05/word-image-4071-300x200.png 300w, /wp-content/uploads/2018/05/word-image-4071-768x512.png 768w" sizes="(max-width: 985px) 100vw, 985px" /></p>
<p>
  ②创建模型方法
</p>
<p><img loading="lazy" decoding="async" width="1034" height="684" src="/wp-content/uploads/2018/05/word-image-4072.png" class="wp-image-4542" srcset="/wp-content/uploads/2018/05/word-image-4072.png 1034w, /wp-content/uploads/2018/05/word-image-4072-300x198.png 300w, /wp-content/uploads/2018/05/word-image-4072-768x508.png 768w, /wp-content/uploads/2018/05/word-image-4072-1024x677.png 1024w" sizes="(max-width: 1034px) 100vw, 1034px" /></p>
<p>
  最终效果
</p>
<p><img loading="lazy" decoding="async" width="435" height="203" src="/wp-content/uploads/2018/05/word-image-4073.png" class="wp-image-4543" srcset="/wp-content/uploads/2018/05/word-image-4073.png 435w, /wp-content/uploads/2018/05/word-image-4073-300x140.png 300w" sizes="(max-width: 435px) 100vw, 435px" /></p>
<h2>6.3、实现显示权限时勾选状态</h2>
<p>
  当进行分配权限时，显示所有权限信息，如果当前角色已经拥有此权限应该处于勾选状态
</p>
<p>
  ①修改分配权限显示
</p>
<p><img loading="lazy" decoding="async" width="1069" height="535" src="/wp-content/uploads/2018/05/word-image-4074.png" class="wp-image-4544" srcset="/wp-content/uploads/2018/05/word-image-4074.png 1069w, /wp-content/uploads/2018/05/word-image-4074-300x150.png 300w, /wp-content/uploads/2018/05/word-image-4074-768x384.png 768w, /wp-content/uploads/2018/05/word-image-4074-1024x512.png 1024w" sizes="(max-width: 1069px) 100vw, 1069px" /></p>
<p>
  ②增加模型方法
</p>
<p><img loading="lazy" decoding="async" width="999" height="321" src="/wp-content/uploads/2018/05/word-image-4075.png" class="wp-image-4545" srcset="/wp-content/uploads/2018/05/word-image-4075.png 999w, /wp-content/uploads/2018/05/word-image-4075-300x96.png 300w, /wp-content/uploads/2018/05/word-image-4075-768x247.png 768w" sizes="(max-width: 999px) 100vw, 999px" /></p>
<p>
  得到的结果
</p>
<p><img loading="lazy" decoding="async" width="862" height="308" src="/wp-content/uploads/2018/05/word-image-4076.png" class="wp-image-4546" srcset="/wp-content/uploads/2018/05/word-image-4076.png 862w, /wp-content/uploads/2018/05/word-image-4076-300x107.png 300w, /wp-content/uploads/2018/05/word-image-4076-768x274.png 768w" sizes="(max-width: 862px) 100vw, 862px" /></p>
<p>
  ③再次修改模板对数据进行格式化
</p>
<p><img loading="lazy" decoding="async" width="1100" height="611" src="/wp-content/uploads/2018/05/word-image-4077.png" class="wp-image-4547" srcset="/wp-content/uploads/2018/05/word-image-4077.png 1100w, /wp-content/uploads/2018/05/word-image-4077-300x167.png 300w, /wp-content/uploads/2018/05/word-image-4077-768x427.png 768w, /wp-content/uploads/2018/05/word-image-4077-1024x569.png 1024w" sizes="(max-width: 1100px) 100vw, 1100px" /><br />
<img loading="lazy" decoding="async" width="694" height="211" src="/wp-content/uploads/2018/05/word-image-4078.png" class="wp-image-4548" srcset="/wp-content/uploads/2018/05/word-image-4078.png 694w, /wp-content/uploads/2018/05/word-image-4078-300x91.png 300w" sizes="(max-width: 694px) 100vw, 694px" /></p>
<p>
  ④修改模板
</p>
<p><img loading="lazy" decoding="async" width="1092" height="680" src="/wp-content/uploads/2018/05/word-image-4079.png" class="wp-image-4549" srcset="/wp-content/uploads/2018/05/word-image-4079.png 1092w, /wp-content/uploads/2018/05/word-image-4079-300x187.png 300w, /wp-content/uploads/2018/05/word-image-4079-768x478.png 768w, /wp-content/uploads/2018/05/word-image-4079-1024x638.png 1024w" sizes="(max-width: 1092px) 100vw, 1092px" /><br />
<img loading="lazy" decoding="async" width="928" height="279" src="/wp-content/uploads/2018/05/word-image-4080.png" class="wp-image-4550" srcset="/wp-content/uploads/2018/05/word-image-4080.png 928w, /wp-content/uploads/2018/05/word-image-4080-300x90.png 300w, /wp-content/uploads/2018/05/word-image-4080-768x231.png 768w" sizes="(max-width: 928px) 100vw, 928px" /></p>
<h1>分析权限认证的实现</h1>
<ol>
<li>
  当用户登录完成之后可以获取到用户信息
</li>
<li>
  根据用户ID获取对应的角色ID
</li>
<li>
  当角色ID为1表示为超级管理员角色 设置不进行任何权限认证，也需要获取所有的权限信息(由于导航菜单的显示)。当角色ID为其他时。先根据角色ID到角色权限中间表中找到角色对应的权限ID,在根据权限ID获取到详细权限信息
</li>
<li>
  根据当前用户请求的模块名、控制器名、方法名称与第3步获取到的权限结果集进行比较。为了比较方便 在第3步对获取到的权限信息格式化成为一个一维数组。然后在进行判断 是否在数组即可
</li>
<li>
  实现显示导航菜单。根据已有的权限信息将is_show为1的放入到一个数组中。模板中显示即可
</li>
</ol>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/4470.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
