王筝的博客
ruby学习

<td style=”width:120px; word-break: break-all;”><%= switch.download_url %></td>

word-break
overflow-wrap
word-wrap
参考:
  1. 你真的了解word-wrap和word-break的区别吗?
  2. Difference between overflow-wrap and word-break
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
参考:
  1. CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
  2. MDN text-overflow

 

 

mysql> SELECT desc,status,play_time,push_type, ‘interval’ FROM cms_push;
ERROR 2006 (HY000): MySQL server has gone away
No connection. Trying to reconnect…
Connection id: 700
Current database: xxx_cms

ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘desc,status,play_time,push_type, ‘interval’ FROM cms_push’ at line 1

问题很简单,desc和interval是关键字,需要加上引号,以后起名要注意了

mysql> SELECT ‘desc’,status,play_time,push_type,’interval’ FROM cms_push;

 

https://github.com/rest-client/rest-client

https://github.com/jnunemaker/httparty

http://ruby-doc.org/stdlib-2.1.2/libdoc/net/http/rdoc/Net/HTTP.html
https://www.imququ.com/post/four-ways-to-post-data-in-http.html
工作中常用到获取一个xml或者json格式的数据进行解析,获取我们希望拿到的有效数据,这时候用的是http的get请求,
当我们提交表单和上传文件的时候,用的是http的post请求,post请求的contentType分两种,
提交普通的表单的时候,Content-Type是"application/x-www-form-urlencoded",
上传文件的时候,Content-Type是"multipart/form-data"
这个可以通过浏览器的调试工具查看
点击F12打开页面调试工具,然后选择"Network"->"Headers"->"Request Headers"->"Content-Type"

接下来我们分别看一下应用的场景

(一)REST Client获取xml/json数据

(1)xml
response = RestClient.get(url)
url_hash = Hash.from_xml(response.body)

(2)json

response = RestClient.get(url_list[index])
url_hash = JSON.parse(response.body)[‘headline_videos’]

(二)httpparty获取json数据
response = HTTParty.get('https://api.stackexchange.com/2.2/questions?site=stackoverflow')

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


RestClient最大的优势在于在post请求的时候能够上传一个文件,
    def upload_image(file_path)
      timestamp = Time.now.to_i

      response = RestClient.post Settings.upload.image.url, {
        uid: Settings.upload.image.uid,
        appkey: Settings.upload.image.appkey,
        timestamp: timestamp,
        sign: sign(timestamp),
        filename: "ott_cms_#{timestamp}",
        duplmd5: Settings.upload.image.duplmd5,
        file: File.new(file_path)
      }

      case response.code
      when 200
        parse_upload_response response
      else
        { errors: ["图片上传服务暂时不可用"] }
      end
    end

Whenever is a Ruby gem that provides a clear syntax for writing and deploying cron jobs.

https://github.com/javan/whenever

(1)首先安装这个gem

$ gem install whenever

(2)将这个gem添加到Gemfile里

Or with Bundler in your Gemfile.
gem 'whenever', :require => false

(3)运行一下,This will create an initial config/schedule.rb file for you.
$ wheneverize .

(4)编辑定时任务schedule.rb
every 1.day, at: '00:01 am' do
  command "cd /opt/app/ruby/cms/current && RAILS_ENV=#{@environment} bundle exec rails runner script/fetch_video.rb", output: 'log/fetch.log'
end
以上含义是在每天晚上12:01执行脚本,

(5)想以contab的形式查看schedule.rb脚本,执行以下命令
$ whenever
在script里的脚本可以只写功能语句,好处就是与执行时间分离开了,更加达到解偶的效果.

(6)如果想立即执行脚本,也不需要去该fetch_video.rb里的代码,直接运行命令:
RAILS_ENV=production rails runner script/fetch_videos.rb 
本地环境可以省略前面的RAILS_ENV配置,因为默认就是development环境

(7)部署的时候需要注意在  "config/deploy.rb" file加上:
require "whenever/capistrano"
set :whenever_command, "bundle exec whenever"

(8)最后,部署完在服务器上查看一下
$ crontab -l

 

封装一下可以直接用啦。

var uaFanction = function(
var UA = window.navigator.userAgent,
IsAndroid = (/Android|HTC/i.test(UA) || !! (window.navigator[‘platform’] + ”).match(/Linux/i)),
IsIPad = !IsAndroid && /iPad/i.test(UA),
IsIPhone = !IsAndroid && /iPod|iPhone/i.test(UA),
IsIOS = IsIPad || IsIPhone;
if(IsIOS){
window.location.href=’IOS';
}
if(IsAndroid){
window.location.href=’Android';
}
)

======

或者直接在script块里写,

var UA = window.navigator.userAgent,
IsAndroid = (/Android|HTC/i.test(UA) || !! (window.navigator[‘platform’] + ”).match(/Linux/i)),
IsIPad = !IsAndroid && /iPad/i.test(UA),
IsIPhone = !IsAndroid && /iPod|iPhone/i.test(UA),
IsIOS = IsIPad || IsIPhone;
if(IsIOS){
window.location.href=’IOS';
}
if(IsAndroid){
window.location.href=’Android';
}

正如很多小伙伴们所知道的,楼主最近在开发移动端的响应式布局的自适应页面了,现在分享一个刚写完的小demo

