碼上快樂

相關內容    簡體    繁體

Vue學習筆記-基於CDN引入方式簡單前后端分離項目學習(Vue+Element+Axios)

本文轉載自   查看原文   2020-09-20 13:09   629 

一  使用環境

　　開發系統: 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();
        }
    }

})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 VUE+Flask登錄的初探--前端(Vue+element+axios)+后端(Flask+FlaskLogin+JWT) SpringBoot + Vue + Element 前后端分離的管理后台項目簡單入門 cdn引入vue和axios以及Qs 若依RuoYi-SpringBoot+Vue前后端分離教程-框架學習+筆記 python3 + Django + Mysql + Vue + Element-UI 學習筆記：從0搭建前后端分離的測試工具平台 Springboot+vue前后端分離項目axios傳遞對象數組 vue框架之 vue+element+axios 實現彈框顯示后台數據列表 vue項目引入element Vue項目使用CDN優化首屏加載問題，cdn引入Element UI vue3 學習筆記 (二)——axios 的使用有變化嗎？
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM