OctoberCMS-4-页面

pingink 发布于2019-07-01 10:07 / 344人阅读

摘要：页面文件的扩展名为。页面标题，必填。页面执行的声明周期当所有组件被初始化并且在处理请求之前，该函数被执行。函数在页面开始执行时执行。当系统找不到目标页面时，系统将显示页面内容，为。

Pages

Pages：页面；网站页面的内容由Page模板定义。模板文件位置：themes/theme_name/pages目录下。页面文件的扩展名为htm。文档结构中，Configuration（配置）和Twig Markup（标记）部分是必须的，PHP代码部分是可选的。

最简单的例子

url = "/"
==
Hello, world!

页面配置

页面配置在Configuration Section中定义。主要定义一下内容：

参数描述
URL 页面网址，必填。
title 页面标题，必填。
Layout 页面布局可选。如果指定，应包含布局文件的名称，不带扩展名，例如：default。
Description 后端接口的页面描述，可选。

URL设置语法

URL以正斜杠" / "开头，可以包含参数也可以不包含。比如：

url = "/blog"

带参数的URL以" : "开头。比如下面的url表示，/blog/post/...斜杠后面的就是参数。这个参数可以被October组件或者PHP代码部分访问。

url = "/blog/post/:post_id"

PHP代码部分访问的例子如下：参数名与php变量名要求一致。

url = "/blog/post/:post_id"
==
function onStart()
{
    $post_id = $this->param("post_id");
}
==

可选参数：只需要在其后面加？即可。

url = "/blog/post/:post_id?"

URL中间的参数不能是可选的。在下一个示例中，该:post_id参数被标记为可选，但会当做必须的处理。

url = "/blog/:post_id?/comments"

可选参数运行有默认值。在没有提供参数的时候，这些默认值作为POST的值。默认值不能包含任何" 星号管道符问号 "

url = "/blog/category/:category_id?10"

还可以使用正则表达式验证参数。添加验证表达式需要 [ 参数名 ] 或者 [ 问号 ] 后面添加管道符号 [ | ] 。表达式中不能包含正斜杠符号 [ / ] 。

url = "/blog/:post_id|^[0-9]+$/comments" - this will match /blog/10/comments
...
url = "/blog/:post_id|^[0-9]+$" - this will match /blog/3
...
url = "/blog/:post_name?|^[a-z0-9-]+$" - this will match /blog/my-blog-post

可以通过在参数后面加星号来使用特殊的通配符参数。与常规参数不同，通配符参数可以匹配一个或多个URL。URL只能包含单个通配符参数，不能使用正则表达式，或者后跟可选参数。

url = "/blog/:category*/:slug"

比如下面的例子：

/color/:color/make/:make*/edit
可以匹配：
/color/brown/make/volkswagen/beetle/retro/edit
其中：
color: 匹配了 brown
make: 匹配了 volkswagen/beetle/retro

动态页面

在模板的Twig标记部分，可以使用October提供的函数，过滤器和标签。其中的变量在页面中是必须的，这些变量在 page和layout中，由PHP代码或者组件提供变量的值。

页面执行的声明周期

onInit当所有组件被初始化并且在处理AJAX请求之前，该函数被执行。

onStart 函数在页面开始执行时执行。

onEnd函数在页面渲染之前和执行页面Components之后执行。

在onStart和onEnd函数中，您可以将变量注入到Twig环境中。使用array notation将变量传递给页面：

url = "/"
==
function onStart()
{
    $this["hello"] = "Hello world!";
}
==
{{ hello }}

下面的例子说明了如何从数据库加载文章的集合，并显示在页面上。

url = "/blog"
==
use AcmeBlogClassesPost;

function onStart()
{
  $this["posts"] = Post::orderBy("created_at", "desc")->get();
}
==
Latest posts

    {% for post in posts %}
        {{ post.title }}
        {{ post.content }}
    {% endfor %}

发送自定义响应

页面执行声明周期中定义的所有函数都可以暂停执行进程，发送自定义的响应。从生命周期函数中返回响应是很简单的，下面的例子中，页面将不载入任何页面内容，只是仅仅返回一个Hello world字符串到浏览器。

function onStart()
{
    return "Hello world!";
}

比较有用的例子是做重定向：

public function onStart()
{
    return Redirect::to("http://google.com");
}

Handling Forms

处理表单：可以在page或者layout中的PHP代码部分定义处理表单的函数。使用form_open()函数来定义什么函数来处理这个表单。

{{ form_open({ request: "onHandleForm" }) }}
    Please enter a string: 
    
{{ form_close() }}
Last submitted value: {{ lastValue }}

上述定义的来处理表单的函数为onHandleForm函数，这个函数是在PHP代码部分进行定义的：

function onHandleForm()
{
    $this["lastValue"] = post("value");
}

这个函数使用POST获取表单提交的值，并把这个值给当前页面的变量 lastValue ，然后在上面的Twig代码中的最后一行中，把这个值给显示出来。

