后台数据展示到页面上的过程(vue)

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}}，数据就会渲染到页面上。