当前位置:首页 » 网页前端 » thinkphp框架前端界面
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

thinkphp框架前端界面

发布时间: 2022-10-01 05:28:05

❶ 急用啊,先谢谢大神们,使用的thinkphp框架,html页面中怎么实现上面输出内容下面跟着改变

js就可以做到
<input type="number" onkeypress="showNum(this.value)">
<div id="showTxt"></div>
<script>
function showNum(val){
document.getElementById("showTxt").innerHTML = val;
}
</script>

❷ thinkphp中html页面怎么引入html页面

8.7 包含文件
可以使用Include标签来包含外部的模板文件,使用方法如下:

include标签(包含外部模板文件)

闭合

闭合标签

属性

file(必须):要包含的模板文件,支持变量

示例:
1、 使用完整文件名包含
格式:<include file="完整模板文件名" />
例如:
<include file="./Tpl/default/Public/header.html" />
这种情况下,模板文件名必须包含后缀。使用完整文件名包含的时候,特别要注意文件包含指的是服务器端包含,而不是包含一个URL地址,也就是说file参数的写法是服务器端的路径,如果使用相对路径的话,是基于项目的入口文件位置。

2、包含当前模块的其他操作模板文件
格式:<include file="操作名" />
例如 导入当前模块下面的read操作模版:
<include file="read" />
操作模板无需带后缀。

3、 包含其他模块的操作模板
格式:<include file="模块名:操作名" />
例如,包含Public模块的header操作模版:
<include file="Public:header" />

4、包含其他模板主题的模块操作模板
格式:<include file="主题名:模块名:操作名" />
例如,包含blue主题的User模块的read操作模版:
<include file="blue:User:read" />

5、 用变量控制要导入的模版
格式:<include file="$变量名" />
例如
<include file="$tplName" />
给$tplName赋不同的值就可以包含不同的模板文件,变量的值的用法和上面的用法相同。

无论你使用什么方式包含外部模板,Include标签支持在包含文件的同时传入参数,例如,下面的例子我们在包含header模板的时候传入了title和keywords变量:
<include file="header" title="ThinkPHP框架"keywords="开源WEB开发框架"/>
就可以在包含的header.html文件里面使用var1和var2变量,方法
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[title]</title>
<meta name="keywords" content="[keywords]" />
</head>

注意:由于模板解析的特点,从入口模板开始解析,如果外部模板有所更改,模板引擎并不会重新编译模板,除非在调试模式下或者缓存已经过期。如果部署模式下修改了包含的外部模板文件后,需要把模块的缓存目录清空,否则无法生效。

❸ thinkphp框架可以用来实现路由器web管理界面吗lighttpd服务器支持这个php框架不

thinkphp 是否支持 是看你的服务器上支持多少版本的PHP 管理界面是html 至于后台运行的程序是什么样的 就需要你去用php或者其他语言去写了thinkphp 只是一个框架而已

❹ thinkphp框架安装后怎么用

thinkphp框架安装后使用方法:

1、ThinkPHP最新版本可以在官方网站下载。

2、下载后的压缩文件解压到WEB目录(或者任何目录都可以),框架的目录结构为:

├─ThinkPHP.php框架入口文件

├─Common框架公共文件

├─Conf框架配置文件

├─Extend框架扩展目录

├─Lang核心语言包目录

├─Lib核心类库目录

│├─Behavior核心行为类库

│├─Core核心基类库

│├─Driver内置驱动

││├─Cache内置缓存驱动

││├─Db内置数据库驱动

││├─TagLib内置标签驱动

││└─Template内置模板引擎驱动

│└─Template内置模板引擎

└─Tpl系统模板目录

注意,框架的公共入口文件ThinkPHP.php是不能直接执行的,该文件只能在项目入口文件中调用才能正常运行,这是很多新手很容易犯的一个错误。

3、接下来先在WEB根目录下面创建一个app子目录(这个就是app就是项目名),然后在该目录下面创建一个index.php文件,添加一行简单的代码:

<?php

require '/ThinkPHP框架所在目录/ThinkPHP.php';

