王筝的博客
ruby学习

https://github.com/shiralwz/image-page

今天在github上传了一个小的照片墙的页码源代码,主要是照片墙的功能,当鼠标移动到哪个照片的时候,照片自动放大并上浮。

复制代码
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <title>照片墙</title>
    <link type="text/css" href="style.css" rel="stylesheet">

  </head>
  <body>
    <div class="container">
      <img class="pic pic1" src="image/1.jpg">
      <img class="pic pic2" src="image/2.jpg">
      <img class="pic pic3" src="image/3.jpg">
      <img class="pic pic4" src="image/4.jpg">
      <img class="pic pic5" src="image/5.jpg">
    <div>
  </body>
</html>
复制代码

 

复制代码
*{
  margin: 0;
  padding: 0;
}

body{
  background-color: #cccccc;
}

.container{
  width: 960px;
  height: 450px;
  margin: 60px auto;
  position: relative;
}

.pic{
  width: 230px;
}

.container img:hover{
  box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
  transform: rotate(0deg) scale(1.20);
  -webkit-transform: rotate(0deg) scale(1.20);
  z-index: 2;
}

.container img{
  padding: 10px 10px 15px;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 3px rgba(50,50,50,0.4)
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  position: absolute;
  z-index: 1;
}

.pic1{
  left: 0px;
  top: 0;
  transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
}

.pic2{
  left: 400px;
  top: 0;
  transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
}

.pic3{
  bottom: 0px;
  right: 10px;
  transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
}

.pic4{
  bottom: 0px;
  left: 30px;
  transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}

.pic5{
  left: 350px;
  top: 300px;
  transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}

 

 

 

github page 操作步骤:https://pages.github.com/

(1)Create a repository

Head over to GitHub and create a new repository namedusername.github.io, where username is your username (or organization name) on GitHub.

If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

(2)Clone the repository

Go to the folder where you want to store your project, and clone the new repository:

git clone https://github.com/username/username.github.io

(3)use jekyllrb to build the blog ,https://jekyllrb.com/

cd <your project>
gem install jekyll
jekyll new . 

(4)push it

if you want to start to page in localhost, use

$ jekyll serve

then push it to server

~$git add --all
~$git commit -m "Initial commit"
~$git push -u origin master

(5)and you’re done!

Fire up a browser and go to http://username.github.io.

 

 

查询了大神的经验贴

http://stackoverflow.com/questions/19078044/disable-activerecord-for-rails-4

http://stackoverflow.com/questions/821251/how-to-configure-ruby-on-rails-with-no-database

其中点赞最多的也是我用的方法

If you are creating a new application, you can use -O to skip ActiveRecord:

rails new my_app -O
For existing applications:

1. Remove database adapter gems from your Gemfile (mysql2, sqlite3, etc.)

2. Change your config/application.rb

Remove require 'rails/all line and require frameworks you want to use, for example:

require "action_controller/railtie"
require "action_mailer/railtie"
require "sprockets/railtie"
require "rails/test_unit/railtie"
3. Delete your config/database.yml file, db/schema.rb and migrations (if any)

4. Delete migration check in test/test_helper.rb

5. Delete any ActiveRecord configuration from your config/environments files (this is what is causing your error)


This is all you need to do for an empty Rails app. If you run into problems caused by your existing code, stack trace should give you sufficient information on what you need to change. You might for example have some ActiveRecord configuration in your initializers.

6.删除controller里对Model的调用,把model里对ActiveRecord的依赖也删除

 

(1)首先在current文件夹下新建服务有关的nginx配置文件nginx.conf

upstream news_server {
  server unix:/tmp/unicorn.news.sock fail_timeout=0;
}

server {
  listen 8888;
  access_log /opt/app/ruby/news/current/log/nginx.access.log;
  error_log /opt/app/ruby/news/current/log/nginx.error.log;

  client_max_body_size 4G; 

  keepalive_timeout 5;

  root /opt/app/ruby/news/current/public;

  location ^~ /assets/ {
    gzip on; 
    expires max;
    add_header Cache-Control public;
  }

  try_files $uri/index.html $uri @unicorn;
  location @unicorn {
    proxy_redirect  off;
    proxy_set_header  Host  $http_host;

    proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header  X-Real-IP  $remote_addr;
    proxy_pass http://news_server;
  }
  error_page 500 502 503 504 /500.html;
  location = /500.html {
    root /opt/app/ruby/news/current/public;
  }
}

