Web

CodeIgniter

codeigniter

-- application
  -- cache
  -- config
  -- controllers
  -- core
  -- hooks
  -- models
  -- views
-- system
  -- core   :CI的基础核心,不要做任何修改,要扩展应通过Hooks
  -- fonts
  -- libraries

Basic

  • 任何一个url请求,ci都是先用网站根目录下的index.php来处理,然后再重定向.所以一般的请求格式是这样的:..index.php/..
    有一种方法可以使url中避免输入index.php,方式是使用.htaccess
  • url的格式是: example.com/controller1/method1/para1/para2
    访问上面的网址ci就会调用(需public): Controller1::method1($para1, $para2)
    如果访问的是example.com/controller1则默认调用: Controller1::index();
  • route
    application/config/routes.php
  • config
  // application/autoload.php
  $autoload['libraries'] = array('database', 'session');
  $autoload['helper'] = array('url');  // 辅助函数

controllers/hello.php

class Hello extends CI_Controller {
  function __construct() { // 默认是public,定义为private外界就不能访问了
    parent::__construct();  // 对应的有__destruct();
    // models/mod1/hello.php
    // 一般数据的来源是models里面的数据库.完了传递给view
    // TRUE: 模型在加载时自动按照数据库配置连接数据库.当然也可以给第三个参数传递一个$config['key']='value'的配置array!
    $this->load->model('mod1/hello', 'aliasname', TRUE);
    // 加载helper(),类库(libraries)
    $this->load->help(array('url'));
    $this->load->library(array('email', 'table'));
    $this->load->library('form_validation');  // 表单验证相关
    $this->load->library('pagination');  // 翻页
    $config['base_url'] = site_url('admin/..');
    $config['total_rows'] = 100;
    $config['per_page'] = 20;
    $this->pagination->initialize($config);
    $offset = ($this->pagination->cur_page - 1) * $perpage;
    
  }
  public function index() {
    // http://your-domain/index.php/hello
    // index方法表示默认的,无需特意指明/hello/index
  }
  public function welcome($name, $age) {
    $res = $this->aliasname->func();  // 默认就是模型的名字hello    
    $data['content'] = '123';
    $data['array'] = array('1', '2');
    $this->load->view('hello', $data);  // view/hello.php. 给视图传递一个数据$data.key名模板中被当做变量.
  }
  public function _remap($method, $params=array()) { // 如果想自定义uri中第2段的映射函数如此:    
    $method = 'process' . $method;
    if (method_exists($this, $method)) {
      return call_user_func_array(array($this,$method), $params);
    }
    show_404();
  }
}

models/mod1/hello.php

# 如果某个模型在app的整个生命周期内使用,可以让ci在系统初始化时自动加载,设置路径为:application/config/autoload.php
class Hello extends CI_Model {
  public function __construct() {
    parent::__construct();
    $this->db = $this->load()->database('dbname', TRUE);
  }
  public function func() {
    $res = $this->db->query('select....');
    foreach ($res->result_array() as $row) {
      $row['columnname'];
    }
    $this->db->update('tbname', array(...));
    return $res;
  }
  public function update_entry() {
    // 最好使用 $this->input->post('title');
    $this->title = $_POST['title'];
    $this->content = $_POST['content'];
    $this->date = time();
    $this->db->update('entries', $this, array('id'=>$_POST['id']));
  }
}

views/hello.php

<html>
<head></head>
<body>
  <h1><?php echo $content; ?></h1>
  <ul>
  <?php foreach ($array as $item): ?>
    <li><?php echo $item;?></li>
  <?php endforeach>
  </ul>
</body>
</html>

ssl

$priKey = 'rsa_private_key.pem';
$pubKey = 'rsa_public_key.pem';
extension_loaded('openssl') ordie('php needs openssl extention');
$pri = openssl_pkey_get_private(file_get_contents($priKey));  // 如果失败会返回false
$pub = openssl_pkey_get_private(file_get_contents($pubKey));
$oriData = 'hello';
$encData = '';
openssl_private_encrypt($oriData, $encData, $pri);  // bool
$decData = '';
openssl_public_decrypt($encData, $decData, $pub);