这行代码的作用就是加载ThinkPHP框架的入口文件ThinkPHP.php,这是所有基于ThinkPHP开发应用的第一步。然后,在浏览器中访问这个入口文件。

http://localhost/app/

欢迎界面如下:

❺ 怎么用thinkphp搭建前端后台框架

以前用PHP做过一个很蹩脚的网站,为什么这么说呢,因为写的全是死代码。做完以后觉得实在是累,前端要div+css,js 后端要php,MySQL,这么多东西要弄,十分头疼。所以,在接到做网站的任务后,我第一时间想到一定要使用开发框架去做,绝不能跟以前一样那么累了。
我选择的是PHP的ThinkPHP框架。说实话,真的蛮不错的。瞬间觉得Web开发还是蛮有效率的。
超级链接:ThinkPHP中文网
按照套路,首先贴一下实验环境:
1. WAMP(集成的那种,最Easy的几乎不需要配置)
2. ZendStudio7.2(中文网址http://www.zendstudio.net/,里面提供下载,在线注册机以及使用教程)
3. ThinkPHP框架+网络UEditor编辑器插件
4. Win7-64bit操作系统
5. 浏览器(火狐,IE,Chrome),外加火狐FireBug插件用于调试以及偷样式

❻ 调用别人接口api,在thinkphp框架下怎么在前端页面得到自己的数据

首页要确定你获取到的是什么数据格式的
一般来说都是xml 和 json
你把得到数据整理后存放到变量里面,在打印出数据就可以了啊 很简单的

❼ thinkphp为什么要分前后端控制器

你好,你说的Admin和Index只是模块的分组,每个模块都是MVC结构,这样可以有效防止前后端的代码冲突及后期维护,通过不同的访问地址来执行不同模块的代码,这样就算两个模块的控制器和方法命名一样也不会冲突。
比如前后台都有个首页的访问,习惯性命名一样。如访问index.php/Index/index/index 或 index.php/Admin/index/index 虽然控制器和方法一样,但是模块不同 不会冲突。当然你也可以比如在Index模块内写所有前后端的代码,只是这样结构有点混乱,不建议。

❽ thinkphp的前端用什么框架

一个后端框架,问前端用什么框架,这样合适吗》

❾ 如何在thinkphp中使用b-jui

B-JUI 前端框架
B-JUI(Bootstrap for DWZ)是一个富客户端框架,基于DWZ-jUI富客户端框架修改。

本文是B-JUI中文使用手册,包括使用示例代码,感兴趣的同学参考下。

概览
B-JUI仅有一个主页面(document),框架内的所有子页面将通过Ajax获取后作为一个页面片段附加到主页面上,外部页面则通过iframe嵌入主页面, 本节介绍 B-JUI的主页面结构。

HTML5 文档类型
同Bootstrap, B-JUI使用 HTML5 文档类型,参照下面的格式进行设置。

<!DOCTYPE html>

<html lang="zh-CN">

...

</html>

主页面结构(仅body部分)
主页面由上(页头)、中左(导航菜单)、中右(工作区)、下(页脚)四部分组成,其中左侧导航菜单可收缩。结构如下:

<header class="bjui-header" id="bjui-header">

<!-- 页头 -->

</header>

<div class="bjui-leftside" id="bjui-leftside">

<!-- 导航菜单 -->

</div>

<div id="bjui-container">

<!-- 工作区 -->

</div>

<footer class="bjui-footer" id="bjui-footer">

<!-- 页脚 -->

</footer>

子页面(即页面片段[后面简称:页片])结构
页片通常由两部分组成,也可以只保留bjui-pageContent部分,其中bjui-pageContent部分可选bjui-headBar(顶部工具条)和bjui-footBar(底部工具条)。结构如下:

<div class="bjui-pageHeader">

<!-- 顶部模块[如:功能按钮、搜索面板] -->

</div>

<div class="bjui-pageContent">

<div class="bjui-headBar">

<!-- 顶部工具条 -->

</div>

<div data-layout-h="0">

<!-- 内容区 -->

</div>

<div class="bjui-footBar">

<!-- 底部工具条 -->

</div>

</div>

data-layout-h 属性表示该容器为页片自适应布局,当值为0时,B-JUI会为该容器的高度自动赋值为:本页片总高度减去本页片中的固定元素(bjui-pageHeader\bjui-headBar\bjui-footBar)高度。
data-layout-h 属性值不等于0时,该容器高度为本页片总高度减去属性值。
需要自定义固定元素(块级元素有效),请为该元素添加属性data-layout-fixed="true"
完整的页片详见B-JUI源代码的table.html,仅bjui-pageContent部分的页片详见form.html

元素ID命名规范
因为本框架默认所有内容都位于一个Document中,所以为元素命名ID的时候需要做到唯一性,如果确实不可避免的会出现有重复ID的现象,需要操作当前页片的元素时,尽量用:

$.CurrentNavtab.find('#dom-id'),在当前标签工作区中查找指定ID的元素。

或 $.CurrentDialog.find('#dom-id'),在当前弹窗中查找指定ID的元素。

标签式工作区(navtab)
B-JUI框架的整个工作区部分就是一个navtab组件,本组件位于主页面的"#bjui-container"容器内,固定的html结构如下:

<div id="bjui-navtab" class="tabsPage">

<div class="tabsPageHeader">

<div class="tabsPageHeaderContent">

<ul class="navtab-tab nav nav-tabs">

<li data-tabid="main" class="main active"><a href="javascript:;"><span>我的主页</span></a></li>

</ul>

</div>

<div class="tabsLeft"><i class="fa fa-angle-double-left"></i></div>

<div class="tabsRight"><i class="fa fa-angle-double-right"></i></div>

<div class="tabsMore"><i class="fa fa-angle-double-down"></i></div>

</div>

<ul class="tabsMoreList">

<li><a href="javascript:;">我的主页</a></li>

</ul>

<div class="navtab-panel tabsPageContent layoutBox">

各页片内容区域

</div>

</div>

用法(如何创建一个navtab):

DOM点击触发:
<a href="mytab.html" data-toggle="navtab" data-id="mynavtab" data-title="我的业务页面">打开navtab</a>

<button type="button" class="btn-green" data-toggle="navtab" data-id="mynavtab" data-url="mytab.html" data-title="我的业务页面">打开navtab</button>

jQuery:
$(selector).navtab({id:'标签的id', url:'载入页片的url', title:'标签的标题'})

取得当前navtab的内容容器:$.CurrentNavtab

参数:

名称 类型 默认值 描述 id string navtab 标签的ID,如果指定重复,将覆盖现有的ID相同标签。 title string New tab 标签打开后显示的名称。 url string undefined 请求数据的url。 type string GET Http请求方式,可选‘GET/POST’。 data object {} 请求url时,需要发送的data数据。

方法:

这样调用navtab的方法:

$(selector).navtab('方法名', 参数1, ..., 参数n)

如要切换到某个标签:
$(selector).navtab('switchTab', 标签ID)

方括号的参数,表示该参数可选。
可用的方法:

switchTab(tabid):切换到某个标签。
refresh(tabid):刷新某个标签。
reload(options):重新载入某个标签,options同navtab默认参数,如果未指定ID,则默认重载入当前标签。
closeTab(tabid):关闭某个标签。
closeCurrentTab([tabid]):关闭当前标签。
closeAllTab():关闭所有标签。
事件:

这样监听navtab的事件:

$(document).on('bjui.beforeLoadNavtab', function(e) {

var $navtab = $(e.target)

// do something...

})

名称 描述 bjui.beforeLoadNavtab 载入标签内容前的事件 bjui.beforeCloseNavtab 关闭标签前的事件

弹出窗口(dialog)
弹出窗口分为普通弹出窗口和模态弹出窗口,普通弹出窗口可通过taskBar组件进行最小化等操作。弹出窗口的DOM结构会放入Body中,结构如下:

<div class="bjui-dialog bjui-dialog-container">

<div class="dialogHeader">

<!-- 最大化、最小化、关闭等按钮区 -->

<h1><!-- 标题 --></h1>

</div>

<div class="dialogContent layoutBox unitBox">

<!-- 页片内容区 -->

</div>

<!-- 用于调整大小的div片断 -->

</div>

用法(如何创建一个dialog):

DOM点击触发:
<a href="mydialog.html" data-toggle="dialog" data-id="mydialog" data-title="我的弹出窗口">打开弹出窗口</a>

<button type="button" class="btn-green" data-toggle="dialog" data-id="mynavtab" data-url="mytab.html" data-title="我的弹出窗口">打开弹出窗口</button>

jQuery:
$(selector).dialog({id:'弹窗的id', url:'载入页片的url', title:'弹窗的标题'})

取得当前dialog:$.CurrentDialog

参数:

名称 类型 默认值 描述 id string navtab 弹窗的ID,如果指定重复,将覆盖现有的ID相同弹窗。 title string New tab 弹窗打开后显示的名称。 url string undefined 请求数据的url。 type string GET Http请求方式,可选‘GET/POST’。 data object {} 请求url时,需要发送的data数据。 width int 500 弹窗的宽度。 height int 300 弹窗的高度。 max boolean false 打开弹窗时直接最大化。 mask boolean false 是否模态窗口。 resizable boolean true 可以调整弹窗的大小。 drawable boolean true 可以拖动弹窗。 maxable boolean true 是否显示最大化按钮。 minable boolean true 是否显示最小化按钮(模态弹窗无效)。

方法:

调用方式同navtab: 如要关闭某个弹窗:

$(selector).dialog('close', 弹窗ID)

方括号的参数,表示该参数可选。
可用的方法:

switchDialog(id):切换到某个弹窗(模态弹窗无效)。
refresh(id):刷新某个弹窗。
reload(options):重新载入某个弹窗,options同dialog默认参数,如果未指定ID,则默认重载入当前弹窗。
close(id):关闭某个弹窗。
closeCurrent():关闭当前弹窗。
事件:

这样监听dialog的事件:

$(document).on('bjui.beforeLoadDialog', function(e) {

var $dialog = $(e.target)

// do something...

})

名称 描述 bjui.beforeLoadDialog 载入弹窗内容前的事件 bjui.beforeCloseDialog 关闭弹窗前的事件

Ajax
本节主要介绍B-JUI框架中的Ajax操作,回调函数等。

Ajax操作:
ajax搜索 - 主要用于搜索表单,分页表单,例:B-JUI源码"table.html"中的#pagerForm:
<form id="pagerForm" data-toggle="ajaxsearch" action="table.html" method="post">

ajax重置搜索 - 主要用于重置搜索表单,data-clear-query属性告诉form是否清空查询参数,仅保留分页及字段排序信息,例:B-JUI源码"table.html"中的清空查询按钮:
<a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">清空查询</a>

ajax载入 - 主要用于为指定容器载入url的内容,data-target属性值为选择器表达式,告诉ajax载入的内容放到该容器,适合用来做局部刷新:
<a href="table-edit.html" data-toggle="ajaxload" data-target="#D11">加载内容</a>

ajax动作 - 主要用于执行ajax命令,如“删除”,data-confirm-msg属性用于在操作前进行确认提示:
<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="确定要删除该行信息吗?">删除数据</a>

ajax导出 - 主要用于导出信息(下载文件),data-confirm-msg属性用于在操作前进行确认提示:
<a href="book1.xlsx" data-toggle="doexport" data-confirm-msg="确定要导出信息吗?">导出全部</a>

ajax导出选中项 - 主要用于导出选中项信息(下载文件),data-confirm-msg属性用于在操作前进行确认提示,data-idname属性指定发送到后台的字段名称,默认“ids”,data-group属性用于指定复选框的name:
<a href="book1.xlsx" data-toggle="doexportchecked" data-confirm-msg="确定要导出选中项吗?" data-idname="expids" data-group="ids">导出选中项</a>

ajax删除选中项 - 主要用于导出选中项信息(下载文件),data-confirm-msg属性用于在操作前进行确认提示,data-idname属性指定发送到后台的字段名称,默认“ids”,data-group属性用于指定复选框的name:
<a href="del.html" data-toggle="dodelchecked" data-confirm-msg="确定要删除选中项吗?" data-idname="delids" data-group="ids">导出选中项</a>

Ajax回调:
ajaxsearch、doajax、dodelchecked三种ajax操作支持自定义ajax回调函数,自定义的回调函数放到data-callback属性,写法如下:。

<a href="del.html" class="btn btn-red" data-toggle="doajax" data-confirm-msg="确定要删除该行信息吗?" data-callback="mycallback">删除数据</a>

function mycallback(json) {

//do something...

}

服务端返回的JSON参数如下:

名称 类型 描述 statusCode int 必选。状态码(ok = 200, error = 300, timeout = 301),可以在BJUI.init时配置三个参数的默认值。 message string 可选。信息内容。 tabid string 可选。待刷新navtab id,多个id以英文逗号分隔开,当前的navtab id不需要填写,填写后可能会导致当前navtab重复刷新。 closeCurrent boolean 可选。是否关闭当前窗口(navtab或dialog)。 forward string 可选。跳转到某个url。 forwardConfirm string 可选。跳转url前的确认提示信息。

默认的回调函数会根据当前触发元素的位置确定是刷新navtab还是dialog,或是局部div容器。

可调用的返回信息提示:

$(selector).bjuiajax('ajaxDone', json)

表格
表格的Class同Bootstrap,仅调整了padding值,使表格显示得更紧凑。

.table 少量的padding和水平分隔线。
.table-striped 条纹状表格 [IE8 不支持]。
.table-bordered 带边框表格。
.table-hover 附加鼠标悬停效果。
表格表头字段排序按钮实现:

<th data-order-field="sex">姓名</th>

<th data-order-direction="asc" data-order-field="createtime">创建时间</th>

data-order-field=""属性令本字段可排序,属性值为与后台交互的字段名称。
data-order-direction属性表示本字段的当前排序状态,可选值(asc/desc)

普通表格
普通的表格,可显示列表状条目,或布局表单,表头字段可附加排序按钮。

完整的实例详见B-JUI源代码的table.html。

固定表头表格
表格的头可固定住,可调整各列的宽度,表头字段可附加排序按钮。

<table data-toggle="tablefixed" data-width="100%" data-layout-h="0">

表格添加属性data-toggle="tablefixed"后就会固定表头,B-JUI默认为固定的表头的表格添加Class:table table-striped table-bordered table-hover,如果该table设置有Class,则以设置的为准

data-width属性可定义固定表格的宽度,默认为"100%",可设置大于100%或固定值,如:150%和1200都是合法的,超过navtab工作区的宽度时会出现横向滚动条。

完整的实例详见B-JUI源代码的table-fixed.html。

可编辑表格
用于需要动态添加简单行内容的地方。

<table class="table table-bordered table-hover table-striped" data-toggle="tabledit" data-initnum="0" data-layout-h="0">

<thead>

<tr>

<th title="No."><input type="text" name="edit[#index#].id" class="no" data-rule="required" value="1" size="2"></th>

<th title="姓名"><input type="text" name="edit[#index#].name" data-rule="required" value="" size="5"></th>

<th title="" data-addtool="true" width="100">

<a href="javascript:;" class="btn btn-red row-del" data-confirm-msg="确定要删除该行信息吗?">删</a>

</th>

</tr>

</thead>

</table>

实现步骤:

表格添加属性data-toggle="tablefixed";
thead中添加上对应的表单信息,字段名放到title属性上;
若想在某列上显示添加按钮,需在对应列上添加属性data-addtool="true";
若每行显示删除按钮,需为删除按钮添加Classrow-del,如果要确认才能删除,需为删除按钮添加属性data-confirm-msg="删除提示信息"。
表格的data-initnum属性,表示载入本页片时,初始化的添加行数,值为0时不需写。

外部触发添加行事件:

按钮式:
<button type="button" class="btn-green" data-toggle="tableditadd" data-target="#tabledit1" data-num="1">添加编辑行</button>

data-target属性设置编辑表格的jQuery选择器,data-num属性设置点击时添加的行数。
jQuery:$(selector).tabledit('add', 编辑表格的jQuery对象, 待添加的行数)
$(selector).tabledit('add', $('#tabledit1'), 2)
完整的实例详见B-JUI源代码的table-edit.html。