(2)在服务器检查下nginx语法,顺便查看位置

[root@localhost opt]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

查看nginx的配置

vim /etc/nginx/nginx.conf

找到默认conf配置文件放的位置

user  nginx;
worker_processes  8;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

从最后一句话中我们可以得知,所有/etc/nginx/conf.d/下的后缀名为.conf的配置文件都会被include进来,

所以需要做一个软链接,将我们应用部署目录下的nginx配置文件链到这个文件夹下,重启检测下语法 并重启nginx

[root@localhost opt]# ln -s /opt/app/ruby/news/current/config/nginx.conf /etc/nginx/conf.d/new.conf
[root@localhost opt]# ll /etc/nginx/conf.d/
总用量 8
-rw-r--r-- 1 root root 1097 9月  16 2014 default.conf
-rw-r--r-- 1 root root  427 9月  16 2014 example_ssl.conf
lrwxrwxrwx 1 root root   44 9月  18 10:56 new.conf -> /opt/app/ruby/news/current/config/nginx.conf
[root@localhost opt]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@localhost opt]# nginx -s reload
[root@localhost opt]# netstat -tlnp
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp        0      0 0.0.0.0:xxxx            0.0.0.0:*               LISTEN      8591/nginx: worker  
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      8591/nginx: worker  
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      2656/sshd           
tcp        0      0 0.0.0.0:xxxx            0.0.0.0:*               LISTEN      8591/nginx: worker  
tcp        0      0 0.0.0.0:xxxx            0.0.0.0:*               LISTEN      14200/python        
tcp6       0      0 :::3306                 :::*                    LISTEN      15326/mysqld        
tcp6       0      0 :::21                   :::*                    LISTEN      5186/vsftpd         
tcp6       0      0 :::22                   :::*                    LISTEN      2656/sshd

 

先在服务器上 ssh bitbucket.org
点yes链接一下,才能在服务器部署
或者在服务器上链接一下代码地址 git ls-remote git@bitbucket.org:xxx/xxx.git master,

原因是bitbucket不在服务器的knowhosts里

https://github.com/capistrano/capistrano

https://github.com/capistrano/capistrano/wiki

https://github.com/capistrano/capistrano/wiki/2.x-from-the-beginning

(1)使用capistrano2,要在Gemfile里指定版本

  gem 'capistrano', git: 'https://github.com/capistrano/capistrano', branch: :'legacy-v2'
  gem 'capistrano-rbenv', git: 'https://github.com/yyuu/capistrano-rbenv.git', branch: :develop

如果使用最新版本的就不需要指定版本了~

(2)capistrano2生成Capfile用的命令是

$ bundle exec capify .

capistrano3生成Capfile用的命令是

$ bundle exec cap install

 

今天尝试做移动端自适应的页码,添加了zepto.min.js,写完对应的代码后重启服务,这时候发现zepto.min.js方法无法识别,

不能直接在application.js里调用。

原因是ruby on rails 的服务默认添加了jquery.js,占用了$符号,在application里使用$调用,默认就调用的jquery里的方法,

所以如果想在application.js里使用$符号以及使用zepto的方法,需要将对应的js代码外面加一层

(function($){
   //这里写一些zepto方法调用
}(Zepto))

 

这里新建的rails应用就叫news,

(1)新建文件夹

$ mkdir news

(2)指定本项目的ruby版本

cd news
touch .ruby-version
vim .ruby-version

(3)使用rbenv的gemset,这样就可以把gem包都安装到项目目录的.bundle文件夹下了,(也可以给这个文件夹随意起其他名字,官网用的.gems)

具体的可以看 https://github.com/jf/rbenv-gemset

