基於上一篇中的開發基本上實現了登錄註冊，通過token拿數據等一些登錄涉及到的功能開發，基本上後端的功能已全部完成，可以看下上一篇 的分享。 今天我們需要進行實現的功能包前端頁面的編寫和開發

先看效果

前端項目創建

創建在node-app項目（即在node項目裡面） vue create client

前後端連載

安裝命令 npm install concurrently

將Vue項目執行運行的命令添加 "start": "npm run serve"

在node項目中配置成，我們只需要執行 npm run dev就能讓後臺跟前臺都運行起來

功能開發模塊

設置全局的404頁面

在路由頁面中

<code>  {
    path: '*',
    name: '/404',
    component: NotFound
  },
複製代碼/<code>

註冊（數據axios攔截，config配置）

請求攔截

<code>axios.interceptors.request.use(config => {
    return config;
},error => {
    return Promise.reject(error);
})
複製代碼/<code>

響應攔截

<code>axios.interceptors.response.use(response => {
    return response;
}, error => {
    Message.error(erroe.response.data);
    return Promise.reject(error);
})
複製代碼/<code>

記得 export default axios

main.js中配置 Vue.prototype.$axios = axios;

登錄（token設置，vuex狀態存儲，）

1. 解析token的值 npm install jet-decode jwt_decode(token)
2. 數據儲存到localStorage中，在放到vuex中進行存儲，目的是後期判斷token是否有效等操作，其次vue插件能夠通過定義的type進行監控到數據獲取變化 vuex操作

<code>const type = {
  SET_AUTHENTICATION: "SET_AUTHENTICATION", //判斷是否認證通過 （自定義的type名稱）
  SET_USER: 'SET_USER',
}
const mutations ={
  [type.SET_AUTHENTICATION](state,isAuthentication) {
    if(isAuthentication) state.isAuthentication = isAuthentication;
    else state.isAuthentication = false;
  },

  [type.SET_USER](state,user) {
    if(user) state.user = user;
    else state.user = {};
  },
}
const actions = { //異步操作
  setAuthentication: ({commit},isAuthentication) => {
    commit(type.SET_AUTHENTICATION,isAuthentication);
  },
  setUser:({commit},user) => {
    commit(type.SET_USER,user);
  },
}
複製代碼/<code>

登錄操作

<code>// 解析token
const decode = jwt_decode(token);
// 存儲數據
this.$store.dispatch("setAuthentication", !this.isEmpty(decode));
this.$store.dispatch("setUser", decode);
複製代碼/<code>

3. 刷新的過程中會使vuex的插件數據丟失，那麼我們需要再app.js中再次對token值獲取

頂部實現（個人信息，退出）

個人信息

獲取相應的頭像，名字，等級我們可以在登錄的時候通過解析tonken獲取到的信息賦值，由於我們登錄的時候將解析的tonken存入vuex中，故我們可以進行取值

token信息

獲取tonken信息

<code> {{user.name}}
computed: {
    user() {
      return this.$store.getters.user;
    }
 }
複製代碼/<code>

退出

操作跟我們token過期操作雷同，需要清除相應的token數據，將狀態更改為false ，故我們可以通過vuex中為退出設置個方法調用即可

<code>//vuex
const actions = { 
  //退出登錄清除狀態
  clearCurrentState:({commit}) => {
    commit(type.SET_AUTHENTICATION,false);
    commit(type.SET_USER,null)
  }
}
// HeadNav
logout() {
    localStorage.removeItem('eleToken');
    //設置vuex store
    this.$store.dispatch('clearCurrentState');
    //跳轉
    this.$router.push('/login');
}
複製代碼/<code>

資金管理（父子傳值，添加，編輯，刪除，篩選，分頁）

界面設置

參考element中的table自定義列模板 ，此處的數據遍歷按照文檔中的走相應的更改字段即可

此處實現是雷同的，共用同個彈窗組件，其中涉及到父子組件之間的相互傳值。 新建出dialog自定義內容，此處技術點

<code>// 由父組件的數據傳入進行接收
props: {
    dialog: Object,
    form: Object
},
// 提交表單以後將數據傳回去給父組件 （此處的提交寫法是表單額提交寫法）
onSubmit(form) {
  this.$refs[form].validate(valid => {
    if (valid) {
      //表單數據驗證完成之後，提交數據;
      const url =
        this.dialog.option == "add" ? "add" : `edit/${this.form.id}`;
        this.$axios.post(`/api/profile/${url}`, this.form).then(res => {
        // 操作成功
        this.dialog.show = true;
        this.$emit("update"); 
      });
    }
  });
}
複製代碼/<code>

