Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)

阅读原文时间：2021年08月31日阅读：1

开发系统: windows

后端IDE: PyCharm

前端IDE: VSCode****

数据库: msyql,navicat

编程语言: python3.7 (Windows x86-64 executable installer)

虚拟环境: virtualenvwrapper

开发框架: Django 2.2

要用的在几个网站:

Vue 2.x: https://cn.vuejs.org/
Element 2.13: https://element.eleme.cn/2.13/#/zh-CN
Axios: http://www.axios-js.com/
Django 2.2: "https://docs.djangoproject.com/zh-hans/2.2/

Django 2.2通病===>访问admin出现问题:

报错:UnicodeDecodeError: 'gbk' codec can't decode byte 0xa6 in position 9737: illegal multibyte sequence

解决方法:https://www.cnblogs.com/djtang/p/10194811.html

1.目录结构

2.settingd.py

"""
Django settings for A01CABJ project.

Generated by 'django-admin startproject' using Django 2.2.

For more information on this file, see
https://docs.djangoproject.com/en/2.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.2/ref/settings/
"""

import os
import sys

Build paths inside the project like this: os.path.join(BASE_DIR, …)

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
sys.path.insert(0, os.path.join(BASE_DIR, 'APPS')) # 把APPS作为app的搜索路经,APPS包文件
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps')) # 把extra_apps作为第三方软件的搜索路经,包文件
MEDIA_ROOT = os.path.join(BASE_DIR, "media").replace('\\', '/') # media即为图片上传的根路径,所有上传图片自动存储的到media文件下
MEDIA_URL = "/media/" # 这个会自动加在FileField的upload_to的前面

Quick-start development settings - unsuitable for production

See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/

SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY = 'a#(t+hfi!f76ha9bb#jb%!hn+^cqn5m-glyn=k)eqv-h_fm2u9'

SECURITY WARNING: don't run with debug turned on in production!

DEBUG = True

ALLOWED_HOSTS = [] # 可以访问的ip,['*']表示所有都可以访问

Application definition

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth', # admin依赖
'django.contrib.contenttypes', # admin依赖
'django.contrib.sessions', # admin依赖
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders', # 跨域设置4-(1-2):按装,注册跨域包(django-cors-headers),中间件中注册
'A001qyyh.apps.A001QyyhConfig', # 企业用户
]

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 跨域设置4-3:跨域中间件,要放到csrf中间件前面
'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-4:添加跨域设置

CORS_ORIGIN_ALLOW_ALL = True

ROOT_URLCONF = 'A01CABJ.urls'

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'django.template.context_processors.media', # 将media全局变量注入到前端页面中,可以直接引用
],
},
},
]

WSGI_APPLICATION = 'A01CABJ.wsgi.application'

Database

https://docs.djangoproject.com/en/2.2/ref/settings/#databases

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'a01cabj',
'HOST': '127.0.0.1',
'PORT': '3306',
'USER': 'root',
'PASSWORD': '123456'
}
}

Password validation

