後臺資料展示到頁面上的過程(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}}，資料就會渲染到頁面上。