Vue基础（九）——ElementUI

一、介绍

ElementUI是一个基于Vue的UI框架。（bootstrap是基于jQuery的UI框架）

二、安装

1、下载依赖：

npm i element-ui -S

2、在main.js中引入element-ui：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App),
}).$mount('#app')

三、使用ElementUI组件（参考文档，不做介绍）

1、按钮

<template>
    <div id="app">
        <h1>hello elementUI</h1>
        <el-button type="primary">主要按钮</el-button>
    </div>
</template>

 

2、表单

3、表格

四、学生信息管理系统

查询、添加、删除。

1、后台使用Koa实现数据接口；

2、添加功能使用对话框（Dialog）弹出表单；

3、删除需要有确认提示（MessageBox）。

1、后台数据（example02项目）

（1）下载并引入模块：

const Koa = require("koa");
//post请求模块
const parser = require("koa-parser");
//设置路由
const router = require("koa-router")();
///允许跨域
const cors = require('koa2-cors');
//静态目录
const static = require("koa-static");

const app = new Koa();

app.use(cors());
app.use(parser());
app.use(static(__dirname + "/public"))
app.use(router.routes());

（2）serve.js：

const Koa = require("koa");
//post请求模块
const parser = require("koa-parser");
//设置路由
const router = require("koa-router")();
///允许跨域
const cors = require('koa2-cors');
//静态目录
const static = require("koa-static");

const app = new Koa();

app.use(cors());
app.use(parser());
app.use(static(__dirname + "/public"))
app.use(router.routes());

//模拟数据库
const studentList = [{
        id: 1,
        name: "小明",
        age: 2
    },
    {
        id: 2,
        name: "小红",
        age: 4
    },
    {
        id: 3,
        name: "小亮",
        age: 6
    },
]

//get方法：获取学生列表
router.get("/student", async ctx => {
    ctx.body = studentList;
})

//post方法：添加学生
router.post("/student", async ctx => {
    let student = ctx.request.body.student;
    fruitList.push(student);
    ctx.body = true;
})

//delete方法：删除学生
router.delete("/student/:id", async ctx => {
    let id = ctx.params.id;
    studentList.map((item, index) => {
        if (item.id == id) {
            studentList.splice(index, 1);
        }
    })
    ctx.body = true;
})

app.listen(3000, () => {
    console.log("server is running")
})

2、前端项目（example01）

（1）App.vue：

<template>
    <div id="app">
        <el-button type="text" @click="dialogVisible = true">添加学生</el-button>
        <el-table :data="studentList" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="120">
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <!-- scrop.row:是当前行的对象 -->
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog title="添加学生信息" :visible.sync="dialogVisible" width="30%">
            <el-form>
                <el-form-item label="id">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
import axios from "axios";
export default {
    methods: {
        handleClick(row) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    axios
                        .delete(`http://127.0.0.1:3000/student/${row.id}`)
                        .then(() => {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getStudentList();
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        getStudentList() {
            axios.get("http://127.0.0.1:3000/student").then((res) => {
                this.studentList = res.data;
            });
        },
        onSubmit() {
            axios
                .post("http://127.0.0.1:3000/student", {
                    student: this.form,
                })
                .then(() => {
                    this.getStudentList();
                    //添加后，关闭添加框
                    this.dialogVisible = false;
                });
        },
    },

    data() {
        return {
            studentList: [],
            dialogVisible: false,
            form: {
                id: "",
                name: "",
                age: "",
            },
        };
    },
    created() {
        this.getStudentList();
    },
};
</script>

3、效果：