電協小便籤實現--用typescript和vue腳手架

1. 需要的知識儲備

2.搭建環境

3. 模型設計

4.datahelper實現

數據類的封裝 實現數據的增刪查改

// DataHelper類 - 負責 localStorage 操作
class DataHelper {
    dataKey: string;
    primaryKey: string;

    // 一、構造函數 --作用：爲對象 添加 各種屬性--------------------------
    constructor(dataKey: string, primaryKey: string) {
        this.dataKey = dataKey;
        this.primaryKey = primaryKey;
    }

    // 1.讀取全部數據，返回數組(如果沒有讀到數據 就返回 空數組)------------
    readData(): any {
        //1.讀取 本地數據(根據dataKey讀取)
        let strData: string | null = localStorage.getItem(this.dataKey);

        //2.將 讀取的 json數組字符串 轉成數組對象
        let arrData: any = [];
        if (strData != null) {
            arrData = JSON.parse(strData);
        }

        //3.返回 數組對象
        return arrData;
    }

    // 2.存入本地數據 -------------------------------------------------
    saveData(arrData: Array<Object>): void {
        //1.將數組 轉成 json字符串
        let str: string = JSON.stringify(arrData);

        //2.將字符串 保存到 本地 localStorage 中
        localStorage.setItem(this.dataKey, str);
    }

    // 3.新增數據---------------------------
    addData(newDataObj: any): number {
        let dataArray = this.readData();
        if (dataArray == null) {
            dataArray = [];
        }

        // 自動生成 主鍵值 (id 值)
        //  如果 數組 長度 > 0，則 將 最後一個 元素的 id 值 取出 + 1 作爲 新元素的 id值
        //               <= 0, 則 將 1 作爲 新元素的 id 值
        let newId =  dataArray.length > 0 ? dataArray[dataArray.length - 1][this.primaryKey] + 1 : 1;
        newDataObj[this.primaryKey] =newId;

        // 將添加了 主鍵值 的 對象 追加到數組
        dataArray.push(newDataObj);

        // 將數組 保存到 localStrorage 中
        this.saveData(dataArray);

        // 返回添加了 id 的數據對象
        return newId;
    }

    // 4.刪除數據 ---------------------------
    removeDataById(id: string | number): boolean {
        // 讀取本地數組
        let arr = this.readData();

        // 查找要刪除 評論對象的 下標，並保存 到本地
        let index = arr.findIndex((ele:any) => {
            return ele[this.primaryKey] == id;
        });

        // 如果下標 大於-1，則刪除數組中該下標元素對象，並返回true
        if (index > -1) {
            arr.splice(index, 1);
            // 保存到本地
            this.saveData(arr);
            return true;
        }

        return false; // 否則 返回 false
    }
}

export default DataHelper;

5.菜單欄實現

<template>
  <!-- 菜單欄 -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand">
          <img height="40" src="../assets/logo.png" />
        </a>
        <button
          type="button"
          class="navbar-toggle collapsed"
          data-toggle="collapse"
          data-target=".navbar-collapse"
          aria-expanded="false"
        >
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
          <li class="add dropdown">
            <a class="create-new dropdown-toggle" data-toggle="dropdown">新建</a>
            <ul class="dropdown-menu">
              <li>
                <a @click="showAdd">文本便籤</a>
              </li>
            </ul>
          </li>
          <li class="categories dropdown">
            <a class="current-category dropdown-toggle" data-toggle="dropdown">
              全部
              <span class="count badge">{{doFilter(-1)}}</span>
            </a>
            <ul class="dropdown-menu">
              <li class="total" @click="doFilterByCateId(-1)">
                <a>
                  全部
                  <span class="count badge">{{doFilter(-1)}}</span>
                </a>
              </li>
              <li class="divider"></li>
              <li @click="doFilterByCateId(0)">
                <a>
                  工作
                  <span class="count badge">{{doFilter(0)}}</span>
                </a>
              </li>
              <li @click="doFilterByCateId(1)">
                <a>
                  生活
                  <span class="count badge">{{doFilter(1)}}</span>
                </a>
              </li>
              <li @click="doFilterByCateId(2)">
                <a>
                  學習
                  <span class="count badge">{{doFilter(2)}}</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import ItemData from "../model/ItemData";

@Component
export default class MenuBar extends Vue {
  // 顯示 編輯框
  showAdd() {
    this.$store.state.transMemo = new ItemData(-1, 0);
    this.$store.state.isShow = true;
  }

  doFilter(cid: number): number {
    if(cid==-1){
      return this.$store.state.aHelper.memoList.length;
    }else{
      return this.$store.state.aHelper.memoList.filter((ele:any)=>{
        return ele.categoryId == cid;
      }).length;
    }
  }

  doFilterByCateId(cid:number){
    this.$store.state.filterCateId = cid;
  }
}
</script>

—————————————————————————————————

			 這裏需要插講Vuex的使用，先咕咕，未完待續

—————————————————————————————————

6.筆記列表