vue入门demo：用户管理2

该demo由前端请求后台服务器获取数据进行渲染

• 使用到的技术点

• 1.使用到的vue指令：{{}} v-if v-for v-model
• 2.使用到的事件：@click 点击事件， @keyup.enter 回车
• 3.使用到的事件修饰符：.prevent 阻止事件默认行为
• 4.使用vue-resource发起请求获取服务端返回的数据
• 5.使用生命周期函数created()，即在页面渲染前请求用户列表
• 6.自定义私有过滤器
• 7.js base64编码：window.btoa() ， base64解码：window.atob()

---

• 后台接口说明

获取用户信息列表

key	value	备注
url	http://192.168.1.40:9001/hubtest/user/getUserList
method	get	7

请求体

无

响应体

{
    "code":0,
    "data":[
        {
            "id":0,
            "password":"123456",
            "username":"macy"
        }
    ],
    "message":"success"
}

添加用户

key	value	备注
url	http://192.168.1.40:9001/hubtest/user/addUser
method	post
Content-Type	application/json

请求体

{
    "username":"macy",
    "password":"123"
}

响应体

{
    "code":0,
    "data":{
        "id":1566550425674,
        "password":"123",
        "username":"macy"
    },
    "message":"success"
}

根据用户id删除用户

key	value	备注
url	http://192.168.1.40:9001/hubtest/user/deleteUserById/{userId}
method	get

请求体

无

响应体

{
  "code":0,
  "data":{
      "id":0,
      "password":"123456",
      "username":"macy"
  },
  "message":"success"
}

---

• 实例

    
    

    
    
    
    



    


            
            
            

                {{ errMsg }}
                
                
                    ×
                
            
    
          
            

                

                    用户名：
                    
                
                

                    密码：
                    
                
                

                    
                
                

                    
                    
    
                
            
            
            
            

                

                    

                        
编号
                        
用户名
                        
密码
                        
操作
                    
                
                

        
                    

                        
{{ item.id }}
                        
{{ item.username }}
                        
                        
{{ item.password | passwordFormat }}
                        

                            
                            删除
                        
                    
                
            
        

    

---

• 效果