[thinkPHP5项目实战_06]引入前台页面

根据tp5的目录介绍,前端文件的视图位于application的模块下面的view文件夹下。

application文件夹下默认已经有了一个index模块,可以拿来直接使用。

渲染模板最常用的是使用thinkView类的fetch方法:

fetch('[模板文件]'[,'模板变量(数组)'])

当fetch中不带任何参数的时候,默认访问规则为:

当前模块/默认视图目录/当前控制器(小写)/当前操作(小写).html

假如当前控制器为Index下面的index类的话,fetch获取的就是view中的Index下面的index.html文件其中html后缀会自动加上;

因此,在该index文件夹下新建一个view文件夹,然后新建一个Index控制器文件夹,将前台的首页index.html拷贝过来:

图片[1]-[thinkPHP5项目实战_06]引入前台页面-JieYingAI捷鹰AI

1.2前台静态资源存放位置

根据tp5的目录介绍,前端的静态资源(css,js,image)存放于puclic/static文件夹下,

因此,在static文件夹中新建一个index文件夹,将index.html引入的文件拷贝过去。

图片[2]-[thinkPHP5项目实战_06]引入前台页面-JieYingAI捷鹰AI

2.模板渲染和输出替换

前台文件布置完成后,访问的还是tp5的默认页面,因此需要将该页面替换成index.html页面。

打开视图所在的模块index下的controller下的index.php文件,该文件即为访问的位置,

模板渲染使用到了fetch()方法,需要在index.php中引入并在Index类进行继承:

fetch();
    }
}

保存后打开浏览器输入

得到了index.html的页面,其中页面加载的静态文件均未找到位置,因此需要重新定位

打开application下的config.php文件,在分页配置下面添加:

//输出替换
    'view_replace_str' => [
        '__PUBLIC__'=>'/tp5/public', //将__PUBLIC__指向tp5下面的public
        '__ROOT__' => '/',
    ]

将__PUBLIC__指向根目录下的public文件夹,再打开index.html文件,将在引入的文件前面添加前缀__PUBLIC__/static/index,

例如原来index.html和css文件夹同一个目录下,在index.html引入css方式为:

则现在的引入方式该为:

保存后再次打开浏览器访问tp5默认目录,完整的前台视图:

图片[3]-[thinkPHP5项目实战_06]引入前台页面-JieYingAI捷鹰AI

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享