首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

Posted in Javascript onAugust 01, 2016

前言：上篇介绍了下ko增删改查的封装，确实节省了大量的js代码。博主是一个喜欢偷懒的人，总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果，啥代码都不用写了，那该多爽。于是研究了下T4的语法，虽然没有完全掌握，但是算是有了一个大致的了解。于是乎有了今天的这篇文章：通过T4模板快速生成页面。

KnockoutJS系列文章：

一、T4的使用介绍

我们知道，MVC里面在添加视图的时候可以自动生成增删改查的页面效果，那是因为MVC为我们内置了基础增删改查的模板，这些模板的语法就是使用T4，那么这些模板在哪里呢？找了下相关文章，发现MVC4及以下的版本模板位置和MVC5及以上模板的位置有很大的不同。

•MVC4及以下版本的模板位置：VS的安装目录+\ItemTemplates\CSharp\Web\MVC 2\CodeTemplates。比如博主的D:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 4\CodeTemplates。

找到cshtml对应的模板，里面就有相应的增删改查的tt文件

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

•MVC5及以上版本的模板位置：直接给出博主的模板位置D:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\Extensions\Microsoft\Web\Mvc\Scaffolding\Templates

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

知道了这个，那么接下来就是改造模板，添加自己的生成内容了。可以直接将List和Edit模板拷贝到过来自行改造，但是最后想了想，还是别动MVC内置的东西了，我们自己来建自己的模板不是更好。

在当前Web项目的根目录下面新建一个文件夹，命名为CodeTemplates，然后将MVC模板里面的MvcControllerEmpty和MvcView两个模板文件夹拷贝到CodeTemplates文件夹下面，去掉它里面的原始模板，然后新建几个自己的模板，如下图：

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

这样我们在添加新的控制器和新建视图的时候就可以看到我们自定义的模板了：

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

二、T4代码介绍

上面介绍了如何新建自己的模板，模板建好之后就要开始往里面塞相应的内容了，如果T4的语法展开了说，那一篇是说不完的，有兴趣的园友可以去园子里找找，文章还是挺多的。这里主要还是来看看几个模板内容。还有一点需要说明下，貌似从MVC5之后，T4的模板文件后缀全部改成了t4，而之前的模板一直是tt结尾的，没有细究它们语法的区别，估计应该差别不大。

1、Controller.cs.t4

为什么要重写这个空的控制器模板呢？博主觉得增删改查的好多方法都需要手动去写好麻烦，写一个模板直接生成可以省事很多。来看看模板里面的实现代码：

<#@ template language="C#" HostSpecific="True" #>
<#@ output extension="cs" #>
<#@ parameter type="System.String" name="ControllerName" #>
<#@ parameter type="System.String" name="ControllerRootName" #>
<#@ parameter type="System.String" name="Namespace" #>
<#@ parameter type="System.String" name="AreaName" #>
<#
var index = ControllerName.LastIndexOf("Controller");
var ModelName = ControllerName.Substring(0, index);
#>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestKO.Models;
namespace <#= Namespace #>
{
public class <#= ControllerName #> : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Edit(<#= ModelName #> model)
{
return View(model);
}
[HttpGet]
public JsonResult Get(int limit, int offset)
{
return Json(new { }, JsonRequestBehavior.AllowGet);
}
//新增实体
[HttpPost]
public JsonResult Add(<#= ModelName #> oData)
{
<#= ModelName #>Model.Add(oData);
return Json(new { }, JsonRequestBehavior.AllowGet);
}
//更新实体
[HttpPost]
public JsonResult Update(<#= ModelName #> oData)
{
<#= ModelName #>Model.Update(oData);
return Json(new { }, JsonRequestBehavior.AllowGet);
}
//删除实体
[HttpPost]
public JsonResult Delete(List<<#= ModelName #>> oData)
{
<#= ModelName #>Model.Delete(oData);
return Json(new { }, JsonRequestBehavior.AllowGet);
}
}
}

这个内容不难理解，直接查看生成的控制器代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestKO.Models;
namespace TestKO.Controllers
{
public class UserController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Edit(User model)
{
return View(model);
}
[HttpGet]
public JsonResult Get(int limit, int offset)
{
return Json(new { }, JsonRequestBehavior.AllowGet);
}
//新增实体
[HttpPost]
public JsonResult Add(User oData)
{
UserModel.Add(oData);
return Json(new { }, JsonRequestBehavior.AllowGet);
}
//更新实体
[HttpPost]
public JsonResult Update(User oData)
{
UserModel.Update(oData);
return Json(new { }, JsonRequestBehavior.AllowGet);
}
//删除实体
[HttpPost]
public JsonResult Delete(List<User> oData)
{
UserModel.Delete(oData);
return Json(new { }, JsonRequestBehavior.AllowGet);
}
}
}

2、KoIndex.cs.t4

这个模板主要用于生成列表页面，大致代码如下：

<#@ template language="C#" HostSpecific="True" #>
<#@ output extension=".cshtml" #>
<#@ include file="Imports.include.t4" #>
<#
// The following chained if-statement outputs the file header code and markup for a partial view, a view using a layout page, or a regular view.
if(IsPartialView) {
#>
<#
} else if(IsLayoutPageSelected) {
#>
@{
ViewBag.Title = "<#= ViewName#>";
<#
if (!String.IsNullOrEmpty(LayoutPageFile)) {
#>
Layout = "<#= LayoutPageFile#>";
<#
}
#>
}
<#
} else {
#>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title><#= ViewName #></title>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
<script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
<script src="~/scripts/knockout/extensions/knockout.mapping-latest.js"></script>
<script src="~/scripts/extensions/knockout.index.js"></script>
<script src="~/scripts/extensions/knockout.bootstraptable.js"></script>
<script type="text/javascript">
$(function () {
var viewModel = {
bindId: "div_index",
tableParams :
{
url : "/<#=ViewDataTypeShortName#>/Get",
pageSize : 2,
},
urls :
{
del : "/<#=ViewDataTypeShortName#>/Delete",
edit : "/<#=ViewDataTypeShortName#>/Edit",
add : "/<#=ViewDataTypeShortName#>/Edit",
},
queryCondition :
{
}
};
ko.bindingViewModel(viewModel);
});
</script>
</head>
<body>
<#
PushIndent(" ");
}
#>
<div id="toolbar">
<button data-bind="click:addClick" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button data-bind="click:editClick" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button data-bind="click:deleteClick" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table data-bind="bootstrapTable:bootstrapTable">
<thead>
<tr>
<th data-checkbox="true"></th>
<#
IEnumerable<PropertyMetadata> properties = ModelMetadata.Properties;
foreach (PropertyMetadata property in properties) {
if (property.Scaffold && !property.IsPrimaryKey && !property.IsForeignKey) {
#>
<th data-field="<#= GetValueExpression(property) #>"><#= GetValueExpression(property) #></th>
<#
}
}#>
</tr>
</thead>
</table>
<#
// The following code closes the tag used in the case of a view using a layout page and the body and html tags in the case of a regular view page
#>
<#
if(!IsPartialView && !IsLayoutPageSelected) {
ClearIndent();
#>
</body>
</html>
<#
}
#>
<#@ include file="ModelMetadataFunctions.cs.include.t4" #>

添加一个视图Index，然后选择这个模板

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

得到的页面内容

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
<script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
<script src="~/scripts/knockout/extensions/knockout.mapping-latest.js"></script>
<script src="~/scripts/extensions/knockout.index.js"></script>
<script src="~/scripts/extensions/knockout.bootstraptable.js"></script>
<script type="text/javascript">
$(function () {
var viewModel = {
bindId: "div_index",
tableParams :
{
url : "/User/Get",
pageSize : 2,
},
urls :
{
del : "/User/Delete",
edit : "/User/Edit",
add : "/User/Edit",
},
queryCondition :
{
}
};
ko.bindingViewModel(viewModel);
});
</script>
</head>
<body>
<div id="toolbar">
<button data-bind="click:addClick" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button data-bind="click:editClick" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button data-bind="click:deleteClick" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table data-bind="bootstrapTable:bootstrapTable">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="Name">Name</th>
<th data-field="FullName">FullName</th>
<th data-field="Age">Age</th>
<th data-field="Des">Des</th>
<th data-field="Createtime">Createtime</th>
<th data-field="strCreatetime">strCreatetime</th>
</tr>
</thead>
</table>
</body>
</html>
Index.cshtml

我们将上篇说的viewmodel搬到页面上面来了，这样每次就不用从controller里面传过来了。稍微改一下表格的列名，页面就可以跑起来了。

这里有待优化的几点：

（1）查询条件没有生成，如果将T4的语法研究深一点，可以在需要查询的字段上面添加特性标识哪些字段需要查询，然后自动生成对应的查询条件。

（2）表格的列名似乎也可以通过属性的字段特性来生成。这点和第一点类似，都需要研究T4的语法。

3、KoEdit.cs.t4

第三个模板页就是编辑的模板了，它的大致代码如下：

<#@ template language="C#" HostSpecific="True" #>
<#@ output extension=".cshtml" #>
<#@ include file="Imports.include.t4" #>
@model <#= ViewDataTypeName #>
<#
// "form-control" attribute is only supported for all EditorFor() in System.Web.Mvc 5.1.0.0 or later versions, except for checkbox, which uses a div in Bootstrap
string boolType = "System.Boolean";
Version requiredMvcVersion = new Version("5.1.0.0");
bool isControlHtmlAttributesSupported = MvcVersion >= requiredMvcVersion;
// The following chained if-statement outputs the file header code and markup for a partial view, a view using a layout page, or a regular view.
if(IsPartialView) {
#>
<#
} else if(IsLayoutPageSelected) {
#>
@{
ViewBag.Title = "<#= ViewName#>";
<#
if (!String.IsNullOrEmpty(LayoutPageFile)) {
#>
Layout = "<#= LayoutPageFile#>";
<#
}
#>
}
<h2><#= ViewName#></h2>
<#
} else {
#>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title><#= ViewName #></title>
</head>
<body>
<#
PushIndent(" ");
}
#>
<#
if (ReferenceScriptLibraries) {
#>
<#
if (!IsLayoutPageSelected && IsBundleConfigPresent) {
#>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
<#
}
#>
<#
else if (!IsLayoutPageSelected) {
#>
<script src="~/Scripts/jquery-<#= JQueryVersion #>.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<#
}
#>
<#
}
#>
<form id="formEdit" class="form-horizontal">
@Html.HiddenFor(model => model.Id)
<div class="modal-body">
<#
IEnumerable<PropertyMetadata> properties = ModelMetadata.Properties;
foreach (PropertyMetadata property in properties) {
if (property.Scaffold && !property.IsPrimaryKey && !property.IsForeignKey) {
#>
<div class="form-group">
@Html.LabelFor(model => model.<#= GetValueExpression(property) #>, "<#= GetValueExpression(property) #>", new { @class = "control-label col-xs-2" })
<div class="col-xs-10">
@Html.TextBoxFor(model => model.<#= GetValueExpression(property) #>, new { @class = "form-control", data_bind = "value:editModel.<#= GetValueExpression(property) #>" })
</div>
</div>
<#
}
}
#>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
</div>
</form>
<#
var index = ViewDataTypeName.LastIndexOf(".");
var ModelName = ViewDataTypeName.Substring(index+1, ViewDataTypeName.Length-index-1);
#>
<script src="~/Scripts/extensions/knockout.edit.js"></script>
<script type="text/javascript">
$(function () {
var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
var viewModel = {
formId: "formEdit",
editModel : model,
urls :
{
submit : model.id == 0 ? "/<#= ModelName #>/Add" : "/<#= ModelName #>/Update"
},
validator:{
fields: { 
Name: {
validators: {
notEmpty: {
message: '名称不能为空！'
}
}
}
}
}
};
ko.bindingEditViewModel(viewModel); 
});
</script>
<#
if(IsLayoutPageSelected && ReferenceScriptLibraries && IsBundleConfigPresent) {
#>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<#
}
#>
<#
else if(IsLayoutPageSelected && ReferenceScriptLibraries) {
#>
<script src="~/Scripts/jquery-<#= JQueryVersion #>.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<#
}
#>
<#
// The following code closes the tag used in the case of a view using a layout page and the body and html tags in the case of a regular view page
#>
<#
if(!IsPartialView && !IsLayoutPageSelected) {
ClearIndent();
#>
</body>
</html>
<#
}
#>
<#@ include file="ModelMetadataFunctions.cs.include.t4" #>

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

生成的代码：

@model TestKO.Models.User
<form id="formEdit" class="form-horizontal">
@Html.HiddenFor(model => model.Id)
<div class="modal-body">
<div class="form-group">
@Html.LabelFor(model => model.Name, "Name", new { @class = "control-label col-xs-2" })
<div class="col-xs-10">
@Html.TextBoxFor(model => model.Name, new { @class = "form-control", data_bind = "value:editModel.Name" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.FullName, "FullName", new { @class = "control-label col-xs-2" })
<div class="col-xs-10">
@Html.TextBoxFor(model => model.FullName, new { @class = "form-control", data_bind = "value:editModel.FullName" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, "Age", new { @class = "control-label col-xs-2" })
<div class="col-xs-10">
@Html.TextBoxFor(model => model.Age, new { @class = "form-control", data_bind = "value:editModel.Age" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Des, "Des", new { @class = "control-label col-xs-2" })
<div class="col-xs-10">
@Html.TextBoxFor(model => model.Des, new { @class = "form-control", data_bind = "value:editModel.Des" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Createtime, "Createtime", new { @class = "control-label col-xs-2" })
<div class="col-xs-10">
@Html.TextBoxFor(model => model.Createtime, new { @class = "form-control", data_bind = "value:editModel.Createtime" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.strCreatetime, "strCreatetime", new { @class = "control-label col-xs-2" })
<div class="col-xs-10">
@Html.TextBoxFor(model => model.strCreatetime, new { @class = "form-control", data_bind = "value:editModel.strCreatetime" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
</div>
</form>
<script src="~/Scripts/extensions/knockout.edit.js"></script>
<script type="text/javascript">
$(function () {
var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
var viewModel = {
formId: "formEdit",
editModel : model,
urls :
{
submit : model.id == 0 ? "/User/Add" : "/User/Update"
},
validator:{
fields: { 
Name: {
validators: {
notEmpty: {
message: '名称不能为空！'
}
}
}
}
}
};
ko.bindingEditViewModel(viewModel); 
});
</script>
Edit.cshtml

当然，代码也需要做稍许修改。通过添加自定义的模板页，只要后台对应的实体模型建好了，在前端只需要新建两个自定义视图，一个简单的增删改查即可完成，不用写一句js代码。

三、select组件的绑定

上面介绍了下T4封装增删改查的语法，页面所有的组件基本都是文本框，然而，在实际项目中，很多的查询和编辑页面都会存在下拉框的展示，对于下拉框，我们该如何处理呢？不卖关子了，直接给出解决方案吧，比如编辑页面我们可以在后台将下拉框的数据源放在实体里面。

用户的实体

[DataContract]
public class User
{
[DataMember]
public int id { get; set; }
[DataMember]
public string Name { get; set; }
[DataMember]
public string FullName { get; set; }
[DataMember]
public int Age { get; set; }
[DataMember]
public string Des { get; set; }
[DataMember]
public DateTime Createtime { get; set; }
[DataMember]
public string strCreatetime { get; set; }
[DataMember]
public string DepartmentId { get; set; }
[DataMember]
public object Departments { get; set; }
}

然后编辑页面

public ActionResult Edit(User model)
{
model.Departments = DepartmentModel.GetData();
return View(model);
}

然后前端绑定即可。

<div class="form-group">
<label for="txt_des">所属部门</label>
<select id="sel_dept" class="form-control" data-bind="options: editModel.Departments,
optionsText: 'Name',
optionsValue: 'Id',
value:editModel.DepartmentId"></select>
</div>

JS代码不用做任何修改，新增和编辑的时候部门字段就能自动添加到viewmodel里面去。

当然，我们很多项目使用的下拉框都不是单纯的select，因为单纯的select样式实在是难看，于是乎出了很多的select组件，比如博主之前分享的select2、MultiSelect等等。当使用这些组件去初始化select时，审核元素你会发现，这个时候界面上的下拉框已经不是单纯的select标签了，而是由组件自定义的很多其他标签组成。我们就以select2组件为例来看看直接按照上面的这样初始化是否可行。

我们将编辑页面初始化的js代码增加最后一句：

<script type="text/javascript">
$(function () {
var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
var viewModel = {
formId: "formEdit",
editModel : model,
urls :
{
submit : model.id == 0 ? "/User/Add" : "/User/Update"
},
validator:{
fields: {
Name: {
validators: {
notEmpty: {
message: '名称不能为空！'
}
}
}
}
}
};
ko.bindingEditViewModel(viewModel);
$("#sel_dept").select2({});
});
</script>

通过新增和编辑发现，这样确实可行！分析原因，虽然初始化成select2组件之后，页面的html发生了变化，但是组件最终还是会将选中值呈现在原始的select控件上面。不知道除了select2，其他select初始化组件会不会这样，待验证。但是这里有一点需要说明下，在初始化select2之前，下拉框的options必须先绑定值，也就是说，组件的初始化必须要放在ko.applyBinding()之后。

四、总结

至此，ko结合bootstrapTable的模板生成以及select控件的使用基本可用，当然，还有待完善。后面如果有时间，博主会整理下其他前端组件和ko的联合使用，比如我们最常见的日期控件。如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

- Author -

懒得安分

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 #Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 #Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 #Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 #Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 #Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 #Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 #Javascript
RNA(2) 大脑(1) 富碳陨石(1) 美国航天局(1) 嘧啶碱基(2) 火星(2) 陨石(1) 毅力号(1) 数据(1) DNA(2)
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
PHP __autoload函数（自动载入类文件）的使用方法
2012/02/04 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
JavaScript学习笔记（一） js基本语法
2011/10/25 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
js限制文本框的输入内容代码分享（3类）
2015/08/20 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
深入了解js原型模式
2019/05/30 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python之PyMongo使用总结
2017/05/26 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
python dict如何定义
2020/09/02 Python
django使用channels实现通信的示例
2020/10/19 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
法国时尚童装网站：Melijoe
2016/08/10 全球购物
Andrew Marc官网：设计师外套的领先制造商
2019/10/30 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
班主任2015新年寄语
2014/12/08 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript