vue实现信息管理系统

240 阅读 0 评论 159 点赞

我是靠谱客的博主隐形小鸽子，这篇文章主要介绍vue实现信息管理系统，现在分享给大家，希望可以做个参考。

最近学习了vue，自己用bootstrap+vue写了一个信息管理系统，只有前端，没有后台，可以实现基本的增、删、改、查

具体效果在结尾处有附图

复制代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  body,html{
  margin: 20px 50px;
  }
  .title2{
  color: blueviolet;
  }
  .table th,td{
  text-align: center;
  
  }
 </style>
 
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
 
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <h1>信息管理系统</h1>
 <div id="box">
  <div class="form-group">
  <label for="user">姓名</label>
  <input type="text" class="form-control" id="user" placeholder="请输入姓名" v-model='user'>
  </div>
  <div class="form-group">
  <label for="age">年龄</label>
  <input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model='age'>
  </div>
  <div class="form-group">
   <label for="">职位</label>
   <select class="form-control" class="zhiwei" v-model='zhiwei'>
   <option>ios工程师</option>
   <option>h5工程师</option>
   <option>java工程师</option>
   <option>UI设计师</option>
   
   </select>
  </div>
  <div class="form-group">
  <label for="sex">性别</label>
  <input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value="男" v-model='sex'> 男
  <input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value="女" v-model='sex'> 女
  </div>
  
  <button class="btn btn-success" @click='add()'>添加</button>
  <button class="btn btn-danger" @click="chongzhi()">重置</button>
  
  <h3 class="title2">用户信息表</h3>
 
  <table class="table table-bordered">
   <tr>
   <th>序号</th>
   <th>姓名</th>
   <th>信息</th>
   <th>操作</th>
   <th>操作</th>
   </tr>
   <tr v-for="(item,i) in arr">
   <td>{{i}}</td>
   <td>{{item.user}}</td>
   <td><button class="btn btn-success " type="button" data-toggle="modal" data-target="#myModal" @click='detail(i)'>查看</button></td>
   <td><button class="btn btn-success" @click='del(i)'>删除</button></td>
   <td><button class="btn btn-success" @click='update(i)'>修改</button></td>
   </tr>
  </table>
 
 
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title" id="myModalLabel">详情</h4>
  </div>
  <div class="modal-body">
  <ul>
   <li>姓名：{{user}}</li>
   <li>年龄：{{age}}</li>
   <li>职位：{{zhiwei}}</li>
   <li>性别：{{sex}}</li>
   
  </ul> 
  
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  <button type="button" class="btn btn-primary">确定</button>
  </div>
  </div>
  </div>
 </div>
 
 </div>
 
 </body>
 <script type="text/javascript">
 var vm = new Vue({
  el:"#box",
  data:{
  user:'',
  age:'',
  zhiwei:'',
  sex:'',
  arr:[]
  },
  methods:{
  add(){
   this.arr.push({
   user:this.user,
   age:this.age,
   sex:this.sex,
   zhiwei:this.zhiwei
   })
   this.user = '';
   this.age = '';
   this.zhiwei = '';
   this.sex='';
  },
  del(i){
   this.arr.splice(i,1)
  },
  chongzhi(){
   this.user = '';
   this.age = '';
   this.zhiwei = '';
   this.sex = "";
   
  },
  detail(i){
   this.user = this.arr[i].user
   this.age = this.arr[i].age
   this.zhiwei = this.arr[i].zhiwei 
   this.sex = this.arr[i].sex
  },
  update(i){
   
   this.arr[i].user = prompt('请修改名字')
   this.arr[i].age = prompt(' 请修改年龄')
   this.arr[i].zhiwei = prompt('请修改职位')
   this.arr[i].sex = prompt(' 请修改性别')
   
   //console.log(prompt(' 修改名字'))
  }
  
  }
 })
 </script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  body,html{
  margin: 20px 50px;
  }
  .title2{
  color: blueviolet;
  }
  .table th,td{
  text-align: center;
  
  }
 </style>
 
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
 
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 </head>
 <body>
 <h1>信息管理系统</h1>
 <div id="box">
  <div class="form-group">
  <label for="user">姓名</label>
  <input type="text" class="form-control" id="user" placeholder="请输入姓名" v-model='user'>
  </div>
  <div class="form-group">
  <label for="age">年龄</label>
  <input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model='age'>
  </div>
  <div class="form-group">
   <label for="">职位</label>
   <select class="form-control" class="zhiwei" v-model='zhiwei'>
   <option>ios工程师</option>
   <option>h5工程师</option>
   <option>java工程师</option>
   <option>UI设计师</option>
   
   </select>
  </div>
  <div class="form-group">
  <label for="sex">性别</label>
  <input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value="男" v-model='sex'> 男
  <input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value="女" v-model='sex'> 女
  </div>
  
  <button class="btn btn-success" @click='add()'>添加</button>
  <button class="btn btn-danger" @click="chongzhi()">重置</button>
  
  <h3 class="title2">用户信息表</h3>
 
  <table class="table table-bordered">
   <tr>
   <th>序号</th>
   <th>姓名</th>
   <th>信息</th>
   <th>操作</th>
   <th>操作</th>
   </tr>
   <tr v-for="(item,i) in arr">
   <td>{{i}}</td>
   <td>{{item.user}}</td>
   <td><button class="btn btn-success " type="button" data-toggle="modal" data-target="#myModal" @click='detail(i)'>查看</button></td>
   <td><button class="btn btn-success" @click='del(i)'>删除</button></td>
   <td><button class="btn btn-success" @click='update(i)'>修改</button></td>
   </tr>
  </table>
 
 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title" id="myModalLabel">详情</h4>
  </div>
  <div class="modal-body">
  <ul>
   <li>姓名：{{user}}</li>
   <li>年龄：{{age}}</li>
   <li>职位：{{zhiwei}}</li>
   <li>性别：{{sex}}</li>
   
  </ul> 
  
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  <button type="button" class="btn btn-primary">确定</button>
  </div>
  </div>
  </div>
 </div>
 
 </div>
 
 </body>
 <script type="text/javascript">
 var vm = new Vue({
  el:"#box",
  data:{
  user:'',
  age:'',
  zhiwei:'',
  sex:'',
  arr:[]
  },
  methods:{
  add(){
   this.arr.push({
   user:this.user,
   age:this.age,
   sex:this.sex,
   zhiwei:this.zhiwei
   })
   this.user = '';
   this.age = '';
   this.zhiwei = '';
   this.sex='';
  },
  del(i){
   this.arr.splice(i,1)
  },
  chongzhi(){
   this.user = '';
   this.age = '';
   this.zhiwei = '';
   this.sex = "";
   
  },
  detail(i){
   this.user = this.arr[i].user
   this.age = this.arr[i].age
   this.zhiwei = this.arr[i].zhiwei 
   this.sex = this.arr[i].sex
  },
  update(i){
   
   this.arr[i].user = prompt('请修改名字')
   this.arr[i].age = prompt(' 请修改年龄')
   this.arr[i].zhiwei = prompt('请修改职位')
   this.arr[i].sex = prompt(' 请修改性别')
   
   //console.log(prompt(' 修改名字'))
  }
  
  }
 })
 </script>
</html>