Express和Mongodb安装

Express安装

首先你是安装了Node.js的基础上,在你觉得合适的地方创建一个应用目录,然后进入此目录作为当前目录

$ mkdir myapp
$ cd myapp
$ npm init(此过程会要输入几个参数,我们一般不改,直接回车即可)
$ npm install express --save

接下来创建一个应用的骨架

1	$ sudo npm install express-generator -g

我们可以创建一个命名为Express的应用

1
2
3

$ express -e -c less Express
$ cd Express
$ npm install

启动这个运用

1	$ npm start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了

Mongodb安装

准备阶段,首先需把我们所要的环境配置好,你们可至我的github账号进行下载到本地
然后执行

1	mv -n ~/Downloads/mongodb-osx-x86_64-3.2.9 ~/Applications/mongodb/(注意路径哦,执行此步所下载的文件是看不见的)

下一步重新打开终端,在根目录下输入

1 2	$ sudo mkdir -p /data/db $ sudo chown -R yonghuming /data(注意这里为自己的用户名,用户名后面必须有空格隔开)

然后再回到根目录下直接执行

1	$ cd Users/lanou/Applications/mongodb/bin

您也可以通过终端往下找到此路径的bin文件夹,只不过有点繁琐一些,然后回车执行

1	$ ./mongod

下一步打开另一个终端,再次到bin文件下,回车,输入

$ ./mongo

Mongodb非常实用的命令

查看所有数据库

1	$ show dbs

创建数据库,如果已有当前的数据库,会自动切换到当前数据库,如果没有,则会创建一个数据库

1	$ use 数据库名

查看当前所连接的db

$ db

删除数据库,进入所要删除的数据库,执行

1	$ db.dropDatabase()

插入数据

1	$ db.集合名称.insert({})

更新操作

1	db.user.updata("目标","更新内容")

查找当前集合下的所有数据

1	db.user.find()

查找当前集合的第一条数据

1	db.user.findOne()

移除目标,此操作会把目标的所有数据删除掉

1	db.user.remove({目标})

删除集合

1	db.集合名称.drop()

drop()和remove()区别
remove用于将集合中的文档删除，但不删除集合本身，也不删除集合的索引。
drop不仅删除集合的文档，也会删除集合本身，同时也会删除在集合上创建的索引。

2016-11-16

Mac OS 博客搭建

准备阶段

1 配置git环境
2 创建node环境

配置git环境

创建代码库

1 百度搜索github官网注册一个账号,如果已注册过的就无需再注册
2 Sign in(登陆) Sign up(注册),点击注册,注册完之后去往自己刚填写的邮箱确认注册,结束注册流程
3 登陆自己的github账号,点击这个加号,选择第一个New repository:

4 下一步填写信息

注意:您起的Repository name须和你前面的名字一样再加上.github.io为后缀名,最后点击Create repository完成创建
安装Hexo
在自己觉得合适的地方创建一个文件夹,比如myblog文件夹
1 然后打开终端,执行
1
$ sudo npm install hexo-cli -g

然后你会看到这个界面

表示你已经安装成功了
2 执行,找到你新建的文件夹myblog,

$ cd myblog
$ hexo init
$ npm install
$ hexo serve

然后你会看到这个界面,表明你的博客已经搭建好了

复制上面的网址在浏览器运行,出现以下界面表示你已经成功搭建属于自己的博客了

3 博客搭建好了之后就是上传到你的github了,首先我们先找到文件夹下面最外层的_config.yml文件,修改如下界面

1
2
3

deploy:
  type: git
  repo: 这里为你的github域名仓库的Https地址

4 执行

1
2
3

$ npm install hexo-deployer-git --save
$ hexo g
$ hexo d

下次修改博客之后只需

$ hexo d

就好了,是不是很方便啊

更换主题

