首页 > itarticle > vue后台用户管理系统

vue后台用户管理系统

admin 9月 30, 2020 0

本系统为一个简单的后台用户管理系统，主要是进一步掌握vue的指令和熟练使用。本系统结合vue语法实现对数据的增删改查和全局搜索功能。并实现在本地搭建json服务器，对数据操作等。github传送门

Vue实战二 用户管理系统

json-server本地搭建

全局安装

1
 
npm install -g json-server

进入项目目录

1
 
cd /Projects/JSONSERVER

初始化

1
2
 
npm init
npm init --yes //也可以这样

安装到本地项目

1
 
npm install json-server --save

修改package.json文件，设置启动项，并在目录下新建db.json文件

1
2
3
4
 
"scripts": {
    "json:server": "json-server --watch db.json",
    "json:server:remote": "json-server http://jsonplaceholder.typicode.com/db"
  }

启动项目

1
 
npm run json:server

json-server传送门：https://github.com/typicode/json-server

项目构建

1
2
3
4
 

npm install -g @vue/cli-init
# 本人在使用过程中，安装路由以后都是no
vue init webpack my-project

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── About.vue                 //关于
│   │   ├── Add.vue                      //添加用户
│   │   ├── Alert.vue                      //警告⚠️弹框
│   │   ├── CustomerDetails.vue //用户详情信息
│   │   ├── Customers.vue             //用户主页
│   │   ├── Edit.vue                   //编辑用户
│   │   └── HelloWorld.vue
│   └── main.js
└── static

项目说明

本项目是一个简单的基于vue.js学习而所做的个人博客的简单实现，已实现的功能如下：

  • 用户列表 😇
  • 添加用户 😀
  • 用户详情 🤗
  • 编辑用户😊
  • 删除用户 😏
  • 全局搜索 🔍 用户
  • 相应信息未添加完全弹窗 ⚠️

项目技术分析

用户列表

template部分

1
2
3
4
5
6
7
8
9
10
 
 <tbody>
        <!-- filterInput 应该遍历搜索的方法  根据名字匹配 -->
        <!-- <tr v-for="customer in customers"> -->
          <tr v-for="customer in filterBy(customers,filterInput)"> 
          <td>{{customer.name}}</td>
          <td>{{customer.phone}}</td>
          <td>{{customer.email}}</td> 
          <td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">详情</router-link></td>
        </tr>
</tbody>

script部分

1
2
3
4
5
6
7
8
9
10
11
12
 
methods:{
  fetchCustmoers(){
        this.$http.get("http://localhost:3000/users")
                  .then(function (response) {
                      //  console.log(response);
                      this.customers = response.body;
                  })
   }
},
updated () {//更新的时候也刷新列表
    this.fetchCustmoers();
}

结果如下：

添加用户

template部分

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
 
<!-- 触发自己所写的submit -->
<form v-on:submit="addCustomer">
    <div class="well">
        <h4>用户信息</h4>
        <div class="form-group">
            <label>姓名</label>
            <input type="text" class="form-control" placeholder="name" v-model="customer.name">
        </div>
        <div class="form-group">
            <label>电话</label>
            <input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
        </div>
        <div class="form-group">
            <label>邮箱</label>
            <input type="text" class="form-control" placeholder="email" v-model="customer.email">
        </div>
        <div class="form-group">
            <label>学历</label>
            <input type="text" class="form-control" placeholder="education" v-model="customer.education">
        </div>
        <div class="form-group">
            <label>毕业学校</label>
            <input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool">
        </div>
        <div class="form-group">
            <label>职业</label>
            <input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
        </div>
        <div class="form-group">
            <label>个人简介</label>
            <!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> -->
            <textarea class="form-control" rows="10" v-model="customer.profile"></textarea>
        </div> 
        <button type="submit" class="btn btn-primary">添加</button>
    </div>
</form>

script部分

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
 
