搭建React项目工程方法(ES6)

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

 

 

准备build/ index.html文件

 

在package.json 文件中添加

 

webpack.config.js 文件这么写

 

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

 

然后运行 npm run dev

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

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

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生成

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

配置文件中有一条

看到那个点了吗? 就是它 把它先删除一下,然后.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 就可以了。

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啦