當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

超越村后端开发（3：安装djangorestframework+序列化+API开发前期准备）

發(fā)布時間：2025/3/16 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了超越村后端开发（3：安装djangorestframework+序列化+API开发前期准备）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.安裝djangorestframework

1.安裝djangorestframework及其依賴包markdown、django-filter。

pip install djangorestframework markdown django-filter

2.在settings中注冊，如下：

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','users.apps.UsersConfig','wish.apps.WishConfig','user_operation.apps.UserOperationConfig','crispy_forms','xadmin','rest_framework' ]

2.序列化

1.在apps/users目錄下新建serializers.py：

from rest_framework import serializers from .models import UserProfile,WxUsersclass UserProfileModelSerializer(serializers.ModelSerializer):class Meta:model = UserProfilefields="__all__"class WxUsersModelSerializer(serializers.ModelSerializer):class Meta:model = WxUsersfields="__all__"class WxUsersAreaModelSerializer(serializers.ModelSerializer):class Meta:model = WxUsersfields = ('gender', 'city', 'longitude', 'latitude') View Code

2.在apps/wish目錄下新建serializers.py：

from rest_framework import serializers from .models import Wish,News,Imagesclass WishModelSerializer(serializers.ModelSerializer):class Meta:model = Wishfields="__all__"class NewsModelSerializer(serializers.ModelSerializer):class Meta:model = Newsfields="__all__"class ImagesModelSerializer(serializers.ModelSerializer):class Meta:model = Imagesfields="__all__" View Code

3.在apps/user_operation目錄下新建serializers.py：

from rest_framework import serializers from .models import Message,Pick,Share,Noticeclass MessageModelSerializer(serializers.ModelSerializer):class Meta:model = Messagefields="__all__"class PickModelSerializer(serializers.ModelSerializer):class Meta:model = Pickfields="__all__"class ShareModelSerializer(serializers.ModelSerializer):class Meta:model = Sharefields="__all__"class NoticeModelSerializer(serializers.ModelSerializer):class Meta:model = Noticefields="__all__" View Code

3.API開發(fā)前期準備

1.在settings中注釋掉csrf驗證，保證post請求不會出現(xiàn)403

MIDDLEWARE = ['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware',# 'django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware', ]

2.跨域問題解決

1.安裝django-cors-headers：

pip install django-cors-headers

2.在settings中注冊：

3.在settings中添加相關中間件：

MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware', # 放到中間件頂部'django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware',# 'django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware', ]

4.在settings.py中新增配置項：

CORS_ORIGIN_ALLOW_ALL = True

3.建立前端vue項目進行以備調(diào)試使用

1.前端環(huán)境配置

1.安裝Node.js環(huán)境

2.安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.搭建vue開發(fā)環(huán)境

cnpm install --global vue-cli

2.PC前端項目

1.新建vue項目：

vue init webpack-simple test 一直回車 cd test cnpm install npm run dev

Ctrl+c鍵，退出運行狀態(tài)

2.安裝axios

cnpm install axios

3.搭建小程序前端項目

1.新建mpvue項目

vue init mpvue/mpvue-quickstart test1 回車填入appid一直回車

注意：項目不能新建在移動硬盤或者優(yōu)盤等移動設備目錄下，不然會報錯：

Install fail! Error: EISDIR: illegal operation on a directory, symlink '......

2.然后按照提示，安裝依賴

cd test1 cnpm install
npm run dev

效果圖

?3.對test1/src/index.vue做初始化：

<template><div>{{title}}</div> </template> <script> export default {data () {return {title: 'hello world'}},methods: {},created () {} } </script> <style scoped> </style>

效果圖