git clone git://github.com/jf/rbenv-gemset.git $HOME/.rbenv/plugins/rbenv-gemset

安装完之后可以查看文件夹下已经有了新文件

/workspace/news:$ ll ~/.rbenv/plugins
总用量 16
drwxrwxr-x  4 wangz wangz 4096  9月 16 16:11 ./
drwxr-xr-x 13 wangz wangz 4096  6月 25 10:22 ../
drwxr-xr-x  6 wangz wangz 4096  9月 16 16:11 rbenv-gemset/
drwxr-xr-x  7 wangz wangz 4096  8月  9 19:54 ruby-build/

在news目录里To have gems install into a sub-folder in your project directory for easy removal later (rm -rf project!) / editing / testing, you can use a project gemset. A project gemset has a ‘.’ (“dot”) as the first character:

/news:$ echo '.bundle' > .rbenv-gemsets

(4)安装最新版本的rails

$ gem install rails -V

查看下rails版本

$ rails -v
Rails 4.2.4

确定是最新的版本,可以进行下一步了

(5)新建rails项目,因为我们已经在这个文件夹里面了,所以只需要执行下面的命令

/news:$ rails new .

执行到安装gem的时候会执行不过去,接下来需要修改下gem source

(6)修改gem source

vim Gemfile

把第一句的source改成可以下载的地址  https://ruby.taobao.org/,之后再次安装gem就可以啦

bundle install -V

=================================

注: 如果是有做好的模板,可以用模板新建项目 http://guides.rubyonrails.org/rails_application_templates.html

方法大致如下

$ rails new blog -m ~/template.rb  
$ rails new blog -m http://example.com/template.rb

 

现在的网站基本上都需要接入微信分享功能,那么这个过程是怎么实现的咩,前几天做了这个功能,一直没来得及整理下,

今天大致把步骤写一写。

微信的官网文档给出了非常清晰具体的步骤 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

(1)绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可以在“开发者中心”查看对应的接口权限

 

(2)引入js文件,http://res.wx.qq.com/open/js/jweixin-1.0.0.js

将js下载后拷贝到app/assets/javascripts文件夹。

然后好要在application.js.coffee里引入一下哦,就是添加这句话

#= require jweixin-1.0.0

(3)增加初始化文件 vim initializers/weixin.rb

vim config/initializers/weixin.rb

然后加入下面的初始化内容

$client ||= WeixinAuthorize::Client.new(CONFIG['weixin']['appid'], CONFIG['weixin']['secret_key'],"")

在config/config.yml里加入配置(这里的是需要从微信申请的)

  weixin:
    appid: wfasfasfasdfxxxx
    secret_key: 4cf4dfasfsdfsadfasdf5dasda

(4)通过config接口注入权限验证配置

所有使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)

 

vim app/views/share/_weixin_config.html.slim

加入对应的代码

- data = $client.get_jssign_package(request.url)

javascript:
  wx.config({
    debug: false, // true是开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
    appId: '#{data["appId"]}', // 必填,公众号的唯一标识
    timestamp: '#{data["timestamp"]}', // 必填,生成签名的时间戳
    nonceStr: '#{data["nonceStr"]}', // 必填,生成签名的随机串
    signature: '#{data["signature"]}',// 必填,签名,见附录1 
    jsApiList: ['onMenuShareTimeline',
                'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 
  }); 

(5)app/views/layouts/application.html.slim页面添加按钮

.modal.fade id="shareModal"  role="dialog" aria-labelledby="infoModalLabel"
  .modal-dialog role="document"
    .modal-content#share-web
      .modal-header
        button type="button" class="close" data-dismiss="modal" aria-label="Close"
          span aria-hidden="true" &times;
        .modal-title id="infoModalLabel" 微信扫一扫,分享给你的好友吧
      .modal-body#share-qrcodeTable
    .modal-content#share-weixin
      .modal-body
        button type="button" class="close" data-dismiss="modal" aria-label="Close"
          span aria-hidden="true" &times;


javascript:
  $(function() {
    $('[data-toggle="popover"]').popover();
  });

  jQuery('#share-qrcodeTable').qrcode({
      render  : "canvas",
      width   : 260,
      height  : 260,
      text    : "http://aaa.com"
  })

  var ua = window.navigator.userAgent.toLowerCase()
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){
    $('#share-web').addClass('hidden')
  }else{
    $('#share-weixin').addClass('hidden')
  }
  $('#share').click(function(){
    $('#shareModal').modal('show')
  })

