如何在laravel上使用vanilla js显示JSON

在Laravel上使用Vanilla JS显示JSON数据，可以通过以下步骤实现：

首先，确保你已经安装了Laravel框架并创建了一个新的项目。
在Laravel项目中，创建一个路由来处理请求并返回JSON数据。可以在routes/web.php文件中添加以下代码：

Route::get('/json', function () {
    $data = [
        'name' => 'John Doe',
        'email' => 'johndoe@example.com',
        'age' => 25
    ];

    return response()->json($data);
});

上述代码创建了一个名为/json的GET路由，当访问该路由时，将返回一个包含姓名、电子邮件和年龄的JSON数据。

接下来，在Laravel的视图文件中使用Vanilla JS来显示JSON数据。可以在resources/views目录下创建一个新的视图文件，例如json.blade.php，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Display JSON with Vanilla JS</title>
</head>
<body>
    <h1>JSON Data:</h1>
    <div id="json-container"></div>

    <script>
        fetch('/json')
            .then(response => response.json())
            .then(data => {
                const container = document.getElementById('json-container');
                container.innerHTML = JSON.stringify(data, null, 2);
            })
            .catch(error => console.error(error));
    </script>
</body>
</html>

上述代码使用了fetch函数来获取/json路由返回的JSON数据，并将其显示在json-container元素中。JSON.stringify函数用于将JSON数据格式化为可读性更好的字符串。

最后，创建一个路由来渲染上述视图。可以在routes/web.php文件中添加以下代码：

Route::get('/display-json', function () {
    return view('json');
});

上述代码创建了一个名为/display-json的GET路由，当访问该路由时，将渲染json.blade.php视图文件。

现在，你可以通过访问/display-json路由来在Laravel上使用Vanilla JS显示JSON数据。当访问该路由时，页面将显示JSON数据的格式化字符串。

这是一个简单的示例，你可以根据自己的需求进行扩展和定制。如果你想深入了解Laravel和Vanilla JS的更多内容，可以参考以下链接：

Laravel官方文档：https://laravel.com/docs
Vanilla JS官方网站：http://vanilla-js.com/

请注意，以上答案中没有提及任何特定的腾讯云产品，因为这个问题与云计算品牌商无关。

相关·内容

如何在 Windows 上使用 NVM 安装 Node.js？

本教程将帮助您使用 NVM 在 Windows 上安装和管理多个 Node.js 版本。...如何在 Windows 上安装 NVM coreybutler已经为 Windows 系统构建了 nvm 安装程序。访问以下链接以下载适用于 Windows 系统的 NVM 安装程序。...[在 Windows 上完成 NVM 安装] 如何在 Windows 上安装 Node.js 因为您已经在系统上安装了 NVM。现在，您可以在 Windows 系统上安装任何版本的 Node.js。...nvm install 14.15.0 您可以按照相同的命令在单个系统上安装多个节点版本。设置默认 Node.js 版本您可以使用以下命令更改默认的活动节点版本。...例如，要将节点 14.1.50 设置为默认版本，请键入： nvm use 14.15.0 激活新版本后，键入： node --version 这将显示当前活动的 Node.js 版本。

3K0 0

如何在Ubuntu 16.04上使用Deployer自动部署Laravel应用程序

介绍 Laravel是一个开源的PHP Web框架，旨在使常见的Web开发任务（如身份验证，路由和缓存）变得更加容易。...注意：如果在本地计算机上使用Windows，则应使用BASH仿真器（如Git bash）运行所有本地命令。...使用以下命令显示公钥文件的内容： $ cat ~/.ssh/gitkey.pub 复制输出并将公钥添加到您的Git服务器。现在，您将能够使用本地计算机连接到Git服务器。...第3步 - 配置部署用户部署程序能够使用SSH协议在服务器上安全地执行命令。因此，我们将配置生产服务器的第一步是创建一个用户，Deployer可以使用该用户通过SSH登录并在服务器上执行命令。...这次，您可以使用SSH密钥的默认文件名： $ ssh-keygen -t rsa -b 4096 显示公钥： $ cat ~/.ssh/id_rsa.pub 复制公钥并将其添加到Git服务器。

