vue全家桶實現筆記本功能

一個通過vue實現的練手小項目，數據保存和導出通過node進行處理

成品截圖：

安裝vue-cli,webpack:

cnpm install webpack -g

cnpm install vue-cli -g

通過vue-cli搭建項目：

需要使用vuex管理數據，添加store文件夾，最終目錄結構：

----vue_notes

  |--components

  |--router

  |--store

編輯入口文件 main.js

//引入Vue
import Vue from 'vue'
//引入vuere-source，該組件為網絡請求組件
import VueResource from "vue-resource"
//引入store，vuex對象
import store from './store'
//引入入口頁面
import App from './App'
//使用vue-resource中間件掛載網絡請求組件
Vue.use(VueResource);

/* 實例化vue項目 */
new Vue({
    el: '#app',
    store,
    ...App
})

vuex出口文件 store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

//添加vuex中間件
Vue.use(Vuex);

//使用數據結構
const state = {
    isAllList: true,
    notes: [],
    activeNote: {},
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
})

vuex方法聲明 /store/mutation-types.js

//修改日記列表狀態，是否查看全部
export const changeListStatus = "changeListStatus";
//新增日記
export const addNote = "addNote";
//編輯當前日記
export const editNote = "editNote";
//刪除所選日記
export const deleteNote = "deleteNote";
//切換收藏狀態
export const toggleFavorite = "toggleFavorite";
//切換當前日記
export const setActiveNote = "setActiveNote";
//初始化日記數據
export const initNotes = 'initNotes';
//編輯當前日記標題
export const eidtNoteTitle = 'eidtNoteTitle';

store/mutations.js 聲明方法

import * as types from './mutation-types'

export default {
    [types.changeListStatus](state, bool) {
        state.isAllList = bool;
    },
    [types.addNote](state) {
        const newNote = {
            text: 'New note',
            title: 'New',
            favorite: !state.isAllList,
            _rm: Math.random(),
        }
        state.notes.push(newNote);
        state.activeNote = newNote;
    },
    [types.editNote](state, text) {
        state.activeNote.text = text;
    },
    [types.deleteNote](state) {
        let rm = state.activeNote['_rm'];
        let index = state.notes.findIndex(function(v, i) {
            if(rm == v['_rm']) return true;
            return false;
        });
        if(index >= 0) state.notes.splice(index, 1);
        state.activeNote = state.notes[0] || {};
    },
    [types.toggleFavorite](state) {
        state.activeNote['favorite'] = !state.activeNote['favorite']
    },
    [types.setActiveNote](state, note) {
        state.activeNote = note;
    },
    [types.initNotes](state, notes) {
        for(let i of notes.notes) {
            if(i._rm === notes.activeNote._rm) {
                notes.activeNote = i;
                break;
            }
        }
        state.isAllList = notes.isAllList;
        state.notes = notes.notes;
        state.activeNote = notes.activeNote;
        window.state = state;
    },
    [types.eidtNoteTitle](state, title) {
        state.activeNote.title = title;
    }
}

/store/actions.js 聲明異步方法

import * as types from './mutation-types'

export default {
    [types.changeListStatus]({ commit }, { bool }) {
        commit('changeListStatus', bool);
    },
    [types.addNote]({ commit }) {
        commit('addNote');
    },
    [types.editNote]({ commit }, { text }) {
        commit('editNote', text);
    },
    [types.deleteNote]({ commit }) {
        commit('deleteNote');
    },
    [types.toggleFavorite]({ commit }) {
        commit('toggleFavorite');
    },
    [types.setActiveNote]({ commit }, { note }) {
        commit('setActiveNote', note);
    },
    [types.initNotes]({ commit }, { notes }) {
        commit('initNotes', notes);
    },
    [types.eidtNoteTitle]({ commit }, { title }) {
        commit('eidtNoteTitle', title);
    }
}

/store/getters.js 聲明獲取數據方法

export default {
    favoriteNotes: state => {
        return state.notes.filter((v, i) => v['favorite']);
    }
}

App.vue 外層組件

<template>
    <div id="app">
        <toolbar></toolbar>
        <notes-list></notes-list>
        <notes-editor></notes-editor>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { mapActions, mapState } from 'vuex'

    import Toolbar from "./components/Toolbar.vue";
    import NotesList from "./components/NotesList.vue";
    import NotesEditor from "./components/NotesEditor.vue";

    export default {
        name: 'app',
        components: {
            Toolbar,
            NotesList,
            NotesEditor
        },
        computed: {
//引入vuex狀態生成對應計算屬性
            ...mapState({
                isAllList: state => state.isAllList,
                notes: state => state.notes,
                activeNote: state => state.activeNote,
            })
        },
//鈎子方法，創建dom之前抓取數據進行初始化
        beforeCreate() {
            this.$http.get('/test.action').then(function(res) {
                return res.json();
            }).then((data) => this.initNotes({notes: data}));
        },
        methods: {
//引入vuex initNotes方法
            ...mapActions(['initNotes']),
            save() {
                this.$http.post('/save.action', this.$store.state).then((res) => res.json()).then((data) => console.log(data));
            }
        },
//監聽數據變化，如果出現變化，重新保存到后台
        watch: {
            'isAllList': function() {
                return this.save;
            },
            'notes': function() {
                return this.save;
            },
            'activeNote': {
                handler: function() {
                    return this.save;
                },
                deep: true
            },
        }
    }
