Vue 和 Django 前后端分离实践 （注册功能）
1. Vue 和 Django 前后端分离实践 （注册功能）[*] 注册页面
https://img-blog.csdnimg.cn/781c70ebdcf5401196c6359ea7a6493d.png
[*] 应用层
https://img-blog.csdnimg.cn/00abd151ab744ff79f7e35557830baf0.png
[*] 控制层
https://img-blog.csdnimg.cn/018aae83aa174c8fbb5246ec1c173977.png
[*] 数据层（用户添加）
https://img-blog.csdnimg.cn/713bdaf82c8340459e6d75d7b8897bd4.png
[*] 数据库（是否添加至数据库）
https://img-blog.csdnimg.cn/604537ca65014543a6f788f9778320f6.png
2. 注册列表获取数据库数据
[*]后台接口（获取用户列表）
https://img-blog.csdnimg.cn/04a896e013254efd9a875e03d3fc1cd8.png
[*]前端显示
https://img-blog.csdnimg.cn/1401a2945be2474da8bdd4c5466c4173.png
3. 问题
3.1 https；http协议问题，
[*]安装模块 django-sslserver
pip install django-sslserver
[*] 在setting.py 文件添加两处配置
https://img-blog.csdnimg.cn/80631baac8e843cc84a9ebbd6db139bd.png
https://img-blog.csdnimg.cn/773b03b40a76477da38d6a169113d1dd.png
[*] 使用注意 SECURE_SSL_REDIRECT
[*]当SECURE_SSL_REDIRECT = False时，http请求无响应，https请求能正确访问。
[*]当SECURE_SSL_REDIRECT = True时，http请求会重 定向https，此时django支持https，可正确访问。
[*] 生成证书命令
python manage.py runsslserver
[*]运行命令后出现如此信息
Using SSL certificate: /Users/xx/Desktop/Django-test/venv/lib/python3.10/site-packages/sslserver/certs/development.crt
Using SSL key: /Users/xx/Desktop/Django-test/venv/lib/python3.10/site-packages/sslserver/certs/development.key
–cert 指定使用的证书
–key 指定使用的密钥
[*]再次启动Django
python manage.py runsslserver --certificate /Users/cqa/Desktop/Django-test/venv/lib/python3.10/site-packages/sslserver/certs/development.crt --key /Users/cqa/Desktop/Django-test/venv/lib/python3.10/site-packages/sslserver/certs/development.key
3.2 crsf认证问题
[*]目前的方法是直接注释掉 crsf部分的配置
https://img-blog.csdnimg.cn/b965ddb6b6d142d1b4aa7b212a863a7c.png
3.3 Django获取数据库 的内容 的类型问题
[*]背景与目的
原本想使用Django 从数据库捞取 用户列表的所有数据，并返回给前端
[*]使用Django 获取mysql数据时，是这样子的
https://img-blog.csdnimg.cn/69f7cd36d1c84ec48ff24d63959f2c00.png
[*]需要注意reg 变量的数据类型问题，Django获取mysql后返回的是QuerySet类型，可能需要将其转为json格式或者需要的其他类型数据，
[*]若转为json ，有两种办法
[*]serializers.serialize(“json”,QuerySet）
[*]json.dumps(QuerySet)
3.4 Django本地运行可以，但无法通过外部访问
[*]配置setting.py,允许人意地址访问
https://img-blog.csdnimg.cn/eb8d86ae8711418899de386b19d7ddd6.png
[*]重新运行Django ，运行命令时加入 0.0.0.0:8000
https://img-blog.csdnimg.cn/d61b4aa986424b3b8d85ceffe22426df.png
3.5 Django 接口数据正常获取，但vue前端 table数据无法正常显示
[*]造成问题的原因是因为 this指向问题，funtion普通函数中this指向window： 所以如果需要在function函数中使用this对象，需要事先把this对象赋值给其他变量
https://img-blog.csdnimg.cn/aaf5b1c3dc324e00a8789a4bca48b10a.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]