1. 后台将数据接口上传至服务器

可以使用swagger-ui文档进行前后端分离开发

在这里插入图片描述

2. 封装后台接口

在这里插入图片描述

这里专门创建了一个api的文件夹写api接口方法,不是完全必要,但这么做后期维护起来比较方便。

3. vuex调用api中的接口

state: {
    customerDetailData: [],
    },
  getters: {
  },
  mutations: {
    changeCustomerDetailData(state, data) {
      state.customerDetailData = data;
    },
  },
  actions: {
    // 根据id查顾客信息
    findCustomerById({
      commit
    }, payload) {
      findCustomerById(payload).then(res => {
        commit('changeCustomerDetailData', res.data)
      })
    },

调用接口,拿到数据以后,提交mutation更改state中的数据

4.组件获取vuex中的数据

在这里插入图片描述

通过mapState,mapActions,mapGetter将vuex中的数据映射到组件中

5.渲染数据

在组件的模板中,可以直接使用{{}}使用数据,例如上方我们可以在模板中写{{customerDetailData}},数据就会渲染到页面上。

Logo

前往低代码交流专区

更多推荐