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.勾选微信开发者工具的一些配置