写了个jquery的自动填充form插件

最近发现每次做后台编辑数据的时候, 给表单设置默认值都很麻烦, 这次干脆写了一个jquery插件, 直接自动填充表单, 省去php一个一个的写, 这样代码可读性也好了很多.

jquery.autofill.js

  1. jQuery.fn.extend({
  2.     autofill: function (data) {
  3.         if (!data || !$.isPlainObject(data)) {
  4.             return;
  5.         }
  6.         for (var name in data) {
  7.             if ($.isArray(data[name])) {
  8.                 var field = $('[name="' + name + '[]"]', this);
  9.                 field.each(function () {
  10.                     if (data[name].indexOf($(this).val()) >= 0) {
  11.                         $(this).attr('checked', 'checked');
  12.                     }
  13.                 });
  14.             } else {
  15.                 var field = $('[name="' + name + '"]', this);
  16.                 field.each(function () {
  17.                     switch ($(this).attr('type')) {
  18.                         case 'radio':
  19.                             if ($(this).val() === data[name].toString()) {
  20.                                 $(this).attr('checked', 'checked');
  21.                             }
  22.                             break;
  23.                         default:
  24.                             $(this).val(data[name]);
  25.                             break;
  26.                     }
  27.                 });
  28.             }
  29.         }
  30.     }
  31. });

使用方法 ./test.php

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  7.     </head>
  8.     <body>
  9.         <div class="container">
  10.             <form action="?" method="post" id="form">
  11.                 姓名: <input type="text" name="name" id="" />
  12.                 <br />
  13.                 年龄: <input type="number" name="age" id="" />
  14.                 <br />
  15.                 性别:
  16.                 <input type="radio" name="sex" value="1" id="" /> 男
  17.                 <input type="radio" name="sex" value="0" id="" /> 女
  18.                 <br />
  19.                 省份:
  20.                 <select name="area" id="">
  21.                     <option value="-1">选择省份</option>
  22.                     <option value="shanghai">上海</option>
  23.                     <option value="beijing">北京</option>
  24.                     <option value="henan">河南</option>
  25.                 </select>
  26.                 <br />
  27.                 爱好:
  28.                 <input type="checkbox" name="hobby[]" value="book" id="" /> 看书
  29.                 <input type="checkbox" name="hobby[]" value="coding" id="" /> 写代码
  30.                 <input type="checkbox" name="hobby[]" value="games" id="" /> 打游戏<br />
  31.                 简介:
  32.                 <textarea name="content"></textarea>
  33.                 <br />
  34.                 <input type="submit" value="提交" />
  35.             </form>
  37.             <!-- 这里是数据 -->
  38.             <div class="hidden" id="data">
  39.                 <?php
  40.                 $data = [
  41.                     'name'    => 'shuai',
  42.                     'age'     => '25',
  43.                     'area'    => 'henan',
  44.                     'sex'     => 0,
  45.                     'hobby'   => ['book', 'games'],
  46.                     'content' => 'hello world',
  47.                 ];
  48.                 echo json_encode($data);
  49.                 ?>
  50.             </div>
  51.         </div>
  52.         <script src="jquery.min.js" type="text/javascript"></script>
  53.         <script src="jquery.autofill.js" type="text/javascript"></script>
  54.         <script type="text/javascript">
  55.             $(function () {
  56.                 var data = $.parseJSON($('#data').text());
  57.                 $('#form').autofill(data);
  58.             });
  59.         </script>
  60.     </body>
  61. </html>

访问

一种同步登录的解决方案

这几天碰到一个需求, 登录A站的时候, 同时自动登录B站, 有可能会有多个B站, 所以想到了有 B站主动发起请求的方式, 解决这个自动登录问题

流程是这样的:

  1. 打开 A站 登录 或 不登录.
  2. 打开 B站 .
  3. B站 自己判断是否存在用户session
  4. 存在就说明已经登录, 操作结束
  5. 没有session, 就给页面输出一个js, 去 A站 用json获取登录用户的token
  6. 如果没有token, 说明没有登录 A站, 不做任何处理.
  7. 如果获取到token, 就ajax向 B站 自己的后台发起同步登录信号
  8. B站 后台通过前台传来的token, 请求 A站 用户数据.
  9. B站 后台请求到用户数据后做自动登录的cookie写入.
  10. 登录成功, 刷新页面

写了一个ThinkPHP的模板引擎, 仿angular的, 简单版

前段时间学习angularjs, 里面的模板思想和实现方法很酷, 就心血来潮, 想实现一个php版的, 今天试着写了一下, 发现貌似可以, 具体看源码.

