关于文章 javascript

javascript js nosql restful

CouchDB 安装

CouchDB 是一个开源的面向文档的数据库管理系统

CouchDB 是一个开源的面向文档的数据库管理系统,可以通过 RESTful JavaScript Object Notation (JSON) API 访问。术语 “Couch” 是 “Cluster Of Unreliable Commodity Hardware” 的首字母缩写,它反映了 CouchDB 的目标具有高度可伸缩性,提供了高可用性和高可靠性,即使运行在容易出现故障的硬件上也是如此。CouchDB 最初是用 C++ 编写的,但在 2008 年 4 月,这个项目转移到 Erlang OTP 平台进行容错测试

直接下载不知道为啥总会在编译release出错,大概是没rebar配置文件

这里直接github下拉

git clone https://github.com/apache/couchdb

安装编译环境

debian

sudo apt-get --no-install-recommends -y install \
    build-essential pkg-config erlang \
    libicu-dev libmozjs185-dev libcurl4-openssl-dev

redhat

sudo yum install autoconf autoconf-archive automake \
    curl-devel erlang-asn1 erlang-erts erlang-eunit gcc-c++ \
    erlang-os_mon erlang-xmerl erlang-erl_interface help2man \
    js-devel-1.8.5 libicu-devel libtool perl-Test-Harness

生成配置文件

./configure  --disable-docs #文档也会编译出错。。谁知道咋回事呢。。不过官方文档支持直接下载。所以可有可无这里禁用掉

make 

make release
这里就编译出来了   直接在  rel目录下的 couchdb  执行bin下的couchdb 即可  ,如果报错一般是端口占用  去etc/default.ini修改端口即可

运行无误后  浏览器访问 http://localhost:5984/_utils/index.html#verifyinstall

执行初次安装
code codemirror ide javascript 编辑器

js的在线编辑器codemirror

js的在线编辑器codemirror

##初始化在线编辑器
codemirror.css
codemirror.js
/js/codemirror/addon/selection/active-line.js
/js/codemirror/addon/edit/matchbrackets.js
/js/codemirror/addon/display/fullscreen.js
/js/codemirror/mode/javascript/javascript.js
/js/codemirror/theme/eclipse.css
/js/codemirror/addon/fold/foldgutter.css
/js/codemirror/addon/fold/foldcode.js
/js/codemirror/addon/fold/foldgutter.js
/js/codemirror/addon/fold/brace-fold.js
/js/codemirror/addon/fold/comment-fold.js
/js/codemirror/addon/lint/lint.css
/js/jsonlint.js
/js/codemirror/addon/lint/lint.js
/js/codemirror/addon/lint/json-lint.js
/js/beautify.min.js



 //初始化编辑器
    var editor = CodeMirror.fromTextArea(document.querySelector(".inputrule"), {
        lineNumbers: true,     // 显示行数
        indentUnit: 4,         // 缩进单位为4
        styleActiveLine: true, // 当前行背景高亮
        matchBrackets: true,   // 括号匹配
        mode:"application/json", // HMTL混合模式
        lineWrapping: true,    // 自动换行
        theme: 'eclipse',      // 使用模版
        lineWrapping:true,//支持折叠
        foldGutter: true,
        lint: true

    });
    editor.setSize('auto','auto');
    CodeMirror.commands.autocomplete = function(cm) {
        cm.showHint({hint: CodeMirror.hint.anyword});
    };
    jsons=$rulejson
    editor.setValue(JSON.stringify(jsons))
    format();
    function format() {
        editor.setValue(js_beautify(editor.getValue()))
    }
ajax javascript js

2016 年写的ajax 缅怀一下

2016 年写的ajax 缅怀一下

function ajax(opts) {
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var json = JSON.parse(xhr.responseText)
            console.log(json)
            opts.success(json)
        }
        if (xhr.readyState === 4 && xhr.status === 404) {
            opts.error()
        }
    }
    var dataStr = ''
    for (var key in opts.data) {
        dataStr += key + '=' + opts.data[key] + '&'
    }
    dataStr = dataStr.substr(0, dataStr.length - 1)
    if (opts.type.toLowerCase() === 'get') {
        xhr.open(opts.type, opts.url + '?' + dataStr, true)
        xhr.send()
    }
    if (opts.type.toLowerCase() === 'post') {
        xhr.open(opts.type, opts.url, true)
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(dataStr)
    }
}
es6 javascript

博客js从es6转到es5

博客js从es6转到es5

发现博客用夸克浏览器和qq浏览器 js都不渲染markdown

后来群友说的不兼容es6

决定转成es5

全局安装babel-cli

npm install -g babel-cli

项目内安装规则包

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

项目内配置文件 .babelrc

 {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

命令行下执行命令

babel xxx.js -o xxxd.js
//xxxd.js就是经过转码好的js文件

提交修改,经测试可以正常渲染

es6 javascript promise

js-Async/Await和Promise

所谓 Promise,就是一个对象,用来传递异步操作的消息。

所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。

Async/Await

  • async/await是写异步代码的新方式,以前的方法有回调函数和Promise。
  • async/await是基于Promise实现的,它不能用于普通的回调函数。
  • async/await与Promise一样,是非阻塞的。
  • async/await使得异步代码看起来像同步代码,这正是它的魔力所在。
javascript linux vue

vue的简单记录

vue的简单记录

vue的简单记录

虽然是vue的文档是中文的 但是确实蛮啰嗦

  • 数据绑定
v-bind:title="message"
{{ message }}

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'hello '
  }
})
  • 判断
v-if="ok"
v-else
v-show="ok"
  • 循环
遍历

v-for="todo in todos"
{{ todo.text }}
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})


app4.todos.push({ text: '新项目' })

遍历时提取数组索引
v-for="(item, index) in items"

遍历对象
v-for="(value, key, index) in object"
  • 事件监听
v-on:click="reverseMessage"

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})


阻止单击事件冒泡
v-on:click.stop="doThis"
提交事件不再重载页面 
v-on:submit.prevent="onSubmit"
修饰符可以串联 
v-on:click.stop.prevent="doThat"
只有修饰符
v-on:submit.prevent
添加事件侦听器时使用事件捕获模式
v-on:click.capture="doThis"
只当事件在该元素本身(比如不是子元素)触发时触发回调
v-on:click.self="doThat"

按键别名

.enter
.tab
.delete (捕获 “删除”  “退格” )
.esc
.space
.up
.down
.left
.right
  • 双向绑定
v-model="message"

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})