在Laravel 5.7事件监听器中运行Javascript
在Laravel 5.7中，事件监听器是一种用于处理应用程序中发生的事件的机制。它允许开发人员在事件发生时执行特定的操作或逻辑。虽然Laravel主要是一个后端框架，但可以通过使用一些技巧在事件监听器中运行JavaScript代码。
要在Laravel 5.7事件监听器中运行JavaScript，可以使用以下步骤：
- 安装Laravel Mix：Laravel Mix是Laravel的前端工具，它基于Webpack提供了一种简化前端开发的方式。可以通过运行以下命令来安装Laravel Mix：
npm install- 创建JavaScript文件：在Laravel项目的资源目录中，可以创建一个新的JavaScript文件，例如
example.js。 - 编写JavaScript代码：在
example.js文件中，可以编写所需的JavaScript代码。例如，可以使用JavaScript操作DOM元素、发送AJAX请求等。 - 编译JavaScript文件：在Laravel项目的根目录中，可以运行以下命令来编译JavaScript文件：
npm run dev这将使用Laravel Mix将JavaScript文件编译为可在浏览器中运行的格式。
- 在事件监听器中引入JavaScript文件：在需要在事件监听器中运行JavaScript的地方，可以使用
<script>标签引入编译后的JavaScript文件。例如：
<script src="{{ asset('js/example.js') }}"></script>这将在事件监听器中加载并执行example.js文件中的JavaScript代码。
需要注意的是，尽管可以在Laravel 5.7事件监听器中运行JavaScript，但这种做法应该谨慎使用。通常情况下，事件监听器主要用于处理后端逻辑，而前端逻辑应该放在视图文件或前端框架中处理。
相关·内容
1回答
当我在Vue中编辑代码时，没有任何变化。
laravel、vuejs2
我刚刚开始使用Vue.js，后端我使用了Laravel 5。
问题是:我尝试编辑视图页面中的任何数据或组件，甚至HTML，但是没有什么改变，我也不知道为什么。
现有的网站有一个工作页面，与Vue一起完成。但是，当我试图修改源文件.vue文件时，没有什么变化。
也许这跟高速缓存有关，不知道.
我没有使用npm，我只是在apache下运行在Linux中的代码。
--
我的package.json是这样开始的：
"scripts": {
"dev": "npm run development",
"development"
浏览 9提问于2017-11-27得票数 1
回答已采纳
3回答
在laravel中使用bootstrap
javascript、laravel、twitter-bootstrap
我尝试在Laravel 8中使用twitter bootstrap，但在手动操作之后，bootstrap JS(?)不工作。CSS已加载，样式可用，但下拉菜单等不起作用。当我点击下拉菜单项时，没有任何反应。
我做到了：
composer require laravel/ui
php artisan ui bootstrap
npm install
npm run watch / dev
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src=
浏览 1提问于2021-02-17得票数 0
2回答
Laravel blade.php使用由mix编译的JavaScript到app.js
laravel、vue.js、laravel-blade、laravel-mix
我想在我的JavaScript文件中使用一个blade.php函数。我用一个非常简单的函数创建了xyz.js文件
function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
然后我将这个文件添加到webpack.mix.js配置中：
mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.s
浏览 7提问于2017-04-12得票数 1
4回答
未使用Laravel Mix定义JavaScript函数
javascript、laravel、function、npm、webpack
首先，在resources/js/app.js中编写代码
function button1Clicked(){
console.log('Button 1 is clicked');
}
第二，使用testing.blade.php编写代码
<!DOCTYPE html>
<html>
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Testing</title>
</h
浏览 3提问于2017-10-09得票数 17
3回答
模板没有显示在我的Laravel6.6项目与Vue.js
javascript、laravel、vue.js
我在Laravel项目中使用Vue.JS完成了基本安装，这是我的package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_mo
浏览 3提问于2020-02-01得票数 0
2回答
通过混合技术将node_modules导入Laravel
javascript、laravel-5、npm、openlayers、openlayers-5
我试图在Laravel5.7项目中使用OpenLayers (v5.3.0)，但是从node_modules导入ol遇到了很多困难。
我按照以下方式安装了ol (基于)：
npm install ol
然后我更新了我的resources\js\app.js，它现在只包含以下内容：
require('./bootstrap');
require('ol');
编辑：--我在resources\js\app.js中也尝试过以下方法，但没有成功：
require('./bootstrap');
const ol = require('ol
浏览 1提问于2018-12-03得票数 3
回答已采纳
1回答
如何在laravel中导入外部js库？
php、node.js、laravel-5
我已经根据下面的仪表板从这个下载了一个基本模板。
我使用以下命令安装库：
npm install inputmask --save
但是阅读和阅读，我不确定哪一步是正确的步骤，将相同的内容集成到一个HTML页面中，我读到了关于mix、saas、Compiling Assets (Laravel Mix)的文章。
我试着用这个：
<script type="text/javascript" src="{{ URL::asset('js/inputmaskpath.js') }}"></script>
这是：
@section
浏览 6提问于2017-07-16得票数 11
回答已采纳
1回答
向laravel增加外部资产
laravel、vue.js、webpack
可能是个老问题，但，我在之前从未尝试过，也没有找到解决方案(我找到的只是scss文件的样本)。
我使用JavaScript脚手架作为我的前端，所以我在布局资产中的全部内容如下：
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<scrip
浏览 2提问于2018-08-27得票数 1
回答已采纳
1回答
无法让Video.js使用Laravel导入
laravel、webpack、laravel-mix
我已经使用npm下载了Video.js，但在前端导入它以使用它时遇到了困难。以下是我所采取的步骤：
安装了带有npm的Video.js，并创建了/node_modules目录。
在文件开始时向webpack.mix.js添加了代码。
webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
'videojs&
浏览 4提问于2021-03-27得票数 0
2回答
npm如何使用单一命令安装客户端和服务器项目依赖项？
node.js、npm、node-modules
我在单个根文件夹中有项目的后端和前端部分：
./app/ - backend files and folders
./app/forntend/ - front end files and folders
在我的app文件夹中，我有带有脚本和后端依赖项的package.json，这里的安装脚本是："install": "npm i && cd ./frontend && npm i"，当我运行安装脚本时，在前端也有package.json，它进入无限的安装循环，我必须手动终止它。有没有办法在package.json中有一个安装脚本
浏览 4提问于2020-05-13得票数 1
1回答
如何安装CKEditor 5自动保存插件？
javascript、laravel、npm、webpack、ckeditor
我需要集成CKEditor 5自动保存插件。目前，我已经将CKEditor包括如下所示。
<script src="https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js">
</script>
然而，它没有找到自动保存插件，所以我想我需要在我的网站上安装CKEditor和插件来运行这个插件。
问题是，在CKEditor文档中，只使用npm来描述安装。所以我不知道如何在没有npm的情况下安装插件。在CKEditor 4中，我只需要将插件粘贴到插件文件夹中，我认为这就是一切。
我的网站是用
浏览 1提问于2021-05-05得票数 1
1回答
laravel链接到src的资产回报404
laravel、src
我有这个文件夹结构，我想访问资源中的文件。所以我在做
<link href="{{ asset('sass/app.scss') }}" rel="stylesheet" />
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
但是上面写着找不到，所以我想我需要添加resources，所以我试了一下
<link href="{{ asset(
浏览 2提问于2020-04-12得票数 1
回答已采纳
4回答
Laravel 8- scss和npm运行开发的问题
sass、laravel-8、laravel-mix
试用节点版本: 12.20.1、14.15.4、15.6.0
当试图编译scss文件时，我总是收到以下错误：
npm run dev
> @ dev /var/www/projects/eight
> npm run development
> @ development /var/www/projects/eight
> mix
ERROR in ./resources/css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
M
浏览 9提问于2021-01-23得票数 1
2回答
如何使用laravel支持11中的承诺？
javascript、laravel、laravel-mix
我试图弄清楚如何让laravel-mix将ES6 javascript代码转换为Internet 11可以使用的javascript代码。
我设置了一个全新的laravel 9项目，并做了以下更改：
resources/js/app.js
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("done!"), 1000);
});
promise.then(
result => alert(result),
);
添加到package.json中
&#
浏览 5提问于2022-04-07得票数 0
回答已采纳
1回答
Laravel服务器未启动
javascript、node.js、laravel、laravel-mix、webpack-hmr
Laravel混合版本: 6.0.43Node版本(节点-v)：16.13.1NPM版本(npm -v)：8.1.2OS: Windows 10 21h2
描述：
这种情况发生在LARAVEL和我的其他项目的新安装上。
运行npm run hot会将脚本标记源从http://localhost/*/*.*更改为http://localhost:8080/*/*.*，但我总是从localhost:8080获得net::ERR_EMPTY_RESPONSE。HMR服务器根本不启动。该命令的终端输出也没有提到旋转一个新的web服务器。
PS C:\Users\Eric Wang\Documents\
浏览 17提问于2022-04-20得票数 0
回答已采纳
1回答
包括用npm到laravel的令牌场封装
javascript、php、node.js、laravel、npm
我试着把带有npm的令牌场包包括到laravel。
首先，我在package.json依赖项中添加了以下一行：
"tokenfield": "^0.8.2",
这导致节点模型下的令牌字段文件夹。然后，我在webpack.mix.js中添加了以下行：
.copy('node_modules/tokenfield/dist/tokenfield.js', 'public/js')
.copy('node_modules/tokenfield/dist/tokenfield.css', 'public/css&#
浏览 2提问于2017-11-10得票数 1
回答已采纳
1回答
前端使用ES6 npm模块(webpack)
javascript、webpack
我正在通过npm使用ES6语法(imports、exports等)制作一个webpack模块。
当我尝试在前端初始化导出类的实例时--测试它时，它不起作用--我有一种感觉，它与CommonJS导出返回的内容和ES6导出有关。
example.js
export default class Example { ....
example-after-webpack-stuff.js
var Example = (function() ....
demo.js
var example = new Example();
demo.html
<script src="../example-
浏览 3提问于2016-02-24得票数 0
回答已采纳
1回答
如何在node.js中组织前端和后端项目结构？
node.js、angularjs、mongodb、coffeescript
在我的项目中，我想使用coffeescript作为后端和前端，用一种编程语言来开发它。下面是我将要使用的模块列表：
后端
咖啡脚本
node.js
express.js
mongodb
雷迪斯
玉石
触笔
前部
咖啡脚本
angular.js
玉石
触笔
请注意，有些模块既用于后端，也用于前端: coffeescript、玉石、手写笔。
我使用npm管理服务器端模块，并使用bower管理客户端模块。为了便于维护和代码共享，我决定将其保留为一个项目。我使用grunt作为javascript任务运行程序。
我的问题是：
是否有一个工具可以
浏览 3提问于2014-10-12得票数 5
回答已采纳
3回答
在Laravel上加载Vue组件异步
javascript、laravel、vue.js
我有一些javascript要在blade文件中运行，但它正在等待一个Vue组件在运行之前完全加载。
...
<p id="a"></p>
<my-vue-component></my-vue-component>
...
<script>
document.getElementById('a').innerText = 'ggg'
</script>
javascript代码等待加载Vue组件，然后执行。
我不希望Vue组件暂停javascript的其余部分。我希望它在
浏览 3提问于2019-08-08得票数 1
回答已采纳
4回答
Vue.js没有在fresh Laravel 5.8项目中工作
javascript、php、laravel、vue.js、npm
我已经用laravel new test创建了一个新的Laravel项目。然后我运行了npm install和npm run dev。我将welcome.blade.php文件更改为
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" href="{{ mix('js/app.js') }}"></script>
</head>
<body>
浏览 0提问于2019-06-17得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