./ThinkPHP/Library/Think/Template/Driver/Angular.class.php

  1. <?php
  3. namespace Think\Template\Driver;
  5. use Think\Storage;
  7. /**
  8.  * Angular模板引擎驱动 
  9.  */
  10. class Angular {
  12.     private $config  = array();
  13.     private $tpl_var = array();
  15.     /**
  16.      * 架构函数
  17.      */
  18.     public function __construct() {
  19.         $this->config['cache_path']      = C('CACHE_PATH');
  20.         $this->config['tpl_dir']         = THEME_PATH;
  21.         $this->config['cache_path']      = C('CACHE_PATH');
  22.         $this->config['template_suffix'] = C('TMPL_TEMPLATE_SUFFIX');
  23.         $this->config['cache_suffix']    = C('TMPL_CACHFILE_SUFFIX');
  24.         $this->config['tmpl_cache']      = C('TMPL_CACHE_ON');
  25.         $this->config['cache_time']      = C('TMPL_CACHE_TIME');
  26.         $this->config['attr']            = 'tp-';
  27.     }
  29.     /**
  30.      * 编译模板
  31.      * @param type $tpl_file 模板文件
  32.      * @param type $tpl_var 模板变量
  33.      */
  34.     public function fetch($tpl_file, $tpl_var) {
  35.         $this->tpl_var     = $tpl_var;
  36.         $tpl_file = $this->load_template($tpl_file);
  37.         Storage::load($tpl_file, $tpl_var, null, 'tpl');
  38.     }
  40.     /**
  41.      * 加载主模板并缓存
  42.      * @param string $tpl_file 模板文件名
  43.      * @return string 缓存的模板文件名
  44.      */
  45.     public function load_template($tpl_file) {
  46.         if (is_file($tpl_file)) {
  47.             // 读取模板文件内容
  48.             $tpl_content = file_get_contents($tpl_file);
  49.         } else {
  50.             $tpl_content = $tpl_file;
  51.         }
  52.         // 根据模版文件名定位缓存文件
  53.         $tpl_cache_file = $this->config['cache_path'] . md5($tpl_file) . $this->config['cache_suffix'];
  54.         if (Storage::has($tpl_cache_file) && !APP_DEBUG && $this->config['tmpl_cache']) {
  55.             return $tpl_cache_file;
  56.         }
  57.         // 编译模板内容
  58.         $tpl_content = $this->compiler($tpl_content);
  59.         Storage::put($tpl_cache_file, trim($tpl_content), 'tpl');
  60.         return $tpl_cache_file;
  61.     }
  63.     /**
  64.      * 编译模板内容
  65.      * @param string $tpl_content 模板内容
  66.      * @return string 编译后端php混编代码
  67.      */
  68.     protected function compiler($tpl_content) {
  69.         //模板解析
  70.         $tpl_content = $this->parse($tpl_content);
  71.         // 添加安全代码
  72.         $tpl_content = '<?php if (!defined(\'THINK_PATH\')) exit();?>' . $tpl_content;
  73.         // 优化生成的php代码
  74.         $tpl_content = str_replace('?><?php', '', $tpl_content);
  75.         return strip_whitespace($tpl_content);
  76.     }
  78.     /**
  79.      * 解析模板标签属性
  80.      * @param string $content 要模板代码
  81.      * @return string 解析后的模板代码
  82.      */
  83.     public function parse($content) {
  84.         while (true) {
  85.             $sub = $this->match($content);
  86.             if ($sub) {
  87.                 $method = 'parse_' . $sub['attr'];
  88.                 if (method_exists($this, $method)) {
  89.                     $content = $this->$method($content, $sub);
  90.                 } else {
  91.                     E("模板属性" . $this->config['attr'] . $sub['attr'] . '没有对应的解析规则');
  92.                     break;
  93.                 }
  94.             } else {
  95.                 break;
  96.             }
  97.         }
  98.         $content = $this->parse_value($content);
  99.         return $content;
  100.     }
  102.     /**
  103.      * 解析include属性
  104.      * @param string $content 源模板内容
  105.      * @param array $match 一个正则匹配结果集, 包含 html, value, attr
  106.      * @return string 解析后的模板内容
  107.      */
  108.     private function parse_include($content, $match) {
  109.         $tpl_name = $match['value'];
  110.         if (substr($tpl_name, 0, 1) == '$') {
  111.             //支持加载变量文件名
  112.             $tpl_name = $this->get(substr($tpl_name, 1));
  113.         }
  114.         $array     = explode(',', $tpl_name);
  115.         $parse_str = '';
  116.         foreach ($array as $tpl) {
  117.             if (empty($tpl))
  118.                 continue;
  119.             if (false === strpos($tpl, $this->config['template_suffix'])) {
  120.                 // 解析规则为 模块@主题/控制器/操作
  121.                 $tpl = T($tpl);
  122.             }
  123.             // 获取模板文件内容
  124.             $parse_str .= file_get_contents($tpl);
  125.         }
  126.         return str_replace($match['html'], $parse_str, $content);
  127.     }
  129.     /**
  130.      * 解析if属性
  131.      * @param string $content 源模板内容
  132.      * @param array $match 一个正则匹配结果集, 包含 html, value, attr
  133.      * @return string 解析后的模板内容
  134.      */
  135.     private function parse_if($content, $match) {
  136.         $new = "<?php if ({$match['value']}) { ?>";
  137.         $new .= str_replace($match['exp'], '', $match['html']);
  138.         $new .= '<?php } ?>';
  139.         return str_replace($match['html'], $new, $content);
  140.     }
  142.     /**
  143.      * 解析repeat属性
  144.      * @param string $content 源模板内容
  145.      * @param array $match 一个正则匹配结果集, 包含 html, value, attr
  146.      * @return string 解析后的模板内容
  147.      */
  148.     private function parse_repeat($content, $match) {
  149.         $new = "<?php foreach ({$match['value']}) { ?>";
  150.         $new .= str_replace($match['exp'], '', $match['html']);
  151.         $new .= '<?php } ?>';
  152.         return str_replace($match['html'], $new, $content);
  153.     }
  155.     /**
  156.      * 解析show属性
  157.      * @param string $content 源模板内容
  158.      * @param array $match 一个正则匹配结果集, 包含 html, value, attr
  159.      * @return string 解析后的模板内容
  160.      */
  161.     private function parse_show($content, $match) {
  162.         $new = "<?php if ({$match['value']}) { ?>";
  163.         $new .= str_replace($match['exp'], '', $match['html']);
  164.         $new .= '<?php } ?>';
  165.         return str_replace($match['html'], $new, $content);
  166.     }
  168.     /**
  169.      * 解析hide属性
  170.      * @param string $content 源模板内容
  171.      * @param array $match 一个正则匹配结果集, 包含 html, value, attr
  172.      * @return string 解析后的模板内容
  173.      */
  174.     private function parse_hide($content, $match) {
  175.         $new = "<?php if (!({$match['value']})) { ?>";
  176.         $new .= str_replace($match['exp'], '', $match['html']);
  177.         $new .= '<?php } ?>';
  178.         return str_replace($match['html'], $new, $content);
  179.     }
  181.     /**
  182.      * 解析普通变量和函数{$title}{:function_name}
  183.      * @param string $content 源模板内容
  184.      * @return string 解析后的模板内容
  185.      */
  186.     private function parse_value($content) {
  187.         $content = preg_replace('/\{(\$.*?)\}/', '<?php echo \1 ?>', $content);
  188.         $content = preg_replace('/\{\:(.*?)\}/', '<?php echo \1 ?>', $content);
  189.         return $content;
  190.     }
  192.     /**
  193.      * 获取第一个表达式
  194.      * @param string $content 要解析的模板内容
  195.      * @return array 一个匹配的标签数组
  196.      */
  197.     private function match($content) {
  198.         $reg   = '#<(?<tag>[\w]+)[^>]*?\s(?<exp>' . preg_quote($this->config['attr']) . '(?<attr>[\w]+)=([\'"])(?<value>[^\4]*?)\4)[^>]*>#s';
  199.         $match = null;
  200.         if (!preg_match($reg, $content, $match)) {
  201.             return null;
  202.         }
  203.         $sub = $match[0];
  204.         $tag = $match['tag'];
  206.         /* 如果是但标签, 就直接返回 */
  207.         if (substr($sub, -2) == '/>') {
  208.             $match['html'] = $match[0];
  209.             return $match;
  210.         }
  212.         /* 查找完整标签 */
  213.         $start_tag_len   = strlen($tag) + 1; // <div
  214.         $end_tag_len     = strlen($tag) + 3;   // </div>
  215.         $start_tag_count = 0;
  216.         $content_len     = strlen($content);
  217.         $pos             = strpos($content, $sub);
  218.         $start_pos       = $pos + strlen($sub);
  219.         while ($start_pos < $content_len) {
  220.             $is_start_tag = substr($content, $start_pos, $start_tag_len) == '<' . $tag;
  221.             $is_end_tag   = substr($content, $start_pos, $end_tag_len) == "</$tag>";
  222.             if ($is_start_tag) {
  223.                 $start_tag_count++;
  224.             }
  225.             if ($is_end_tag) {
  226.                 $start_tag_count--;
  227.             }
  228.             if ($start_tag_count < 0) {
  229.                 $match['html'] = substr($content, $pos, $start_pos - $pos + $end_tag_len);
  230.                 return $match;
  231.             }
  232.             $start_pos++;
  233.         }
  234.         return null;
  235.     }
  237. }