methods:{
      addCustomer(e){
        // console.log(123);
        if (!this.customer.name || !this.customer.phone || !this.customer.email ) {
            // console.log("请添加相应的信息");
            this.alert = "请添加相应的信息!"
        }else{
            let newCustomer = {
                name:this.customer.name,
                phone:this.customer.phone,
                email:this.customer.email,
                education:this.customer.education,
                graduationschool:this.customer.graduationschool,
                profession:this.customer.profession,
                profile:this.customer.phone,
            }
            this.$http.post("http://localhost:3000/users",newCustomer)
                      .then(function (response) {//回调事件
                        // console.log(response); response.body为所填写的信息
                       this.$router.push({path:"/",
                                          query:{
                                                    alert:"用户信息添加成功!"//添加成功后显示在主页面
                                                }
                                          })// 添加成功之后  跳转到主页面展示所有信息
            })
            e.preventDefault();//阻止默认事件
        }
        e.preventDefault();//阻止默认事件
      }
}

结果如下：

用户详情

template部分

1
 
<td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">详情</router-link></td>

script部分

1
2
3
4
5
6
7
8
 
methods:{
  fetchCustmoers(id){//根据id查询详情
    this.$http.get("http://localhost:3000/users/" + id)
              .then(function (response) {
                  console.log(response);
                  this.customer = response.body;
              })
  }

结果如下：

编辑用户

template部分

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
 
<!-- 触发自己所写的submit -->
<form v-on:submit="updateCustomer">
    <div class="well">
        <h4>用户信息</h4>
        <div class="form-group">
            <label>姓名</label>
            <input type="text" class="form-control" placeholder="name" v-model="customer.name">
        </div>
        <div class="form-group">
            <label>电话</label>
            <input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
        </div>
        <div class="form-group">
            <label>邮箱</label>
            <input type="text" class="form-control" placeholder="email" v-model="customer.email">
        </div>
        <div class="form-group">
            <label>学历</label>
            <input type="text" class="form-control" placeholder="education" v-model="customer.education">
        </div>
        <div class="form-group">
            <label>毕业学校</label>
            <input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool">
        </div>
        <div class="form-group">
            <label>职业</label>
            <input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
        </div>
        <div class="form-group">
            <label>个人简介</label>
            <!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> -->
            <textarea class="form-control" rows="10" v-model="customer.profile"></textarea>
        </div> 
        <button type="submit" class="btn btn-primary">确认</button>
    </div>
</form>

script部分

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
 
methods:{
  // 来到这个页面根据id 获取到数据回显 fetchCustomer()  
    fetchCustomer(id){
        this.$http.get("http://localhost:3000/users/"+id)
        .then(function(response){
            console.log(response); 
            this.customer = response.body;
        })
    },
    updateCustomer(e){
      // console.log(123);
      if (!this.customer.name || !this.customer.phone || !this.customer.email ) {
          // console.log("请添加相应的信息");
          this.alert = "请添加对应的信息!";
      }else{
          let updateCustomer = {
              name:this.customer.name,
              phone:this.customer.phone,
              email:this.customer.email,
              education:this.customer.education,
              graduationschool:this.customer.graduationschool,
              profession:this.customer.profession,
              profile:this.customer.phone,
          }
          //根据所传的id来更新  点击编辑的时候  触发此方法
          this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer)
                    .then(function (response) {//回调事件
                      // console.log(response); response.body为所填写的信息
                     this.$router.push({path:"/",
                                        query:{
                                                  alert:"用户信息更新成功!"//添加成功后显示在主页面
                                              }
                                        })// 添加成功之后  跳转到主页面展示所有信息
          })
          e.preventDefault();//阻止默认事件
      }
      e.preventDefault();//阻止默认事件
    }
}

结果如下：

全局搜索

template部分

1
 
<input type="text" class="form-control" placeholder="搜索 🔍 " v-model="filterInput">

script部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
data () {
    return {
        customers:[],
        alert:"",
        filterInput:""
    }
  },
  methods:{
    filterBy(customers,value){//value为input的值  filter会遍历数组的所有内容  根据匹配的名称返回整个对象
      return customers.filter(function (customer) {
        return customer.name.match(value);//match方法匹配
      })
    }
}

结果如下：

删除用户

template部分

1
 
<button class="btn btn-danger" v-on:click="deleteCustomer(customer.id)">删除</button>

script部分

1
2
3
4
5
6
7
8
9
10
11
12
13
 
methods:{
  deleteCustomer(id) {
      this.$http.delete("http://localhost:3000/users/" + id)
      .then(function(response){
          this.$router.push({//删除成功跳转到主页面
              path:"/",
              query:{
                  alert:"用户删除成功！"
              }
          })
      })
  }
}

结果如下：

微海报分享

近期文章

近期评论

标签

热门

文章归档

分类目录

功能