利用Vue.js实现简单员工管理系统(增删查)的功能

2022年05月12日 阅读数:4
这篇文章主要向大家介绍利用Vue.js实现简单员工管理系统(增删查)的功能,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

员工管理系统

注意!!此篇博客没有涉及后台数据库,全部数据本身设定,不通过数据库来增删改查!!javascript

咱们想要实现一个简单的员工管理系统案例须要如下几个步骤,咱们一块儿来康康叭~~css

第一步:首先先实现基础的表单结构,将一些“假”数据显示在页面表单中(通常数据会从后端数据库中提取,这里只是简单地实现一些基本功能)html

<div id="app">
    <table>
        <thead>
            <th>员工编号</th>
            <th>员工姓名</th>
            <th>入职日期</th>

        </thead>
        <tbody>
            <tr v-for='item in list' :key='item.id'>
                <td>{
  
  {item.id}}</td>
                <td>{
  
  {item.name}}</td>
                <td>{
  
  {item.ctime}}</td>
                <td>
                    <a href="#">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    new Vue({
    
    
        el:'#app',
        data:{
    
    
            id:'',
            name:'',
            list:[
                {
    
    id:1,name:'f(x)',ctime:new Date()},
                {
    
    id:1,name:'NCT',ctime:new Date()},
                {
    
    id:1,name:'aespa',ctime:new Date()},

            ]
        }
    })
</script>

忘记表单知识的‘童鞋’就阔以移步:HTML表单基础
忘记v-for指令用法的‘童鞋’请移步:Vue指令----v-forvue

在这里插入图片描述

如今的效果就是这样子啦~是否是有丢丢丑不拉几的,请看第二步!!java

第二步:利用bootstrap渲染表格(虽然我渲染出来的样子也很差看!!可是比刚恰好多了)web

<div id="app">
    <div class="container">
        <table class="table table-hover table-bordered table-striped">
            <thead>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>入职日期</th>
                <th>操做</th>
            </thead>
            <tbody>
                <tr v-for='item in list' :key='item.id'>
                    <td>{
  
  {item.id}}</td>
                    <td>{
  
  {item.name}}</td>
                    <td>{
  
  {item.ctime}}</td>
                    <td>
                        <a href="#">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

是否是稍微变好看了呢!
在这里插入图片描述
感受仍是少了点啥…通过不断的尝试最终表单的长这样:数据库

<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加员工</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Id:
                <input type="text" class="form-control" >
            </label>

            <label>
                Name:
                <input type="text" class="form-control" >
            </label>

            <input type="button" value="添加" class="btn btn-primary" >

            <label>
                搜索名称关键字:
                <input type="text" class="form-control" >
            </label>
        </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>
        </thead>
        <tbody>
            
            <tr v-for='item in list' :key='item.id'>
                <td>{
  
  {item.id}}</td>
                <td>{
  
  {item.name}}</td>
                <td>{
  
  {item.ctime}}</td>
                <td>
                    <a href="#" >删除</a>
                </td>
            </tr>
        </tbody>
    </table>

</div>

</div>

在这里插入图片描述
第三步:实现添加员工的功能。输入员工信息,点击添加按钮,将新添加的员工信息显示在表单上。bootstrap

  1. 给添加按钮绑定事件实现添加功能---->@click
<script>
    new Vue({
    
    
        el:'#app',
        data:{
    
    
            id:'',
            name:'',
            list:[
                {
    
    id:1,name:'f(x)',ctime:new Date()},
                {
    
    id:2,name:'NCT',ctime:new Date()},
                {
    
    id:3,name:'aespa',ctime:new Date()},

            ]
        },
        methods:{
    
    
            add(){
    
    
                var car = {
    
    id:this.id,name:this.name,ctime:new Date()}
                this.list.push(car);
            }
        }
    })
</script>
  1. 将输入的信息显示在表单中,也就是须要实现数据的双向绑定---->v-model
<label>
    Id:
    <input type="text" class="form-control" v-model="id" v-model='id'>
