手把手教你做測開:開發Web平臺之使用者資訊
一. 回顧
在第一篇文章《手把手教你做測開:開發Web平臺之環境準備》中,我們做了以下幾件事情: 加我VX:atstudy-js 回覆“測試”,進入 自動化測試學習交流群~~
-
搭建了前後端專案工程
-
安裝了前後端的依賴
-
配置並啟動了前後端服務
-
建立了後端子應用
-
將Rest Framework和資料庫連線資訊配置進後端的配置檔案中
在上篇文章中,我們做了以下幾件事情:
-
後端登入認證的實現
-
前後端服務關聯配置
-
前端登入邏輯的梳理
-
前端登入邏輯的修改
-
跨域問題的解決
接下來我們完成以下功能的實現:
-
前端使用者資訊邏輯的梳理
-
後端開發獲取使用者資訊介面
-
後端自定義ModelViewSet
-
前端使用者資訊邏輯的修改
-
vuex狀態管理
二. 前端使用者資訊邏輯的梳理
(一). permission.js
回到permission.js檔案,可以看到這裡的邏輯是,如果在有token的情況下,如果訪問的頁面非登入頁,這時候會從vuex中獲取使用者名稱,如果使用者名稱存在,就跳轉到該頁,如果使用者名稱不存在,表示是第一次登入,需要透過store目錄下的user.js檔案中的getInfo方法設定使用者資訊。
(二). store
繼續切換到store/modules/user.js檔案中,我們透過後端定義獲取使用者資訊介面,因為已經在headers中帶入了token,所以不需要將state.token作為引數傳給getInfo方法,這裡的state.token將來一定要修改。
另外,可以看到const { name, avatar } = data就是從響應結果裡獲取name、avatar(使用者頭像),commit是分別設定name、avatar到vuex中。響應結果裡一定要有name和avatar欄位,那有可能這兩個欄位並不一定在data物件中,因此這塊可能要做修改。這是最佳化點一。
(三). api
在上述方法中點選下面那個getInfo,可以跳轉到api目錄下的user.js檔案中,這個getInfo方法的url是前端自己定義的,到時候需要改成後端介面的路徑,另外還要將url路徑中的token去掉,這是最佳化點二。
(四).總結
綜上所述,我們前端需要修改的地方有:
-
將modules目錄下的users.js檔案中的getInfo方法傳入state.token引數取消掉,將commit時候的傳參可能要修改下
-
將api目錄下的user.js檔案中的getInfo方法,其url替換為後端介面路徑,其token傳參取消掉
三. 後端開發獲取使用者資訊介面
(一). 使用者資訊模型類
在 userauth 子應用下的 models.py 檔案中定義 UserProfile 模型類。這裡需要將UserProfile 和 User 類一對一關聯起來,一個使用者對應一條個人資訊,一條個人資訊對應著一個使用者。這裡定義的 user 欄位將來生成的表中展示為 user_id,對應的是 user 表中的id。
from django.db import models
from django.contrib.auth.models import User
class UserProfile(models.Model):
#UserProfile 類和 User 類是一對一關係,即一個 User 對應著一個人資訊,一個人資訊對應著一個 User
user = models.OneToOneField(User, related_name='profile')
avatar = models.CharField(max_length=100, null=True, blank=True, verbose_name="avatar")
role = models.CharField(max_length=10, default="editor", verbose_name="role")
introduction = models.TextField(max_length=500, null=True, blank=True, verbose_name="introduction")
class Meta:
verbose_name = "user_profile" verbose_name_plural = verbose_name
def __str__(self):
return "{}".format(self.user.__str__())
(二). 自定義 ModelViewSet
為什麼要自定義 ModelViewSet 而不直接繼承 ModelViewSet,因為 ModelViewSet 返回的響應結果沒有 code(CURD 中有部分沒有),沒有 message,只有 data。因此需要將其改造成我們想要的形式。
在後端專案工程 backend 目錄下建立一個 utils 目錄,在 utils 目錄下建立一個customized_drf.py 檔案,這裡設定了許可權,定義了響應資料的格式和分頁。
from collections import OrderedDict
import six
from django.db.models import Count, Sum
from rest_framework.response import Response
from rest_framework.serializers import Serializer
from rest_framework.pagination import PageNumberPagination
from rest_framework.viewsets import ModelViewSet, GenericViewSet
from rest_framework import filters
from django_filters.rest_framework import DjangoFilterBackend
from rest_framework.permissions import IsAuthenticated, AllowAny
# 定製化響應資料格式
class JsonResponse(Response): """An HttpResponse that allows its data to be rendered into arbitrary media types.""" def __init__(self, data=None, code=200, message='ok', success='true', status=None, template_name=None, headers=None, exception=False, content_type=None): """ Alters the init arguments slightly. For example, drop 'template_name', and instead use 'data'. Setting 'renderer' and 'media_type' will typically be deferred, For example being set automatically by the `APIView`. """
super(Response, self).__init__(None, status=status)
if isinstance(data, Serializer):
message = (
'You passed a Serializer instance as data, but '
'probably meant to pass serialized `.data` or '
'`.error`. representation.' )
raise AssertionError(message)
self.data = {"code": code, "message": message, "success": success, "data": data}
self.template_name = template_name
self.exception = exception
self.content_type = content_type
if headers:
for name, value in six.iteritems(headers):
self[name] = value
最後:
可以到我的個人V:atstudy-js,可以免費領取一份10G軟體測試工程師面試寶典文件資料。以及相對應的影片學習教程免費分享!其中包括了有基礎知識、Linux必備、Mysql資料庫、抓包工具、介面測試工具、測試進階-Python程式設計、Web自動化測試、APP自動化測試、介面自動化測試、測試高階持續整合、測試架構開發測試框架、效能測試等。
這些測試資料,對於做【軟體測試】的朋友來說應該是最全面最完整的備戰倉庫,這個倉庫也陪伴我走過了最艱難的路程,希望也能幫助到你!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31407649/viewspace-2912483/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 手把手教你做測開
- 測試開發基礎,教你做一個完整功能的Web平臺之登入認證Web
- 測試開發基礎,教你做一個完整功能的Web平臺之環境準備Web
- Web快速開發平臺個人之淺見Web
- 手把手教你做遊戲玩法開發遊戲
- Web快速開發平臺,基於二次開發平臺Web
- 力軟快速開發平臺:方便快捷的Web開發平臺Web
- 綠茵面家平臺開發(開發平臺)
- 測試平臺開發教程【提測平臺】階段總結(三)
- 00-跨平臺開發之FlutterFlutter
- 手把手教你基於 JMeter 開發一個自動化測試平臺 (2)JMeter
- 手把手教你基於 JMeter 開發一個自動化測試平臺 (1)JMeter
- 純前端開發案例:用 SpreadJS 搭建資訊系統軟體開發平臺前端JS
- 低程式碼開發平臺助力企業資訊化
- 在海之舟大資料平臺上搭建mysql+php開發平臺大資料MySqlPHP
- 測試開發【提測平臺】分享8 - 平臺規劃和需求分析
- 騰訊釋出前端跨平臺(iOS,Android和Web)的開發框架Hippy前端iOSAndroidWeb框架
- 如何開發直播平臺,直播平臺開發需要CDN嗎
- 黨委組織部資訊工作管理平臺開發,幹部管理平臺建設
- 淺析北京賽車平臺開發app搭建 Web APP開發技巧彙總APPWeb
- PHP微信公眾平臺開發視訊PHP
- 開源測試平臺--MeterSphere
- 平臺資產開發數字資產交易系統開發公司
- 短視訊軟體開發,當使用者選擇免打擾時,平臺自行攔截平臺內部訊息
- 數字資產幣幣交易平臺開發區塊鏈合約交易平臺開發區塊鏈
- ThinkPHP 3.2.2開發微信多使用者管理平臺PHP
- flutter跨平臺開發之App升級方案FlutterAPP
- 【提測平臺】測試平臺開發練手專案原始碼和教程彙總原始碼
- 大資料平臺開發公司有哪些?大資料
- 移動開發即服務,騰訊雲移動開發平臺打造開發新模式移動開發模式
- teprunner測試平臺用例前置模組開發
- 智慧公安情報資訊化作戰平臺開發,情指行一體化平臺建設
- TP開發的視訊課程學習平臺
- 快速開發平臺--企業資訊化的絕佳解決方案
- 低程式碼開發平臺 助力教育行業資訊化建設行業
- 打破資訊孤島:LeaRun視覺化低程式碼開發平臺視覺化
- AiDex Sharp快速開發平臺開源AIIDE
- 微信公眾平臺開發之店鋪類