django + vue simple configuration login registration and paging and instantiation

django basic cross-domain knowledge

setting setting


ALLOWED_HOSTS = ['*']


INSTALLED_APPS = [
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'app',
  'corsheaders',
  'rest_framework',MIDDLEWARE = [   'django.middleware.security.SecurityMiddleware',   'django.contrib.sessions.middleware.SessionMiddleware',   'corsheaders.middleware.CorsMiddleware',#添加这一行   'django.middleware.common.CommonMiddleware',   # 'django.middleware.csrf.CsrfViewMiddleware ', # Comment this line   ' django.contrib.auth.middleware.AuthenticationMiddleware ',
   
   







  'django.contrib.messages.middleware.MessageMiddleware',
  'django.middleware.clickjacking.XFrameOptionsMiddleware',
] # ImageField will arrive automatically upload files through the file location MEDIA_ROOT = os.path.join (BASE_DIR, 'media ') # who can request to allow you and request the way CORS_ORIGIN_ALLOW_ALL = True # to true everyone could visit me








Main routing configuration URL

Guide package


from django.contrib import admin
from django.urls import path,include

Configuring Routing


= the urlpatterns [
  path ( 'ADMIN /', admin.site.urls),
  path ( 'App /', the include ( 'app.urls', namespace = 'App')), for the sub-application App # Name
]

Sub routing configuration


from django.contrib import admin
from django.urls import path
from . import views


app_name = 'myapp'

urlpatterns = [
  path('index/',views.Index.as_view(),name='index'),
  path('register/',views.Register.as_view(),name='register'),
  path('login/',views.Login.as_view(),name='login'),
  path('details/',views.Details.as_view(),name='details'),
  path('edit/',views.Edit.as_view(),name='edit'),
  path('addgoods/',views.Addgood.as_view(),name='addgoods'),

]

Set admin.py


from django.contrib import admin
from . import models
# Register your models here.
admin.site.register(models.User)#user为表名
admin.site.register(models.Goods)#goods为表名

Serialization configuration

The first

New app myserializers.py at the sub-application path

Says:


from rest_framework import serializers

from . import models

class UserSerializers(serializers.ModelSerializer):
  class Meta:
      models = models.User
      fields = '__all__'


#user,goods为表名

class GoodsSerializers(serializers.ModelSerializer):
  class Meta:
      model = models.Goods
      fields = '__all__'

The second

At the beginning of views.py file with:


# Product Table instantiated
class Goodsser (serializers.Serializer): # instantiated Field built
  ID = serializers.IntegerField ()
  title = serializers.CharField (MAX_LENGTH = 30)
  . Price = serializers.DecimalField (max_digits =. 5, decimal_places = 2)
  = serializers.ImageField IMG ()
  # Userser UID = () # instantiated user class Userser (serializers.Serializer):   ID = serializers.IntegerField (READ_ONLY = True)   name = serializers.CharField (MAX_LENGTH = 30)   pwd = serializers .IntegerField ()   goods_set = Goodsser (MANY = True)   # forward lookup reverse lookup if it is added Goods_set = Goodsser (many = Ture) and two instances of the above positions to be exchanged user instantiation








   
   

views.py file used in package


from django.shortcuts import render,redirect
from django.http import HttpRequest,JsonResponse
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import serializers
from django.views import View
from . import models,myserializers
import os
import uuid
import time

vue page


<template>
  <div>

      <nav class="pagination-container">
  <ul class="pagination">
       
      <li :class="{'disabled' :p == 1}">
          <a @click="add_p(0)">上一页</a>
      </li>
       
      <li class="active">
          <a href="/courses/?course_type=all&amp;tag=all&amp;fee=all&amp;page=1">1</a>
      </li>    
       
      <li :class="{'disabled' :p == total_pag.total_pag}">
          <a @click="add_p(1)" >下一页</a>
      </li>
  </ul>
</nav>
  </div>
</template>

<script>
  export default{
      name:'pag',
      data(){
          return{
              P:. 1,
          }
      },
      Mounted () {       },       Methods: {           add_p (type) {               IF (type) {                   IF (this.p == this.total_pag.total_pag) {                       return;                   }                   this.p +. 1 =               the else {}                   IF (this.p ==. 1) {                       return;                   }                   this.p -. 1 =               }               // current page number is transmitted to the parent component of               the let {Data = 'P':} this.p               the this $ EMIT ( '. change_p ', Data);           },



















          mul_p () {
              IF (P ==. 1) {
                  return;
              } the else {
                  this.p - =. 1
              }
          },
      },
      // pass over the parent component receiving variable
      The props: {
          total_pag: {
              type: Object, Object // -> Dictionary
              required: true, // needed           },       }   } </ Script>
               

           

       


diango page

from django.shortcuts import render
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework import serializers
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from . import models


class Index(APIView):
  def get(self,request):
      page_num = request.query_params.get('page_num')
      # get获取不到默认为None

      if not page_num:
          page_num = 1
       
      books = models.Book.objects.all()

      p = Paginator(books, 3)
   
      # ... 3,4 ..5,6 ...
      try:
          books_data = p.get_page(page_num)
      except EmptyPage:
          books_data = p.get_page(1)
      except PageNotAnInteger:
          books_data = p.get_page(1)
       

      book1 = BookSerializer1(instance=books_data,many=True)
      book2 = BookSerializer2(instance=books_data,many=True)

      return Response({
          'data1': book1.data,
          'data2': book2.data,
          'num_pages': p.num_pages,
          'page_range': list(p.page_range),
      })

diango + vue Login Register

Configuring Global axios


import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

import axios from 'axios' //
Vue.prototype.axios = axios
Vue.prototype.HOME = '/app'//app为主路由


/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

 

Take vue ID refresh window

 

Guess you like

Origin www.cnblogs.com/huanghaobing/p/11755188.html