day02【后台】管理员登录/02-尚硅谷-尚筹网-环境搭建-创建管理员登录页面

然后下边下边把这个问题。解决了以后。呃，咱们去把这个咱们就可以去。把这个前端，呃，前端页面哈，咱们可以把它先加进来。这个看我们的这个原型哈。圆形这里边呢，我们。这是整个项目的首页。但是整个项目的首页，他这边牵扯到会员的登录注册这些项目啊，众筹项目的显示。那么所以说呢，这部分内容吧。它是属于这个分布式架构那个阶段，会员系统的那个阶段，所以说呢，我们后台管理系统的首页呢，是这个管理员登录的页面，这是这是后台管理系统的第一个页面。啊，这是第一个页面，所以说咱们后边做的话，咱们是从这个页面开始。

那么我们要想先让这个前端页面呢，也是有一个环境啊，它的也有一个开发的环境，那么这个环境呢，就是这些个静态的资源。就是这些啊，但是其实我们已经把几块已经给拿进来了。这个结这已经有了哈，把这些呢，我们就毫不客气的就全部都给他们复制过去就好了。啊，因为现在这些这些页面呢，他们用的这个样式呀，GS呀什么的，都是用的是这些个目录里边的资源。我们也就是把这些东西都拿过来，后边呢，再把这些页面拿过来。这些页面呢，到后边咱们不是说要仿照他这个页面，我们一点一点去写啊。要写这个的话，我们就疯了。你看这里边儿，这这多少东西，虽然说有很多假数据哈，有很多是假数据，但是那也要要了命了呀。啊，所以说这个里边就。牵扯一个问题哈，就是我们。

呃，其实前端工程师和我们后端工程师是怎么对接的呢？啊，这个后端工程师和前端工程师的交互。呃，这个得看你这个项目哈，你的前端和，呃，前端是怎么。这个这个是页面是怎么产生的。有一种方式叫服务器端渲染。有一种方式叫前后端分离诶。什么叫服务器端渲染呢？就好像我们用GST呀啊，或者veloc cityity呀，Free marker呀，Sam呀，用这样的视图模板的技术。哎，然后呢，去生成这个页面。这个视图模模板的技术呢，是这样的。我们在浏览器发请求去给服务器端。服务器端呢，把这请求转发到这个模板文件啊，比如说G啊什么什么的。然后这里边儿这个红色的部分呢，就代表它这个动态的内容。

比如说我们幺儿表达式。啊，Request scope什么什么的，这些这个动态的动态的部分，动态的部分呢，它得去把它转换成Java代码，执行这个Java代码运算得到具体的值，哎，把这个动态的部分全部也都替换成这个静态的。啊，全部都替换成静态的。换换成具体的值了嘛，它就不是要不不会变了啊，在到这就不会变了，它就是一个响应返回给小毛。这个过程呢，就叫做渲染啊，把这个动态的部分计算出来具体的值。这是一个渲染的过程。如果是服务器端渲染的这种交互的方式啊，页面生成的方式，那这个时候其实就是像我们这样前端工程师把页面全部都开发好，他就一下子就全都给我们。再往后呢，基本上前端工程师就不怎么去管这事儿了。因为他对他来说呢，这个活儿干完了，人家可能去接着去干下一个项目了。

你这里边儿有的地方，如果你需要去改啊，你尽可能你自己去改。如果说你自己实在改不了的话，你想找人家去改啊，那你看你跟人家关系咋样。啊，你看是请人吃饭呢啊，还是吃完饭还捏脚是吧，哎。现在谁谁差你一顿饭呀，是吧，你一顿饭你就把我打发了，对吧啊。对，所以说就是说这个吧，原则上这个他干完以后他就不管了。剩下就是我们的事儿了，我们要把这些页面呢。里边的这个代码哈，我们是拿过来以后放到我们GSP里边，然后我们进行一些个调整。啊，是这样一种工作的方式。那如果是前后端分离的。前后端分离的呢，是因为我们双方呢，都是根据杰森数据来进行交互的。所以说呢，咱们得先开会，先确定这个阶层格式。

确定完了以后分头开发啊，前端去开发这个页面，后端呢，去开发我们后边的这个接口。和前端对接的接口，哎。然后呢，我们后端接口还不能用的时候呢，前。这个后端接口还不能用的时候，前端工程师呢，用这个mo.gs呢，生成假数据啊生成假数据。这个mo.gs哈，我们这是一个前端的技术，我们就看看它的官网哈。是不是这个。好像不是。这个官网那啥。嗯。我去。怎么都是一些个介绍的哈。怎么他这官网呢。

啊，就是其实就是它生成随机数据拦截AJX请求，以前AJX请求它是直接去找我们后端的。现在呢，后端这边还没写完呢，没开发出来呢，他就先拿mo.gs假装好像是后端似的，就拦截到他们前端的A请求它给生成。根据你的需要生成这个随机的数据，你把接算格式给他，他按这格式给你生成这个数据，然后呢，你就哎先拿着假数据先用，哎什么时候这个后端开发完了。什么时候这个后端开发完了，然后呢，后端接口可用了，他在访问我们这个服务器啊，访问服务器，然后去拿到这个真实的数据再去运行。啊，这是这是前后端分离的时候是这么交互的。所以说我们现在呢，前端工程师给我们把这个页面开发好了，我们就拿过来用啊，就我们不会说再把页面再重新写一遍了。这是这是肯定是不可能的，我们在人家写好的页面上面呢，呃，在这个基础上可能会做一些个调整，做一些个扩展啊，这个是有可能的。