添加的時候，我們通過點擊父頁面改變自定義的數組數據，讓子組件顯示，通過提交數據傳回給父組件，update刷新父組件當前列表重新請求，繼而關閉彈窗。

在此處中我們對不同操作相應的data數據都要做處理，編輯的時候，我們對from中的數據進行賦值操作，添加的時候清空數據

<code>
<dialogfound>
data() {
    //這些數據是自定義的數據，包括表單信息，控制子組件的數組數據
    dialog: {
        show: false,
        title: "",
        option: "edit"
      },
      form: {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
        id: ""
      },
},
methods: {
//刷新數據
    getProfile() {
      // 獲取表格數據
      this.$axios("/api/profile").then(res => {
        // this.tableData = res.data;
        this.allTableData = res.data;
        this.filterTableData = res.data;
        // 設置分頁數據
        this.setPaginations();
      });
    },
}
複製代碼/<code>

刪除

element自帶了方法，我們只需要獲取拿了進行使用就行了

<code>onDeleteMoney(row, index) {
  // 刪除
  this.$axios.delete(`/api/profile/delete/${row._id}`).then(res => {
      console.log(JSON.stringify(res));
    this.$message("刪除成功");
    this.getProfile();
  });
},
複製代碼/<code>

分頁

模板參考element的分頁，根據分頁我們需要自定義的數組數據進行收集賦值

<code> paginations: {
    page_index: 1, // 當前位於哪頁
    total: 0, // 總數
    page_size: 5, // 1頁顯示多少條
    page_sizes: [5, 10, 15, 20], //每頁顯示多少條
    layout: "total, sizes, prev, pager, next, jumper" // 翻頁屬性
  },
複製代碼/<code>

我們需要再第一次數據加載的時候獲取到全部的數組數據allTableData，設置一個空數組，將儲存 過濾後的數組數據

<code>setPaginations() {
  // 總頁數
  this.paginations.total = this.allTableData.length; 
  this.paginations.page_index = 1;
  this.paginations.page_size = 5;
  // 設置默認分頁數據
  //此處便將總的數據進行遍歷，根據設置的初始值，將返回為true的數據儲存在空數組中
  this.tableData = this.allTableData.filter((item, index) => { 

    console.log(index < this.paginations.page_size);
    return index < this.paginations.page_size;
    //return index < page_size; 根據切換的頁數進行過濾
    
  });
  console.log( this.tableData )
},
複製代碼/<code>

實現切換頁數進行數據的改變

<code> handleCurrentChange(page) {
      // 當前頁
      let sortnum = this.paginations.page_size * (page - 1);
      let table = this.allTableData.filter((item, index) => {
        return index >= sortnum;
      });
      // 設置默認分頁數據
      this.tableData = table.filter((item, index) => {
        return index < this.paginations.page_size;
      });
      //第二種的實現
      // let tables = [];
      // for(let i=index;i<nums>      //   if(this.allTableData[i]) {
      //     tables.push(this.allTableData[i]);
      //   }
      //   this.tableData = tables
      // }
    },
複製代碼/<nums>/<code>

時間的篩選

時間的篩選中，我們需要重新定義一個新的全部數據的數組，通過獲取兩個時間段的時間格式後進行比較賦值到計算分頁的數組當中，重新再執行分頁的初始化函數

<code>onScreeoutMoney() {
      // 篩選
      if (!this.search_data.startTime || !this.search_data.endTime) { 

        this.$message({
          type: "warning",
          message: "請選擇時間區間"
        });
        this.getProfile();
        return;
      }
      const stime = this.search_data.startTime.getTime(); //開始時間
      const etime = this.search_data.endTime.getTime(); //結束時間
      this.allTableData = this.filterTableData.filter(item => {
        let date = new Date(item.date);
        let time = date.getTime();
        return time >= stime && time <= etime;
      });
      // 分頁數據
      this.setPaginations();
    }
  },
複製代碼/<code>

最終實現了vue+node實現的後臺系統

代碼已上傳github：https://github.com/lin593/node-app，請給star，後續繼續更新，多謝支持

閱讀更多 Echa攻城獅 的文章

關鍵字: 登錄 return data