00:00
我们继续来搭建我们这个后台管理系统,前面呢,我们只把基础框架打过来,那现在呢,每一个菜单里边可能还有一些东西要访问,我们来点它,那这样呢都没有,我们现在呢,就以一个为例,当然不能把全部都放进来,我们就以这个data tables为例,把它所有的页面呢,让它访问正确,我们把跟这个tables有关的页面我们全放过来,因为后台管理系统呢很大,所以我们后来的这个模板,我们肯定呢得分文件夹来放,比如我们这个文件夹呢,都是所有的这个table啊,表格啊,跟我们这个表格功能有关的啊,这块这些东西我们放进去,那把这四个页面呢拿过来,跟所有table有关的,我们就来找这个后缀名有table的CTRLC,我们可以给这儿来复制两个,然后呢,再来把剩下的带table的我们可以都来看一下,带table的这还有一个,这还有一个CTRLCCTRLV,好把这几个table呢也放。
01:00
在这,那接下来我们再来写一个功能的controller table controller table controller,这个controller呢,就是负责处理我们table下边的所有这些页面跳转方式的好ctrller,然后呢,接下来比如来到我们这个后台管理系统里边,那我们现在要做的第一件事就是当我们点击basic table,会来到我们的这个基础表格页,所以我们现在就来挨个处理请求,Public string,我们呢,就叫basic table,你给我发送的请求at一个,比如get monkey,那请求的名字呢,就叫basic table,然后呢,我们最终给你跳转到哪个位置,而我们这个页面呢,大家注意basiccyc table这个页面呢,它是放在啊我们这个tables下边的,诶我们好像没这个页面,我们来找一下啊,在这我们来。在这来搜一下它的这个basic table这个页面,好,我们把这个页面呢,CTRLC复制过来,CTRLV,它呢是放在这个table下边的,所以我们在这一块的跳转路径,因为我前置的路径只有timeates跟后置的这个HTMMR,所以中间这个路径我们还得写,那就是table下边的我们的这个bicyc table复制过来,然后呢,不用加HT码,这就是我们来到这个页,然后呢,再来一个,比如我们这还有一个页,嗯,退回来,来在我们的这个table里边呢,还有一个这个叫dynamic table,那就是这个at,一个get,给我处理get请求,如果发送这个请求地址,那最终呢,Public string,我就给你来到这个页,Return,大家注意,我们这个页面呢,还得加上这个前缀走。还有我们现在呢,就以三个为例吧,就写上两三个。我们。
02:50
在这儿呢,还有一个table,这呢叫respon,好,我们就叫responsive table,你给我访问这个,那最终呢,就会给我们来到指定的页面,Public,我们的这个他来到我们table下边的啊,然后呢,最后一个,那就是那最后一个小table,这个拿过来叫edit table CTR c复制过来,那就是我们这,哎,这有一个好enter,一个get map来到这public string说来到这个页面,同样的return,我们应该是table下边的,所以这样呢,我们就很容易的把这几个页面的这个访问地址就做好了,我们也可以来测试一下,只要你访问这几个页面啊,Basic table,那就我就能给你来到这个。
03:50
指定义,当然我们的这个访问请求不用带HTMMR,后缀还带了也是404,因为我们现在这个访问的请求的名字没有这个HTMMR,走我们来访问,来我们发现呢,这个页面是可以来访问的,只不过它这说我们这个模板引擎说我们这个引擎呢,Not exist,它说可能不存在,来重新来启动一下,重新让我们的这个项目启动一下,把这个页面呢都放在了table下边,所以只要我们最后访问了这个路径,按照我们这个前缀的匹配内路径下的time下边的table报下边的它,然后呢,再加上后缀就肯定能访问到,来看一下我们的效果走不存在的原因,我们来确认一下,看这个路径呢,确实是对的啊,在这个table basic table table basic table,哦,对了,因为我们这个SIM live模板引擎要解析我们必须呢,在这有我们这个SIM的名称空间。那现在以后呢,给每一个SIM可。
04:50
解析的页面都要加上simli的名称,空间走走,还有我们的这个这个页面好像没啥用,把这个呢放在这儿,好,那现在我来重新启动一下我们的这个项目,我们保证我们这几个页面先能访问好来等它启动完成,先来测试一下basic table回车,好,我们发现呢,它确实能访问,而且呢,大家注意每一个页面的这个访问肯定都得判断是否登录了,但是这个呢,后来拿拿我们的这个拦截器,我们再来做,现在呢,我们再来看一个东西,那么既然这个页面能访问了,那我们现在要做的就是当我来点击basic table就来访问,当我们现在呢,要改我们这一块的左侧导航,但是这个导航一改呢,你就会发现,如果我只改了basic table这个页面里边的,我来搜一下basic table。
05:50
只改了他的这个超链接,如果我只改了他这个超链接,它跳到这儿,那我们跳到下一个页的这个页面,你就会发现这个超链接呢还没改,而且我们现在要做的整个后台管理系统最大的特点就是左侧的这个菜单是一样的,然后呢,上边是一样的内容区域不一样,所我们现在要抽取左侧跟上面的东西,咱们现在来做一个事情,就是来抽取公共内容,咱们来抽取公共内容,我们先来分析一下哪些要抽取,我们一般要抽取的呢,是这些来打开一个basic table controlr home,我们把它整个结构呢,我们给它一呃,一合并,我们会发现每一个关键结构人家也有,呃,这个注释叫left,这是我们这个左侧的导航开始和结束,还有这个man content,这是我们主要的核心区内容,下边呢,就是一些GS,那我们这是basic basic table是这样啊,还有我们的这个table页,我们也可以看一下,我们给他呢缩这是左侧的。
06:50
然后呢,这是它的主内容区域,然后呢,这是下边结束,我们来发现共同点,首先在basic table跟这个dynamic table里边,首先呢共同点大家我们来看有没有公共的CSS,大家看啊,Style response以及HTM2这些在每一个里边,诶这几个呢都是公共的,这几个都是公共的,包括呢,我们下边的这个GS的引用,这六个呢都是公共的,我们来看可以看一下这六个呢都是公共的,包括我们去慢页面,Login页面都一样,我们可以ctrl home看一下,这个CSS跟GS是一样的,然后呢,包括我们的后边的呃,这六个六个GS我们来看啊,这六个GS是一样的,所以我们可以来将所有的公共东西来抽取过来,我们抽取在一个页面里边,这个叫HTM,那就叫common.htmmr,这个呢,都是我们这个页面,都是所有所有公共。
07:50
公共信息都在这里边,所有公共信息都在这里边,所以我们先把所有的公共信息抽取过来,其他的东西呢,我都不要,这个页面呢,是专门给第三方引用的,那首先呢,我们把大家公共的这几个body里边的,公共的这几个script ctrl c来复制过来,放在common里边,它在body里边,好,然后呢,再把我们公共的这几个,我们的这个CSS在这,以及我们的这个GS来复制过来,CTRLC来放在公共的这个里边,大家会发现呢,每个页面的这个头尾都一样,而且呢,我们如果一进入后台管理系统,每一个子页面的左侧菜单这些都一样,所以我们也可以把左侧菜单给抽取出来,所有公共的我们全放在这个页面,比如我们来来到我们的这个dynamic这个里面来找他的这个左侧菜单,从31行到一百六十五行,我直接CTRLX来减掉。
08:50
然后呢,放到我们这个公共里边啊,这是左侧菜单一样的,而且呢,哪一块一样,我们左侧菜单剪了以后呢,还有我们的这个主内容区,主内容区的这个头部是一样的,我可以来用一下审查元素。
09:06
它整个头部呢叫header selection,就是这一块是一样的,而左侧菜单呢,是这个left,好,我们就把这个头部也剪过来,CTRLX,那么接下来呢,放到我们这个公共的页面里边是这个,所以呢,现在我们把所有的公共内容都抽取出来,接下来我们要做的就是引用,在引用之前我们先来再做一件事情,这个呢也是SIM livef,我们来加上SIM的这个名称空间,首先呢,我们将所有的公共资源的这个超链接地址,我们以后呢,遇见地址我们都可以使用SIM的写法,然后呢,使用an服大括号,这样我们写杠杠代表当前路径,我们这样写地址呢,它会动态给我们加上项目名,很方便,以后我们项目项部署的时候,如果我们想要改变项目名,我们都不需要修改源代码,好,我们把这一块呢,也都给它换上,首先我们以后将所有的这个路径我们都换过来。
10:06
这个艾特符这也一样,我们可以保留它原来的东西,TH,我们的这个src,我们相当于要修改src属性,按符大括号,我们把这这一块拿过来CTRLC走,然后呢,下边也要THSRC等于我们的这一块,那我们这一块呢,是这样,其实我们会发现啊,好多呢,都得是这样按福大括号走,那接下来呢,下边的所有这些这些这些东西我们都来直接来修改成THSRCTH,然后呢,我们都来给它加上安福大纲号,哎,我们发现呢,这一块body这一块的这个合并啊,没有合并好,是哪一个标签可能没有做好,哎,就是这个header selection来我们再来。
11:06
剪切header selection的时候好像剪了有问题,好header selection,那么这个呢,要缩它的整个呢,还挺长的,我们只剪了一句话,CTRLX啊,剪过来,然后呢,来到我们的这个Co com里边,它挺长的,好,现在我们全粘过来以后呢,我们t s r c and符大括号,好,我们把每一个呢都来加上and符大括号,And符大括号斜杠走走走,这呢也一样,然后呢,加上结束CTRLC,这也一样。好,我们现在呢做的事情给每一个链接,我们使用了simlif and福大二取值,然后呢,将公共的都呃,都已经拿到了这个科目页将下来,我们怎么抽取,可以参照SIM官方文档,首先官方文档里边呢是这么来写的,来到我们这个章节,专门有一个章节叫term lay out,就是我们这个章节来抽取模板,怎么抽取呢?首先你要做的我们可以来看下边,你把公共的东西,你声明上使用th fragment给它一声明,给它起一个名字,然后呢,你以后在别的位置想要引用,你可以使用th insert,然后呢,波浪线大的号的方式给它插进来,或者呢你直接来写th insert,然后呢,你要引入哪个页面的哪个,所以大家注意这一块的语法是这样子的,这个前边写的是什么?前面是写的我们这个页面,大家注意我们这个页面呢,在模板引擎下的叫photo htm Mr,所以呢,相当于模板引擎要找到它前缀后缀不。
12:50
更管写photo,所以我们接下来呢,这块就要写photo,找到我们这个页面以后呢,这个页面里边有这么一个东西,它呢被生明成一个片段,可以引用,所以我们接下来就写photo里边的这个东西,当然你除了使用th fragment声明外,它也支持使用选择器,你想声明麻烦的很,你直接使用选择器你可以,比如我们某一个页面有一个这个东西,它的这个有一个ID,这样呢我们可以声明photo photo呢就是这个页面,这页面里边的这个div,它ID叫copy selection,然后我们直接井号把这一块的内容拿过来给它放进去,所以大家注意就拿th insert就能抽取过来,你可以给页面里边来起公共的内容,比如我们这个head就来写一个th fragment啊,Fragment,我们就叫我们这common head common head,这是我们的公共的头,公共头里边呢,有很多东西,我们不用每一个写,然后呢,接下来这也有公共的。
13:50
这个secret,那这个secret呢?为了方便,我也可以写一个div,把它们包起来。他们呢,统一都是一个公共的,哎,我们可以来写一个th fragment fragment,我们的这个common secret来,那我们的这个common,这个script呢,我们可以把它整一个,我们也可以,呃,多尝试几种方式,我呢第一种方式我给它是使用我们的这个fraggament生命的第二种方式呢,我是使相当于把它把它们全部包在我们的这个一个div I里边,然后呢,接下来好多的这种我也可以使用ID的方式,比如呢,这个左侧菜单我们就叫left menu,然后呢,我们的这个header,我们比如我们又使用这个fragment啊,我们就我们就叫header这个menu,好,我们现在呢,相当于声明了一些公共的东西,那我们想要引用怎么引用,参照官方文档,你可以使用th insert replace,或者th include还官方。
14:57
那推荐呢,Th include这个呢,不推荐在3.0以后使用,但是他们几个是什么区别?举一个例子在这比如我们现在使用th fra,我们声明了一个片段叫photo,这个photo呢相当于是一个标签,里边有文门,如果我使用th insert,把我们这个photo里边的copy,这个copy给我们拿过来,和replace和include是啥区别?首先大家看啊,Th inside photo photo指的是我们这个页面的名字,不是这个标签名字啊,然后呢,我们相当这个页面的copy元素,Copy元素呢,在这实际整个标签就是元素,我使用inser的效果就是来我们这写了一个div inser的一个photo copy,那现在我们就能看到这与产生的效果就是div,把整个photo呢inser到div内部,这就是我们使用音色的,如果使用th replace还是同样的东西,那是怎么操作的?是这样们是相当于在div上写th replace。那我们。
15:57
看到第二个渲染效果呢,整个div没有了,像我们整个photo把div给replace替换掉了,还有一个叫includelo是什么?我们来看D呢,还在,我们这个D还在,它想要包含photo copy这但是这个包含呢,如果你使用include,它是把photo里边的内容什么叫英科包含,想把这个里边的内容直接放进来,所以这呢是三种不同的方式,而我们现在可以用什么方式,比如现在公共都抽取出来了,所有公共的这个头,好,我们现在来到,比如我们来到麦页面,这个头呢,我把这几个一删,我把这几个一删,我想引入公共的东西,我怎么引啊,比如我随便来写一个,我我们来写一个啊link,或者随便来写一个啥,我们随便我随便写一个东西,我使用这个TH叫什么replace replace呢,那就是替换好我们把这个。
16:57
卖页面的这个SIM拿过来CTRLC,所以呢我来th repl,那相当于呢,我想要用公共的东西把你这个原生的这个LINK1替换,Replace replace,那我这块该怎么写语法来,我们是这样的波浪线大括号,或者呢你不写这个波浪线也行,然后呢,写什么我们这么来写在我们common页面,我们使用fraggment声明了一个common head,我们想把header里边的内容,所有的这个东西全部给它替换,而head标签不要,所以呢,我们这个fragment想让整个header这个标签,那我们接下来怎么办呢?我就可以使用这个叫TH,可以来到慢里边,好,我使用TH啊,我们来看一下啊,现在的这个效果,如果是replace,就相当于把它的原来的标签我都给给你替掉了,但然如果是include是标签里边的这个东西啊,然后呢,还有我们的。
17:57
这insert把你这个插入里边,所以我们现在来使用th include,我们把我们这个common页面,所以这块接下来怎么写,我们直接写common,这个common呢,指的就是模板引擎,如想解析这个页面,页面在模板引擎前缀后缀去掉以后所在的位置,Common下边的谁,我们相当于要这个东西,Common下边的common head,我们把它拿到这,拿到main页面,好,我们这么来一写,以后来CTRLF9来看慢页面里边公共的这几个还会不会在CTRLF9包括呢?我们这个C页面也得CTRLF9,那现在来看一下我们的这个慢页面,我们的这个慢页面,我们直接来访问慢页面就行了,慢点HTML回车。
18:49
啊,我们要重新登录,那我们就来重新登录走。那么登录的是错的,我们来写一个123456走,只要慢页面的格式正确,那就一切没问题。F12还可以看一下效果来刷新慢页面,那慢页慢页面那几个我们公共引的东西叫什么?我们可以来到这儿看一下啊,慢页面我们公共引的东西叫common header common header呢在common里边是style CSS,来找一下有没有这个style CSS,好,它是有的,没问题,包括呢,我们来右键查看源代码,慢页面的源代码我们来看一下啊,我们呢,自己的这一块在这。
19:33
哎,我们的这个link也相当于去完全替换,那就在这,所以大家注意我们这呢有一个哎,In include啊,我们在这写的还是稍微有点不对,如果我在这个link,我写了一个in load link load的意思呢,就是我们引的这个内容在link标签里边,但link呢本身它呢是一个不是一开一闭标签的,所以呢,我们相当于这有一个link,把我们的要引的所有内容全部放到这,但是如果我来替换另外一种写法,我写replace,大家看是啥效果啊,CTRLF9再来刷新一下。
20:11
我来刷新,好,我一写replace以后呢,大家会看到我们刚才的那个link标签已经没有了,代替我们的是这个,但是呢,大家会看到有两个黑的,有两个黑的,因为replace呢,还会保还会保留我们的这个大标签就在这儿,但是呢,如果我们使用的是include,它就不表不保留这个大标签了,In include controlr f9,那可以来看一下啊,如果我使用include,好,我们就发现呢,只有一个headd,它就不保留这个大标签了,然后呢,你就会看到这有一个link可开,这有一个link可B,当然有我们这个HTML的这个自动语法纠正,相当于就给我们又纠正回来了,这是我们的第一种办法,第二种办法。这个link标签呢,实在太太烦人,我们就可以使用这个div啊,它在这呢,一显替换也是一样的,CTRLFCTRLF9,因为毕竟一个错误的link比起一个错误的div来说,错误的link呃肯定更比较致命一点,好,我们来刷新,那整个这个效果呢是没有任何问题的,那么现在呢,把公共的这个CSS已经进来了,公共的GS我们也一样,公共的GS我们还是来到慢页面,我们来看一下公共的GS,公共的GS呢是这几个,这几个呢,我们就直接把它重新引一下,在我们的这个common页面,我们所有的公共GS都在这个div里边,所以呢,我们就可以把div里边的所有内容来引进来,它呢叫common script来到慢页面,那我们现在呢,也我们来也写一个呃,Script啊,我们写一个什么都行,反正在这儿写什么标签都行,由我来写一个div也行,然后呢,我们来写一个THTH。
21:57
是什么呢?Include我们来替换,或者re replaces replace呢,直接使用我们这个common页面的common页面的common script来把我的这个div替换,这个common页面呢,本身也有一个div,所以T不T啊,相当于我们还会有一个div,但是整个的这个东西我们也会进来,我们可以来看一下慢页面,好在这一块呢,我这么来写,而且呢,我这是,不过我们这个呢是使用ID生命的,所以我们呢,慢页面在这块呢,要用井号,现在这是选择器,好来CTRLF9,我们来看一下最终杰克瑞在慢页面有没有引进来来刷新,只要我们GS效果引入失败,这一块呢肯定就会有问题,所以我们这一块能看到这个效果要引入成功了。F12来找一下我们引得杰克瑞,杰克瑞,在这呢,也没问题,包括我们来刷新它的这一块页面源代码,来ctrl end,看最后的后边,我们相当于诶,我们引的这个div。
22:57
诶在这,哎,我们把这个呢,就自动引进来了,好没问题,我们的这个公共的头以及公共的尾引进来了,接下来就是我们的侧边栏,那么这个侧边栏呢,我们左侧的这个栏,我们给了一个ID,所以我们来到现在这个排保页,我们把这几个呢都重新抽取一下,大家会看到所有的这个尾部的东西,而且呢,大家注意这个g GS script好像也是每一个页面,这叫common script,每一个for op page,每一个页面都要引的,所以呢,我最好呢,把它也放在这个空里边,这是每一个页面都要的,我就来按符大括号,当前项目下的GS,那么就把其他的全部引进来,在basic table里边,那我们公共的这个GS这一块我就直接去掉了,那我们卖页面之前咋写的,我就这么来写,公共的GS就是在这儿,CTRLC。
23:57
我们把公共的GS1影,然后呢,接下来这是左侧的菜单,我们再一影,然后呢,公共的CSS再一影,大家就会发现没有多少内容了,所以公共的CSS怎么引ctrl home来到这,我们以前引入公共CS的方式使用div,我们来到我们的这个basic页面,好,这是公共的CS,然后呢,这是公共的GS,然后呢左侧菜单,左侧菜单我们来看一下咱们。com页面,我们有一个这个div,大家注意这个div呢,整个都是要进来的,所以呢,我们在这儿应该这么来写,我来写一个div,但是呢,我的这个div不为别的,就是为了让别人替换我th re replaces来,我让谁来替换我呢?Common页面的,Common页面的我们的这个左侧菜单啊,Left menu啊,我们是以选择器的方式写来的,然后这是第一种,第二种,在我们这个man content里边head。
24:57
这selection整个头我们再来1T,所以呢,我们整个头呢,大家看一下,我们在这个common里边,整个头呢也是一个div,这个div我们也要完整弄过来,但是呢,它是一个header menu,它呢不是ID,所以我们的写法就是div th repl来替换,替换呢我们把common里边的,然后呢,你给我自己找到head menu,这是一个fragment,好,那么这个就写好了,CTRLF9来看一下basic table,它的这个页面格式乱不乱,来到我们的这个basic table里边来。F5刷新一下我们的这个页页面basic table点一下。
25:41
来我们这个basic table呢,它的这个超链接地址,呃,没变,我们一会来变一下链接地址啊,你先直接访问好,我们发现呢,Basic table是没问题的,所以我们来到这个,好,我们把这个呢在basic table这一块左侧右侧也都赢了,那我们其他页面都一样,来其他页面main content里边的,好,我们先在前边,这是引左侧菜单,然后呢,然后呢,接下来是头头部这个菜单。
26:10
头部菜单,然后呢,整个首尾我们再来移营,这是头。CTRLC,然后呢来到这一营,然后呢尾ctrl end,我们公共的尾,我们来移营CRLC来到公共的尾部CL end,那么公共的尾部大家注意只是这几个是公共的,再加一个这个for是公共的,所以呢,我公共的尾部在这在移营好,这个公共的头尾又引好了,然后呢,第二个页面也一样,我们现在就以两个页面为主,这两个页面引好以后,大家还需要注意的就是因为我们现在这个引的这个左侧菜单,现在要相当于修改页面跳转,我点一个basic table,它的整个路径呢叫basic table,所以呢,我们就应该来到我们的公共页面里边,然后修改左侧菜单,只需要在一处一修改,找一下basic table在这来一修改就行了,我们不用加HT2,每一个的访问呢,都不用加HTMMR。
27:18
就行了,而且呢,整个访问为了我们的后边方便,我使用TH语法,我们at符大括号,让它访问当前项目下的这个BI table,其他人都一样。好,我们把这个active呢,先去掉这个叫th rf an负大号,An负大括号的它走,然后呢,接下来在这在这也要th ref,所有的东西呢都一样,大家就在慢慢改,我就改几个呢,呃,作为一个示例就行了,当然我们后台管理系统呢,要写完整还是非常复杂的,先来看一下啊,CTRLX走好,现在我们这个页面呢,改起来了,CTRLF9,相当于我们以后呢,只需要修改页面跳转路径,只需要在C里边写所有其他的这些,呃,公共的左侧菜单都是引自于common的,我们改一处就相当于改所有了,来刷新一下,好,来到basic,我点basic,来到basic,我点呃,这个dynamic来到这,然后呢,我点response来到response,所以我们整个的这个跳转呢,已经是没有问题了,只不过这个I呢没修改,可以顺便修改一下。
28:35
好,这就是我们来抽取公共页,我们使用THPL或者th include,我们可以把公共的东西都出去来,而且呢,公共的头,公共的尾我们也都有了,把这个HTMMR哈去掉,我们来再次确认我们的整个是没问题的,我们现在来重新退出会登录进来,登录进来呢,我们现在我随便来拿一个账号密码登录123456走登录进来好,登录进来我们这个账号密码是对的,然后呢,来到我们的这一块能点任何一个页面,诶我们来稍等一下啊,在这儿来刷一下,我们点我们的这个basic table这个页面来,我们现在呢,这一块展开效果有问题,我们先来写吧,展开效果有问题是我们后续还要做的工作都没做好,Basic table好,我们basic table在这没可以了,然后呢,包括我们点其他的也都可以好,没问题。
29:35
那么整个页面效果呢,是正确的。
我来说两句