[ Laravel从入门到精通 ] 测试系列 —— 通过测试驱动开发构建待办任务项目(二):前端功能和浏览器测试篇

在上篇教程中,学院君已经完成了待办任务项目后端 API 接口的编写和功能测试,现在,我们开始编写 Vue 组件来实现前端的交互界面。 编写前端 Vue 组件 首先在 resources/js/components 目录新增一个 Vue 组件 TasksComponent.vue,并编写模板代码和脚本代码如下:...

[ Laravel 5.8 文档 ] 前端开发 —— 使用进阶:通过 Laravel Mix 编译前端资源

简介 Laravel Mix 提供了一套流式 API,使用一些通用的 CSS 和 JavaScript 预处理器为 Laravel 应用定义 Webpack 构建步骤。通过简单的方法链,你可以流式定义资源管道。例如: mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public...

[ Laravel 5.8 文档 ] 前端开发 —— 快速入门:JavaScript & CSS 脚手架

简介 Laravel 并不强制你使用什么 JavaScript 框架或者 CSS 预处理器,不过也确实提供了对很多应用而言都很有用的 Bootstrap 和 Vue 的一些基本脚手架。默认情况下,Laravel 使用 NPM 来安装这些前端包。 CSS Laravel Mix提供了干净、优雅的 API 用于编译 SASS 或 Less,SASS 和 Less 都是在原生 CSS 的基础上...

[ Laravel 从入门到精通 ] 用户认证与授权系列 —— 通过 Passport 实现 API 请求认证:移动端应用篇(密码授权令牌)

注:虽然教程的名字叫移动应用篇,但是完全适用于同一个公司不同系统间的认证,包括不同 Web 网站间认证。 虽然我们在上一篇教程中做好了 Passport 后端初始化配置,但是注册的相关路由和初始化的数据库数据并没有用到,从这一篇教程开始,我们将基于 Passport 实现一些更复杂的 API 授权认证,会逐步用到这些路由和数据库记录。 我们在上一篇教程中已经介绍了单页面应用的 API ...

[ Laravel 从入门到精通 ] 前端入门:在 Laravel 项目中编写第一个 Vue 组件

和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 React,实现细节参考官方文档。 学院拥抱的是 Vue.js 框架,所以后续前端相关教程都会基于 Vue.js 编写,有关 Vue.js 的入门教程,可以阅读官方文档,值得一提的是,Vue....

[ Laravel 从入门到精通 ] 前端入门:CSS 预编译语言 Sass 快速入门教程

CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量、函数、继承等机制,因此很容易写出大量没有逻辑、难以复用和扩展的代码,在日常开发使用中,如果没有完善的编码规范,编写的 CSS 代码会非常冗余且难以维护。 为了解决上述问题,出现了很多 CSS 预编译语言,CSS 预编译语言是基于 CSS 语言的语法扩展,除了能解决上述缺乏语言特性带...

[ Laravel 从入门到精通 ] 前端入门:在 Laravel 项目中使用 Bootstrap 框架

Laravel 如何引入 Bootstrap 如官方文档所言,Laravel 并不强制你使用 CSS 框架,但是开箱提供了对 Bootstrap 的支持,在 resources/js/bootstrap.js(在 Laravel 5.7 之前的版本位于 resources/assets/js/bootstrap.js)中,我们可以看到对 bootstrap js库的引入: try { ...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十八) —— 通过 Vuex + Vue Router 导航守卫在前端实现认证路由保护

我们已经在上一篇教程中实现了通过 Vue 组件实现用户登录,但是现在有个问题,就是用户在没有登录的情况下也可以访问需要认证的页面,比如新增咖啡店页面: 虽然在提交表单数据到后台 API 时不会成功,但是这会给用户造成困扰,所以,我们需要对这种需要认证页面的访问请求进行拦截,我们以前在开发非单页面应用时,会在访问这种页面时从后端进行判断,比如经过 auth 中间件进行过滤,如果需要认证则...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十二) —— 咖啡店标签前端输入及显示功能实现

在上一篇教程中,我们已经实现咖啡店标签的后端 API 接口用于实现标签的查询、新增和删除,在这篇教程中,我们来实现标签的前端输入、提交和显示。 第一步:新增标签输入组件 我们将通过创建一个 Vue 组件来实现标签的输入,使用组件的好处是方便标签输入组件的复用,在 resources/assets/js/components/global 目录下新增一个 forms 子目录,然后在 for...

[ Laravel 5.7 文档 ] 前端开发 —— 快速入门:JavaScript & CSS 脚手架

简介 Laravel 并不强制你使用什么 JavaScript 框架或者 CSS 预处理器,不过也确实提供了对很多应用而言都很有用的 Bootstrap 和 Vue 的一些基本脚手架。默认情况下,Laravel 使用 NPM 来安装这些前端包。 CSS Laravel Mix提供了干净、优雅的 API 用于编译 SASS 或 Less,SASS 和 Less 都是在原生 CSS 的基础上...