misc

/*
 * 自动文章第一个图片为特色图片
 */
function autoset_featured_image(){
    global $post;
    $already_has_thumb = has_post_thumbnail($post->ID);
    if (!$already_has_thumb){
        $attached_image = get_children("post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1");
        if ($attached_image) {
            foreach ($attached_image as $attachment_id => $attachment) {
                set_post_thumbnail($post->ID, $attachment_id);
            }
        } else { // 若没有图片使用素材库中的某个
            set_post_thumbnail($post->ID, '414');
        }
    }
}
add_action('the_post', 'autoset_featured_image');
add_action('save_post', 'autoset_featured_image');
add_action('draft_to_publish', 'autoset_featured_image');
add_action('new_to_publish', 'autoset_featured_image');
add_action('pending_to_publish', 'autoset_featured_image');
add_action('future_to_publish', 'autoset_featured_image');

// dg2: 验证码相关,处理验证码图片

// Smarty
// 主要还是为了实现前后端的分离.因为CI框架中的HTMLtemplate是直接嵌入的PHP代码.没有模板引擎.
// 这不利于前端人员撰写前端的界面. 势必要独立一套模板语言.以便达成双方沟通的桥梁!

更多

Webpack

基于nodejs开发的一款代码压缩(注释,空格等)混淆工具, 处理浏览器对js/css的兼容性, 性能优化

更多

WebGPU

WebGL的起源

WebGL

OpenGL ES

专为嵌入式计算机、智能手机、家用游戏机设备设计. 它从 OpenGL 中删除了许多旧的和无用的特性:
比如去掉矩形等多余的多边形, 只保留点、线、三角形等基本图形.

更多

Js

1995 Brendan Eich(布兰登*艾奇)发明了javascript,现任Mozilla公司CTO.

更多

CSS

selector

selector {property: value; property: value;}

  • 注释仅支持/**/,以下仅为了方便
  • 块级标签: div, h1/hr, ul/ol/dl, p/pre, form, table, blockquote/marquee; 块级元素才有width/height概念(若不指定宽高,则为父亲100%)!
  • 优先级(多个选择器给元素设置属性): id选择器 > 类选择器(属性选择器,伪类选择器) > 标签选择器(伪元素选择器)
  • 层叠性: 分别统计每个selector的上面三元组的个数,然后排序,排序高的使用;相同的,使用代码上后面一个
  c1.c2 {}  /* 同时含有c1与c2类!*/
  /* h1 || h2的所有后代p || h3里面的所有1级p元素 || h4的第1个兄弟 || 含有id1属性及class=a属性的div */
  h1, h2 p, h3>p, h4+p, div[class="a"][id1] {
    color: red !important;  /* important:打破优先级,若有其他设置与本条冲突,则优先使用;不会被继承! */
    font-family:"consolas, sans serif";
  }
  #idname {}  /* <p id="idname">..</p>; 与html一起工作时,大小写敏感! */
  [attr] {}  /* 带有attr属性的所有元素 */
  [attr=value] {} /* 属性值='value' */
  [attr~=value]{} /* 由空格分隔的多个属性至少匹配一个.类似于'*=' */
  [attr|=value]{} /* 属性值以'value-'开头 */
  [attr^=value]{} /* 属性值以'value'开头 */
  [attr$="val"]{} /* 属性值以'val'结尾 */
  [attr*=value]{} /* 属性值以包含'value'子串 */

  /* functions */
  :not(p)  /* 不是p标签 */
  a :link    /* 链接访问之前; visited; hover; active(点击但不松手时) */
  input :focus  /* 获得焦点的input元素 */
  div :only-child  /* 仅有一个子元素的所有 */
  div :empty  /* tag里面不包含任何内容 */
  div :target   /* toc切换加外边框 */
  div :enabled /* disabled/checked */
  div ::selection
  div li  :nth-last-of-type  /* 最后一个li元素 */
  div#id1 :nth-child(2n)  /* 所有偶数行,2n-1:奇数行; -n+5:前5个; 3n:3的倍数; 注意:名称有些误解,表示的是同级元素! */
  div:nth-of-type(2)  /* 第2个类型为div的元素 */
  xx :nth-last-child(n)  /* 倒数第几个. 单独写n表示每一个 */
  xx :first-child/of-type
  xx :last-child/of-type
  p ::first-line/letter
  .box :before {
    content: "box多出来的内容,可以选择"
  }
  /* :visited(点击链接后)/:active(点击连接时)/:focus(通过键盘选择或已经被点击过都会获取焦点) */
  .box :hover:after{
    color: red;  /* 要添加内容使用content:"这里面是伪元素,界面上选中不了的" */
  }

