11、引入与使用ElementUI框架

1、基于Vue的UI框架

• ElementUI
• vux
• vant

---

2、下载ElementUI框架

• npm install --save element-ui

---

3、引入使用ElementUI框架

main.js（入口文件）：

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

Vue.config.productionTip = false
// 使用ElemntUI
Vue.use(ElementUI);

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

---

4、实例（用户列表增加删除）

一、效果：

---

二、开启前端：npm run serve

<template>
  <div>
    <h1>用户信息管理（查询、添加、删除）</h1>
    <el-button
      @click="dialogVisible = true"
      size="big"
      type="primary"
      style="position: absolute; top: 0px; right: 0px"
      >添加</el-button
    >
    <el-dialog title="添加用户信息" :visible.sync="dialogVisible">
      <span>
        <el-form ref="userAddForm" :model="userAddForm">
          <el-form-item label="序号">
            <el-input v-model="userAddForm.id"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="userAddForm.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="userAddForm.age"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <el-table :data="userList" border>
      <el-table-column prop="id" label="序号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="del(scope.row.id)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    this.getUserList();
  },
  methods: {
    // 1、获取用户列表
    getUserList() {
      axios.get("http://127.0.0.1:3000/user").then((res) => {
        this.userList = res.data;
      });
    },
    // 2、删除用户信息
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        // 删除成功
        .then(() => {
          axios.delete(`http://127.0.0.1:3000/user/${id}`).then(() => {
            this.getUserList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        // 删除失败
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 3、添加用户信息
    add() {
      axios
        .post("http://127.0.0.1:3000/user", { user: this.userAddForm })
        .then(() => {
          this.getUserList();
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消添加",
          });
        });
    },
  },

  data() {
    return {
      // 显示用户信息
      userList: [],
      // 添加用户信息弹出框按钮
      dialogVisible: false,
      // 添加用户信息表单
      userAddForm: { id: "", name: "", age: "" },
    };
  },
};
</script>

三、开启后台：nodemon server.js

const Koa = require('koa');
// 获取post请求数据
const parser = require('koa-parser');
// 设置路由
const Router = require('koa-router')
const router = new Router();
// 允许跨域
const cors = require("koa2-cors");
const app = new Koa();

// 引入中间键
app.use(cors({
	origin: function (ctx) {
		var allowCors = ['http://localhost:8080', 'http://localhost:8081'];
		return allowCors.indexOf(ctx.header.origin) > -1 ? ctx.header.origin : '';
	},
	exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
	maxAge: 5,
	credentials: true,
	allowMethods: ['GET', 'POST', 'DELETE'],
	allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))
app.use(parser());
app.use(router.routes());

// 模拟数据
const userList = [
	{ id: 1, name: "jasmine", age: 18 },
	{ id: 2, name: "qiqi", age: 20 },
	{ id: 3, name: "jasmine_qiqi", age: 22 },];

// get方法：获取userList列表
router.get("/user", async ctx => {
	ctx.body = userList;
})

// post方法：添加user信息
router.post("/user", async ctx => {
	// request：请求响应数据
	let user = ctx.request.body.user;
	userList.push(user);
	ctx.body = true;
})

// put方法：修改数据
router.put("/user/:id", ctx => {
	let index = ctx.params.id;
	let user = ctx.request.body.user;
	userList.splice(index, 1, user);
	// splice(要删除元素的索引，删除几个元素，将删除的元素替换)
	ctx.body = userList;
})

// delete方法：删除user信息列表
router.delete("/user/:id", async ctx => {
	let id = ctx.params.id;
	userList.map((value, index) => {
		if (value.id == id) {
			userList.splice(index, 1);
		}
	})
	ctx.body = true;
})

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