技 – 第7页 – 小水实验室

记得用chrome调试react项目，不要偷懒用safari！

报错更详细一些

搭建React项目工程方法（ES6）

主要是这么几个点：npm、webpack、webpack-dev-server、

#首先新建一个目录
mkdir reactProject
cd reactProject
#初始化
npm init
#然后安装各个模块
npm i -S webpack react react-dom babel-loader babel-preset-es2015 babel-preset-react babel-polyfill webpack-dev-server react-hot-loader

#首先新建一个目录

mkdir reactProject

cd reactProject

#初始化

npm init

#然后安装各个模块

npm i -S webpack react react-dom babel-loader babel-preset-es2015 babel-preset-react babel-polyfill webpack-dev-server react-hot-loader

准备build/ index.html文件

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React setup </title>
  </head>
  <body>
    <div id="app" />
    <script src="bundle.js" type="text/javascript"></script>
  </body>
</html>

<!doctype html>

<html>

<head>

<title>React setup </title>

</head>

<body>

</body>

</html>

在package.json 文件中添加

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --hot --inline --devtool eval --progress --colors --content-base build"
  },

"scripts": {

"build": "webpack",

"dev": "webpack-dev-server --hot --inline --devtool eval --progress --colors --content-base build"

webpack.config.js 文件这么写

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname);

var config = {
  entry: ["babel-polyfill","webpack/hot/dev-server", APP_DIR + '/index.js'],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test:/\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react'],
          plugins: ['transform-object-rest-spread'],
        }
      },
      {
        test: /\.less$/,
        loader: 'style!css!less',
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env':{
         'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress:{
        warnings: true
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer:{
    historyApiFallback: true,
  },
};
module.exports = config;

var webpack = require('webpack');

var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');

var APP_DIR = path.resolve(__dirname);