demos

<head>
<!-- 会并行下载该文件,不会停止对DOM的解析 -->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
</head>
{
  // top right bottom(>0表元素或块的下边沿相对于position抬高多少) left
  // 下面这个写法表示水平居中(auto表水平自动),注意此时该盒子必须具有width(否则独占整行); float的盒子该设置无法居中!
  // 注意: 嵌套的div/p,若外层div无border,则内层的margin-top/bottom会转移给外层div使用,表现怪异! 故:--->
  //   margin本质上是描述兄弟之间的距离!父子之间的距离应该使用padding来描述!!!
  margin: 0 auto;  // 使块居中(上下+左右); top right bottom left,缺少一个则最后一个对称相补; 若仅提供一个值则其他值全部由top补齐.
  // 解决办法: 父元素添加'overflow: hidden' 或 'position: absolute;' 或 给父元素添加有效的border/padding属性 或 子元素添加'float: left'
  padding: 1em 2px;
  min-width: 20px;
  width: calc(100% - 2*2px);  // 
  // 如果是一段文本,则表示这段文字里最长的单词; max-content:一直不换行!
  // flex中,若元素总宽度超过了box宽度,则每个元素的宽度就是min-content
  width: min-content;
  // flex: css3标准,IE10仅部分支持! https://www.bilibili.com/video/BV1A44y1Z7Bp
  // flex盒子是具有默认宽度的(当前viewport宽度),如果元素(默认每个都是min-content)总宽度超过了它,则元素不会换行,会冲破边界!
  // flex盒子元素也可以强制指定width多宽!
  // grow shrink basis; 默认值('0 1 auto' == initial, auto == 1 == '1 1 auto', none == '0 0 auto')
  //   grow: 如果box宽度大鱼items总和,则每一个item增加宽度x,满足: n*(flex-basis + flex-grow*x) = box-width; 一般配合nth-child()来单独控制该item是其宽度的几倍!
  //   basis: 默认auto(item的min-content宽度),可设置固定的item宽度
  flex: 1;  // == 1 1 auto
  // 默认值; column:从上到下垂直排列; row-reverse:从右至左排列子元素
  flex-direction: row;
  // 将内联标签变为块级标签; inline:变为内联标签(不接受padding的设置,==span) inline-block:内敛但可设置margin,width这些属性 none:delete元素布局也没有了
  display: block/flex;
  // https://www.runoob.com/cssref/css3-pr-justify-content.html
  // 主轴对齐方式; space-bewteen, space-evenly
  justify-content: space-around;
  // 纵轴对齐方式
  // stretch:统一成最大哪个元素的高度,默认值
  // flex-start: 交叉轴的起点对齐; flex-end; flex-center
  // baseline: 每个item中第一行文字的基线对齐
  align-items: baseline;
  // https://www.freecodecamp.org/news/css-positioning-position-absolute-and-relative
  // 相对/绝对/固定定位都可以使用z-index值!
  // sticky: 只能在最近的具有'overflow:scroll'的父容器中使用:滚动条下滑动时,它也下滑.但滑到上方无空间时,就被顶(sticky)在了viewport.此时它不会挤占下方元素的空间,会漂浮在最顶层.
  // fixed: 相对于浏览器窗口,亦不受滚动条影响(背景图用的比较多)!
  // 参考点要参考已经定位的最近的祖先元素,无时html!
  // 完全脱离了正常的文档流.它的坐标系参考html. 如果还是想已parent作为参考系呢? --> 把parent-position设为relative:(relative-absolute)!
  // 注意: 与(static-relative:常用组合)的区别: 诞生点是否脱标:是否可以被别人占用!
  // 注意: 绝对定位的儿子,无视参考的那个祖先盒子的padding,即还是以祖先的border作为参考点!
  // absolute: 会跟随滚动条滚动. 它的位置会被正常的文档流挤走.
  // static: 默认值!此时,left/right/top/bottom/clip无效(无坐标系)! 如果此时想微调下某个元素的位置,使用relative! relative是相对于父元素static而言的移动!
  // relative: 长用来微调. 以其本身位置,其真实位置还在老家,只不过是影子过去了(定位未脱标:别人不会把它的位置挤走)!
  position: relative;
  right: 0;  // 注意: 非0值必须加单位!
  bottom: 0; // bottom定位时,参考点在首屏左下角.top(页面的左上角)

  // ----------------- border
  // 整个网页的最大盒子是<document>,<body>是<document>的儿子.<body>默认的margin大小是8px.
  border: 1px solid red; height:80%  // 如果上方有些'border-left'此处会覆盖掉它(一般都是写在大属性下方来覆盖)
  border-radius: 8px 20px;  // 左上角->右上->顺时针; 8px/6p:水平半径,垂直半径!
  border-shadow: 0 1px 0 .., inset 0 1px 0 rgba(0,0,0,.3);
  border-style: dotted; // none(default), dashed, solid, double, groove(浅槽), ridge(脊线), inset(凹陷), outset(凸起)
  border-width: thin;   // medium(default), thick, length
  border-color: red;
  border-top-width: 2px;  // border-top-style, border-top-color, border-top; border-bottom..border-left..border-right
  border-collapse: collapse;  // 否则每一个table,th,td都有一个边框就有两个边框了       
  box-sizing: border-box;  // padding+border的值不会影响元素的高度,相当于把他们都算在content. 默认是content-box;

  // ----------------- text
  // 文字的样式属性都具有继承性
  color: gray;  // CSS规范定义了17个颜色名
  mix-blend-mode: difference;  // 若背景时图片的话可能比较合适
  text-align: justify;  // 文本对齐方式, 两端对齐, left, right, center;也可居中img!
  line-height: 1.2em;  // normal(default), 一般用来居中(设置为height数值); 可作用于p. 行高/字号一般是偶数(保证能被2整除)
  text-decoration: underline;  // none(缺省值,也可用来去掉链接的下划线), overline, line-through
  text-indent: 2em;  // 具有继承属性
  letter-spacing: normal;
  word-spacing: 1cm;
  text-transform: uppercase;  // 所有文字转换为大写; lowercase,capitalize,none
  text-shadow: 2px -2px 2px #ccc;  // x-offset y-offset blur color
  vertical-align: middle;  // 行级元素(inline,inline-block,td)的垂直对齐方式

  vertical-align: baseline;
  // visiable(默认值,显示多余的内容,不剪切); auto(溢出时有滚动条); scroll:win始终显示滚动条,mac同auto;
  // 如果div包裹了一个img,css限定div的width/height,则超出的部分默认会显示出来,好像被撑开了,此时可配合该属性!
  overflow: hidden;
  box-shadow: 2px 2px 2px 2px #666;  // x-offset y-offset blur [spread] color

  background: color url(image) pos-x pos-y repeat contain, blue ...
  background-color: #99ff00;  // default:transparent, blue, rgba(25%,35%,45%,.5)
  background-image: url(../image/demo.jpg);  // 必须使用url(),不能使用双引号!
  background-image: linear-gradient(to right,red,blue)  // CSS3; 默认不加方向是中心到四周; 0deg:↑ 90deg:→ 'at top':中心点在最上方中心
  background-size: cover  // 使img填满(保证长宽比,等比例放大,裁切),contain:全部显示,等比例缩小,其他地方留白; 8px 6px; 50%; 100% auto;
  background-repeat: repeat-x;  // repeat-y, no-repeat; 不指定时即默认(平铺满): repeat-x + repeat+y
  background-position: 50% 50%; // center top; 以图片左上角为操作点!
  background-attachment: fixed; // scroll(default:与滚动条一起滚动)

  transition: bottom 2s linear 0s;  // bottom位置变化的动画(或transform表变换下面的操作),线性2s,延迟0s; 后俩默认可省略!
  transform: scale(x,y);  // 仅写一个表等比列缩放; 并不会把兄弟元素挤走!
  transform: rotate(45deg);  // 顺时针
  transform: translate(-50%,-50%);  // 水平平移,垂直平移; 也有相应的3D版本!
  transform-origin: center center;  // 操作的中心点:left(0) center(50%:default) right(100%);  top(0) center bottom  
  transform: rotateX(45deg);  // 3d旋转,对着x轴箭头方向看,顺时针旋转; 注意:z轴箭头是朝向屏幕外的!

  list-style-type: upper-roman;  // none,disc,circle,square,decimal,decimal-leading-zero,lower-roman,upper-roman,lower-alpha,upper-alpha,lower-greek,upper-greek,hebrew...
  list-style-image: url(img/2.gif);  // 注意:url括号里面不加引号!

  clip: rect(0,2em,6em,0);  // 右下个裁剪2em,6em
  visibility: visible;  // hidden(仍然会影响元素的布局), collapse, inherit
  z-index: 8;   // 值越高离读者越近, auto(default)
  content: "";  // 由css生成的html内容
  cursor: pointer;  // default,hand,move,help,text,wait,w-resize...
}

