vue.js案例:笔记demo

本文由清尘发表于2020-09-08 15:13最后修改于2020-09-10属于javascript分类

点击查看演示

Tgit私有仓库:git@git.code.tencent.com:testpro/vue-notes-example.git

github地址:https://github.com/shine130/vue-notes-example

vue + LokiJS(浏览器的 NoSQL 数据库)

相关文章:vue.js案例:笔记demo 改vuex

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Shine Notes App _Vue.js</title>
  <link rel="stylesheet" href="src/semantic.min.css">
  <link rel="stylesheet" href="src/style.css">
  <style>
.my_header{height:30px; line-height:30px; background-color:#000; overflow:hidden; margin-bottom:20px; text-align:left;}
.my_header .link{ float:right; color:#fff; font-size:14px; padding-right:50px;}
.my_header .copyright{font-size:12px; color:#a1a1a1; padding: 0; margin: 0; padding-left:20px; padding-top: 5px;}
  </style>
</head>
<body>
  
  <div class="my_header"> <a class="link" target="_blank" href="https://blog.ipsfan.com/5257.html">查看文档</a><p class="copyright">copyright(c) 2014 ipsfan.com. All rights reserved.</p></div>

  <div id="app">

  </div>
<script src="src/vue.js"></script>
<script src="src/lokijs.js"></script>
<script src="src/lodash.js"></script>
<script src="src/moment.js"></script>
<script src="src/zh-cn.js"></script>
<script src="db.js"></script>
<script src="app.js"></script>
</body>
</html>

db.js

const db = new loki('notes',{
  autoload:true,
  autoloadCallback:databaseInitialize,
  autosave:true,
  autosaveInterval:3000
})

function databaseInitialize(){
  const notes = db.getCollection('notes')
  if(notes === null){
    db.addCollection('notes')
  }

}

function loadCollection(collection){
  return new Promise(resolve => {
    db.loadDatabase({},() => {
      const _collection = db.getCollection(collection) || db.addCollection(collection)
      resolve(_collection)
    })
  })

}

app.js

const Editor = {
  data(){
    return {
      entity:this.entityObject
    }
  },
  template:`
    <div class="ui form">
      <div class="field">
        <textarea @input="update" v-model="entity.body" rows="5" placeholder="写点东西...">
        </textarea>
      </div>
    </div>
  `,
  props:['entityObject'],
  methods: {
    update(){
      this.$emit('update')
    }
  },
}

const Note = {
  props:[
    'entityObject'
  ],
  data(){
    return {
      entity:this.entityObject,
      open:false
    }
  },
  template:`
    <div class="item">
      <div class="meta">
        {{updated}}
      </div>
      <div class="content">
        <div class="header" @click="open = !open">{{header || '新建笔记'}}</div>
        <div class="extra">
          <editor @update="save" v-if="open" :entityObject="entity"></editor>
          {{words}} 字
          <i class="right floated trash icon" v-if="open" @click="destroy"></i>
        </div>
      </div>
    </div>
  `,
  methods: {
    save(){
      loadCollection('notes').then((collection) => {
        collection.update(this.entity)
        db.saveDatabase()
      })
    },
    destroy(){
      this.$emit('destroy',this.entity.$loki)
    }
  },
  computed: {
    header(){
      return _.truncate(this.entity.body,{length:30})
    },
    updated(){
      return moment(this.entity.meta.updated).fromNow();
    },
    words(){
      return this.entity.body.trim().length
    }
  },
  components:{Editor}
}

const Notes = {
  data(){
    return {
      entities:[]
    }
  },
  template:`
    <div class="ui container notes">
      <h4 class="ui horizontal divider header">
        <i class="paw icon"></i>
        Shine Notes App _Vue.js
      </h4>
      <a @click="create" class="ui right floated basic violet button" href="">添加笔记</a>
      <div class="ui divided items">
        <note v-for="entity in entities" :entityObject="entity" :key="entity.$loki" @destroy="destroy"></note>
        <span class="ui small disabled header" v-if="!this.entities.length">还没有笔记,请按下'添加笔记'按钮</span>
      </div>
    </div>
  `,
  methods: {
    create(){
      loadCollection('notes')
        .then((collection) => {
          const entity = collection.insert({
            body:''
          })
          db.saveDatabase();
          this.entities.unshift(entity)
        })
    },
    destroy(id){
      const _entities = this.entities.filter((entity) => {
        return entity.$loki !== id
      })

      this.entities = _entities;

      loadCollection('notes').then((collection) => {
        collection.remove({'$loki':id})
        db.saveDatabase()
      })


    }
  },
  created() {
    loadCollection('notes').then((collection) => {
      const _entities = collection.chain()
              .simplesort('$loki',true)
              .data();
              
      this.entities = _entities
      console.log(_entities)
    })
  },
  components:{Note}
}

const app = new Vue({
  el:'#app',
  components:{Notes},
  template:`
    <notes></notes>
  `
})