var config = {

entry: ["babel-polyfill","webpack/hot/dev-server", APP_DIR + '/index.js'],

output: {

path: BUILD_DIR,

filename: 'bundle.js'

module: {

loaders: [

{

test:/\.js?$/,

loader: 'babel-loader',

exclude: /node_modules/,

query: {

presets: ['es2015', 'react'],

plugins: ['transform-object-rest-spread'],

}

{

test: /\.less$/,

loader: 'style!css!less',

}

]

plugins: [

new webpack.DefinePlugin({

'process.env':{

'NODE_ENV': JSON.stringify('production')

}

}),

new webpack.optimize.UglifyJsPlugin({

compress:{

warnings: true

}

}),

new webpack.HotModuleReplacementPlugin(),

devServer:{

historyApiFallback: true,

};

module.exports = config;

在项目目录下新建index.js 文件

'use strict'
import React from 'react'
import ReactDom from 'react-dom'

class Hello extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
      </div>
    )
  }
}

ReactDom.render( <Hello />, document.getElementById('app') )

'use strict'

import React from 'react'

import ReactDom from 'react-dom'

class Hello extends React.Component {

render() {

return (

<div>

<h1>Hello World!</h1>

</div>

)

}

ReactDom.render( <Hello />, document.getElementById('app') )

然后运行 npm run dev

这样就可以愉快的写写写了，需要什么库就npm install –save 即可，当然目录结构还不是很好，自己的情况自己再安排一下就好。

打包的时候执行此命令：
npm run build -p

React-Native webview 坑

由于一些布局原因，webview 默认可能没有width 值

webview 需要给它设置一个宽度，它才能正确的显示html

VIM-配置文件

这个是我在windows 上配置 gvim的配置文件，包括了一些插件的设置，命令行使用的时候注意去除或者做相应的 gui判断。

” disable VI’s compatible mode..
set nocompatible
set encoding=utf-8
set fileencodings=utf-8,gbk,default,latin1
“set gui options
if has(“gui_running”)
set guifont=DejaVu_Sans_Mono:h12
” set color schema
colorscheme cobalt
endif
set ff=unix
” Enable syntax highlight
syntax enable
syntax on
” Show line number
set nu
” show matching bracets
set showmatch
” Basic editing options
set expandtab
set shiftwidth=2
au FileType html,python,vim,javascript setl shiftwidth=2
au FileType html,python,vim,javascript setl tabstop=2
au FileType java,php setl shiftwidth=4
au FileType java,php setl tabstop=4
set smarttab
set lbr
set tw=0
“Auto indent
set ai
” Smart indet
set si
” C-style indeting
set cindent
” Wrap lines
set wrap

“let Tlist_Show_One_File=1
“let Tlist_Exit_OnlyWindow=1

let g:winManagerWindowLayout=’FileExplorer|TagList’
nmap wm :WMToggle<cr>

let g:miniBufExplMapCTabSwitchBufs=1
let g:miniBufExplMapWindowsNavVim=1
let g:miniBufExplMapWindowNavArrows=1
autocmd FileType html set omnifunc=htmlcomplete#CompleteTags

set backspace=indent,start
set so=15

“””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””
” => Plugin configuration
“””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””
” taglist
let Tlist_Auto_Highlight_Tag = 1
let Tlist_Auto_Open = 1
let Tlist_Auto_Update = 1
let Tlist_Close_On_Select = 0
let Tlist_Compact_Format = 0
let Tlist_Display_Prototype = 0
let Tlist_Display_Tag_Scope = 1
let Tlist_Enable_Fold_Column = 0
let Tlist_Exit_OnlyWindow = 0
let Tlist_File_Fold_Auto_Close = 0
let Tlist_GainFocus_On_ToggleOpen = 1
let Tlist_Hightlight_Tag_On_BufEnter = 1
let Tlist_Inc_Winwidth = 0
let Tlist_Max_Submenu_Items = 1
let Tlist_Max_Tag_Length = 30
let Tlist_Process_File_Always = 0
let Tlist_Show_Menu = 0
let Tlist_Show_One_File = 0
let Tlist_Sort_Type = “order”
let Tlist_Use_Horiz_Window = 0
let Tlist_Use_Right_Window = 1
let Tlist_WinWidth = 40
let tlist_php_settings = ‘php;c:class;i:interfaces;d:constant;f:function’

React-Native 开发App 默认情况不能连网的说明

在Info.plist文件中有一个设置，设置app可以链接哪些网络，

默认是只有localhost ，别的没有设置那么就是不能链接了

我们可以简单粗暴的添加

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

或者研究针对某一个域名的网络链接

4分钟内做一个网页设计

https://github.com/jgthms/web-design-in-4-minutes

body {
margin: 0 auto;
max-width: 50em;
font-family: “Helvetica”, “Arial”, sans-serif;
line-height: 1.5;
padding: 4em 1em;
color: #566b78;
}

h2 {
margin-top: 1em;
padding-top: 1em;
}

h1,
h2,
strong {
color: #333;
}
code,
pre {
background: #eee;
}

code {
padding: 2px 4px;
vertical-align: text-bottom;
}

pre {
padding: 1em;
}
a {
color: #e81c4f;
}

code,
pre {
background: #f5f7f9;
border-bottom: 1px solid #d8dee9;
color: #a7adba;
}

pre {
border-left: 2px solid #69c;
}

header {
background-color: #263d36;
background-image: url(“header.jpg”);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
line-height: 1.2;
padding: 10vw 2em;
text-align: center;
}
header img {
display: inline-block;
height: 120px;
vertical-align: top;
width: 120px;
}

header h1 {
color: white;
font-size: 2.5em;
font-weight: 300;
}

header a {
border: 1px solid #e81c4f;
border-radius: 290486px;
color: white;
font-size: 0.6em;
letter-spacing: 0.2em;
padding: 1em 2em;
text-transform: uppercase;
text-decoration: none;
transition: none 200ms ease-out;
transition-property: color, background;
}

header a:hover {
background: #e81c4f;
color: white;
}

简单一点就是这些css 放到网页里，样子很好看

利用let’sencrypt给owncloud加https

搭建owncloud并不想多说
https://doc.owncloud.org/server/9.0/admin_manual/installation/nginx_owncloud_9x.html 官网文档看一看

使用let’sencrypt 更多的是使用 certbot

certbot 安装过程中遇到了 python installing package…… 卡住的问题，后来使用了 pip 国内镜像解决，又是GFW的锅！

certbot安装好以后，就可以生成证书以及相关文件了，由于owncloud的配置的坑，我最终使用的手动方式为owncloud生成

$ ./path/to/certbot-auto certonly --webroot -w /var/www/example -d example.com -d www.example.com

1	$ ./path/to/certbot-auto certonly --webroot -w /var/www/example -d example.com -d www.example.com

大概就是这样，一开始有问题主要是验证不能通过，是nginx 配置文件中rewrite的原因，

配置文件中有一条

location ~ ^/(?:\.|autotest|occ|issue|indie|db_|console) {
        deny all;
    }

location ~ ^/(?:\.|autotest|occ|issue|indie|db_|console) {

deny all;

}

看到那个点了吗？就是它把它先删除一下，然后.well-known/acme-challenge 就可以访问的到啦，验证通过。

生成的证书在 /etc/letsencrypt/live下面

然后参照 https://s.how/nginx-ssl/ 这里把nginx 相关的配置都完善完善就可以了。

啊，这个证书是三月的，还牵扯续签问题，续签就直接在crontab中加入一条

/path/to/certbot-auto renew 就可以了

脚本会自己判断是否过期，所以这个脚本你每天每月执行都没关系啦

用RN开发的程序怎么在真机上测试

RN ＝ React Native

在xcode中打开项目的AppDelegate.m文件

把

jsCodeLocation = [NSURL URLWithString:@”http://localhost:8081/index.ios.bundle?platform=ios&dev=true”];

注释掉

再把

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];

打开注释，

其实就是切换jsbundle 的方式。

在device中选择你的iphone command ＋ r 就可以了。

Mysql的optimize命令

在Mysql中使用delete语句后，表的大小不会立即变小，那么就可以使用optimize优化语句

# optimize table $TABLE_NAME$;

这样就可以了

CKEditor 添加图片上传功能

CKEditor默认没有图片上传功能，官网默认是配合CKFinder使用的套路，但是有的时候就是懒得配置，所以就有这么一篇了，

其实很简单 4 步

1，检查你的编辑器有图片按钮
2，开启图片的上传对话框：在ckeditor\plugins\image\dialogs\image.js 里查找 filebrowserImageBrowseLinkUrl , 把它后面的有个hidden的值改为false，
同理，后面还有一个Upload 也把它的hidden改为false
（这里使用的是CKEditor 4.5.9版本）

3，对CKEditor设置图片上传的接收url，就是告诉编辑器上传图片是发送到哪个url
在CKEditor.config 中设置 config.filebrowserUploadUrl = ‘../ckupload.php’; 即可

4，编写负责处理上传图片的php文件（这里采用php脚本，其他的什么同理），大概是这么一段代码

<?

$url = ‘../images/uploads/’.time().”_”.$_FILES[‘upload’][‘name’];

//extensive suitability check before doing anything with the file…

if (($_FILES[‘upload’] == “none”) OR (empty($_FILES[‘upload’][‘name’])) )

   {

   $message = “No file uploaded.”;

   }

   else if ($_FILES[‘upload’][“size”] == 0)

   {

   $message = “The file is of zero length.”;

   }

   else if (($_FILES[‘upload’][“type”] != “image/pjpeg”) AND ($_FILES[‘upload’][“type”] != “image/jpeg”) AND ($_FILES[‘upload’][“type”] != “image/png”))

   {

   $message = “The image must be in either JPG or PNG format. Please upload a JPG or PNG instead.”;

   }

   else if (!is_uploaded_file($_FILES[‘upload’][“tmp_name”]))

   {

   $message = “You may be attempting to hack our server. We’re on to you; expect a knock on the door sometime soon.”;

   }

   else {

$message = “”;

$move = @ move_uploaded_file($_FILES[‘upload’][‘tmp_name’], $url);

if(!$move)

{

$message = “Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.”;

}

$url = “../” . $url;

   }

$funcNum = $_GET[‘CKEditorFuncNum’] ;

echo “<script type=’text/javascript’>window.parent.CKEDITOR.tools.callFunction($funcNum, ‘$url’, ‘$message’);</script>”;

?>

这样一来就oK啦