15.5K1 0

如何在CentOS 7上使用MEAN.JS安装MEAN堆栈

使用MongoDB，我们可以将文档存储为类似JSON的格式，在基于ExpressJS和NodeJS的服务器上编写JSON查询，并将JSON文档无缝传递到AngularJS前端。...在本指南中，我们将使用MEAN.JS在CentOS 7服务器上安装MEAN堆栈。使用此方法包括首先安装MongoDB，然后安装NodeJS，然后从GitHub克隆MEAN.JS文件。...我们需要安装的堆栈的下一部分是Node.js. 第3步 - 安装Node.js. 安装Node.js的一种简单方法是使用NodeSource Node.js存储库中的二进制文件。...一种方法是使用npm start，另一种方法是使用gulp。这两个命令都允许您在开发模式下测试应用程序。在这里，我们将使用npm。...结论现在您已拥有必要的组件和MEAN.JS样板，您可以开始构建，测试和部署自己的应用程序。查看MEAN.JS网站上的文档，了解有关使用MEAN.JS的具体帮助。

1.1K0 0

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

JSON Web Token的结构 JWT实际上是一个使用. 分隔的多个base64url编码的字符串组成的一个新字符串。...---- 使用Laravel 5和AngularJS的JSON Web Token示例 (译注：由于对Laravel和AngularJS不熟悉，这里的以英文原文为准，同时若发现这里有错误，欢迎随时提出。...该JSON Web Token示例不会使用任何类型的加密来确保在claims中传送的信息的机密性。实际上，这通常是可以的，因为TLS / SSL会加密请求。...安装和项目引导（Installation and Project Bootstrapping）为了使用Laravel，我们必须在我们的机器上安装Composer软件包管理器。...还有很多关于JWT的内容，例如如何处理安全细节，以及在token过期时刷新令牌，但上述示例应演示使用JSON Web Token的基本用法，更重要的是显示优势。

30.5K1 0

在 Laravel 项目中使用 webpack-encore

而我迁移的这个项目，是一个 Laravel 项目，所以下面就分享下，如果在 Laravel 项目中使用 webpack-encore 替代 laravel-mix。...为此你需要在 Laravel 项目中自行实现这两方法，下面是我参考 symfony 里相关源码改写的，可能逻辑上并不算完善，但以自己一个多月的使用情况来看，它们表现良好。...中的脚本（scripts）因为 laravel 项目默认 package.json 中 develop 等相关的脚本都是使用 laravel-mix 的，为了方便日常开发，现在要对它们进行一些调整，...后记使用 webpack-encore 已经快两个月了，这期间总体说来相当顺利，小坑虽然有，但没什么大坑。去 github 上提 issue，维护成员基本上都很友善耐心，几个小时就会有回复。...当然，更为重要的是，mix4 里因为一些 bug 而无法使用的功能，在 encore 里却正常，如 dynamic import。

2.1K2 0

在 Laravel 项目中使用 Bootstrap 框架

1、Laravel 如何引入 Bootstrap 如官方文档所言，Laravel 并不强制你使用 CSS 框架，但是开箱提供了对 Bootstrap 的支持，在 resources/js/bootstrap.js...5.5 开始 Laravel 使用的 Bootstrap 版本就是 4....Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用的前端打包工具，Webpack 是目前最新的、广泛使用的前端资源打包工具（之前还有 Grunt、Gulp 等），能够以模块方式处理所有前端资源...后面我们会专门讲一下 Laravel Mix 的各种使用，现在你只需要知道它是怎么回事就好了。...Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js： const mix = require('laravel-mix'); mix.js('resources/js/

3.4K3 1

「create-?」每个前端开发者都可以拥有属于自己的命令行脚手架

是因为最近一直在搞Strve.js生态，在自己捣鼓框架的同时也学到了很多东西。所以就本篇文章给大家介绍一种更加方便灵活的命令行脚手架工具，以及如何发布到NPM上。...我用的Yarn依赖管理工具，所以我首先使用命令初始化依赖。 yarn 然后，我们可以先打开根目录下的package.json文件，会发现有如下命令。...， { "bin": { "create-demo": "index.js", "cvd": "index.js" } } 然后，我们先在这里使用yarn link命令来将此命令在本地可以运行...我们在之前那些模板交互文本会看到它们显示不同颜色，这正是它的功劳。...上图显示的Error，是因为我没有在demo模板上创建package.json文件，所以这里可以忽略。你可以在自己的模板里创建一个package.json文件。

1.1K3 0

基于Model Event模型事件的Laravel实时APP

:(基于 Pusher 驱动的 Laravel 事件广播)（上）。...备注：Laravel对Model的CRUD操作都会触发对应的事件，如create操作会在创建前触发creating事件，创建后触发created事件，即Model Event。...mv composer.phar /usr/local/bin/composer 新建一个空文件夹，在文件夹下，再使用composer安装Laravel项目： composer create-project...，当然，输入的文本已经保存在model_event.items表里了：页面里改变每一个item的checkbox后，该item的状态将会互换，在UI上显示也是上下位置互换，具体逻辑可以看views...Pusher的作用、注册和安装可参考：基于 Pusher 驱动的 Laravel 事件广播（上）注册安装也比较简单，总之使用Pusher能做个实时APP。

5.5K3 1

laravel 集成 vue3 的前端项目

development server... npm run dev # Build and version the assets for production... npm run build Vue 如果你想要使用...中的路径也要修改: plugins[laravel({input: ['resources/js/main.js']})]--}} @vite('resources/js/main.js')...下面（一些参数不能覆盖，需要合并一下） enterprise-admin/src/* -> laravel-demo/resources/js/* enterprise-admin/package.json...-> laravel-demo/package.json enterprise-admin/.env.development -> laravel-demo/.env enterprise-admin...laravel项目的域名就可以访问页面了，如：http://newblog.cw.net，即.env中的APP_URL 参考 https://learnku.com/docs/laravel/10.x/

1991 0

创建并运行一个新的 Laravel 项目

laravel/laravel blog --prefer-dist 效果和上面使用安装器安装的一样，使用这个方式安装的一个好处是可以安装旧版本的 Laravel 项目，比如要安装 5.6 版本的项目...目录根目录默认包含以下一级子目录： app：存放应用核心代码，如模型、控制器、命令、服务等 bootstrap：存放 Laravel 框架每次启动时用到的文件 config：用于存放项目所有配置文件...资源文件，如视图模板、语言文件、待编译的 Vue 模板、Sass、JS 源文件 routes：项目的所有路由文件都定义在这里 storage：用于存放缓存、日志、上传文件、已经编译过的视图模板等 tests...：Composer 配置文件 webpack.mix.js：Laravel Mix Webpack 配置文件，用于编译和打包前端资源 package.json：配置前端资源依赖和脚本（类似于 composer.json...-allow-unrelated-histories git push 这样，就可以在 Github 上看到刚刚提交的代码了： ?

6.8K3 0

玩转企业云计算平台系列（十七）：Openstack 大数据项目 Sahara

Sahara pages - Openstack Dashboard显示页面。...本指南使用最新生成的 Ubuntu 原版镜像（称为 sahara-vanilla-latest-ubuntu.qcow2）和最新版本的 vanilla 插件作为示例。...--json my_cluster_template_create.json 记住群集模板名称或保存群集模板 ID，以便在集群配置中使用。...您可以使用以下命令确定中子网络 ID： openstack network list 创建并启动群集： openstack dataprocessing cluster create --json my_cluster_create.json...在此期间，从上一个命令返回的“状态”可能会显示Active以外的状态。还可以使用wait标志创建集群。在这种情况下，在将群集移动到Active”状态之前，群集创建命令将不会完成。

2241 0

结合 Bootstrap + Vue 组件实现 Laravel 异步分页功能

不管你使用查询构建器还是 Eloquent 模型类，都可以在一分钟内完成分页功能，Laravel 还为我们提供了丰富的自定义支持，不管是后端的分页器，前端的分页链接，还是整个分页视图，都可以按需进行定制化开发...关于如何使用 Laravel 自带的分页功能进行分页，可以参考官方文档中的分页章节，说的非常清楚，在这篇教程中我们就不再一一演示了，不过 Laravel 自带的分页器实现的分页链接是动态 URL，不利于...此外，我们参考了 Laravel 自带分页器显示分页链接的方法，将其逻辑移到这里，主要用于处理页码及对应分页 URL，以及页码过多时，隐藏部分页码。...最后，我们将分页数据以 JSON 格式返回给调用方进行处理。...另外，div#app 元素不能省略，因为 Vue 组件默认配置为挂载到 #app 元素上。

7.4K2 0

Laravel中运行Gulp任务的利器（一） —— Laravel Elixir简介及入门教程

当你将绝大部分精力放在业务主流程上，却还需要时刻盯着这些碎片化任务着实有点让人焦头烂额。...不管你使用的是什么操作系统，都可以从 Node.js官网下载与之对应的安装包。如果你想从源代码编译安装，也可以通过这个链接去下载源码。...2、安装Elixir Laravel 5 安装完成后在项目根目录下自动包含了一个名为 package.json 的文件，该文件内容如下： { "devDependencies": {..."gulp": "^3.8.8", "laravel-elixir": "*" } } Node的 npm 包管理器使用 package.json 来安装项目的Node模块依赖。...，接下来，编辑 gulpfile.js 文件如下： elixir(function(mix) { mix.less('app.less'); mix.coffee();}); 此外，你还可以直接使用方法链到命令上

2K9 1

手把手教你从零写个自动生成API的扩展包

一个自动生成API文档的laravel扩展包手把手教你从零开始写一个laravel扩展包，并发布到packagist，为世界的开源世界做出你自己的贡献创建基本的目录及结构创建一个laravel项目...Controllers目录用于存储控制器创建config目录用于存储配置文件创建routes目录用于存放我们的路由创建swagger-ui目录用于存放swagger的静态页面创建view目录用于存放显示...├── swagger-ui-es-bundle.js.map │ │ ├── swagger-ui-standalone-preset.js │ │ ├...│ │ ├── swagger-ui.js │ │ └── swagger-ui.js.map 复制代码创建swagger的配置文件，文件位置 /...End Swagger UI call region window.ui = ui } 复制代码创建控制器，用于显示文档界面

1.3K1 0

【Laravel系列7.8】广播系统

比如说在你的购物 App 上，如果订单状态发生了变化，比如卖家发货了，那么马上就会收到一条通知信息。当然，App 上使用的不是 WebSocket ，而是不同平台的推送机制，但它也是一种广播通知机制。...今天的内容就是简单的搭起广播系统的环境即可，源码不多说了，因为广播系统实际上是使用了我们之前学习过的队列和事件来实现的。...pusher 是官方文档上推荐的，但是，注意这里有但是了哦。这玩意需要去它的官网上注册之后拿到 key 了才能使用。而在这们日常的使用中，其实更多的会使用 redis+socket.io 这种搭配。...修改完成之后，我们需要使用 Laravel 默认的 mix 工具来编译一下前端代码，最后需要加载的文件实际上是 public/js/app.js ，直接使用下面的命令行进行编译即可。...我这里查看 package.json 的话是 4.4 版本的，而 laravel-echo-server 这边只支持到 2.x 版本。

2.2K2 0

引入 Laravel Mix 管理前端资源

安装 Laravel Mix 开始之前，需要先安装 Laravel Mix 组件需要的前端相关依赖，假设你的系统上已经安装过 Node 和 NPM 包管理器，如果没有安装的话前往 Node.js 官方下载页面...，下载自己操作系统对应的 Node.js 下载包安装即可： NPM 会随着 Node.js 一起安装。...Mac 系统默认已经安装，只是版本较低，Windows 系统如果使用 Laragon 作为集成开发环境，也默认安装了 NPM，通过 Cmder 中即可使用。...package.json，并将 Laravel 项目自带的 package.json 相关依赖和命令拷贝过来： { "private": false, "scripts": { "dev...--progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies

1.6K2 0

通过 PHP 代码发送 HTTP 响应与文件下载

耳听为虚，眼见为实，下面学院君结合常见的使用场景来演示如何在 PHP 中设置 HTTP 响应并发送给客户端。...默认情况下状态码是 302，表示临时重定向，你也可以显示设置这个状态码： header('HTTP/1.1 302 Found'); header('Location: https://xueyuanjun.com...不过这种级别的认证等同于明文传输密码了，所以实际项目中不建议通过使用这种认证方案。...在 API 接口中，通常返回的是 JSON 格式数据，JSON 本质上也就是对象字符串，所以在请求处理代码的最后，通过 echo 输出对应的 JSON 对象字符串即可，在 PHP 中，可以通过 PHP...PHP 全栈工程师指南'; $album->summary = '基于 Laravel + Vue.js 框架的学习和实战，快速成为合格的 PHP 全栈开发工程师'; $album->author =

4.5K2 0

在 Laravel 项目中编写第一个 Vue 组件

和 CSS 框架一样，Laravel 不强制你使用什么 JavaScript 客户端框架，但是开箱对 Vue.js 提供了良好的支持，如果你更熟悉 React 的话，也可以将默认的脚手架代码替换成 React...，关于如何快速入门 Vue.js 框架，作者在知乎上也有建议的学习路线：https://zhuanlan.zhihu.com/p/23134551，可以说是很贴心了，大家遵循这个路线，相信很快可以入门...既然已经有这么丰富的资源，关于 Vue.js 的介绍和使用，我这里就不赘述了，我们重点来介绍如何在 Laravel 中通过 Vue 组件构建前端页面和功能。...学习过 Vue.js 之后，你会知道通过 Vue Loader 我们可以在前端通过单文件组件的格式编写 Vue 组件，然后注册、引用，在 Laravel 中我们也是这么干的，这可以极大提高前端代码的复用性...、可读性和可维护性，下面我们以 Laravel 默认的欢迎页面为例，将其改为通过 Vue 组件来实现，希望可以帮助你快速入门如何在 Laravel 中编写 Vue 组件。

3.3K3 0

如何在Ubuntu 16.04上使用PM2和Nginx开发Node.js TCP服务器应用程序

准备要完成本教程，您需要：一个Ubuntu 16.04服务器，包括一个可以使用sudo权限的非root用户和一个防火墙。将Nginx安装在您的服务器上。...必须使用--with-stream选项编译Nginx ，这是通过Ubuntu 16.04上的软件包管理器apt全新安装Nginx的默认选项。使用官方PPA 安装Node.js。...创建此文件将使构建重现，因为与其他开发人员共享此依赖项列表将更容易： nano package.json 您还可以使用npm init命令生成package.json，该命令将提示您输入应用程序的详细信息...让我们使用PM2运行服务器，使其在后端运行，并可以正常重启。首先，全局使用npm命令在服务器上安装PM2 ： sudo npm install pm2 -g 安装PM2后，使用它来运行服务器。...TCP连接，并代理对端口7070上运行的Node.js服务器的请求。

1.5K3 0

laravel自定义pagination实现ajax异步翻页

laravel实现翻页太简单了，几行代码就可以搞定，使用起来极其丝滑顺畅。但是由于laravel高度封装了翻页，要对其改造就显得比较尴尬了。...如有些场景下，我们需要异步翻页，看了laravel的文档，没找到相应的方法。如果要通过调用laravel关于翻页的相关方法，手工写一个分页，会很繁琐，对于这种操作，我是拒绝的。...既然可以通过修改样式改变分页，那么是不是可以通过js来修改分页的html代码，如：将分页a标签的href属性干掉，这样就不会进行跳转。...接着截取分页的页码数字，再新增一个onclick事件，事件触发ajax请求，最后将服务器返回的数据替换现有分页逻辑上是可行的，撸起袖子就干吧... ?...return view('home.ajax_content', [ 'data' => $data, ]); } ajax返回的数据可以是json

1.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云