所以吧，咱们是先把他的这些个静态资源呢，先拿过来。杰瑞已经有了哈。所以说刨去杰query。C。然后呢？注意呢，一定是放在我们这个。Web APP目录下边。你别放在这个外部下边。放外下边会有什么问题啊。哎，你都访问不了了。嗯，你比如说这个图片吧。这个时候页面上我们会看到的是啥呀。哎，就404了。啊，这些静态资源呢，都是要求他们得直接访问的，你不可能说这些静态资源，我们给他在经过汉德给他做一个转发。

再转发到这儿啊。那就那我们这得写多少东西是吧，这就404了啊，所以这个东西肯定不能这么干，这些东西呢，要放到放到这个Webb下边。CZ。然后呢，我们截个图。这哪来的音音乐？嗯。不CSS啊，就这些东西啊，放在一定要放在外部APP下边。这个没有什么，这就没有什么可商量的了啊。嗯。

嗯。一定。要放在web APP。算我求你。这边画个箭头啊。就是轻松一点啊。其实不要那么紧绷绷的。这个我们技术文档该严谨的地方，严谨咱们该该。有些地方不影响的地方，咱们开个玩笑也是可以的，对吧。这个就是说。呃。引入前端静态资源。啊，那么有了这个以后呢，咱们就可以去准备我们的首页。

啊，咱们去这个。创建一下我们的。后台管理员登录的页面，其实这个就是我们后台的首页。那么第一步咱们先创建一个呃的面。log.jp这个文件。把这个建出来。这就建个GP啊。这个呢，这个就是好像我们system error这一类的，这是咱们就放在外部下面。哎，因为这个呢，就属于我们GP啊，是属于我们要保护起来的这些呢，说我们一个一个发请求，我们再转发到这儿，这个我们觉得是值得的啊。Log。这个页面呢，建好了以后啊。我们标记一下它的这个位置哈。

嗯。然后呢，下一步就是。在这里边的一个内容啊，这个里边这个页面长啥样呢？诶我给关了。德米login，就他哈。这这个从原型页面呢，我们查看源代码。Ctrl a ctrl c。然后呢，你这别ctrl a ctrl v哈，因为这个东西是不能去掉的，这个东西一定留着哈，这个东西一定留着，把下边这些给它粘过来。你如果是全部干掉的话呢，这个地方其实它就报错了哈。

他就报错了是吧，哎。然后你看这个。就不太好找了。这个这个这个东西我们叫GSP指令是吧？啊这个东西要留着啊。这个拿过来以后呢，这里边儿要适当的做一些个调整。这个ZHCN这个不动啊，这是页面上对应的一个语言啊，就Z表示CN表示中国，Z表示中文。这个字符集得改一下啊，这个地方得改一下，改成U杠八。因为这是不是这三个地方得一致，都是U天花吗？啊，这要改一下。然后呢？这里边这是一些个CSS文件的路径。我们既然用到路径呢，那么我们就需要用到base标签。被子标签呢，咱们找现成的哈，咱们去给它粘粘过来。CC。

还有就是然后呢，这些相对路径他们是相对外部APP了啊，你可以认为在这儿相对于外部APP，那么这时候路径它就是这个。这个路径我们就不用改了啊。这个路径就不用改了。然后呢，下边呢，它。啊，对了，这个比较简单，下边对有这两个GS，我们按我们以前习惯吧，还是放在前面。就是它放在后边呢，它的意思是说呢，先不要执行GS代码，先把页面上能显示的先显示的。让用户先能够看到。然后呢，再执行这些GS代码啊，然后呃，让用户第一时间能够看到这个页面的，呃，这个效果啊，它是这么一个这么一个考虑啊，也是为了节约这个性能啊，用户能够更快看到也有道理哈。可能设在F一下啊，这个只不是我们觉得习惯上一些导入什么东西放在前面啊。啊，这些路径这就也都OK呢，也不用不用去改啊。

就是我们这个页面现在要调整的，初步调整这些。当然下边呢，有一个表单。这个表单呢，就是我们提交。表单就是登录就是账号密码啊，提交账号密码提交的话呢，那么我们在这儿顺手咱们就给他也也也改一下啊。这个给他一个action。嗯，这个模块呢，我们都叫din，这个模块下边呢，这个叫做do login。第二，什么？然后呢，Method？哎，表单基本上都是以post方式去提交啊。嗯，从来就没见过什么地方在这儿要用get啊，就是这个就是。都是二。嗯，然后呢，下一个我们input这儿。这就是一个是账号，一个是密码。这个内蒙。一个是这个login account。

一个是user password。哎，把这两个要写上。然后再往下呢，这个地方，这是个超链接，那么我们希望点它能提交这个表单，所以说把它呢改成一个。按钮。Butter。哎，这是一个登录。然后呢，这个这个class啊，这个得拿过来。CTRLX。这个超链接就不要了啊，这样的话一点他呢，就提交这个表单，对在这呢，给他一个type啊，这个得得呃，声明一下说他是一个submit。啊，因为这个地方呢，有三个可选的值。But是个普通按钮，点了以后不会提交表单，Reset是重置啊，然后submit呢，就是提交这个表单。行，这个这个地方比较简单啊，我们要调整的就是这些，因为这个页面的东西比较多啊，也其实也不是很难，我们就不放在笔记里面了。

我在这儿写呢，就是说这个具体。哎，参照我们这个文件。所以说大家学习吧，你千万不要吝啬你脑筋的，你脑筋的开动啊，你不开动脑筋，不开动脑筋去想，你就懒得懒得动脑子。那是吧，那就没法玩了啊。就像一个你，我们的大脑就像一个汽车的发动机一样，你发动机要不转的话，你这汽车怎么往前走呢，对吧。啊，一定不要吝啬你的思考。好，这个页面我们先准备好了。对，下边我们考虑接下来的问题哈。