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

djtang

一  使用环境

　　开发系统: 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();
        }
    }

})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分类：

技术点：

相关文章：

  • 2021-06-15
  • 2021-11-21
  • 2021-06-15
  • 2021-11-21
  • 2021-06-16
  • 2021-09-14
猜你喜欢
  • 2022-12-23
  • 2021-04-03
  • 2021-06-10
  • 2021-11-10
  • 2021-11-30
  • 2021-09-21
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode