Ant Design
一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验。
官网: https://ant.design/index-cn
文档: https://ant.design/docs/react/introduce-cn
Ant Design of React
这里是 Ant Design 的 React 实现,开发和服务于企业级后台产品。
特性
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 React 组件。
- 使用 TypeScript 构建,提供完整的类型定义文件。
- 全链路开发和设计工具体系。
支持环境
- 现代浏览器和 IE9 及以上(需要 polyfills)。
- 支持服务端渲染。
- Electron
安装
使用 npm 或 yarn 安装#
我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。
$ npm install antd --save
$ yarn add antd
如果你的网络环境不佳,推荐使用 cnpm。
浏览器引入
在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd。
我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通过 或 UNPKG 进行下载。
强烈不推荐使用已构建文件,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。
注意:3.0 之后引入 antd.js 前你需要自行引入 moment。
示例
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
引入样式:
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
按需加载
下面两种方式都可以只加载用到的组件。
使用 babel-plugin-import(推荐)。
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
]
}
注意:webpack 1 无需设置 libraryDirectory。
然后只需从 antd 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。
// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';
手动引入
import DatePicker from 'antd/lib/date-picker'; // 加载 JS
import 'antd/lib/date-picker/style/css'; // 加载 CSS
// import 'antd/lib/date-picker/style'; // 加载 LESS
Vant - 有赞移动端 Vue 组件库
A Vue.js 2.0 Mobile UI at YouZan
特性
- 50+ 个经过有赞线上业务检验的组件
- 单元测试覆盖率超过 90%
- 完善的中英文文档和示例
- 支持 babel-plugin-import
- 支持 TypeScript
- 支持 SSR
安装
npm i -S vant
快速上手
方式一. 使用 babel-plugin-import (推荐)
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意:webpack 1 无需设置 libraryDirectory。
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式。
import { Button } from 'vant';
方式二. 按需引入组件
import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
方式三. 导入所有组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<!-- 引入组件 -->
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
更多内容请参考 快速上手.
贡献代码
修改代码请阅读我们的 开发指南。
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR。
浏览器支持
现代浏览器以及 Android 4.0+, iOS 6+.
手机预览
可以手机扫码以下二维码访问手机端 demo:
链接
开源协议
本项目基于 MIT 协议,请自由地享受和参与开源。
前端框架Semantic-ui
官网: http://www.semantic-ui.cn/
更快地设计赏心悦目的网站
Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。
简洁的 HTML
Semantic UI中词语和类(css clases)是可以相互替换的概念
直观的使用自然语言中的语法,词汇和语序等来定义一个类(css class)。
取BEM 和 SMACSS 的精华,同时使之更易于使用。
直观明了的 Javascript
Semantic 使用被叫做 behaviors 的简单短语来触发功能
开发者可以更改任何组件中的配置来设置该组件中的某一设置
化繁为简的调试
记录日志使您很方便的追踪到性能瓶颈,而不必去堆栈轨迹中发掘问题所在。
MUI一个以IOS为参考的移动端前端框架
mui
性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。
mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。
参考文档
快速体验
在线下载或扫描如下二维码下载Hello MUI,可在手机上体验MUI的控件UI及能力展示;
在线交流
若你在使用过程中有任何经验、想法、疑惑,都可以在问答社区 发起文章,和其它mui用户一起交流;
License
mui遵循MIT License;
开发工具
mui组件已被封装成HBuilder代码块,只需要简单几个字符,就可以快速生成各个组件对应的HTML代码,因此和Hbuilder两个一起用,效果会更好;
一个markdown编辑器editor.md
Editor.md
Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.
Features
- Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);
- Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting…;
- Markdown Extras : Support ToC (Table of Contents), Emoji, Task lists, @links.html"">@Links…;
- Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;
- Support decode & fliter of the HTML tags & attributes;
- Support TeX (LaTeX expressions, Based on KaTeX), Flowchart and Sequence Diagram of Markdown extended syntax;
- Support AMD/CMD (Require.js & Sea.js) Module Loader, and Custom/define editor plugins;
Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。
主要特性
- 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法,也可变身为代码编辑器;
- 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
- 支持 ToC(Table of Contents)、Emoji表情、Task lists、@links.html">@链接等 Markdown 扩展语法;
- 支持 TeX 科学公式(基于 KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
- 支持识别和解析 HTML 标签,并且支持自定义过滤标签及属性解析,具有可靠的安全性和几乎无限的扩展性;
- 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
- 兼容主流的浏览器(IE8+)和 Zepto.js,且支持 iPad 等平板设备;
Examples
https://pandao.github.io/editor.md/examples/index.html
Download & install
Bower install :
bower install editor.md
Usages
HTML:
```html
cms想法
关于字体图标
后台模块或按钮图标采用 http://www.iconfont.cn/ 的图标,
智能解析iconfont.css提取所有图标
关于模块
新建模块需要设置:
模块标识
模块名称
模块字段 (标识, 名称, 类型, 默认值, 新增验证函数, 更新验证函数)
// 默认值可读取配置
// 验证函数自动读取验证辅助类的方法和文档
列表显示字段
// 字段显示有格式化方式, 自动读取格式化辅助类和文档
详情页显示字段
添加数据界面显示字段
编辑页面显示字段
排序字段和方式(asc|desc|自定义)
搜索字段
删除数据方式 (软删除, 直接删除)
验证辅助类
设计思想
class Validate {
public function username($value, $msg, $params...) {
}
}
分两个, 一个系统, 一个用户自定义
想到的辅助方法:
用户名,密码,邮箱,手机号,不能为空,长度限制,只允许英文,正则
通过获取类的注释, 在需要的地方列出验证方式列表
字段和数据格式化辅助类
设计思想
class Format{
public function toImgTag($value, $params....) {
}
}
分两个, 一个系统, 一个用户自定义
想到的辅助方法:
时间,状态,图片,关联表字段 (表名, 字段名, 分隔符)
通过获取类的注释, 在需要的地方列出格式化辅助方法列表
php内置服务器使用方法
1 启动Web服务器
$ cd ~/public_html
$ php -S localhost:8000
终端输出信息:
PHP 5.4.0 Development Server started at Thu Jul 21 10:43:28 2011
Listening on localhost:8000
Document root is /home/me/public_html
Press Ctrl-C to quit
当请求了 http://localhost:8000/ 和 http://localhost:8000/myscript.html 地址后,终端输出类似如下的信息:
PHP 5.4.0 Development Server started at Thu Jul 21 10:43:28 2011
Listening on localhost:8000
Document root is /home/me/public_html
Press Ctrl-C to quit.
[Thu Jul 21 10:48:48 2011] ::1:39144 GET /favicon.ico - Request read
[Thu Jul 21 10:48:50 2011] ::1:39146 GET / - Request read
[Thu Jul 21 10:48:50 2011] ::1:39147 GET /favicon.ico - Request read
[Thu Jul 21 10:48:52 2011] ::1:39148 GET /myscript.html - Request read
[Thu Jul 21 10:48:52 2011] ::1:39149 GET /favicon.ico - Request read
2 启动web服务器时指定文档的根目录
$ cd ~/public_html
$ php -S localhost:8000 -t foo/
终端显示信息:
PHP 5.4.0 Development Server started at Thu Jul 21 10:50:26 2011
Listening on localhost:8000
Document root is /home/me/public_html/foo
Press Ctrl-C to quit
如果你在启动命令行后面附加一个php脚本文件,那这个文件将会被当成一个“路由器”脚本。这个脚本将负责所有的HTTP请求,如果这个脚本执行时返回FALSE,则被请求的资源会正常的返回。如果不是FALSE,浏览里显示的将会是这个脚本产生的内容。
3 使用路由器脚本
在这个例子中,对图片的请求会返回相应的图片,但对HTML文件的请求会显示“Welcome to PHP”:
<?php
// router.php
if (preg_match('/\.(?:png|jpg|jpeg|gif)$/', $_SERVER["REQUEST_URI"])) {
return false; // serve the requested resource as-is.
} else {
echo "<p>Welcome to PHP</p>";
}
?>
执行:
$ php -S localhost:8000 router.php
4 判断是否是在使用内置web服务器
通过程序判断来调整同一个PHP路由器脚本在内置Web服务器中和在生产服务器中的不同行为:
<?php
// router.php
if (php_sapi_name() == 'cli-server') {
/* route static assets and return false */
}
/* go on with normal index.php operations */
?>
执行:
$ php -S localhost:8000 router.php
这个内置的web服务器能识别一些标准的MIME类型资源,它们的扩展有:.css, .gif, .htm, .html, .jpe, .jpeg, .jpg, .js, .png, .svg, and .txt。对.htm 和 .svg 扩展到支持是在PHP 5.4.4之后才支持的。
5 处理不支持的文件类型
如果你希望这个Web服务器能够正确的处理不被支持的MIME文件类型,这样做:
<?php
// router.php
$path = pathinfo($_SERVER["SCRIPT_FILENAME"]);
if ($path["extension"] == "ogg") {
header("Content-Type: video/ogg");
readfile($_SERVER["SCRIPT_FILENAME"]);
}
else {
return FALSE;
}
?>
执行:
$ php -S localhost:8000 router.php
如果你希望能远程的访问这个内置的web服务器,你的启动命令需要改成下面这样:
6 远程访问这个内置Web服务器
$ php -S 0.0.0.0:8000
这样你就可以通过 8000 端口远程的访问这个内置的web服务器了。
php-angular模板引擎
源码地址: https://github.com/php-angular/php-angular
仿angularjs的php模板引擎
目前实现了一下几种标签和用法
标签
- php-if
- php-for
- php-foreach
- php-repeat
- php-show
- php-hide
- php-include
- php-init
- php-exec
变量输出
{$var}
{$array.name}
{$array[‘name’]}
{:func()}
{$var ? ‘’ : ‘’}
结合框架使用
具体的框架驱动可以在 /drivers 目录中找到
直接使用方法 /test/index.php
<?php
require '../lib/angular.php';
// 配置
$config = array(
'tpl_path' => './view/',
'tpl_suffix' => '.html',
'cache_path' => './cache/',
'attr' => 'php-',
'debug' => true,
);
// 实例化
$view = new Angular($config);
// 数据
$data = array(
'title' => 'Hello PHP Angular',
'list' => array(
array('name' => 'name_1', 'email' => 'email_1@qq.com'),
array('name' => 'name_2', 'email' => 'email_2@qq.com'),
array('name' => 'name_3', 'email' => 'email_3@qq.com'),
array('name' => 'name_4', 'email' => 'email_4@qq.com'),
array('name' => 'name_5', 'email' => 'email_5@qq.com'),
),
);
// 向模板引擎设置数据
$view->assign($data);
// 输出解析结果
$view->display('index');
// 获取输出结果
// $view->fetch('index');
模板实例 /test/view/index.html
<!DOCTYPE html>
<html>
<head>
<title>php-angular</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.box {
padding: 10px;
font-size: 12px;
margin: 10px 5px;
background: #CCC;
}
</style>
</head>
<body>
<div class="box" php-show="$title">{$title}</div>
<div class="box" php-hide="$title">如果title的值为空, 则可以显示这条消息, 否则不显示</div>
<div class="box">
<span>foreach by [1,2,3,4,5]</span>
<ul>
<li php-foreach="[1,2,3,4,5] as $i">foreach {$i}</li>
</ul>
</div>
<div class="box">
<span>repeat by [1,2,3,4,5]</span>
<ul>
<li php-repeat="[1,2,3,4,5] as $i">foreach {$i}</li>
</ul>
</div>
<div class="box" php-show="$list">
<span>foreach by $list as $item</span>
<ul>
<li php-foreach="$list as $item">name:{$item.name} -- email: {$item.email}</li>
</ul>
</div>
<div class="box" php-show="$list">
<span>repeat by $list as $item</span>
<ul>
<li php-repeat="$list as $item">name:{$item.name} -- email: {$item.email}</li>
</ul>
</div>
<div class="box" php-if="$list">
<span>foreach by $list as $key => $item</span>
<ul>
<li php-foreach="$list as $key => $item">{$key} -- name:{$item.name} -- email: {$item.email}</li>
</ul>
</div>
<div class="box">
<span>for by ($i = 1; $i <= 10; $i++;)</span>
<ul>
<li php-for="$i = 1; $i <= 10; $i++">for {$i}</li>
</ul>
</div>
<div class="box" php-if="$list">
<span>$list 不为空</span>
</div>
</body>
</html>
解析结果 /test/cache/6a992d5529f459a44fee58c733255e86.php
<!DOCTYPE html>
<html>
<head>
<title>php-angular</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.box {
padding: 10px;
font-size: 12px;
margin: 10px 5px;
background: #CCC;
}
</style>
</head>
<body>
<?php if ($title) { ?><div class="box" ><?php echo $title; ?></div><?php } ?>
<?php if (!($title)) { ?><div class="box" >如果title的值为空, 则可以显示这条消息, 否则不显示</div><?php } ?>
<div class="box">
<span>foreach by [1,2,3,4,5]</span>
<ul>
<?php foreach ([1,2,3,4,5] as $i) { ?><li >foreach <?php echo $i; ?></li><?php } ?>
</ul>
</div>
<div class="box">
<span>repeat by [1,2,3,4,5]</span>
<ul>
<?php foreach ([1,2,3,4,5] as $i) { ?><li >foreach <?php echo $i; ?></li><?php } ?>
</ul>
</div>
<?php if ($list) { ?><div class="box" >
<span>foreach by $list as $item</span>
<ul>
<?php foreach ($list as $item) { ?><li >name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
</ul>
</div><?php } ?>
<?php if ($list) { ?><div class="box" >
<span>repeat by $list as $item</span>
<ul>
<?php foreach ($list as $item) { ?><li >name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
</ul>
</div><?php } ?>
<?php if ($list) { ?><div class="box" >
<span>foreach by $list as $key => $item</span>
<ul>
<?php foreach ($list as $key => $item) { ?><li ><?php echo $key; ?> -- name:<?php echo $item["name"]; ?> -- email: <?php echo $item["email"]; ?></li><?php } ?>
</ul>
</div><?php } ?>
<div class="box">
<span>for by ($i = 1; $i <= 10; $i++;)</span>
<ul>
<?php for ($i = 1; $i <= 10; $i++) { ?><li >for <?php echo $i; ?></li><?php } ?>
</ul>
</div>
<?php if ($list) { ?><div class="box" >
<span>$list 不为空</span>
</div><?php } ?>
</body>
</html>
写了个jquery的自动填充form插件
最近发现每次做后台编辑数据的时候, 给表单设置默认值都很麻烦, 这次干脆写了一个jquery插件, 直接自动填充表单, 省去php一个一个的写, 这样代码可读性也好了很多.
jquery.autofill.js
jQuery.fn.extend({
autofill: function (data) {
if (!data || !$.isPlainObject(data)) {
return;
}
for (var name in data) {
if ($.isArray(data[name])) {
var field = $('[name="' + name + '[]"]', this);
field.each(function () {
if (data[name].indexOf($(this).val()) >= 0) {
$(this).attr('checked', 'checked');
}
});
} else {
var field = $('[name="' + name + '"]', this);
field.each(function () {
switch ($(this).attr('type')) {
case 'radio':
if ($(this).val() === data[name].toString()) {
$(this).attr('checked', 'checked');
}
break;
default:
$(this).val(data[name]);
break;
}
});
}
}
}
});
使用方法 ./test.php
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<form action="?" method="post" id="form">
姓名: <input type="text" name="name" id="" />
<br />
年龄: <input type="number" name="age" id="" />
<br />
性别:
<input type="radio" name="sex" value="1" id="" /> 男
<input type="radio" name="sex" value="0" id="" /> 女
<br />
省份:
<select name="area" id="">
<option value="-1">选择省份</option>
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="henan">河南</option>
</select>
<br />
爱好:
<input type="checkbox" name="hobby[]" value="book" id="" /> 看书
<input type="checkbox" name="hobby[]" value="coding" id="" /> 写代码
<input type="checkbox" name="hobby[]" value="games" id="" /> 打游戏<br />
简介:
<textarea name="content"></textarea>
<br />
<input type="submit" value="提交" />
</form>
<!-- 这里是数据 -->
<div class="hidden" id="data">
<?php
$data = [
'name' => 'shuai',
'age' => '25',
'area' => 'henan',
'sex' => 0,
'hobby' => ['book', 'games'],
'content' => 'hello world',
];
echo json_encode($data);
?>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.autofill.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var data = $.parseJSON($('#data').text());
$('#form').autofill(data);
});
</script>
</body>
</html>