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

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,WxUsers

class UserProfileModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserProfile
        fields="__all__"

class WxUsersModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = WxUsers
        fields="__all__"

class WxUsersAreaModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = WxUsers
        fields = ('gender', 'city', 'longitude', 'latitude')

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

from rest_framework import serializers
from .models import Wish,News,Images

class WishModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Wish
        fields="__all__"

class NewsModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = News
        fields="__all__"

class ImagesModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Images
        fields="__all__"

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

from rest_framework import serializers
from .models import Message,Pick,Share,Notice

class MessageModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Message
        fields="__all__"

class PickModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Pick
        fields="__all__"

class ShareModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Share
        fields="__all__"

class NoticeModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Notice
        fields="__all__"

3.API开发前期准备

1.在settings中注释掉csrf验证，保证post请求不会出现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中注册：

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',
    'corsheaders'
]

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项目进行以备调试使用

1.前端环境配置

1.安装Node.js环境

2.安装cnpm

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

3.搭建vue开发环境

cnpm install --global vue-cli

2.PC前端项目

1.新建vue项目：

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

Ctrl+c键，退出运行状态

2.安装axios

cnpm install axios

3.搭建小程序前端项目

1.新建mpvue项目

vue init mpvue/mpvue-quickstart test1
回车

填入appid

一直回车

注意：项目不能新建在移动硬盘或者优盘等移动设备目录下，不然会报错：

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

2.然后按照提示，安装依赖

cd test1
cnpm installnpm 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>

效果图

Ctrl+c键，退出运行状态

4.注释掉项目目录下的 build目录下的 webpack.base.conf.js 的一些代码：

{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
}，

5.勾选微信开发者工具的一些配置