https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
{ # 用户属性相似性校验器,你的密码不能与你的其他个人信息太相似
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{ # 最小值,你的密码必须包含至少 8 个字符。
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{ # 通用密码验证器,你的密码不能是大家都爱用的常见密码。
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{ # 数字密码验证器,你的密码不能全部为数字。
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]

Internationalization

https://docs.djangoproject.com/en/2.2/topics/i18n/

LANGUAGE_CODE = 'zh-hans' # 设置admin中显示中文

TIME_ZONE = 'Asia/Shanghai' # 时区设置

USE_I18N = True

USE_L10N = True

USE_TZ = False # 使用本地时间设置

Static files (CSS, JavaScript, Images)

https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'

配置django认证系统使用的模型类AbstractUse,必需配置 AUTH_USER_MODEL = "APP名.模型类名"

AUTH_USER_MODEL = "A001qyxx.UserProfile"

3.models.py

# 导包规范-1.Python标准模块

导包规范-2.第三方模块

from django.db import models
from django.contrib.auth.models import AbstractUser # AbstractUser继承原用django中的用户原有字段再扩展

导包规范-3.自已的模块

from db.base_model import BaseModel # 模型抽象基类

登录系统用户信息

class UserProfile(AbstractUser, BaseModel):
# 必需在settings中设定,配置django认证系统使用的模型类AbstractUse,必需配置 AUTH_USER_MODEL= "APP名.模型类名"
# AbstractUser中已有字段:
# id(主键字段)
# password(密码)
# last_login(最后登录时间)
# is_superuser(是否超级用户)
# username(用户名,不要改动)
# first_name(第一次用户名)
# last_name(最后一次用户名)
# email(邮箱)
# is_staff(是否职员)
# is_active(是否激活)
# date_joined(加入时间)
number = models.CharField(verbose_name='编号', max_length=16, unique=True, null=True, help_text='保存时自动生成') # 不重复,自动生成
real_name = models.CharField(verbose_name='真实姓名', max_length=16, null=True) # 必填,可重复
gender = models.SmallIntegerField(verbose_name='性别', blank=True, default=1, choices=((1, '男'), (2, '女'))) # 可填
mobile = models.CharField(verbose_name='手机号码', max_length=11, unique=True, null=True) # 必填,唯一,
email = models.EmailField(verbose_name='电子邮箱', unique=True, null=True, help_text='不能有中文!') # 必填,唯一,
company = models.ForeignKey('Company', on_delete=models.PROTECT, null=True, related_name='userProfile_company',
verbose_name='公司') # 当前表名+关系表名

class Meta:  
    verbose\_name = '登录用户信息'  
    verbose\_name\_plural = verbose\_name

# 控制对象输出内容  
def \_\_str\_\_(self):  # 必需有值的字段,当前对象的描写  
    if self.real\_name:  
        return self.real\_name  
    else:  
        return self.username  # 返回此对象的用户名

部门信息

class Department(BaseModel):
number = models.CharField(verbose_name='编码', max_length=16, unique=True, help_text='保存时自动生成') # 必填,唯一.
department = models.CharField(verbose_name='部门', max_length=24, unique=True) # 必填,唯一.
company = models.ForeignKey('Company', on_delete=models.PROTECT, null=True, related_name='department_company',
verbose_name='公司') # 当前表名+关系表名

class Meta:  
    verbose\_name = '公司部门信息'  
    verbose\_name\_plural = verbose\_name

def \_\_str\_\_(self):  
    return self.department

员工信息(非登录人员表)

class InternalStaff(BaseModel):
number = models.CharField(verbose_name='编码', max_length=16, unique=True, help_text='保存时自动生成') # 不重复,自动生成
real_name = models.CharField(verbose_name='真实姓名', max_length=16, ) # 必填,可重复
gender = models.SmallIntegerField(verbose_name='性别', blank=True, default=1, choices=((1, '男'), (2, '女'))) # 可填
mobile = models.CharField(verbose_name='手机号码', max_length=11, unique=True, null=True) # 必填,唯一,
email = models.EmailField(verbose_name='电子邮箱', unique=True, null=True, help_text='不能有中文!') # 必填,唯一,
department = models.ForeignKey('Department', on_delete=models.PROTECT, null=True, related_name='internalStaff_department',
verbose_name='部门名称', ) # 当前表名+关系表名

class Meta:  
    verbose\_name = '公司员工信息'  
    verbose\_name\_plural = verbose\_name

# 控制对象输出内容  
def \_\_str\_\_(self):  # 必需有值的字段,当前对象的描写  
    return self.real\_name  # 返回此对象的用户名

订单联系人信息表(非登录人员表)

class Contacts(BaseModel):
number = models.CharField(verbose_name='编码', max_length=16, unique=True, help_text='保存时自动生成') # 不重复,自动生成
real_name = models.CharField(verbose_name='真实姓名', max_length=16, ) # 必填,可重复
email = models.EmailField(verbose_name='电子邮箱', unique=True, null=True, help_text='不能有中文!') # 必填,唯一,
# models.PROTECT,返回1451错误,admin.py中重写方法 delete_view 后,更改为删除提示页面
# related_name='人员_公司'就是通过此表UserProfile查公司企业信息表Company,直接就是:全部公司信息 = Company.人员公司.all()
company = models.ForeignKey('Company', on_delete=models.PROTECT, null=True, related_name='contacts_company',
verbose_name='公司名称', ) # 当前表名+关系表名
telephone = models.ForeignKey('Telephone', on_delete=models.PROTECT, null=True, related_name='contacts_telephone',
verbose_name='电话', ) # 当前表名+关系表名

class Meta:  
    verbose\_name = '联系人信息'  
    verbose\_name\_plural = verbose\_name

# 控制对象输出内容  
def \_\_str\_\_(self):  # 必需有值的字段,当前对象的描写  
    return self.real\_name  # 返回此对象的用户名

订单联系人电话信息表(非登录人员表)

class Telephone(BaseModel):
number = models.CharField(verbose_name='编码', max_length=16, unique=True, help_text='保存时自动生成') # 不重复,自动生成
mobile = models.CharField(verbose_name='手机号码', max_length=11, unique=True, null=True) # 必填,唯一,
telephone = models.CharField(verbose_name='座机号码', max_length=48, unique=True, blank=True, null=True) # 可填

class Meta:  
    verbose\_name = '电话信息'  
    verbose\_name\_plural = verbose\_name

# 控制对象输出内容  
def \_\_str\_\_(self):  # 必需有值的字段,当前对象的描写  
    return self.mobile  # 返回此对象的用户名

企业信息表

class Company(BaseModel):
number = models.CharField(verbose_name='编码', max_length=16, unique=True, help_text='保存时自动生成') # 必填,唯一,自动生成
full_name = models.CharField(verbose_name='全称', max_length=64, unique=True, help_text='默认开发票的单位名称') # 必填,唯一.
shorter_form = models.CharField(verbose_name='简称', max_length=32, unique=True,
help_text='重庆长安镖局科技有限公司海南分公司===>简称:长安镖局海南分公司') # 必填,唯一.
# 使用ImageField类型,需要按装图像处理标准库Pillow,default=''相当于blank=True, null=True
logo = models.ImageField(verbose_name='LOGE', max_length=1280, upload_to='logo/%y/%m', null=True, blank=True) # 可填
address = models.CharField(verbose_name='地址', max_length=128, blank=True, null=True) # 可填

class Meta:  
    verbose\_name = '客商公司信息'  
    verbose\_name\_plural = verbose\_name

def \_\_str\_\_(self):  
    return self.shorter\_form

3.A01CABJ 下的 urls.py

"""A01CABJ URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
path('admin/', admin.site.urls),
path('qyyh/', include('A001qyyh.urls')),
]

**4. *A001qyyh 下的 urls.py***

from django.urls import path
from A001qyyh.views import get_users

urlpatterns = [
path('user/', get_users),
]

5. A001qyyh 下的 views.py

from django.http import JsonResponse
from A001qyyh.models import UserProfile

Create your views here.

def get_users(requst):
try:
obj_users = UserProfile.objects.all().values()
users = list(obj_users)
return JsonResponse({'code': 1, 'data': users})
except Exception as e:
return JsonResponse({'code': 0, 'msg': '获取学生信息出现异常,具体错误:' + str(e)})

6.同步数据库,新建超级用户,启动,进入 http://127.0.0.1:8000/qyyh/user/

1.目录结构

2. index.css

html,
body,
#app,
.el-container {
margin: 0px;
padding: 0px;
height: 100%;
/* background-color: rgb(12, 23, 37); */
}

.el-header {
background-color: #B3C0D1;
color: #333;
text-align: left;
line-height: 80px;
font-size: 32px;
}

.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 30px;
}

.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}

.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
/* line-height: 160px; */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}

.el-menu-item-group__title {
height: 0px;
padding: 0px;
}

.el-menu-item,
.el-submenu__title {
text-align: left;
font-size: 16px;
}

3.index.js

new Vue({
el: '#app',
data: {
msg: '长安',
total: 200,
tableData: [],
baseURL: ' http://127.0.0.1:8000/'

},  
mounted() {  
    // 打开页面自动加载数据,生命周期函数  
    this.gteqyyh();  
},  
methods: {  
    // 获取所有用户有信息  
    gteqyyh: function() {  
        // 记录this的地址,下面执行完axios后就不再指向this了  
        let that = this  
        axios  
            .get(that.baseURL + 'qyyh/user/') // .get()是请求的url  
            .then(function(res) {  
                // .then()请求成功后执行的操作函数,res里就是后端返回的所有数据  
                // console.log(res); 打印查看  
                if (res.data.code === 1) {  
                    // 把数据返回给上面tableData: \[\]  
                    that.tableData = res.data.data;  
                    // 同进返回一个提示  
                    that.$message({  
                        message: '数据加载成功!',  
                        type: 'success'  
                    });  
                } else {  
                    that.$message.error(res.data.msg);  
                }

            })  
            .catch(function(err) {  
                // .catch请求失败后执行的操作函数  
                console.log(err)  
            })  
    }  
}

})

4.index.html

长安镖局盟友平台

                        <el-submenu index="1">  
                            <template slot="title">  
                                <i class="el-icon-user"></i>  
                                <span slot="title">企业用户信息</span>  
                            </template>  
                            <el-menu-item-group>  
                                <span slot="title"></span>  
                                <el-menu-item index="1-1">登录用户</el-menu-item>  
                                <el-menu-item index="1-2">部门信息</el-menu-item>  
                                <el-menu-item index="1-3">委托联系人</el-menu-item>  
                            </el-menu-item-group>  
                        </el-submenu>

                        <el-submenu index="2">  
                            <template slot="title">  
                                <i class="el-icon-document"></i>  
                                <span slot="title">定单委托信息</span>  
                            </template>  
                            <el-menu-item-group>  
                                <span slot="title"></span>  
                                <el-menu-item index="2-1">对接定单委托</el-menu-item>  
                                <el-menu-item index="2-2">仓储定单委托</el-menu-item>  
                                <el-menu-item index="2-3">运输定单委托</el-menu-item>  
                            </el-menu-item-group>  
                        </el-submenu>

                        <el-menu-item index="4">  
                            <i class="el-icon-setting"></i>  
                            <span slot="title">导航四</span>  
                        </el-menu-item>  
                    </el-menu>  
                </el-aside>  
                <!-- 下部右则 -->  
                <el-container>  
                    <!-- 中间窗体 -->  
                    <el-main>  
                        <!-- 面包屑 -->  
                        <el-breadcrumb separator-class="el-icon-arrow-right">  
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>  
                            <el-breadcrumb-item>活动管理</el-breadcrumb-item>  
                            <el-breadcrumb-item>活动列表</el-breadcrumb-item>  
                            <el-breadcrumb-item>活动详情</el-breadcrumb-item>  
                        </el-breadcrumb>  
                        <!-- 表单 -->  
                        <el-form :inline=true style="margin-top: 20px;">  
                            <el-row>  
                                <el-col :span="12">  
                                    <el-form-item label="查询 ">  
                                        <el-input placeholder="请输入查询信息 " style="width:330px"></el-input>  
                                    </el-form-item>  
                                </el-col>  
                                <el-col :span="8">  
                                    <el-button-group>  
                                        <el-button type="primary" icon="el-icon-search">查询</el-button>  
                                        <el-button type="primary" icon="el-icon-tickets">全部</el-button>  
                                        <el-button type="primary" icon="el-icon-plus">添加</el-button>  
                                    </el-button-group>  
                                </el-col>  
                                <el-col :span="2 ">  
                                    <el-upload>  
                                        <el-button type="primary">导入EXCEL</el-button>  
                                    </el-upload>  
                                </el-col>  
                                <el-col :span="2 ">  
                                    <el-button type="primary">导出EXCEL</el-button>  
                                </el-col>  
                            </el-row>  
                        </el-form>  
                        <!-- 表格 -->  
                        <template>  
                            <el-table border  :data="tableData" style="width: 100%" size='mini'>  
                                <el-table-column type="selection" width="42" align="center"></el-table-column>  
                                <el-table-column type='index' label="序号" width="58" align="center">  
                                </el-table-column>  
                                <el-table-column prop="creation\_time" label="增加日期" width="100" header-align='center'>  
                                </el-table-column>  
                                <el-table-column prop="username" label="用户名" width="90" header-align='center'>  
                                </el-table-column>  
                                <el-table-column prop="mobile" label="手机号码" header-align='center'></el-table-column>  
                                <el-table-column label="操作" width='135' align="center">  
                                    <el-button icon="el-icon-search" size="mini" circle></el-button>  
                                    <el-button type="primary" size="mini" icon="el-icon-edit" circle></el-button>  
                                    <el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>  
                                </el-table-column>  
                            </el-table>  
                        </template>  
                        <!-- 分页 一行两列-->  
                        <el-row style="margin-top: 10px;">  
                            <el-col :span="8" style="text-align: left;">  
                                <el-button size="mini" type="primary" icon="el-icon-delete">批量删除</el-button>  
                            </el-col>  
                            <el-col :span="16" style="text-align: right;">  
                                <div class="block">  
                                    <el-pagination :page-sizes="\[10, 20, 30, 40\]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total=total>  
                                    </el-pagination>  
                                </div>  
                            </el-col>  
                        </el-row>

                    </el-main>  
                    <!-- 底部 -->  
                    <el-footer style="height: 30px; ">长安镖局盟友平台版权所有@ djtango|2020-09-11</el-footer>  
                </el-container>  
            </el-container>  
        </el-container>  
    </el-container>  
</div>

5. 右击 Open with live Server 启动

6.进入 http://127.0.0.1:5500/index.html 只是简单的展示数据,前后端走通流程,可以展示数据了.

6.前后端数据交互说明

1.前端实现分页

1.1 index.html

长安镖局盟友平台

                        <el-submenu index="1">  
                            <template slot="title">  
                                <i class="el-icon-user"></i>  
                                <span slot="title">企业用户信息</span>  
                            </template>  
                            <el-menu-item-group>  
                                <span slot="title"></span>  
                                <el-menu-item index="1-1">登录用户</el-menu-item>  
                                <el-menu-item index="1-2">部门信息</el-menu-item>  
                                <el-menu-item index="1-3">委托联系人</el-menu-item>  
                            </el-menu-item-group>  
                        </el-submenu>

                        <el-submenu index="2">  
                            <template slot="title">  
                                <i class="el-icon-document"></i>  
                                <span slot="title">定单委托信息</span>  
                            </template>  
                            <el-menu-item-group>  
                                <span slot="title"></span>  
                                <el-menu-item index="2-1">对接定单委托</el-menu-item>  
                                <el-menu-item index="2-2">仓储定单委托</el-menu-item>  
                                <el-menu-item index="2-3">运输定单委托</el-menu-item>  
                            </el-menu-item-group>  
                        </el-submenu>

                        <el-menu-item index="4">  
                            <i class="el-icon-setting"></i>  
                            <span slot="title">导航四</span>  
                        </el-menu-item>  
                    </el-menu>  
                </el-aside>  
                <!-- 下部右则 -->  
                <el-container>  
                    <!-- 中间窗体 -->  
                    <el-main>  
                        <!-- 面包屑 -->  
                        <el-breadcrumb separator-class="el-icon-arrow-right">  
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>  
                            <el-breadcrumb-item>活动管理</el-breadcrumb-item>  
                            <el-breadcrumb-item>活动列表</el-breadcrumb-item>  
                            <el-breadcrumb-item>活动详情</el-breadcrumb-item>  
                        </el-breadcrumb>  
                        <!-- 表单 -->  
                        <el-form :inline=true style="margin-top: 20px;">  
                            <el-row>  
                                <el-col :span="12">  
                                    <el-form-item label="查询 ">  
                                        <el-input placeholder="请输入查询信息 " style="width:330px"></el-input>  
                                    </el-form-item>  
                                </el-col>  
                                <el-col :span="8">  
                                    <el-button-group>  
                                        <el-button type="primary" icon="el-icon-search">查询</el-button>  
                                        <el-button type="primary" icon="el-icon-tickets">全部</el-button>  
                                        <el-button type="primary" icon="el-icon-plus">添加</el-button>  
                                    </el-button-group>  
                                </el-col>  
                                <el-col :span="2 ">  
                                    <el-upload>  
                                        <el-button type="primary">导入EXCEL</el-button>  
                                    </el-upload>  
                                </el-col>  
                                <el-col :span="2 ">  
                                    <el-button type="primary">导出EXCEL</el-button>  
                                </el-col>  
                            </el-row>  
                        </el-form>  
                        <!-- 表格 -->  
                        <template>  
                            <el-table border  :data="pageUsers" style="width: 100%" size='mini'>  
                                <el-table-column type="selection" width="42" align="center"></el-table-column>  
                                <el-table-column type='index' label="序号" width="58" align="center">  
                                </el-table-column>  
                                <el-table-column prop="creation\_time" label="增加日期" width="100" header-align='center'>  
                                </el-table-column>  
                                <el-table-column prop="username" label="用户名" width="90" header-align='center'>  
                                </el-table-column>  
                                <el-table-column prop="mobile" label="手机号码" header-align='center'></el-table-column>  
                                <el-table-column label="操作" width='135' align="center">  
                                    <el-button icon="el-icon-search" size="mini" circle></el-button>  
                                    <el-button type="primary" size="mini" icon="el-icon-edit" circle></el-button>  
                                    <el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>  
                                </el-table-column>  
                            </el-table>  
                        </template>  
                        <!-- 分页 一行两列-->  
                        <el-row style="margin-top: 10px;">  
                            <!-- 批量删除 -->  
                            <el-col :span="8" style="text-align: left;">  
                                <el-button size="mini" type="primary" icon="el-icon-delete">批量删除</el-button>  
                            </el-col>  
                            <!-- 分页按钮 -->  
                            <el-col :span="16" style="text-align: right;">  
                                <div class="block">  
                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentpage" :page-sizes="\[2, 3, 5, 40\]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total=total>  
                                    </el-pagination>  
                                </div>  
                            </el-col>  
                        </el-row>

                    </el-main>  
                    <!-- 底部 -->  
                    <el-footer style="height: 30px; ">长安镖局盟友平台版权所有@ djtango|2020-09-11</el-footer>  
                </el-container>  
            </el-container>  
        </el-container>  
    </el-container>  
</div>

1.2 index.js

new Vue({
el: '#app',
data: {
msg: '长安',
total: 200,
allUsers: [], //展示所有用户信息
pageUsers: [], //分页后当前页的用户信息(全部数据经前端处是后的数据)
baseURL: ' http://127.0.0.1:8000/',
//分页相关的量
total: 100, //总行数
currentpage: 1, //当前所在页
pagesize: 10, //默认每页显示条数

},  
mounted() {  
    // 打开页面自动加载数据,生命周期函数  
    this.gteqyyh();  
},  
methods: {  
    // 获取所有用户有信息  
    gteqyyh() {  
        // 记录this的地址,下面执行完axios后就不再指向this了  
        let that = this  
        axios  
            .get(that.baseURL + 'qyyh/user/') // .get()是请求的url  
            .then(function(res) {  
                // .then()请求成功后执行的操作函数,res里就是后端返回的所有数据  
                // console.log(res); 打印查看  
                if (res.data.code === 1) {  
                    // 把数据返回给上面tableData: \[\]  
                    that.allUsers = res.data.data;  
                    //返回记当的总行数  
                    that.total = res.data.data.length;  
                    // 获取当前页,执行下面getpageUsers()  
                    that.getpageUsers()  
                        // 同进返回一个提示  
                    that.$message({  
                        message: '数据加载成功!',  
                        type: 'success'  
                    });  
                } else {  
                    that.$message.error(res.data.msg);  
                }

            })  
            .catch(function(err) {  
                // .catch请求失败后执行的操作函数  
                console.log(err)  
            })  
    },  
    //获联当前页的用户信息  
    getpageUsers() {  
        //分页前清空pageUsers中所有的数据  
        this.pageUsers = \[\]  
            //获得当前页的数据  
        for (let i = (this.currentpage - 1) \* this.pagesize; i < this.total; i++) {  
            //把遍历数据添加到pageUsers中  
            this.pageUsers.push(this.allUsers\[i\]);  
            //判断是否达到一页的要求  
            if (this.pageUsers.length === this.pagesize) break;  
        }

    },  
    // 分页时修改每页的行数,sizes是页面修改的行数  
    handleSizeChange(sizes) {  
        this.pagesize = sizes;  
        // 数据重新加载分页页面  
        this.getpageUsers();  
    },  
    // 调整当前的页码,pagerNumber是页面传过来的修改的页数  
    handleCurrentChange(pagerNumber) {  
        // 修改当前的页码  
        this.currentpage = pagerNumber;  
        // 数据重新加载分页页面  
        this.getpageUsers();  
    }  
}

})

手机扫一扫

移动阅读更方便