實現全棧收銀系統（Node+Vue）（下）

基於上一篇中的開發基本上實現了登陸註冊，經過token拿數據等一些登陸涉及到的功能開發，基本上後端的功能已所有完成，能夠看下上一篇實現全棧收銀系統（Node+Vue）（上）的分享。 今天咱們須要進行實現的功能包前端頁面的編寫和開發

先看效果

前端項目建立

建立在node-app項目（即在node項目裏面） vue create client

先後端連載

安裝命令 npm install concurrently

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

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

功能開發模塊

設置全局的404頁面

在路由頁面中

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

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

請求攔截

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

響應攔截

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

記得 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操做

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);
  },
}
複製代碼

登陸操做

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

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

   

頂部實現（我的信息，退出）

我的信息

獲取相應的頭像，名字，等級咱們能夠在登陸的時候經過解析tonken獲取到的信息賦值，因爲咱們登陸的時候將解析的tonken存入vuex中，故咱們能夠進行取值

token信息

獲取tonken信息

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

退出

操做跟咱們token過時操做雷同，須要清除相應的token數據，將狀態更改成false ，故咱們能夠經過vuex中爲退出設置個方法調用便可

//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');
}
複製代碼

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

界面設置

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

添加和編輯

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

// 由父組件的數據傳入進行接收
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"); 
      });
    }
  });
}
複製代碼

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

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

<!-- 彈框頁面 -->
<DialogFound :dialog='dialog' :form='form' @update="getProfile"></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();
      });
    },
}
複製代碼

刪除

element自帶了方法，咱們只須要獲取拿了進行使用就好了

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

分頁

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

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

咱們須要再第一次數據加載的時候獲取到所有的數組數據allTableData，設置一個空數組，將儲存 過濾後的數組數據

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 )
},
複製代碼

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

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;i++) {
      // if(this.allTableData[i]) {
      // tables.push(this.allTableData[i]);
      // }
      // this.tableData = tables
      // }
    },
複製代碼

時間的篩選

時間的篩選中，咱們須要從新定義一個新的所有數據的數組，經過獲取兩個時間段的時間格式後進行比較賦值到計算分頁的數組當中，從新再執行分頁的初始化函數

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();
    }
  },
複製代碼

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

代碼已上傳 github，請給star，後續繼續更新，多謝支持