浅谈博客项目是如何实现的(二)

题记:昨天建好了数据,修改了一下域名,写了一个路由,今天我们来设计一下注册页面,以及部分页面的跳转。

如下图1所示,(ps:说了句废话,下图肯定是登录页面嘛),那么我们就从页面跳转开始吧, 点击登录,肯定跳转到登录页面,如下图2所示,因为没有设计账号密码,就算跳转到登录页,也是无济于事~~~那咱们只能往注册页跑~~,刚刚拿到这个页面想当然的认为用href=路径名这样静态页面链接的方式实现页面的跳转。实际上并非如此,应该通过路由找到,该页面所对应的control层,在control层做过一系列的数据判断和处理后,由control层访问对应的view层!(ps:mvc设计理念,如果这个晕了,那就凉了~~~)


图1


图2


图3

确定好命名规范以后,想都不用想,在control层开始定义class,在与之对应的view层定义存放html文件如图4所示

图4

接下来定义路由,(最后定义问题也不是很大)如下图5所示,我已经详细解释了路由的含义

图5

我们到reg.php模块下开始写方法,如图6所示,首先都不要想,返回注册页的方法第一个就要加上去


图6

补充说明见到herf,就要写对应的路由的名字,也就是说,链接不能指向静态页面,必须指向路由地址,由路由地址访问具体方法,再由方法访问页面,如图7所示。

图7

接下写注册方法,也就是对post回来的数据做校验,我们可以在control层链接数据,但是这样写不合理,我们这model层写链接方法,到control层直接new就可以了如图8-图9所示

图8


图9

tp5.1里提供大量的sql操作方法,具体不细说了。这里想强调的是,数据怎么从前端来后端?如图10所示

图10

输入必填信息,点击注册按钮,即可提交成功如图11-图12所示

图11
图12


做完后台数据验证,我们做一些前端表单验证,首先就是对输入的用户名做验证,输入是否为英文数字下划线4-12位数字,bootstrap提供好了样式如图13,也就是说我们只有利益jQuery修改css和html即可,样式已经很完美了

图13

接下来写js做表单验证如图14

图14

重点来了,利用ajax对用户名是否重复做验证,首先写ajax方法,找到username的dom节点如图14is_user_exist方法。ajax通过寻找 dom节点的data-url 找到路由,通过路由访问具体tp方法如下图15所示,当然前提要写好具体路由如图16所示


图15


图16


图17

测试一下如图18所示

图18

注册好以后肯定就要做登录验证,明天接着写


图19
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,977评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,859评论 18 139
  • 前一天晚上,归途中和闺蜜打电话,本是打发漫长的无聊的时光,天马行空的乱侃,不知怎么谈到了“我们终究都会变成自己曾经...
    烟云琴声长阅读 455评论 0 1
  • 今天早上我把宝贝儿们送托辅班时,告诉她们放学后自己走回家,必须在栏杆里面走不要急 好看着车 看着...
    O卓越O阅读 158评论 0 0
  • 静谧的夜里 一只小蟋蟀 爬过亮晶晶的石头 微风残月下 一个小男孩 迷失在梦幻森林里 哀伤的文字好似叹息 凄美的图画...
    北城铁匠阅读 732评论 4 2