搜索到自己喜欢的主题,可以通过以下方式更换为自己的主题
1 复制你的主题所在github的域名仓库的Https地址,利用终端找到自己所建文件夹下的themes文件夹目录下
2 执行
1
$ git clone 主题的域名仓库地址

3 再到文件夹下最外层的_config.yml文件夹下修改默认的主题theme,就可以更换为自己想要的主题了

1	theme: 您的新主题的名字

多说评论

1 创建多说账号

进入多说官网http://duoshuo.com,点击我要安装,填写相关信息注册好之后,这就说明你已有多说账号了
多说账号准备好之后,,找到相应主题下面的layout下面的_partial文件下面的post文件下的article.ejs文件

复制以下代码至article.ejs

把最后一段这个代码
<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"您的多说域名名字"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0]
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
<!-- 多说公共JS代码 end -->

最后一步可至最外层的那个_config.yml文件,增加一个属性,注意此处有坑,我当时也是搞了几遍才好的,比如你的多说站点为xxx.duoshuo.com, 此时xxx才是您的真正的多说名字,您只要填入下面xxx就OK了
1
duoshuo_shortname: 您的多说名字

至此一步就大功告成了,很幸运你已经拥有一个属于自己的评论系统了

2016-10-20

Canvas画布之实现百球大战

这一次我们来实现一个百球大战的效果,一百个球在canavs画布中来回弹跳,是不是觉得非常有趣呢,
相信各位已经迫不及待想看它是怎么实现的吧!话不多说,开始吧。

Quick Start

Create a new html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百球大战</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <canvas id="canvas">
         您的浏览器不支持canvas,请更换主流浏览器
    </canvas>
</body>
<script src="index.js></script>
</html>

Create a new index.css

*{
    margin:0;
    padding:0;
}
#canvas{
    display: block;
    margin:0 auto;
    border:1px red solid;
}

Create a new index.js

这里才是这段程序的难点,这里我们采用构造函数的方式来编写

  var canvas = document.querySelector("#canvas");
        canvas.width = 800;
        canvas.height = 600;
        var onOff = false;
        var ctx = canvas.getContext("2d");
        function Arc(){
            this.x = x;
            this.y = y;
            this.r = r;
            this.color = color;
            this.speedX = speedX;
            this.speedY = speedY;
        }
        Arc.prototype.drawArc = function(){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2)
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        }
        Arc.prototype.move = function(){
            if(this.x+this.speedX+this.r > canvas.width || this.x+this.speedX-this.r < 0){
                this.speedX = -this.speedX;
            }
            if(this.y+this.speedY+this.r > canvas.height || this.y+this.speedY-this.r < 0){
                this.speedY = - this.speedY;
            }
            this.x += this.speedX;
            this.y += this.speedY;
        }
        var arr = [];
        for(var i = 0;i<100;i++){
           var x = random(50,750);
           var y = random(50,550);
           var r = random(10,30);
           var speedX = random(3,10);
           var speedY = random(3,10);
           //ES6写法
           var color = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
//   ES5写法 var color = "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
           var obj = new Arc(x,y,r,color,speedX,speedY)
            arr.push(obj);
        }
        var timer = null;
        function ani(){
            ctx.clearRect(0,0,canvas.width,canvas.height)
            for(var i = 0;i<arr.length;i++){
                arr[i].drawArc();
                arr[i].move();
            }
            timer = window.requestAnimationFrame(ani);
        }
        ani();
        document.onclick = function(){
            onOff = !onOff;
            if(onOff){
                window.cancelAnimationFrame(timer);
            }else{
                ani();
            }
        }
        function random(a,b){
            return Math.ceil(Math.random() * (b-a)+a+1);
        }

注意:

canvas的宽高,要在行间或这js里面书写,不要在css样式里面写,在css里设置宽高是对内容设置的,相反则是canvas的宽高;请参考网址

如果对构造函数不熟的同学可以参考这一篇博客

喜欢就点个赞吧

2016-10-12