(6)在对应的页面里增加配置,指定在转入朋友圈里链接显示的文字和图片

app/views/aaas/index.html.slim

javascript:       
  // 首页的微信分享 
  wx.ready(function(){
    wx.onMenuShareTimeline({
      title: '来看看aaa!',
      link: window.location.href,
      imgUrl: '#{logo_url}'
    });

    wx.onMenuShareAppMessage({
      title: '这是标题',
      desc: '来看看aaa!',
      link: window.location.href,
      imgUrl: '#{logo_url}'
    });
  });

 

今天调试一个现有项目报错,

[Faraday::ConnectionFailed] Connection refused - connect(2) {:host=>"localhost", :port=>"9200", :protocol=>"http"}
Connection refused - connect(2)

发现自己还没装elasticsearch

找到官网下载页https://www.elastic.co/guide/en/elasticsearch/reference/current/_installation.html

看到第一句话发现自己还需要先装java:

Elasticsearch requires at least Java 7. Specifically as of this writing, it is recommended that you use the Oracle JDK version 1.8.0_25. Java installation varies from platform to platform so we won’t go into those details here.

于是查阅了ubuntu安装java的指南,并且看了下stackoverflow里的大神经验贴

https://help.ubuntu.com/community/Java

http://stackoverflow.com/questions/16263556/installing-java-7-on-ubuntu

(1)开始使用大神经验贴里的步骤安装java

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer

(2)装完java查看下就可以继续装elasticsearch啦

步骤就是官网下载页里提供的:

https://www.elastic.co/guide/en/elasticsearch/reference/current/_installation.html

java -version
echo $JAVA_HOME
curl -L -O https://download.elastic.co/elasticsearch/elasticsearch/elasticsearch-1.7.1.tar.gz
tar -xvf elasticsearch-1.7.1.tar.gz
cd elasticsearch-1.7.1/bin
./elasticsearch

If everything goes well, you should see a bunch of messages that look like below:

17,218][INFO ][node           ] [New Goblin] version[1.7.1], pid[2085], build[5c03844/2014-02-25T15:52:53Z]
[2014-03-13 13:42:17,219][INFO ][node           ] [New Goblin] initializing ...
[2014-03-13 13:42:17,223][INFO ][plugins        ] [New Goblin] loaded [], sites []
[2014-03-13 13:42:19,831][INFO ][node           ] [New Goblin] initialized
[2014-03-13 13:42:19,832][INFO ][node           ] [New Goblin] starting ...
[2014-03-13 13:42:19,958][INFO ][transport      ] [New Goblin] bound_address {inet[/0:0:0:0:0:0:0:0:9300]}, publish_address {inet[/192.168.8.112:9300]}
[2014-03-13 13:42:23,030][INFO ][cluster.service] [New Goblin] new_master [New Goblin][rWMtGj3dQouz2r6ZFL9v4g][mwubuntu1][inet[/192.168.8.112:9300]], reason: zen-disco-join (elected_as_master)
[2014-03-13 13:42:23,100][INFO ][discovery      ] [New Goblin] elasticsearch/rWMtGj3dQouz2r6ZFL9v4g
[2014-03-13 13:42:23,125][INFO ][http           ] [New Goblin] bound_address {inet[/0:0:0:0:0:0:0:0:9200]}, publish_address {inet[/192.168.8.112:9200]}
[2014-03-13 13:42:23,629][INFO ][gateway        ] [New Goblin] recovered [1] indices into cluster_state
[2014-03-13 13:42:23,630][INFO ][node           ] [New Goblin] started

(3)还要安装rails集成的相关gem

https://github.com/elastic/elasticsearch-rails

gem install elasticsearch-model elasticsearch-rails