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

一  使用环境

　　开发系统: windows

　　后端IDE: PyCharm　

　　前端IDE: VSCode　

　　数据库: msyql,navicat

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

　　虚拟环境: virtualenvwrapper

　　开发框架: Django 2.2

　　要用的在几个网站:

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

　　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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- import Vue before Element -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <el-container>
            <el-container>
                <!-- 顶部 -->
                <el-header style="height: 80px;">长安镖局盟友平台</el-header>
                <el-container>
                    <!-- 下部左侧侧边栏 -->
                    <el-aside width="200px">
                        <el-menu default-active="1-4-1" class="el-menu-vertical-demo">

                            <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>
</body>

</html>
<script src="./js/index.js "></script>

5. 右击 Open with live Server 启动

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

6.前后端数据交互说明

四 其它相关学习

1.前端实现分页

1.1 index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- import Vue before Element -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <el-container>
            <el-container>
                <!-- 顶部 -->
                <el-header style="height: 80px;">长安镖局盟友平台</el-header>
                <el-container>
                    <!-- 下部左侧侧边栏 -->
                    <el-aside width="200px">
                        <el-menu default-active="1-4-1" class="el-menu-vertical-demo">

                            <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>
</body>

</html>
<script src="./js/index.js "></script>

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();
        }
    }

})