Web
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代码.没有模板引擎.
// 这不利于前端人员撰写前端的界面. 势必要独立一套模板语言.以便达成双方沟通的桥梁!
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
TypeScript
libraries
抖音前端UI框架:
https://github.com/DouyinFE/semi-design/
jsx的另一种选择:
https://markojs.com/
Vuex & route
npm install vuex
npm install -g vue-router
when to use vuex?
multiple components depend on or affect one state
vuex flow











