自己做项目的一个记录,重点记录关于后端的部分,少量涉及前端的一些js代码
页面是自己仿某旅游网站做的
前后端分离
后端框架:Django框架
数据库:MySQL
项目页面展示:
一.项目的配置
需要用到django rest framework,在INSTALLED_APPS中先进行配置
配置数据库
对跨域进行配置
二.用户的注册和登录
创建一个新的apps名为users,在里面编写模型
1.用户注册
主要思路
用户注册的思路,当用户在前端输入完基本信息后,需要现在前端通过js进行一次验证(用户名、密码、手机号),验证通过后,通过axios将信息传递到后端,然后通过表单再次进行验证,验证通过后将用户数据保存到数据库当中。
在js中进行检验
监听数据的变化,然后判断是否符合规范,如果不符合,则提示用户
后端表单验证
在后端接收信息,通过表单进行验证
首先对用户名、密码和手机号的格式进行验证
然后通过与数据库中用户表的密码字段进行对比验证手机号是否已经被注册
然后编写注册的视图
通过postman进行接口测试
报错记录
1.authenticate检测不到用户,返回的是一直是None
解决方案:用户的模型继承AbstractBaseUser, PermissionsMixin
并且在创建用户的时候使用User.createuser()而不是User.create()
DRF框架的JWT认证配置过程
在用户完成注册后,我们选择让用户直接登录进入主页
值得注意的是,我们需要采用DRF框架的JWT认证
pip install djangorestframework-simplejwt
在settings中进行下面的配置
user = authenticate(username=username, password=password)
refresh = RefreshToken.for_user(user)
access_token = str(refresh.access_token)
refresh_token = str(refresh)
通过上述代码完成生成token的生成
通过postman进行测试查看结果
有了他以后,该如何进行使用呢?
在setting里我们设置了他的过期时间,当有些页面需要有令牌权限才能访问时,就可以用到它了
登录后我们将令牌存在cookie中,在请求一些接口时带上令牌参数,如果一致则允许访问
令牌过期后则无法访问
为了更好的理解,下面会用一个小例子来进行演示记录
注册完我们进入了首页
我们拿获取头像的接口来做一个测试
获取头像的视图如下
我们需要从请求中获取到token,所以我们在js里写axios要带上参数
当令牌没过期时,我们能正常获取到头像数据
当令牌过期的时候,可以看到头像无法被获取到
2.用户登录
登录页面
在后端同样写一个表单来进行检验
3.用户退出
清除设置的cookie并返回登录界面即可
三.酒店预订功能
主要思路
前端相关部分不做赘述
首先创建酒店模型和房间模型
这里可选的城市我也是从数据库拿的,所以我还有个城市模型
这里需要做一个酒店搜索的功能
根据用户输入的目的地和酒店星级为条件进行搜索
注意:这里我没有把时间和房间作为搜索条件
首先获取到目的地和酒店级别
如果有接收到目的地信息,则在数据库中匹配符合city字段的酒店
如果酒店星级这个条件存在且不是任意级别,则把酒店星级也变为搜索条件
这个时候,我们可以通过页面静态化的方式来处理具体的酒店内容
先写好一份模板文件
然后将数据库里的内容依次渲染出来并生成模板文件
效果如图所示,下划选择酒店房间
点击对应的房间后要获取详细的信息,效果如下
需要有酒店的信息,也要有该房间的信息,后端视图如下
将酒店和房间的数据一起返回到前端即可
在该页面填写数据后,用户点击支付,将订单数据保存到数据库中
这里省略了支付过程,直接支付成功
通过jwt认证实现页面拦截
回过头看还有能够优化的地方,比如前面提到的JWT认证
我们在获取头像那里试验过一段jwt的认证,我们可以把那部分的检验代码删掉,因为在那里使用并不合适
在进入房间详细界面的时候,是需要填写住客信息的,显然这里必须要用户登录再进来
所以我们可以在这个接口写上认证
当返回401后,我们可以在js中进行拦截
通过这样让强制让用户返回登录界面进行登录
四.个人中心
完成订单以后,用户需要能在个人中心里看到自己的个人信息和已有订单
1.个人信息
前端部分借助element-ui实现
写一个类视图,get方法用户在这个页面获取个人信息数据,post方法用于修改信息
获取个人信息
将用户基本信息返回给前端
修改个人信息
前端返回这样的信息
{'email': '278273822@qq.com', 'mobile': '18138443399', 'bio': '你好,我叫雨宫'}
后端接收后直接利用drf的功能完成用户信息的修改
2.查看酒店订单
用户需要能够查看自己的订单
后端视图代码如下
先对用户登录状态进行验证,然后把信息返回给前端
使用 paginator.paginate_queryset()
方法来对查询集 orders
进行分页。这将返回当前页的数据。
将分页后的数据 result_page
传递给序列化器 HotelOrderModelSerializers
进行序列化。
因为订单里不仅要有房间信息,还要有酒店信息
所以返回的时候再添加上额外的酒店信息后返回
五.机票预约功能
预约机票
首先我分别创建了三个模型:航空公司、飞机名和航班
机票预定主页面
用户输入出发城市、目的城市和出发时间以后,根据这三个条件从数据库中进行筛选
然后再根据航班获取到航空公司和飞机的信息,补充上去后一起返回给前端
之后我们要进入航班的详情页面,我们在视图里加上
然后配置一下路由,进行测试,结果如下
我们在展示的时候除了要展示航班的字段,也要展示飞机和公司的一些字段
所以改写一下retrieve方法添加新的字段
进行测试,能够看到新添加的字段
在前端部分提供部分让用户填写
注意:我这里表单内容比较简便,没有做多人选择和位置选择等功能
创建一个表用来储存飞机票的预约信息
传送到后端进行接收,首先也是进行用户验证
然后接收数据并保存
我的机票预约订单
然后在个人中心里也把【我的机票订单】部分也加上
后端视图代码如下
先进行用户验证
做好分页处理
有一些需要额外显示的字段要加上去
因为在航班预约这个表里只有航班id,要通过航班id来找到飞机名字之类的字段
然后返回给前端
需要注意的是我这里做的很不严谨
比如我没有做飞机票的订单号(前面的酒店订单做了),飞机位置的选择之类的我也没做
这里可以再进行优化,不过暂时我也懒得动这块了