给简历添加数据库

预览链接：预览

LeanCloud 简介

官网：LeanCloud

开发版：免费的针对开发阶段和个人项目解决方案，成本低、功能丰富，可以满足开发的需求，适合产品开发阶段、个人项目、或在小群体中使用的应用使用。

特点：一定的流量以内供开发者免费试用，但是必须使用他提供的API

使用说明文档快速入门

  • 在自己建立完App以后，点击快速入门 ，选择语言为 JavaScript

环境的安装

NPM安装的Bug解决

  • 注册并进入 leancloud ，创建应用，按照说明文档操作
image.png

  • 使用 npm 安装失败，尝试使用 yarn，需要安装 yarn

  • bash报错没有curl 这个命令 bash: curl: command not found

  • 安装 curl sudo apt install curl

  • 安装 yarn 成功

  • 使用yarn依然无法安装

  • 回到 npm 安装，报错显示没有package.json

    npm WARN enoent ENOENT: no such file or directory, open '<root>/node_modules/supertest/package.json

  • 解决办法为，在根目录执行命令 npm init

  • 发现此时目录多了个 package.json

  • 再次执行 npm install leancloud-storage --save ，显示没有权限，加上 sudo 以后，执行成功 ，但是没有在我的当前目录下出现对应的 node_modlues 文件，在根目录发现有，但是我要在当前目录下使用啊，怎么办？

  • 在当前目录下执行 npm init 出现了 package.json 文件，再执行 sudo npm install leancloud-storage --save

  • 发现目录有了这个文件


    image.png

  • 上面说明配置成功，然后执行第二条 npm install leancloud-realtime --save

  • 引入CDN <script src="//cdn1.lncld.net/static/js/3.5.0/av-min.js"></script>

  • 现在虽然可以使用了，问题是，这样执行了以后会不会留下什么后遗症？下一次使用的时候？？

测试

完成上面的操作以后，在控制台输入 AV ，即可看到一个 AV 对象如下：

{_config: {…}, _sharedConfig: {…}, _getAVPath: ƒ, _installationId: null, _getInstallationId: ƒ, …}

使用C-R-M原则

即：Copy，Run，Modify原则，使用别人的代码运行调试后在修改成自己需要的样子进行使用。

初始化

var APP_ID = 'HH1RDVnLiDw1RA0YCL66dcfw-gzGzoHsz';
var APP_KEY = 'eMqFOA16pkSGX7iCK408sNDE';

AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});

启用指定的节点

var APP_ID = 'HH1RDVnLiDw1RA0YCL66dcfw-gzGzoHsz';  
//注意，这里每个人的ID不同，按照自己分配的即可
var APP_KEY = 'eMqFOA16pkSGX7iCK408sNDE';
AV.init({
  appId: APP_ID,
  appKey: APP_KEY,

  // 启用美国节点
  region: 'us'
  
});

验证网络

执行命令行 ：ping hh1rdvnl.api.lncld.net

复制测试代码

var TestObject = AV.Object.extend('TestObject');
var testObject = new TestObject();
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})
  • 此时，刷新页面以后会弹出提示框，同时 LeanCloud 上面会有对应对测试结果。

以上根据说明文档操作测试无误以后即可上手使用。

建表，插入数据

事实上，上面的测试代码就是一个数据插入的操作

  • 建表，名字为 TestObject

    var TestObject = AV.Object.extend('TestObject');

  • 在表中新建一行数据

    var testObject = new TestObject();

  • 输入一行数据内容，保存

  • 如果保存成功则弹出对话框，内容为“LeanCloud Rocks”

//创建表，名字为 TestObject
var TestObject = AV.Object.extend('TestObject');
//在表中创建一行数据
var testObject = new TestObject();

//创建一行数据为 "Hello,World!",保存
//如果保存成功，则弹出对话框内容为 “LeanCloud Rocks”
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})