</script>

Toolbar.vue 操作日記按鈕組件

<template>
    <div id="toolbar">
        <i class="glyphicon glyphicon-plus" @click="addNote"></i>
        <i class="glyphicon glyphicon-star" :class="{starred: activeNote['favorite']}" @click="toggleFavorite"></i>
        <i class="glyphicon glyphicon-remove" @click="deleteNote"></i>
        <i class="glyphicon glyphicon-save" @click="down"></i>
    </div>
</template>

<script>
    import { mapState, mapActions } from "Vuex";

     export default {
        computed: {
            ...mapState({
                activeNote: state => state.activeNote,
            })
        },
        methods: {
            ...mapActions({
                addNote: 'addNote',
                toggleFavorite: 'toggleFavorite',
                deleteNote: 'deleteNote'
            }),
            down() {
                window.open('/down.action', '_blank');
            }
        }
    }
</script>

 NodeList.vue 日記列表組件

<template>
    <div id="notes-list">
        <div id="list-header">
            <h2>Notes | coligo</h2>
            <div class="btn-group btn-group-justified" role="group">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" :class="{active:isAllList}" @click="changeStatus('isAll')"> All Notes </button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" :class="{active:!isAllList}" @click="changeStatus('isFavorite')"> Favorites </button>
                </div>
            </div>
        </div>
        <div id="container">
            <div class="list-group">
                <a class="list-group-item" href="javascript:;" v-for="(v,k) in list" :class="{active: v['_rm']==activeNote['_rm']}" @click="setActiveNote({note:v})">
                    <h4 class="list-group-item-heading">{{ v['title'].length>10 ? v['title'].substring(0,10) + "..." : v['title'] }}</h4>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapGetters, mapActions } from "Vuex";

    export default {
        data() {
            return {
                list: [],
            }
        },
        computed: {
            ...mapState({
                isAllList: state => state.isAllList,
                notes: state => state.notes,
                activeNote: state => state.activeNote,
            }),
            ...mapGetters({
                favoriteNotes: 'favoriteNotes',
            }),
        },
        methods: {
            ...mapActions({
                setActiveNote: 'setActiveNote',
                changeListStatus: 'changeListStatus',
            }),
            changeStatus(s) {
                if(s == 'isAll') {
                    this.changeListStatus({ bool: true });
                } else if(s == 'isFavorite') {
                    this.changeListStatus({ bool: false });
                }
            },
            changeList() {
                if(this.isAllList) {
                    this.$data.list = this.notes;
                } else {
                    this.$data.list = this.favoriteNotes;
                }
            },
        },
        watch: {
            notes: function() {
                this.changeList();
            },
            isAllList: function() {
                this.changeList();
            },
        },
        mounted: function() {
//數據更新重新更新this.$data中數據再執行dom更新
            this.$nextTick(function() {
                this.$data.list = this.notes;
            });
        }
    }
</script>

<style>

</style>

NotesEditor 編輯框組件

<template>
    <div id="note-editor">
        <input type="text" v-model="textTitle" @change="eidtNoteTitle({title: textTitle})" />
        <textarea class="form-control" v-model="textVal" @change="editNote({text: textVal})"></textarea>
    </div>
</template>

<script>
    import { mapState, mapActions } from "Vuex";

    export default {
        data() {
            return {
                textVal: "",
                textTitle: ""
            }
        },
        computed: {
            ...mapState({
                activeNote: state => state.activeNote,
            })
        },
        methods: {
            ...mapActions({
                editNote: 'editNote',
                eidtNoteTitle: 'eidtNoteTitle'
            }),
        },
        watch: {
            activeNote: function() {
                this.$data.textVal = this.activeNote['text'];
                this.$data.textTitle = this.activeNote['title'];
            },
        }
    }
</script>

服務端功能，服務端文件build/dev-server.js

//引入文件操作模塊
var fs = require('fs');
//post解碼模塊
var bodyParser = require('body-parser');
// 創建 application/x-www-form-urlencoded 編碼解析
var urlencodedParser = bodyParser.urlencoded({ extended: false });
//使用中間件解碼
app.use(bodyParser.json());
app.use(urlencodedParser);
//查詢數據
app.all('/test.action', function(req, res) {
    fs.readFile('./static/data/data.json', 'utf-8', function(err, data) {
        res.json(JSON.parse(data));
    })
})
//保存數據
app.all('/save.action', function(req, res) {
    fs.writeFile('./static/data/data.json', JSON.stringify(req.body, null, '\t'), function(err) {
        if(err) {
            console.log(err);
            res.json({satus: 400});
        } else {
            res.json({satus: 200});
        }
    })
})
//保存功能，將json文件讀取解析為txt文件，然后發送到前端下載
app.all('/down.action', function(req, res) {
    fs.readFile('./static/data/data.json', 'utf-8', function(err, data) {
        if(err) {
            res.json({status: 500});
        } else {
            let string = [];
            let jsonData = JSON.parse(data);
            for(let i of jsonData.notes) {
                string.push(`##${i.title}##\r\n${i.text}`)
            }
            fs.writeFile('./static/data/down.txt', string.join(`\r\n******************************************************\r\n`), function(err) {
                if(err) {
                    res.json({status: 500});
                } else {
                    res.download('./static/data/down.txt', 'notes.txt');
                }
            })
        }
    })
})

代碼已上傳至github