./Application/Home/Controller/TestController.class.php

  1. <?php
  3. namespace Home\Controller;
  5. use Think\Controller;
  7. class TestController extends Controller {
  9.     public function index() {
  10.         C('SHOW_PAGE_TRACE', true);
  11.         C('TMPL_ENGINE_TYPE', 'Angular');
  13.         $data          = array();
  14.         $data['title'] = '标题';
  15.         $data['nav']   = array(
  16.             array('title' => '首页', 'url' => '/'),
  17.             array('title' => '文章', 'url' => '/article'),
  18.             array('title' => '图片', 'url' => '/pic'),
  19.             array('title' => '新闻', 'url' => '/news'),
  20.         );
  22.         $data['count'] = 6;
  23.         $data['list']  = array(
  24.             array('id' => 1, 'title' => '这是标题1', 'create_time' => strtotime('-5 seconds')),
  25.             array('id' => 2, 'title' => '这是标题2', 'create_time' => strtotime('-4 seconds')),
  26.             array('id' => 3, 'title' => '这是标题3', 'create_time' => strtotime('-3 seconds')),
  27.             array('id' => 4, 'title' => '这是标题4', 'create_time' => strtotime('-2 seconds')),
  28.             array('id' => 5, 'title' => '这是标题5', 'create_time' => strtotime('-1 seconds')),
  29.             array('id' => 6, 'title' => '这是标题6', 'create_time' => NOW_TIME),
  30.         );
  32.         $this->assign($data);
  33.         $this->display('index');
  34.     }
  36. }