html:

<!doctype html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no”>
<meta name=’apple-mobile-web-app-capable’ content=’yes’ />
<meta name=”format-detection” content=”telephone=no” />
<meta http-equiv=’Content-Type’ content=’textml;charset=UTF-8′ />
<title>移动端</title>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
</head>
<body>
<div class=”img”> <img src=”images/img-1.jpg” /></div>
<script type=”text/javascript”>
function imgAnimation(){
var imgObj = document.getElementsByTagName(“div”)[0];
imgObj.onclick =function(){
if(imgObj){
imgObj.className = “img imgAnimation”;
}
}
}
imgAnimation();
</script>
</body>
</html>

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

css

@charset “utf-8″;
/* CSS Document */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,table,tbody,p,th,td{ -webkit-text-size-adjust:none; margin: 0; padding: 0; border: none; -webkit-tap-highlight-color:rgba(0,0,0,0); font-size: 1em; font-family:”Microsoft Yahei”,”微软雅黑”,Tahoma,Arial,Helvetica ,STHeiti; color: #4c4948; }
html,body{ min-height:100%; }
img,input,button,a,select,textarea{ margin: 0; padding: 0; resize:none; border:none; outline:none; }
ol,ul { list-style:none; }
h1,h2,h3,h4,h5,h6,p,em{ font-size:100%; word-wrap:break-word; font-weight: normal; font-style: normal; }
a:active, a:focus{ outline:none; }
button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0; }
table{ border-collapse:collapse; border-spacing:0; }
.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; font-size:0; }
.clearfix{ zoom:1; }
a{ color: #4c4948; text-decoration: none; }

.img{ width: 190px; height: 120px; padding: 3px; border: 1px solid #ccc; position: absolute;z-index: 12; top: 50px; left: 50%;
margin-left: -95px; }
/*动画名字, 动画运行的时间,alternate平滑过渡, infinite是反复执行*/
.imgAnimation{
animation-name: imgAnimation;
animation: imgAnimation 2s alternate infinite;
-webkit-animation: imgAnimation 2s alternate infinite;
-moz-animation: imgAnimation 2s alternate infinite;
}
/*
@-webkit-keyframes imgAnimation{
0%{ left: -198px}
100%{ left: 50%;}
}
@-moz-keyframes imgAnimation{
0%{ left: -198px}
100%{ left: 50%;}
}
*/

@-webkit-keyframes imgAnimation{
0%{ opacity: 0}
50%{ opacity: 0.5}
100%{ opacity: 1}
}
@-moz-keyframes imgAnimation{
0%{ opacity: 0}
50%{ opacity: 0.5}
100%{ opacity: 1}
}

css中屏蔽的那部分代码就是图片飞入的css,简单实用,比当年手写js要方便的多,渐渐爱上css3了, 么么哒

1.radio_button_tag

new:
<%= radio_button_tag “feedback_type”,”T-1″ %>
<label for=’T-1′ style=’display:inline’ >T-1</label>&nbsp;&nbsp;
<%= radio_button_tag “feedback_type”,”T-2″ %>
<label for=’T-2′ style=’display:inline’>T-2</label>&nbsp;&nbsp;

edit:

<%= radio_button_tag “feedback_type”,”T-1″, @feedback.feedback_type == “T-1″%>
<label for=’T-1′ style=’display:inline’ >T-1</label>&nbsp;&nbsp;
<%= radio_button_tag “feedback_type”,”T-2″, @feedback.feedback_type == “T-2″ %>
<label for=’T-2′ style=’display:inline’>T-2</label>&nbsp;&nbsp;

2.text_field_tag

<%= text_field_tag “title” %>

3.image_tag

<% if @feedback.image != nil %>
<%= image_tag @feedback.image, :width => 200 %><br/>
<% end %>
<%= s.text_field :image %>

4.select

<%= f.select :tag_type, options_for_select([[“ugc”,1],
[“豆单”,2],
[“剧集”,3]],@secondchannel.tag_type) %>

<%= f.select :layout_type, options_for_select([“album”,”item”],@secondchannel.layout_type) %>

正如大家所知道的,楼主最近做h5页面,各种恶补移动端姿势,这个swipe.js也算做其中之一.

swipe是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面。

http://swipejs.com/

https://github.com/bradbirdsall/Swipe

现在来看一下html代码:

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div class='wrap'></div>
    <div class='wrap'></div>
    <div class='wrap'></div>
  </div>
</div>
css代码:

.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}

js代码:

window.mySwipe = new Swipe(document.getElementById(‘slider’), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});

Swipe可以扩展可选参数-通过设置对象的键值对:

  • startSlide Integer (默认:0) – Swipe开始的索引
  • speed Integer (默认:300) – 前进和后台的速度,单位毫秒.
  • auto Integer – 自动滑动 (time in milliseconds between slides)
  • continuous Boolean (默认:true) -是否可以循环播放(注:我设置为false好像也是循环的)
  • disableScroll Boolean (默认:false) – 停止触摸滑动
  • stopPropagation Boolean (默认:false) -停止事件传播
  • callback Function – 回调函数,可以获取到滑动中图片的索引.
  • transitionEnd Function – 在最后滑动转化是执行.