小知识

  • 表单内提交数据是监听 submit 还是 form 呢？

    答：监听 form

    因为：
    ​
    （1）当用户在输入完成内容以后直接按回车，是应该提交的，同时，用户点击“提交”

    按钮也应该提交内容。

    （2）如果监听 submit的话，需要同时监听 submit 和 “Enter” ，显得麻烦累赘；而直接监听表单的话包括了上面的操作，代码量少。

    对比如下：

    //监听form
let myForm = document.querySelector('#postMessageForm)
myForm.addEventListener('submit',function(e){
  e.preventDefault() //阻止提交成功以后刷新页面
})

//监听 Submit
let button = myForm.querySelector('input[type=submit]')
button.addEventListener('click',function(){})
// 监听回车
let input = myForm.querySelector('input[name=content]')
input.addEventListener('keypress',function(e){
  if(e.keyCode === 13){}
})
//ps：如果有多个input，则要监听多个回车事件。。。

    ​

显示数据

  • 页面显示层

在HTML页面中写好对应的结构，举例为

<body>
<ol>
//此处为使用js进行动态添加<li>标签，在<li>标签内添加对应的返回数据进行显示 
</ol>
  //以下操作添加数据
        <form class="postMessageForm" id="postMessageForm" style="width:700px;height:500px;margin: 0 auto">
            <label for="">姓名</label><input type="text" name="name">
            <label for="">内容</label><input type="text" name="content" >
            <input type="submit" value="提交">
        </form>
</body>
  • 获取历史数据显示在页面中

进入据存储开发指南 · JavaScript

找到 对象》批量操作》批量查询

 var query = new AV.Query('Todo');
  query.find().then(function (todos) {
    todos.forEach(function(todo) {
      todo.set('status', 1);
    });
    return AV.Object.saveAll(todos);
  }).then(function(todos) {
    // 更新成功
  }, function (error) {
    // 异常处理
  });

将其修改成为自己需要的代码即可

示例代码如下：

function(){
            var query = new AV.Query('Todo');
            query.find().then(
                (message)=>{
                    let array = message.map((item)=> item.attributes)
                    array.forEach((item)=>{
                        let li = document.createElement('li')
                        li.innerText = `${item.name}:${item.content}`
                        let messageList = document.querySelector('#messageList')
                        this.messageList.append(li)
                    })
                },
                function(error){
                    alert('提交失败！')
                })

实现无刷新留言

因为使用 <form> 提交数据的时候会刷新页面，不论是用户自己刷新页面看到提交以后的数据，还是开发者帮助用户刷新页面 ，体验都极其不好，因此，我们进行改善 。

  • 原来的思路：用户提交数据表单以后数据在LeanCloud上，然后访问 LeanCloud 获取数据再显示在页面上。
  • 新思路：在用户提交表单的时候，把数据传送到 LeanCloud 的同时，把数据添加在页面中，代码如下：
function(){
            let myForm = this.form
            let content = myForm.querySelector('input[name=content]').value 
            let name = myForm.querySelector('input[name=name]').value

            this.model.save(content,name).then(function(object) {
                let li = document.createElement('li')
                li.innerText = `${object.attributes.name}:${object.attributes.content}`
                let messageList = document.querySelector('#messageList')
                messageList.append(li)
                myForm.querySelector('input[name=content]').value = ''
                myForm.querySelector('input[name=name]').value = ''
            })
        }

Github-pages预览失败问题解决

将项目上传到github准备使用githubpages 预览，但是失败，错误信息如下：

![QQ图片20180120211638.jpg](http://upload-images.jianshu.io/upload_images/1683063-910ed43da1467b60.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

然后查找问题：这里的 a 有问题....


QQ图片20180120211638.jpg

解决：不是特别能看懂，既然是它影响了预览，索性删除了它

但是，删除以后预览依然失败

最后，只好把目录的 node_modules 和其他的Json文件删了，发现可以预览。

image.png

问题原因：是因为没有用到node_modules 和其他的Json文件，反而被它影响了。。

实现效果预览

预览戳我

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,099评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,828评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,540评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,848评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,971评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,132评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,193评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,934评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,376评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,537评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,175评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2赞 351