./Application/Home/View/Test/index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Angular 模板测试 - {$title}</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <style>
  8.             * {
  9.                 margin: 0px;
  10.                 padding: 0px;
  11.                 font-size: 12px;
  12.                 color: #333;
  13.                 line-height: 20px;
  14.             }
  15.             a {
  16.                 color: #33F;
  17.                 text-decoration: none;
  18.             }
  19.             a:hover {
  20.                 color: #f00;
  21.                 text-decoration: underline;
  22.             }
  23.             .center {
  24.                 text-align: center;
  25.             }
  26.             h1{
  27.                 font-size: 30px;
  28.                 line-height: 50px;
  29.             }
  30.             .nav {
  31.                 line-height: 30px;
  32.             }
  33.             .nav a{
  34.                 padding: 0px;
  35.                 margin: 0px 20px;
  36.             }
  37.             .main table{
  38.                 width: 500px;
  39.                 margin: 0px auto;
  40.             }
  41.             table {
  42.                 border: 1px solid #666;
  43.             }
  44.             table td,
  45.             table th{
  46.                 border: 1px solid #666;
  47.                 line-height: 20px;
  48.                 padding: 0px 5px;
  49.             }
  50.             table th{
  51.                 background: #CCC;
  52.             }
  53.             #footer p{
  54.                 text-align: center;
  55.                 line-height: 30px;
  56.             }
  58.         </style>
  59.     </head>
  60.     <body>
  61.         <div class="header">
  62.             <h1 class="center">Angular 模板测试 - {$title}</h1>
  63.             <div class="nav center" tp-if="$nav">
  64.                 <a tp-repeat="$nav as $vo" href="{$vo['url']}">{$vo['title']}</a>
  65.             </div>
  66.         </div>
  67.         <div class="main">
  68.             <table>
  69.                 <tr>
  70.                     <th>编号</th>
  71.                     <th>标题</th>
  72.                     <th>创建时间</th>
  73.                     <th>操作</th>
  74.                 </tr>
  75.                 <tr tp-if="$list" tp-repeat="$list as $vo">
  76.                     <td>{$vo['id']}</td>
  77.                     <td>{$vo['title']}</td>
  78.                     <td>{:date('Y-m-d H:i:s', $vo['create_time'])}</td>
  79.                     <td><a href="#del={$vo['id']}">删除</a></td>
  80.                 </tr>
  81.                 <tr tp-if="$count">
  82.                     <td colspan="4" class="center">共 {$count} 条数据</td>
  83.                 </tr>
  84.                 <tr tp-hide="$list">
  85.                     <td colspan="4" class="center">没有数据</td>
  86.                 </tr>
  87.             </table>
  88.         </div>
  89.         <div tp-include="footer"></div>
  90.     </body>
  91. </html>

./Application/Home/View/Test/footer.html

  1. <footer id="footer">
  2.     <div class="foot-warp">
  3.         <p>
  4.             © 2015 {:C('SITE_TITLE')} zhaishuaigan@qq.com　　　　豫ICP备13012601号
  5.         </p>
  6.     </div>
  7. </footer>

运行/Test/index, 显示结果

目前只是实现了简单的解析, 还需要进一步完善, 比如配置啊, 扩展更多的标签啊什么的.

第一篇文章

Hello World