我是使用sharedb 作为后端 ，然后前端使用的elementUI样式，编写的一个值班小工具。接下来，让我们先来了解一下sharedb是什么吧？

  • sharedb工具

　　github地址：https://github.com/share/sharedb.git。

　　官方概念：ShareDB是基于JSON文档的操作转换（OT）的实时数据库后端。它是DerbyJS Web应用程序框架的实时后端。

　　特征：

    1. 实时同步任何JSON文档
    2. 并发多用户协作
    3. 具有异步最终一致性的同步编辑API
    4. 实时查询订阅
    5. 与任何数据库轻松集成-MongoDB，PostgresQL（实验性）
    6. 通过发布/订阅集成可水平扩展
    7. 从文档和操作中选择所需字段的投影
    8. 用于实现访问控制和自定义扩展的中间件
    9. 非常适合在浏览器或服务器上使用
    10. 重新连接后脱机更改同步
    11. 用于单元测试的数据库和pub / sub的内存中实现

　　　在这里，我只列出sharedb的概念以及特征，其中的其他特性（包括中间件等等），大家可以自行去github上去看。

　　 对于我来说，我是把github上的代码克隆下来，然后选择了其中的counter作为例子模板，去编写工具代码，首先对其中的server.js进行更改.

在server.js中，我只改了 doc.create({ name1: [], date: [] }, callback);这一行代码，在sharedb文档中doc.create(data[, type][, options][, function(err) {...}]) 在本地创建文档，然后将创建操作发送到服务器。因为对于我的需求，就是要将名字，以及对应名字所选的日期发送到服务器上，所以在这里我创建了这个对象。

　　server.js

var http = require('http');

var express = require('express');

var ShareDB = require('sharedb');

var WebSocket = require('ws');

var WebSocketJSONStream = require('websocket-json-stream');

var backend = new ShareDB();

createDoc(startServer);

// Create initial document then fire callback

function createDoc(callback) {

  var connection = backend.connect();

  var doc = connection.get('examples', 'counter');

  doc.fetch(function (err) {

    if (err) throw err;

    if (doc.type === null) {

      doc.create({ name1: [], date: [] }, callback);

      return;

    };

    callback();

  });

}

function startServer() {

  // Create a web server to serve files and listen to WebSocket connections

  var app = express();

  app.use(express.static('static'));

  var server = http.createServer(app);

  // Connect any incoming WebSocket connection to ShareDB

  var wss = new WebSocket.Server({ server: server });

  wss.on('connection', function (ws, req) {

    var stream = new WebSocketJSONStream(ws);

    backend.listen(stream);

  });

  server.listen(8080);

  console.log('Listening on http://localhost:8080');

}

　　client.js代码：

var sharedb = require('sharedb/lib/client');

// Open WebSocket connection to ShareDB server

var socket = new WebSocket('ws://' + window.location.host);

var connection = new sharedb.Connection(socket);

// Create local Doc instance mapped to 'examples' collection document with id 'counter'

var doc = connection.get('examples', 'counter');

// 获取文档的初始值并订阅更改

doc.subscribe(showNames);

doc.subscribe(dateRanges);

// 当文档更改时（由此客户端或任何其他客户端或服务器），

// 更新页面上的名字以及日期范围

doc.on('op', showNames);

doc.on('op', dateRanges);
function dateRanges() {

  app.$data.items = doc.data.date[0];

};

function showNames() {

  app.$data.messages1 = doc.data.name1[0] ? doc.data.name1[0] : [];

};

// 当点击提交名字的时候，更改本地的名字，并将同步更改服务器和其它链接的客户端//提交日期

function submite() {

  doc.submitOp([{ p: ['date', 0], li: app.$data.items }]);

};

//提交名字

function display() {

  doc.submitOp([{ p: ['name1', 0], li: app.$data.messages1 }]);

};

// Expose to index.html

global.display = display;

global.submite = submite;

html代码

这个代码就没什么好说的啦，主要功能 就是可以先输入名字，然后再选择想要进行值班的日期。而输入的名字不可以有重复的，主要是靠一个复选框实现的，以及日期选择器，感兴趣的同学可以看看哦！，大家也可以看到这里面引用的js是bundle.js,所以我们要把写在client.js中的代码，复制到bundle.js中才可以实现哦。

<!DOCTYPE html>

<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<link rel="icon" href="1.ico">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<title>值班小工具</title>

<body>

  <div id="app" >

    <router-view> </router-view>

  </div>

</body>

<script src="dist/bundle.js"></script>