</label>

<label>
    Name:
    <input type="text" class="form-control" v-model="name" v-model='name'>
</label>

<input type="button" value="添加" class="btn btn-primary" @click='add'>
  1. 在输入框输入信息,点击添加按钮,实现功能
    在这里插入图片描述

第四步:实现删除功能。点击删除按钮,对应的员工表单信息被删除后端

  • 给删除按钮添加删除事件---->@click.prenvent
    利用id传递数据,注意此处是a标签,须要添加事件修饰符.prevent阻止默认事件
<a href="#" @click.prevent='del(item.id)'>删除</a>

methods:{
    add(){
        var car = {id:this.id,name:this.name,ctime:new Date()}
        this.list.push(car);
    },
    del(id){
        this.list.some((item,i)=>{
            if(item.id==id){
                this.lst.splice(i,1);
                return true;
            }
        })
    }
}

第五步:实现输入关键字进行查找功能。数组

  1. 自定义search方法,把全部的关键字,经过传参的方式传递给search方法
search(key){
    var newList = [];
    this.list.forEach(item=>{
        if(item.name.indexOf(key)!=-1){
            newList.push(item);
        }
    })
    return newList;
}

2.给搜索关键字框绑定数据---->v-model

<label>
    搜索名称关键字:
    <input type="text" class="form-control" v-model="keywords">
</label>
<!-- vue实例中的对象 -->
data:{
    id:'',
    name:'',
    keywords:'',
    list:[
        {id:1,name:'f(x)',ctime:new Date()},
        {id:2,name:'NCT',ctime:new Date()},
        {id:3,name:'aespa',ctime:new Date()},

    ]
},

search方法详解:将输入搜索关键字框的数据做为形参传入方法中,循环遍历实例中存放全部数据的数组,判断传递进来的形参是否在每一个对象中存在,若是存在,则将其添加至一个新数组中。
在这里插入图片描述
在这里插入图片描述

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加员工</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>

                <label>
                    Name:
                    <input type="text" class="form-control" v-model="name">
                </label>

                <input type="button" value="添加" class="btn btn-primary" @click='add'>

                <label>
                    搜索名称关键字:
                    <input type="text" class="form-control" v-model="keywords">
                </label>
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!--  -->
                <tr v-for='item in search(keywords)' :key='item.id'>
                    <td>{
  
  {item.id}}</td>
                    <td>{
  
  {item.name}}</td>
                    <td>{
  
  {item.ctime}}</td>
                    <td>
                        <a href="#" @click.prevent='del(item.id)'>删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>

    </div>
    <script>
        new Vue({
    
    
            el: '#app',
            data: {
    
    
                id: '',
                name: '',
                keywords: '',
                list: [
                    {
    
     id: 1, name: 'f(x)', ctime: new Date() },
                    {
    
     id: 2, name: 'NCT', ctime: new Date() },
                    {
    
     id: 3, name: 'aespa', ctime: new Date() },

                ]
            },
            methods: {
    
    
                add() {
    
    
                    var car = {
    
     id: this.id, name: this.name, ctime: new Date() }
                    this.list.push(car);
                },
                del(id) {
    
    
                    this.list.some((item, i) => {
    
    
                        if (item.id == id) {
    
    
                            this.lst.splice(i, 1);
                            return true;
                        }
                    })
                },
                search(key) {
    
    
                    var newList = [];
                    this.list.forEach(item => {
    
    
                        if (item.name.indexOf(key) != -1) {
    
    
                            newList.push(item);
                        }
                    })
                    return newList;
                }
            }
        })
    </script>
</body>

</html>

head标签中的vue.js和bootstrap文件可自行百度查找合适的链接,利用src属性添加进来便可

若是以为表单中的时间格式不太好,能够参考filter过滤器来修改时间格式


大功告成!!!

反思:此案例没有链接数据库,全部数据都是自定义的,且每次刷新页面,vue实例就会从新被建立,因此全部添加和删除的数据都会在刷新以后就不会显示在页面上。