在框架上搭好基本的页面

3. 我的页面

3.1 mine页面

页面上的图标都是bootstrap网站上的图标
https://v3.bootcss.com/components/
Django之爱鲜蜂项目开发 day04
根据图标名称,css样式,去写一下mine页面,注意一下,模板的继承
Django之爱鲜蜂项目开发 day04
查看一下页面效果
Django之爱鲜蜂项目开发 day04

3.2 注册和登陆功能

先看一下页面效果
注册
Django之爱鲜蜂项目开发 day04
登陆
Django之爱鲜蜂项目开发 day04
在templates文件夹下创建一个user文件夹,新建两个html文件 注册页面registe.htmlr和登陆页面login.html
Django之爱鲜蜂项目开发 day04
在models.py文件创建User模型,记录用户的信息
Django之爱鲜蜂项目开发 day04
在views.py文件下写一下视图函数,后面肯定还要修改的,这里先把基本框架先搭好
Django之爱鲜蜂项目开发 day04
去urls.py文件下添加path
Django之爱鲜蜂项目开发 day04

注册

接下来,写一**册页面
通过css文件写一下页面内容,通过js写一些规则,实现下页面的一些内容的过滤(例如文本输入的过滤和提示)
Django之爱鲜蜂项目开发 day04
这里的js文件需要着重看一下,js实现了对传输到后端的数据的过滤,这里主要写后端,前端并不详细介绍
(说实话前端真的是体力活,不光要写页面,页面代码贼多多,js还费头脑)
除了前端的页面对数据要进行筛选和过滤,为了保障安全性问题,后端也需要对数据进行过滤,再把数据写入数据库,所以,在views.py文件下写一个注册操作的函数
首先是对页面输入内容的要求
Django之爱鲜蜂项目开发 day04
前端传过来的数据,重要部分需加密,将密码进行加密后保存到数据库
Django之爱鲜蜂项目开发 day04
头像
Django之爱鲜蜂项目开发 day04
注册成功后返回到mine页面
然后去写一下路由
Django之爱鲜蜂项目开发 day04
根据url的反向解析,需要在register.html页面加上参数
Django之爱鲜蜂项目开发 day04
注册的时候,还要考虑到用户名是否有重复的问题,所以,在views.py文件下再写一个视图函数
Django之爱鲜蜂项目开发 day04
这个视图函数是返回给前端的,js根据这个视图函数进行判断
Django之爱鲜蜂项目开发 day04
当然,要给这个视图函数配置一下路由
Django之爱鲜蜂项目开发 day04
看一下效果,根据输入会有相应的提示
Django之爱鲜蜂项目开发 day04
注册成功后回转到mine页面,可以查看一下数据库
Django之爱鲜蜂项目开发 day04

登陆

写一下登陆页面
Django之爱鲜蜂项目开发 day04
同样,对登陆需要进行一些操作,在views.py文件下写一下视图函数
Django之爱鲜蜂项目开发 day04
这里验证密码有两种方式,可以从对前端传回的密码进行操作后与数据库里保存的进行对比,还有一种方式是js方式
Django之爱鲜蜂项目开发 day04
然后去配置一下路由
Django之爱鲜蜂项目开发 day04
同时,在login.html上加上
Django之爱鲜蜂项目开发 day04
再修改一下mine的视图函数
Django之爱鲜蜂项目开发 day04
这里再修改一下mine页面,当登陆了之后显示用户名
Django之爱鲜蜂项目开发 day04
看一下效果
Django之爱鲜蜂项目开发 day04
登陆成功后跳转到mine页面

注销

先写一下视图函数
Django之爱鲜蜂项目开发 day04
然后配置一下路由
Django之爱鲜蜂项目开发 day04
在mine页面上加上注销的超链接
Django之爱鲜蜂项目开发 day04

此页面可能js样式比较难

页面还未完成,只是完成了基本的页面和注册,登陆,注销这些操作,其他的功能模块还未处理

文件链接
链接:https://pan.baidu.com/s/1mG4bvC3HgTMzEhdefKnZJg
提取码:0ggn

相关文章: