vant和axios实现联系人增删改查

曾经终败给现在 2021-07-24 20:08 561阅读 0赞

**一 配置前端路由**

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue'
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: [
        // 在这里添加路由
        {
          path:'/contactList',
          name:'联系人列表',
          component:()=> import('./views/ContactList.vue')
        }
      ]
    })

**二 ContactList.vue实现核心逻辑**

// 模板
    <template>
      <div class="home">
        
        
        
        <van-contact-list
            :list="list"
            @add="onAdd"
            @edit="onEdit"
        />
        
        
        <van-popup v-model="showEdit" position="bottom">
            <van-contact-edit
                :contact-info="editingContact"
                :is-edit="isEdit"
                @save="onSave"
                @delete="onDelete"
            />
        </van-popup>
      </div>
    </template>
    
    
    <script>
    // 第1步：导入组件
    // 通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
    // Toast 轻提示
    // Popup 弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示
    import {ContactList,Toast,ContactEdit,Popup} from 'vant'
    // 引入http组件
    import axios from 'axios'
    export default {
      name: 'contactList',
      components: {
        // 第2步：注册组件
        [ContactList.name]:ContactList,
        [ContactEdit.name]:ContactEdit,
        [Popup.name]:Popup
      },
      data(){
          return {
            // {
            //     id:1,
            //     name:'',
            //     tel:''
            // }
            // 第4步：加入数据
            list:[], // 绑定到列表中的数据
            instance:null, // axios 实例
            showEdit:false, // 编辑弹窗的显隐
            editingContact:{}, // 正在编辑的联系人数据
            isEdit:false, // 新建为flase 编辑为true
          }
      },
      created() {
        this.instance = axios.create({
            baseURL:'http://localhost:9000/api',
            timeout:1000
        })
        this.getList()
      },
      methods: {
        // 获取联系人列表
        async getList(){
            let res = await this.$Http.getContactList()
            this.list = res.data
        },
        // 第5步：添加方法
        // 添加联系人
        onAdd(){
            this.showEdit = true
            this.isEdit = false
        },
        // 编辑联系人
        onEdit(info){
            this.showEdit = true
            this.isEdit = true
            this.editingContact = info
        },
        // 保存联系人
        async onSave(info){
            if(this.isEdit){
                // 编辑保存
                let res = await this.$Http.editContact(
                    info
                )
                if(res.code === 200){
                    Toast('保存成功')   // 保存成功
                    this.showEdit = false  
                    this.getList()
                }
            }else{
                // 新建保存
                // let res = await this.$Http.newContactJson(
                //     info
                // )
                // if(res.code === 200){
                //     Toast('新建成功')
                //     this.showEdit = false  
                //     this.getList()
                // }
                let res = await this.$Http.newContactForm(
                    info,
                    true
                )
                if(res.code === 200){
                    Toast('保存成功')
                    this.showEdit = false  
                    this.getList()
                }
            }
        },
        // 删除联系人
        async onDelete(info){
            let res = await this.$Http.delContact(
                {
                    id:info.id
                }
            )
            if(res.code === 200){
                Toast('删除成功')
                this.showEdit =false
                this.getList()
            }
        }
      },
    }
    </script>
    <style scoped>
      .van-contact-list__add{
        z-index: 0;
      }
      .van-popup{
        height: 100%;
      }
    </style>

**三 联系人后端封装的API**

const CONTACT_API = {
        // 获取联系人列表
        getContactList:{
            method:'get',
            url:'/contactList'
        },
        // 新建联系人 form-data
        newContactForm:{
            method:'post',
            url:'/contact/new/form'
        },
        // 新建联系人 application/json
        newContactJson:{
            method:'post',
            url:'/contact/new/json'
        },
        // 编辑联系人
        editContact:{
            method:'put',
            url:'/contact/edit'
        },
        // 删除联系人
        delContact:{
            method:'delete',
            url:'/contact'
        }
    }
    export default CONTACT_API

**四 http封装逻辑**

import axios from 'axios'
    import service from './contactApi'
    import {Toast} from 'vant'
    // service 循环遍历输出不同的请求方法
    let instance = axios.create({
        baseURL:'http://localhost:9000/api',
        timeout:1000
    })
    const Http = {}; // 包裹请求方法的容器
    
    
    // 请求格式/参数的统一
    for(let key in service){
        let api = service[key]; // url method
        // async 作用：避免进入回调地狱
        Http[key] = async function(
            params, // 请求参数 get：url，put，post，patch（data），delete：url
            isFormData=false,// 标识是否是form-data请求
            config={} // 配置参数
        ){
            let newParams = {}
    
    
            //  content-type是否是form-data的判断
            if(params && isFormData){
                newParams = new FormData()
                for(let i in params){
                    newParams.append(i,params[i])
                }
            }else{
                newParams = params
            }
            // 不同请求的判断
            let response = {}; // 请求的返回值
            if(api.method === 'put'|| api.method === 'post'||api.method === 'patch'){
                try{
                    response =  await instance[api.method](api.url,newParams,config)
                }catch(err){
                    response = err
                }
            }else if(api.method === 'delete'|| api.method === 'get'){
                config.params = newParams
                try{
                    response =  await instance[api.method](api.url,config)
                }catch(err){
                    response = err
                }
            }
            return response; // 返回响应值
        }
    }
    
    
    // 拦截器的添加
    // 请求拦截器
    instance.interceptors.request.use(config=>{
        // 发起请求前做些什么
        Toast.loading({
            mask:false,
            duration:0,// 一直存在
            forbidClick:true, // 禁止点击
            message:'加载中...'
        })
        return config
    },()=>{
        // 请求错误
        Toast.clear()
        Toast('请求错误，请求稍后重试')
    })
    // 响应拦截器
    instance.interceptors.response.use(res=>{
        // 请求成功
        Toast.clear()
        return res.data
    },()=>{
        Toast.clear()
        Toast('请求错误，请求稍后重试')
    })
    
    
    export default Http

**五 演示**

1 联系人列表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

2 点击新建联系人弹框

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

3 点击编辑某个联系人的弹框

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

**六 参考**

[https://youzan.github.io/vant/\#/zh-CN/][https_youzan.github.io_vant_zh-CN]

[https://gitee.com/cakin24/axios-learn][https_gitee.com_cakin24_axios-learn]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/742aac8f8cd64bd08c2de5b799fc8fa4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200507090015204.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200507090003881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70
[https_youzan.github.io_vant_zh-CN]: https://youzan.github.io/vant/#/zh-CN/
[https_gitee.com_cakin24_axios-learn]: https://gitee.com/cakin24/axios-learn