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

最近在开发新闻后台管理系统,用的模板是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’]);  建议使用

我这里以本地项目为例:

超能文献 超能文献

超能文献是一款革命性的AI驱动医学文献搜索引擎。

超能文献 14 查看详情 超能文献

<?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  // +----------------------------------------------------------------------  // [ 应用入口文件 ] namespace think;  // 加载基础文件 require __DIR__ . '/../thinkphp/base.php';  define('SITE_URL', 'http://127.0.0.1:8080/student'); // 支持事先使用静态方法设置Request对象和Config对象  // 执行应用并响应 Container::get('app')->run()->send();

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

//模板参数替换 'tpl_replace_string' => [     '__STATIC__' => SITE_URL.'/public/static',  ],

也可以按照自己的实际情况进行配置,你也可以参考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文件的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/353250.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月5日 23:28:45
下一篇 2025年11月5日 23:29:45

相关推荐

  • TP5.1 预定义环境变量

    在 tp5.1 中部分之前版本的预定义常量如 app_path、root_path 等被定义为了 项目的环境变量. 目前预定义的环境变量包括 (以项目路径 E:\wamp64\www\project_name 为例): think_path: 系统框架目录路径, 如 E:\wamp64\www\pr…

    PHP框架 2025年11月19日
    100
  • 解决“tp5.1修改了代码,要过60秒才刷新”问题

                                                            下面由%ign%ignore_a_1%re_a_1%框架教程栏目给大家介绍解决“tp5.1修改了代码,要过60秒才刷新”问题的方法,希望对需要的朋友有所帮助! 关于TP5.1框架和php的…

    2025年11月15日
    000
  • 使用ThinkPHP创建TP5.1项目

    在前面,我们安装了thinkphp之后,那么如何用thinkphp开发项目呢? 1、 打开application/index/controller/Index.php,我们可以看到有如下代码。 <?phpnamespace appindexcontroller;class Index{ pub…

    2025年11月6日 PHP框架
    000
  • TP5.1+layui实现栏目数的调用

    整合layui+tp5.1时,有时候需要调用栏目数,这就需要进行数据的动态化调用,之前试过很多种方法,都没有生效,后面查看了js数据调用的方法,结合layui进行多次尝试,终于找出了能够实现这一功能的方法,希望对大家有用。 以下的例子是一个调用城市的实例,数据库字段包括:id,order(排序),p…

    2025年11月5日
    000
  • TP5.1 + layui时间范围设置方法

    最近在制作一个项目时遇到一个问题,就是开始时间和结束时间是相关联的,结束时间的选择范围是最小为开始时间,最大为开始时间90天后的时间,我这边用的是layui的插件获取的日期,里面有两个参数min和max分别可以设置日期范围; 其代码如下所示: layui.use(‘laydate’, functio…

    2025年11月5日
    100

发表回复

登录后才能评论
关注微信