关于重名：如果在page、layout和component中定义了具有相同名称的函数，October将根据如下顺序确定优先级：Page > Layout > Component。总是前面的优先被执行。

如果引用组件中的函数，则使用组件名或者别名，后跟 [ :: ] ，再加函数名。

{{ form_open({ request: "myComponent::onHandleForm" }) }}

404 Page

当系统找不到目标页面时，系统将显示404页面内容，URL为 /404 。

Error Page

默认情况下，任何错误都会显示一个详细的错误页面，其中包含错误发生处的文件内容，行号和堆栈跟踪。

我们可以显示一个自定义的错误页面。首先在配置文件config/app.php中找到字段debug，并设置为false。然后建立一个URL为：" /error "的页面。

Page Variables

PHP/Component访问：页面的属性可以被PHP代码部分或者组件部分通过 $this->page 来进行访问。比如：

function onEnd()
{
    $this->page->title = "A different page title";
}

Twig标记访问：这些变量也可以被Twig标记访问，方式为 this.page.variable ；

The title of this page is: {{ this.page.title }}

程序化方式注入资源到页面

可以使用 addCss addJs 两个方法，分别注入样式表和js脚本到页面中。只需要在页面或者布局的PHP代码部分，通过 onStart 函数进行注入操作。

function onStart()
{
    $this->addCss("assets/css/hello.css");
    $this->addJs("assets/js/app.js");
}

关于路径，如果以 / 开头，则说明是网站的根目录，如果不是 / 开头，则是指主题目录。同时，这些路径支持数组模式，以便提供多个文件的注入。

function onStart()
{
    $this->addCss(["assets/css/hello.css", "assets/css/goodbye.css"]);
    $this->addJs(["assets/js/app.js", "assets/js/nav.js"]);
}

支持SCSS和LESS：

function onStart()
{
    $this->addCss(["assets/less/base.less"]);
}

注入的文件如何在页面或者布局中输出呢，通过 {% styles %} 和 {% scripts %}就可以了。

超融合服务器 idc机房托管其他页面前台页面切割页面上层页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28827.html

SPA 路由记忆

摘要：路由记忆名词解释在中后台系统开发中，访问任何页面时，认证是永远绕不过的槛。这个过程，暂且称之为路由记忆，前面例子中的登录页面称之为记忆节点。 SPA 路由记忆名词解释在中后台系统开发中，访问任何页面时，认证是永远绕不过的槛。以登录为例，如果检测出当前用户未登录，会强制跳转到登录页面提示用户进行登录。登录完成后，系统需要跳转至用户原先想访问的页面。这个过程，暂且称之为路由记忆，前面例...

starsfun 2019-08-26 11:33 评论0 收藏0
iframe解决跨域ajax请求的方法

摘要：数据仍然是通过页面获得，页面仅需向页面传递即可，页面拿到函数名，并通过传递从服务器拿到的数据，在页面执行页面的回调函数，回调函数执行完毕后移除页面以及该函数。以上是我所知道的解决跨域请求的两种方法。 iframe跨域的基本前提是，一个页面可以嵌套非同源站点的html文件，以及某一个域名下的html页面可以通过脚本向同域名服务器发出ajax请求。当一个域名为domain1下的页面A想要向...

cncoder 2019-08-22 15:07 评论0 收藏0
iframe解决跨域ajax请求的方法

摘要：数据仍然是通过页面获得，页面仅需向页面传递即可，页面拿到函数名，并通过传递从服务器拿到的数据，在页面执行页面的回调函数，回调函数执行完毕后移除页面以及该函数。以上是我所知道的解决跨域请求的两种方法。 iframe跨域的基本前提是，一个页面可以嵌套非同源站点的html文件，以及某一个域名下的html页面可以通过脚本向同域名服务器发出ajax请求。当一个域名为domain1下的页面A想要向...

libin19890520 2019-08-05 18:01 评论0 收藏0
微信小程序页面跳转方法总结

摘要：在我们日常的开发过程中，跳转页面是每个项目中必有的需求，包括监听返回按钮，回到指定页面，在小程序中页面跳转即页面路由页面栈框架以栈的形式维护了当前的所有页面。在我们日常的开发过程中，跳转页面是每个项目中必有的需求，包括监听返回按钮，回到指定页面，在小程序中页面跳转即页面路由页面栈框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下： showImg(http...

derek_334892 2019-08-26 11:56 评论0 收藏0
微信小程序页面跳转方法总结

摘要：在我们日常的开发过程中，跳转页面是每个项目中必有的需求，包括监听返回按钮，回到指定页面，在小程序中页面跳转即页面路由页面栈框架以栈的形式维护了当前的所有页面。在我们日常的开发过程中，跳转页面是每个项目中必有的需求，包括监听返回按钮，回到指定页面，在小程序中页面跳转即页面路由页面栈框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下： showImg(http...

leanote 2019-08-05 14:00 评论0 收藏0