fonts

https://www.iconfont.cn/
http://www.zhaozi.cn/
https://github.com/zenozeng/fonts.css
https://github.com/wordshub/free-font
http://zenozeng.github.io/Free-Chinese-Fonts/

更多

Js Packages

axios

response { // 返回对象
  data: {},
  status: 200,
  statusText: "OK",
  headers: {}, // 响应头
  config: {url: "xx", method: "get", headers: {},}  // 请求的配置
}
// 全局默认值
axios.defaults.baseURL = '';
axios.defaults.headers.common['Authorization'] = '';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.interceptors.request.use((config) { // request interceptor
  return config
}, (error){})
axios.interceptors.response.use((response){ // 2xx返回的都会进来
  if (response.config.responseType === 'blob') {
    return response
  }
  if (response.data.ret !== 0) {
  }
}, (error){ // 非2xx返回的都会进来
})
// 实例默认值
axios.create({
  baseURL: '',
  timeout: 1000,
  headers: {'X-Gd-Req': ''},
  params: {ID: 1},  // url params; get常用!
  responseType: "json",  // 默认值. blob arraybuffer document text stream
  maxContentLength: 22,
  onDownloadProgress: function(evt){
  },
  onUploadProgress: function(evt){
  },
})
// 也可用then方式,但不直观! 也可以结构+重命名: const {data:res}
const res = await axios.request(config)
axios.post('/user/12345', {
  data: { // 仅适用于 PUT/POST/PATCH
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
}).catch();
axios.all(iterable)
axios.spread(callback)

pubsub-js

npm install pubsub-js

更多

PHP

绝大多数文档历史久远,可能具有10年以上的历史,此篇亦然. 请酌情参考. ⚠️

更多

TypeScript

libraries

抖音前端UI框架: https://github.com/DouyinFE/semi-design/
jsx的另一种选择: https://markojs.com/

更多

Vue

2013尤雨溪在Google基于Angular开发,起初命名为Seed,同年12月更名为Vue-0.6.0.

更多

Vuex & route

https://vuex.vuejs.org/zh/
https://router.vuejs.org/zh/

npm install vuex npm install -g vue-router

when to use vuex?
multiple components depend on or affect one state

vuex flow

xx

更多