BBS项目(二):首页导航条搭建 修改密码功能 首页数据展示 个人站点页面

首页导航条搭建

session判断用户是否登录

参考博客园导航条:
用户已经登录:右上角显示 '个人中心'
用户未登录:右上角显示 '注册' 、'登录' 按钮

使用模板语法判断用户是否登录:
image-20221229152059123

如果没有登录则显示注册登录按钮:

image-20221229152149099

更换验证码

点击验证码可以更换:
image-20221229152732905

给img图片添加一个事件:
image-20221229152756777

拿到原来的img标签的src属性,再重新赋值。

另外一种写法:

image-20221229153226012

导航条更多功能

显示用户名:

image-20221229153929560

导航条下拉框更多操作:

image-20221229154045006

查看效果:

image-20221229154111297

退出系统

清空session并跳转到登录页面:

image-20221229155100573

修改密码前端页面

使用大模态框

效果:点击修改密码,弹出一个模态框。

使用大模态框:
image-20221229155259811

放置模态框:
image-20221229155429819

不用在意放置模态框的位置,因为模态框不触发的情况下不会显示。
给修改密码的按钮,绑定模态框:
image-20221229155505158

修复大模态框bug:
image-20221229155543493

在模态框的类中添加bs-example-modal-lg类:
image-20221229155707714

编写模态框

快捷语法:
image-20221229155945174

示例:
image-20221229160340283
提交按钮复制官网的:
image-20221229160441172

效果:

image-20221229160508002

添加label标签:

image-20221229160611871

前端表单编写

直接复制之前注册时写的表单,在原有的基础上修改:

image-20221229160859594

针对修改密码,单独开一个路由set_pwd

image-20221229161039944

如果这个ajax的路由不写,则会直接提交到首页对应的路由了。

接受到后端返回的信息之后,刷新页面:

image-20221229161635676

修改密码后端逻辑

接受参数

image-20221229161247227

验证参数

image-20221229161407398

修改密码

image-20221229161547575

首页主体内容

首页布局:(2、8、2)布局
image-20221229162117152

代码示例:
image-20221229162224398

侧边栏:使用Bootstrap面板

image-20221229162348015

代码示例:
image-20221229162724963

中间部分博客园示例:
image-20221229162641081

使用bootstrap媒体对象:

image-20221229162944172

调整头像大小。

添加标题、简介:
image-20221229164300624

添加额外信息:
image-20221229163512543

添加样式:
image-20221229164005264

添加图标:

image-20221229164136631

给文章标题添加悬浮样式:
image-20221229164417313

查看效果:
image-20221229164447013

多篇文章添加水平线:

image-20221229164633729

在媒体对象之前添加一个hr标签即可。

首页数据展示

我们希望把数据库中的数据动态的展示在首页。

数据库中的文章表:

image-20221229171803213

首页后端视图函数:

image-20221229165238544

我们只需要循环展示媒体对象即可:
image-20221229164950443

模板语法渲染媒体对象:

image-20221229165049110

作者名如何获取:
通过文章表 --查找- > 作者名
文章 -- > 站点 --> 作者

文章查站点
文章表和站点表的关系是一对多。
文章表是一对多中的多。
外键字段在文章表所以是个正向查询按类中字段:也就是model类中的blog属性。

站点查作者
站点和作者的关系是一对一。外键字段在作者表。
所以从站点到作者是反向查询。反向查询按照类名小写。

显示作者名:

image-20221229170644228

显示文章时间:
image-20221229170826090

剩余三个字段:

image-20221229170853934

这里因为我们的文章表里有这3个字段,很容易查询。(优化字段)

头像显示:
image-20221229171643426

作者表示例:image-20221229171553973

个人站点页面搭建

个人站点页使用39布局。

示例:
image-20221229172245992

侧边栏展示标签、分类、归档:

image-20221229172341566

主体内容:

image-20221229172456474也可以复制之前写的首页。

个人站点路由

image-20221229174024594

\w:匹配包括下划线的任意单词字符
缺点:匹配的范围太大,可能会出现路由被顶掉的现象。建议把这种匹配的范围太大的路由往下面放。

这里是使用有名分组。username是这个分组的名字。括号内匹配到的路由,会作为位置参数传给blog视图函数:

image-20221229174102330

验证用户输入路由是否存在:

image-20221229174427875

拿着用户名去数据库查,如果该用户不存在,返回定制的404页面。

复制b站的404页面:
image-20221229174837501

公司开发之入乡随俗。如果是前后端结合前端还得学后端的开发语言。前后端分离就不用写后端了。

posted @ 2022-12-29 19:41  passion2021  阅读(68)  评论(0编辑  收藏  举报