登录  /  注册
首页 > php框架 > ThinkPHP > 正文

TP5.1引入public下的CSS和JS文件

善始善终
发布: 2020-08-03 14:22:41
原创
3694人浏览过

最近在开发新闻后台管理系统,用的模板是x-admin2.0,框架是基于thinkphp5.1版本来进行开发的,在开发的过程中,如何引入公共文件下的css、js文件是一个难题。那么我们今天就来讲讲如何如何引入css和js文件。

先来看一下还未引入CSS样式和JS时,登录界面在浏览器中运行的效果。

1.png

按F12查看源代码,发现出现报错,原因是没有找到我们引入的样式,因此无法导入文件。错误显示如下:

2.png

那么我们如何引入CSS样式和JS样式呢?

1、讲模板所需要的JS和CSS方式public入口文件下的static,新建一个文件夹来存放后台需要的CSS和JS文件,这里是我将其命名为admin。

2、打开public入口文件下的index.php文件,在该文件下定义常量。

(1)本地项目添加:define('SITE_URL', 'http://127.0.0.1/项目名');

(2)线上项目:define('SITE_URL','http://'.$_SERVER['HTTP_HOST']);  建议使用

我这里以本地项目为例:

<?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK ] // +---------------------------------------------------------------------- // | Copyright (c) 2006-2018 http://thinkphp.cn All rights reserved. // +---------------------------------------------------------------------- // | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) // +---------------------------------------------------------------------- // | Author: liu21st <liu21st@gmail.com> // +----------------------------------------------------------------------  // [ 应用入口文件 ] namespace think;  // 加载基础文件 require __DIR__ . &#39;/../thinkphp/base.php&#39;;  define(&#39;SITE_URL&#39;, &#39;http://127.0.0.1:8080/student&#39;); // 支持事先使用静态方法设置Request对象和Config对象  // 执行应用并响应 Container::get(&#39;app&#39;)->run()->send();
登录后复制

3、在config文件夹下找到template.php模板引擎文件,添加如下代码(路径填写你需要引入的文件路径)

//模板参数替换 &#39;tpl_replace_string&#39; => [     &#39;__STATIC__&#39; => SITE_URL.&#39;/public/static&#39;,  ],
登录后复制

也可以按照自己的实际情况进行配置,你也可以参考ThinkPHP5.1完全开发手册:https://www.php.cn/xiazai/shouce/1502

注意:在config下的template.php下增加这些,其中路径是根据自己Apache定义的根目录开始,这个很重要,因为网上其他说的都是从static开始,是因为他们设置Apache根目录就到了public这里,所以看清楚避免跳坑。

4、打开登录界面代码,修改head部分的代码,代码如下所示。

3.png

5、访问,查看效果。

4.png

相关推荐:

thinkphp视频教程

以上就是TP5.1引入public下的CSS和JS文件的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号