<script>

  const inputName = {

    template: `<div>

                 <el-header>

                  <el-input id="date" placeholder="请输入用户名" name="date" v-model="message"></el-input>

                  <el-button v-on:click="display1" type="primary">提交 名字</el-button>

                  </el-header>

                  <el-main>

                      <span class="date">日 期</span>

                      <span class="name">姓 名</span>

                  <el-checkbox-group  v-model="checked"  >

                      <li v-for="(item,index) in $root.items" :key="item.checked">

                         <el-checkbox

                              v-on:change="checked1(index,checked)"

                              :label="item"

                              name="item"

                              >

                              {{item}}

                              <span class="messages">{{[$root.messages1[index]].join("|")}}</span>

                         </el-checkbox>

                      </li>

                  </el-checkbox-group>

                  </el-main>

              </div>` ,

    data() {

      name: inputName;

      return {

        message: '',

        messages1: [],

        checked: []

      }

    },

    methods: {

      checked1: function () {

      },

      display1: function (index, checked) {

        var a = document.getElementsByName('item');

        this.messages1 = this.$root.messages1;

        var cashName = document.getElementById("date").value;

        var result = cashName.match(/[\s`~!@#￥$%^&*()_+<>?:"{},.\/;'[\]\w]/im);

        for (var i = 0; i < a.length; i++) {

          if (result !== null) {

            this.$message({

              message: '请输入正确的名字哦！',

              type: 'warning'

            });

            break

          }

          if (a[i].checked && this.messages1[i] == null) {

            this.messages1[i] = new Array;

          }

          if (a[i].checked && this.messages1[i] !== null && this.messages1[i][0] !== this.message) {

            this.messages1[i].push(this.message);

          }

          if (a[i].checked && this.messages1[i] !== null && this.messages1[i].length > 2) {

            this.messages1[i].pop(this.message);

            this.$message({

              message: '前面已经有两人选择了哦，请选择其它日期吧！',

              type: 'warning'

            });

          }

        }

        display()

      }

    }

  };

  const inputDate = {

    template: `<div>

                 <el-header>

                  <el-date-picker

                      v-model="value"

                      type="daterange"

                      range-separator="至"

                      start-placeholder="开始日期"

                      end-placeholder="结束日期"

                      format="yyyy年M月d日"

                      value-format="yyyy-MM-dd"

                      v-on:change="change1"

                    >

                  </el-date-picker>

                  <el-button onclick="submite()" type="primary">提交 日期</el-button>

                  </el-header>

                   <el-main>

                      <span class="date">日 期</span>

                      <span class="name">姓 名</span>

                      <li v-for="(item,index) in $root.items" :key="item.index">

                            {{item}}

                            <span class="messages1">{{[$root.messages1[index]].join('&')}}</span>

                      </li>

                  </el-main>

              </div>`,

    data() {

      name: inputDate;

      return {

        items: [],

        value: '',

      }

    },

    methods: {

      change1(value) {

        var begin = value[0];

        var end = value[1];

        var item = new Array();

        app.$data.items = item;

        var ab = begin.split("-");

        var ae = end.split("-");

        var db = new Date();

        db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);

        var de = new Date();

        de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);

        var unixDb = db.getTime();

        var unixDe = de.getTime();

        for (var k = unixDb; k <= unixDe;) {

          item.push(new Date(parseInt(k)).format().toString());

          k = k + 24 * 60 * 60 * 1000;

        }

      }

    }

  };

  const routes = [

    { path: '/inputDate', component: inputDate },

    { path: '/inputName', component: inputName }

  ];

  const router = new VueRouter({

    routes

  });

  Date.prototype.format = function () {

    var s = "";

    s += this.getFullYear() + "-";

    s += this.getMonth() + 1 + "-";

    s += this.getDate();

    return s;

  };

  var app = new Vue({

    router,

    data() {

      return {

        value6: '',

        items: [],

        checked: [],

        message: '',

        messages1: [],

        checked: []

      }

    }

  }).$mount('#app');

</script>

<style scoped>

  #app {

    /* width: 1200px;

    height: 848px; */

    background-position: center;

    padding-top: 0%;

  }

  body {

    margin: 0%;

  }

  .el-checkbox__label {

    display: inline-block;

    padding-left: 10px;

    line-height: 19px;

    font-size: 14px;

    width: 100%;

  }

  .el-date-picker {

    width: 30%;

  }

  h3 {

    margin: 40px 0 0;

  }

  a {

    color: #42b983;

  }

  .el-header {

    color: #333;

    text-align: center;

    line-height: 88px;

  }

  li {

    padding-top: 2%;

    list-style-image: url('./4.ico');

  }

  p {

    font-size: 20px;

    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif

  }

  .date {

    padding-left: 10%;

  }

  .name {

    padding-left: 40%;

  }

  .el-main {

    padding-top: 1%;

    padding-left: 35%;

    width: 70%;

    height: 550px;

  }

  .el-input {

    width: 30%;

  }

  .messages1 {

    float: right;

    padding-right: 27%;

    text-decoration: underline;

  }

  .messages {

    float: right;

    padding-right: 24%;

    text-decoration: underline;

  }

  .el-checkbox {

    width: 80%;

    color: black;

  }

</style>

第一次写博客，可能有些地方写的不是很完整，欢迎大家提出意见！

sharedb结合elementUi编写的实时小工具的更多相关文章

  1. 目不识丁的我使用Python编写汉字注音小工具

    一万点暴击伤害 人懒起来太可怕了,放了个十一充分激发了我的惰性.然后公众号就这么停了半个月,好惭愧- 新学期儿子的幼儿园上线了APP,每天作业通过app布置后,家长需要陪着孩子学习,并上传视频才算完成 ...

  2. 小程序 web 端实时运行工具

    微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/

  3. 如何高效的编写与同步博客 （.NET Core 小工具实现）

    一.前言 写博客,可以带给我们很多好处,比如可以让我们结识更多志同道合的人:在写博客过程中去查技术资料或者实践可以让我们对知识的掌握和理解更加深刻:通过博客分享能帮助他人收获分享的快乐等等.写博客真的 ...

  4. C#7.2——编写安全高效的C#代码 c# 中模拟一个模式匹配及匹配值抽取 走进 LINQ 的世界 移除Excel工作表密码保护小工具含C#源代码 腾讯QQ会员中心g_tk32算法【C#版】

    C#7.2——编写安全高效的C#代码 2018-11-07 18:59 by 沉睡的木木夕, 123 阅读, 0 评论, 收藏, 编辑 原文地址:https://docs.microsoft.com/ ...

  5. iOS 设备屏幕上实时打印 Log 的小工具

    需求 写这个小工具的想法,主要来源于很多团队都会用友盟.TalkingData 等第三方框架做自定义事件统计:不过统计代码加好之后,没有很好的方法来让测试工程师验证一下事件加上了没有,调用次数有没有重 ...

  6. 在windows下实时监控、接受文件变化小工具

    在windows下实时监控文件变化小工具   在测试的时候,我们可能想实时监控系统打出的log信息,在unix系统上我们可以用"tail -f"实现,在windows下一般就无法做 ...

  7. java 编写小工具 尝试 学习（七）

    1.在java 编写小工具 尝试 学习(六)里学会了,控件 的随意摆放, 以及大小(x,y,width,height),又根据前面学习的按钮 被点击 的事件监控 的方法 ,点击 按钮 在显示区域显示“ ...

  8. （数据科学学习手札80）用Python编写小工具下载OSM路网数据

    本文对应脚本已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们平时在数据可视化或空间数据分析的过程中经常会 ...

  9. C# 基础知识系列- 17 实战篇 编写一个小工具（1）

    0. 前言 这是对C# 基础系列的一个总结,现在我们利用之前学到的知识做一个小小的工具来给我们使用. 如果有看过IO篇的小伙伴,应该有印象.当时我提过一个场景描述,我们在平时使用系统的时候,经常会为了 ...

随机推荐

  1. SQL order by语句

    关于order by: order by 语句用于根据指定的列对结果集进行排序,默认按照升序排列. 1.  select 字段名 from 表名 where 条件 order by 字段名1 asc/ ...

  2. Oracle常见错误以及解决方法

    前言: 本博客为博主在开发中遇到的问题,为大家提供解决方法,如需转载,请注明来源,谢谢! 问题一: 第一次用PLSQL Developer连接数据库,若用sys用户登录并操作则正常,若用普通用户比如x ...

  3. Redis Desktop Manager安装

    Windows安装: 1.下载安装包 官网下载地址:https://redisdesktop.com/pricing 官网下载需要付费使用 再此附上一个免费的破解版本,绿色安全可用 链接:https: ...

  4. 使用ASP.NET实现定时计划任务，不依靠windows服务

    我们怎样才能在服务器上使用asp.net定时执行任务而不需要安装windows service?我们经常需要运行一些维护性的任务或者像发送提醒邮件给用户这样的定时任务.这些仅仅通过使用Windows ...

  5. 如何在CSDN博客开头处加上版权声明？

    1.首先在CSDN账号头像处打开"管理博客"选项. 2.然后在管理博客界面左侧找到设置下面的"博客设置"选项. 3.将博客设置里的"版权声明" ...

  6. Windows 平台做 Python 开发的最佳组合

    在 Windows 上怎样做 Python 开发?是像大神那样使用纯文本编辑器,还是用更加完善的 IDE?到底是用自带的命令行工具,还是需要装新的 Terminal?本文将带你了解如何利用微软官方维护 ...

  7. 集合的一些实例的demo实现

    按照斗地主的规则,完成洗牌发牌的动作. 具体规则: 使用54张牌打乱顺序,三个玩家参与游戏,三人交替摸牌,每人17张牌,最后三张留作底牌. 准备牌: 牌可以设计为一个ArrayList,每个字符串为一 ...

  8. 我是如何从零开始自学转行IT并进入世界500强实现薪资翻倍？

    本部分内容对应视频链接. 熟悉我的朋友应该知道,我本科及硕士期间所学的专业都是机械相关,毕业两年之后才从零开始自学转行成为一名程序员.当时我写了一篇文章,介绍我的转行经历,很多小伙伴因为我的这篇文章, ...

  9. 你不知道的JavaScript 上卷 2/11

    第一部分——作用域和闭包 第一章 作用域是什么 1.几乎所有编程语言最基本的功能之一,就是能够储存变量当中的值,并且能在之后对这个值进行访问或修改.事实上,正是这种储存和访问变量的值的能力将状态带给了 ...

  10. pandas_数据拆分与合并

    import pandas as pd import numpy as np # 读取全部数据,使用默认索引 data = pd.read_excel(r'C:\Users\lenovo\Deskto ...