手把手教你做測開：開發Web平臺之使用者資訊

一. 回顧

在第一篇文章《手把手教你做測開：開發Web平臺之環境準備》中，我們做了以下幾件事情： 加我VX：atstudy-js 回覆“測試”，進入 自動化測試學習交流群~~

1. 搭建了前後端專案工程

2. 安裝了前後端的依賴

3. 配置並啟動了前後端服務

4. 建立了後端子應用

5. 將Rest Framework和資料庫連線資訊配置進後端的配置檔案中

在上篇文章中，我們做了以下幾件事情：

1. 後端登入認證的實現

2. 前後端服務關聯配置

3. 前端登入邏輯的梳理

4. 前端登入邏輯的修改

5. 跨域問題的解決

接下來我們完成以下功能的實現：

1. 前端使用者資訊邏輯的梳理

2. 後端開發獲取使用者資訊介面

3. 後端自定義ModelViewSet

4. 前端使用者資訊邏輯的修改

5. 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去掉，這是最佳化點二。

(四).總結

綜上所述，我們前端需要修改的地方有：

1. 將modules目錄下的users.js檔案中的getInfo方法傳入state.token引數取消掉，將commit時候的傳參可能要修改下

2. 將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自動化測試、介面自動化測試、測試高階持續整合、測試架構開發測試框架、效能測試等。

這些測試資料，對於做【軟體測試】的朋友來說應該是最全面最完整的備戰倉庫，這個倉庫也陪伴我走過了最艱難的路程，希望也能幫助到你！