使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。...一个以 Laravel 为后端的 Vue SPA 应用的基本运行流程如下： 第一个请求触发服务端的 Laravel 路由 Laravel 渲染 SPA 布局 接下来的请求使用 history.pushState...安装 首先我们会创建一个 Laravel 项目，然后再安装 Vue 的 NPM 路由包： laravel new vue-router cd vue-router # 当使用 Valet 时，建立项目链接...我们已经完成了 Laravel 项目的安装，而且 vue-router 包也已经就绪。...运行项目 自此， 我们完成了一个使用 Vue 和 Vue Router 的 SPA 应用的基本框架， 接下来让我们通过运行 JavaScript 让它显示出来： yarn watch # 或 npm run
「前端实验室」 专注分享 Github、Gitee 等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。...大家好，我是「前端实验室」爱分享的了不起~ 单页Web应用（single page web application，SPA）：SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的...我们通常使用Laravel，Ruby on Rails或Django等框架构建服务器端渲染的应用程序，通过创建控制器，从数据库中获取数据（通过ORM），并呈现视图。...composer require inertiajs/inertia-laravel 2.根模板 设置将在第一次访问页面时加载的根模板。...需要设置 Inertia 中间件，可以通过将中间件发布到应用程序来实现此目的。
现在大多项目都是前后端分离的，但是如果前后端都是一个人做，前后端来回切也挺不方便的。...好在 laravel 给我们提供了 Vite，下面我以一个纯前端的项目企业展示型小程序 - 管理员端 为例，介绍一下如何把 vue3 项目集成到 laravel 准备 创建一个laravel的项目 composer...'{path}', function () { return view('spa'); })->where('path', '(.*)'); 模板文件 vi resources/views/spa.blade.php... 复制前端项目 把前端项目克隆到enterprise-admin目录，把相关文件复制到laravel-demo下面（...项目的域名就可以访问页面了，如：http://newblog.cw.net，即.env中的APP_URL 参考 https://learnku.com/docs/laravel/10.x/vite/14853
同时，由于目前个人用的后台一直是java，前端也没用过AngularJS，vue也是最近才开始学，所以Laravel和AngularJS部分 并不十分了解，若有错误，欢迎及时提出。 ?...=~1.1" 现在我们已经准备好一切通过运行laravel new jwt创建一个新的Laravel项目。...一旦我们进入我们项目的主页，后端将提供resources/views/spa.blade.php视图用来引导Angular应用程序。...这是我们的拦截器的一个例子，它们在浏览器的本地存储中可用时注入一个token。...它将用户名和密码数据从登录表单和注册表单传递Auth到向后端发送HTTP请求的服务。然后将token保存到本地存储，或者显示错误消息，具体取决于后端的响应。
基于Vue和Quasar的前端SPA项目实战之环境搭建（一） 背景 crudapi增删改查接口系统的后台Java API服务已经全部可用，需要一套后台管理UI，主要用户为开发人员或者对计算机有一定了解的工作人员...，通过UI配置元数据和处理业务数据，经过调研最终决定通过Vue实现SPA单页面Web应用，打开浏览器就可以很方便使用。...技术选型 Vue 目前主流的三大前端框架分别是Angular、React、Vue。其中Angular适合大型项目，React的JSX语法个人觉得不是很好。...，通过Quasar脚手架创建了项目工程，并且本地运行成功。...主要知识点：Vue基本知识，自定义组件，axios网络请求，Vuex状态管理，Router路由，本地存储LocalStorage、Session、Cookie，登录，本地调试，docker打包等。
我们将通过演示在 vue-router 进入一个路由之前，如何异步加载数据来继续使用 Laravel 构建我们的 Vue SPA。...配置数据库 是时候给我们的 Vue SPA Laravel 应用连接一个真实的数据库了。你可以通过使用类似 TablePlus 的GUI工具来使用 SQLite 或者 MySQL。...如果你有一个运行在你设备上的 MySQL 实例，你可以使用以下命令行相当快速创建一个新数据库（假设你本地环境没有设置密码）： mysql -u root -e"create database vue_spa...UsersIndex.vue 组件后显示出的 SPA 结果： 下一步是什么 我们现在有一个有效的 API，可以从数据库中获取真实数据，还有一个简单的分页组件，该组件在后端使用 Laravel 的 API...您可以继续进行 第4部分-编辑现有用户 原文地址： https://laravel-news.com/building-vue-spa-laravel-part-3 译文地址：https://learnku.com
Laravel Sanctum 为 SPA（单页应用程序）、移动应用程序和基于令牌的、简单的 API 提供轻量级身份验证系统。...简单来说，前后端分离的项目，使用 token 验证登陆状态，可以选它；另外，同类型的还有 jwt 比较火 安装 Laravel 9 已经包含了 Laravel Sanctum，所以下面的步骤看看就行了..." php artisan migrate 接下来，如果您想利用 Sanctum 对 SPA 进行身份验证，您应该将 Sanctum 的中间件添加到您应用的 app/Http/Kernel.php 文件中的...api 中间件组中： 'api' => [ \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,...，你可以使用 tokenCan 方法确定令牌是否具有给定的能力： if ($user->tokenCan('server:update')) { // } 令牌能力中间件 保护路由 use Illuminate
在过去的两三年里，我一直在研究同时使用 Vue 和 Laravel 的项目，在每个项目开发的开始阶段，我必须问自己 “我将如何将数据从 Laravel 传递到 Vue ？”。...在过去，我用它作为存储和访问 API 基 URL、公钥、特定模型 ID 和各种其他需要在整个前端使用的小数据项的方法。 不过，使用此方法有一点需要注意，这就是访问 Vue 组件内部数据的方式。...将 API 与 Laravel 自身的 web 中间件和 CSRF 令牌一起使用 ?...在这个基础上，用来构建新的项目或者在现有的 Laravel 应用中使用绝对是一件简单的事情。...从那里，你的 Vue 应用程序应该存储该令牌 (存储在 LocalStorage 或者 Vuex)，在每一个传出请求中，都将它加入到 Authorization header 作为授权头。
Sharding-JDBC 3.1.4 Vitness 3.1.5 Neo4j 3.1.6 MongoDB 3.2 发号器选型 3.2.1 UUID 优点 • 本地生成...缺点 • 生成的串过于随机，无法保证趋势递增，Range查询比较困难； • UUID过长128位，不易存储，往往用字符串表示； • 网络传输需要传送更多的字节，并且如果是用在业务上...3.6.2 Sentinel 3.7 Service Mesh选型 3.7.1 Zuul 3.7.2 Linkerd 3.7.3 Istio 3.8 消息中间件选型... Configuration – Apollo 3.23.3 Planning – Terraform 3.23.4 Self-Service – RunDeck 3.24 项目管理选型...Compatible – Babel 4.4.5 Package – Bower, Grunt, Webpack 4.4.6 Code Style – ESLint, 4.4.7 SPA
基于Vue和Quasar的前端SPA项目实战之业务数据（七） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之表关系（六）的介绍，元数据设计功能全部实现了，本文主要介绍业务数据的crud...简介 在crudapi系统中，通过配置表单的方式定义元数据。...表单配置好之后，对应的crud接口就自动生成了，前端集成RESTful API就可以实现业务数据的crud功能，如果配置了表关系，也支持主子表的级联操作。...列表查询和分页 数据查询主要是指按照输入条件检索出符合要求的数据列表，如果数据量大的情况下，需要考虑分页。...Object 最终转换成mysql中=操作符 字段1，字段2，...之间的关系为并且AND关系，更多内容可以参考之前的一篇文章 数据条件查询和分页 小结 本文主要介绍了介绍业务数据的增删改查功能，
基于Vue和Quasar的前端SPA项目实战之文件上传（十） 回顾 通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之数据导入（九）的介绍，实现了业务数据批量导入功能，本文主要介绍文件上传相关内容...简介 crudapi支持附件字段，表字段里面保存的是文件url字符串。...附件可以通过其它文件管理系统比如阿里云的OSS进行上传，或者使用系统自带的文件管理API进行上传，包括普通文件上传和大文件切片上传两种方式。...$q.loading.hide(); console.error(error); } } 大文件如果采用普通的上传方式，可能由于网络的原因速度比较慢，而且不稳定，所以采用切片的方式进行多线程上传...分片大小默认为20MB，可以配置为需要的值，前端通过Promise.all的ajax调用方式可以实现多线程同时上传。
基于Vue和Quasar的前端SPA项目实战之联合索引（十一） 回顾 通过之前文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，关于表单元数据配置相关内容已经实现了，本文主要介绍联合索引功能的实现...简介 联合索引又叫复合索引，如果索引只有一个字段，在设置列属性的时候直接设置。如果是多个字段联合索引，就需要单独设置了。这里可以创建普通或唯一两种类型的联合索引，通过下拉框选择多个字段。...return data; } 应用 在创建和编辑页面中引用即可 保存的表单时候...下一篇文章会介绍数据库逆向，在数据库表单已经存在的基础上，通过数据库逆向功能，快速生成元数据，不需要一行代码，我们就可以得到已有数据库的基本crud功能，包括API和UI。
特性 基于 Vue.js 自动代码分层 服务端渲染 强大的路由功能，支持异步数据 静态文件服务 ES2015+ 语法支持 打包和压缩 JS 和 CSS HTML 头部标签管理 本地开发支持热加载 集成...确保安装了npx（npx在NPM版本5.2.0默认安装了）： npx create-nuxt-app 启动项目: cd npm run dev 别名...此配置示例中的命名视图名称为 top 。 中间件 中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。 每一个中间件应放置在 middleware/ 目录。...文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。...在服务器端和客户端都可以使用生命周期钩子：created beforeCreated nuxt默认服务器端渲染，可以配置spa的模式启动： 在package.json中scripts中添加： 'start-spa
基于Vue和Quasar的前端SPA项目实战之模块管理（十四） 回顾 通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，通过配置的方式可以零代码实现表单管理功能，但是所有表单都没有分类...简介 属于同一类型的表单可以添加到同一个模块，比如字典相关的表建立“字典”模块，用户相关的表建立“用户管理”模块，模块在首页直接展示，用户可以快速的操作对应的表单。...使用crudapi可以告别枯燥无味的增删改查代码，让您更加专注业务，节约大量成本，从而提高工作效率。 crudapi的目标是让处理数据变得更简单，所有人都可以免费使用！...基于主流的开源框架，拥有自主知识产权，支持二次开发。...，可以覆盖基本的和业务无关的CRUD RESTful API。
基于Vue和Quasar的前端SPA项目实战之docker部署（八） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据（七）的介绍，crudapi-admin-web基本功能全部实现了...简介 Docker是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。...，方便和其它系统集成，比如可以放在spring boot项目的resources/static/crudapi目录下，避免放在根目录，所以这里配置publicPath为crudapi。...run build FROM nginx:latest WORKDIR /crudapi-admin-web COPY --from=builder /crudapi-admin-web/dist/spa...docker命令 本地打包docker和运行 docker build -t crudapi-admin-web:latest . docker rm -f crudapi-admin-web docker
基于Vue和Quasar的前端SPA项目实战之布局菜单（三） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之用户登录（二）的介绍，我们已经完成了登录页面，今天主要介绍布局菜单的实现...同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如： 设置Setting页面和关于About页面切换的时候，导航和菜单部分都不变，变化的是主体部分，可以通过嵌套路由实现。...+ | +------------------+ +-----------------+ MainLayout 文件为：src/layouts/MainLayout.vue...path: "about", meta: { isAllowBack: true }, component: () => import("pages/About.vue"...后退按钮主要目的是适应不同的浏览器，不依赖浏览器的后退功能，比如H5页面全屏或者嵌入到Cordova壳子里面的时候就非常有用了。
基于Vue和Quasar的前端SPA项目实战之动态表单（五） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之序列号（四）的介绍，我们已经完成了元数据中序列号的增删改查，本文主要介绍动态表单设计功能的实现...UI界面 [表单列表] 表单列表 [创建表单] 创建表单 [索引管理] 索引管理 API [表单管理API] 表单API包括基本的CRUD操作，具体的通过swagger文档可以查看。..."indexType", sortable: false }, { name: "indexStorage", align: "left", label: "索引存储...操作，其中编辑和新建页面类似，编辑页面除了可以设置单个字段的索引，还可以设置多个字段的联合索引，更多内容参考源码即可。...小结 本文主要介绍了元数据中动态表单设计功能，支持常见的数据类型和索引，然后实现了动态表单的crud增删改查功能，下一篇文章会介绍元数据中表关系功能。
基于Vue和Quasar的前端SPA项目实战之数据导出（十三） 回顾 通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之数据导入（九）的介绍，通过配置的方式可以零代码实现业务数据的批量导入功能...简介 针对每个业务表，有时需要导出数据到本地文件，用来备份或者分析，这里采用的文件格式为EXCEL，第一行为字段名称，从第二行开始为数据。...$q.loading.hide(); console.error(error); } } 产品为例 [product] 点击“批量导出”按钮，成功之后自动下载文件到本地，打开EXCEL查看发现...小结 本文主要介绍了介绍业务数据批量导出功能，不同的业务表单操作类似，通过配置的方式可以零代码实现业务数据的批量导出功能。...，可以覆盖基本的和业务无关的CRUD RESTful API。
基于Vue和Quasar的前端SPA项目实战之表关系（六） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，我们已经完成了元数据中动态表单设计功能，本文主要介绍表关系功能的实现...UI界面 [表关系列表] 表关系列表 [编辑表关系] 编辑表关系 [表关系图] 表关系图 API [表关系管理API] 表关系API包括基本的CRUD操作，具体的通过swagger文档可以查看。...图可视化引擎，G6是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。...1.0.0", "@antv/g6": "^3.3.6", "axios": "^0.18.1", "core-js": "^3.6.5", "quasar": "^1.0.0", "vue-i18n...小结 本文主要介绍了元数据中表关系管理功能，支持常见一对多，一对一，多对多等关系，并且通过G6图表库显示所有表的关系的图，到目前为止，元数据设计功能全部实现了，下一篇文章开始会介绍业务数据的crud功能
基于Vue和Quasar的前端SPA项目实战之数据导入（九） 回顾 通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据（七）的介绍，实现了业务数据基本crud功能，本文主要介绍业务数据批量导入相关内容...简介 当数据量比较大的时候，如果手工录入数据就会比较慢，所以通过批量导入的方式录入数据，以提高效率。...这里采用的文件格式为EXCEL，针对每个业务表，可以自动生成EXCEL模板文件，下载模板之后，直接编辑EXCEL表格，然后上传EXCEL文件进行批量导入数据。...UI界面 [产品导入] 产品导入 API [业务数据导入API] 业务数据导入相关API，包括获取模板和导入两个功能，具体的通过swagger文档可以查看。...小结 本文主要介绍了介绍业务数据批量导入功能，不同的业务表单都可以自动生成模板文件，通过配置的方式可以零代码实现业务数据的批量导入功能。后续会继续介绍一些高级功能。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
