Vue（+ element UI + Django）编写学生管理页面

最新推荐文章于 2023-09-25 17:30:04 发布

VIP文章糖冰橙

最新推荐文章于 2023-09-25 17:30:04 发布

阅读量1.7k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/tt75281920/article/details/110318942

版权

初学vue的时候写的，采用的是npm形式引入vue和element-ui，后端逻辑使用Django来写的，对于测试开发学习些测试平台，是个很好的入门文章。
写完后台的样子如下：
在这里插入图片描述

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部样式文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <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-header style="height: 80px;">学习信息管理系统</el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="2" class="el-menu-vertical-demo">
                        <el-menu-item index="1">
                            <i class="el-icon-menu"></i>
                            <span slot="title">班级管理</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-user"></i>
                            <span slot="title">学生信息</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-s-custom"></i>
                            <span slot="title">讲师信息</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-document"></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>
                        <!-- 表单 -->
                        <el-form :inline="true" style="margin-top: 40px;">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="查询条件:">
                                        <el-input v-model="inputStr" placeholder="请输入查询条件" style="width: 320px;">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" style="text-align: right;padding-right: 10px;">
                                    <el-button-group>
                                        <el-button type="primary" icon="el-icon-search" @click="queryStudents()">查询
                                        </el-button>
                                        <el-button type="primary" icon="el-icon-document-copy"
                                            @click="getAllStudents()">全部</el-button>
                                        <el-button type="primary" icon="el-icon-circle-plus-outline"
                                            @click="addStudent()">添加</el-button>
                                    </el-button-group>
                                </el-col>
                                <el-col :span="2">
                                    <el-upload :show-file-list="false" :http-request="uploadExcelPost"> 
                                        <el-button type="primary">导入Excel</el-button>
                                    </el-upload>
                                </el-col>
                                <el-col :span="2">
                                    <el-upload>
                                        <el-button type="primary" @click="exportToExcel()">导出Excel</el-button>
                                    </el-upload>
                                </el-col>
                            </el-row>
                        </el-form>
                        <!-- 表格 -->
                        <el-table :data="pageStudents" border style="width: 100%" size="mini"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection">
                            </el-table-column>
                            <el-table-column type="index" label="序号" align="center" width="60">
                            </el-table-column>
                            <el-table-column prop="sno" label="学号" align="center" width="80">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" align="center" width="80">
                            </el-table-column>
                            <el-table-column prop="gender" label="性别" align

最低0.47元/天解锁文章

糖冰橙

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
Vue（+ element UI + Django）编写学生管理页面

初学vue的时候写的，采用的是npm形式引入vue和element-ui，后端逻辑使用Django来写的，对于测试开发学习些测试平台，是个很好的入门文章。写完后台的样子如下：html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