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...") })
