# laravel咖啡屋 **Repository Path**: resourcesplus/laravel_cafe ## Basic Information - **Project Name**: laravel咖啡屋 - **Description**: 基于 Laravel 5.6 + Vue 2 开发一个 API 驱动的前后端分离应用，主要功能通过地图查找附近的咖啡烘焙店和专卖店。本系列 Laravel 基本开发流程，基于 Vue.js 进行前端开发，以及从零开始构建一个完整的、API 驱动的、包含后台管理系统的、前后端分离的单页面应用。 - **Primary Language**: PHP - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 3 - **Created**: 2020-10-11 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # roast57单页面应用 - 中间件 - guest - 中间件的用途是登录用户访问该路由会跳转到指定认证后页面 - 而非登录用户访问才会显示登录页面 - RedirectIfAuthenticated - 当未注册`/home`路由，须修改此中间件路由 - 扩展包 - `laravel/passport` - 搭建功能完备的 OAuth 服务器 - 使用流程 1. 安装 `Passport` 扩展包 2. 运行数据库迁移 3. 通过 `Artisan` 命令安装 `Passport` 4. 在用户模型类中使用 `HasApiTokens Trait` 5. 在 `AuthServiceProvider` 中注册 `Passport` 路由 6. 设置 Passport 在输入 API 请求中使用 7. 从 Web 浏览器访问认证 API，即在kernel中增加passport中间件 `CreateFreshApiToken` 8. 清理 routes/api.php 文件,新增群组路由 - 前端管理 - webpack.mix.js - 编译管理前端资源 - foundation-sites - 类似bootstrap, 响应式前端框架 - Vue Router - 原理 - 以单页面应用方式执行 - 依赖于 HTML 5 History API 在应用程序中创建可链接页面 - Vuex - 用于处理单页面应用数据的状态管理系统 - 在单一数据源（Single Source of Truth）中存放应用所使用的所有数据 - 作用 保证所有更改都被跟踪，所有数据都保持同步 - 在多个组件和页面中使用的单点数据 - SPA骨架 - 目录 - `api components mixins modules pages` - 模块文件 - `app.js config.js event-bus.js routes.js store.js` - 配置前端路由 1. 配置路由文件 routes.js 2. 添加路由，导出router实例 3. 添加页面组件 4. 将路由导入app.js 5. 构建应用 - 后端实现 - 实现相关的json接口 - SPA - config.js - 用`process.env.NODE_ENV`区分环境变量设置 - 前端api目录 - 负责构建前端向后端ajax请求的真实api - store.js 数据存储器 - 导出数据存储器实例,负责聚合Vuex数据模块 - `es6-promise`让`ie11`支持promise - 新增数据存储器到Vue实例 - module 数据管理模块 - 配置vuex模块 - Vuex模块四大属性 `state、actions、mutations、getters` - `actions,mutations,getters` - 都是由函数方法组成的简单js对象 - 都有各自默认的参数析构 - states属性 - 通常对每个数据源state对应有以下四个状态 - status = 0 -> 数据尚未加载 - status = 1 -> 数据开始加载 - status = 2 -> 数据加载成功 - status = 3 -> 数据加载失败 - actions属性 - 第一个参数通常是模块的commit函数 - 请求接口返回的是Promise对象，用then,catch链式接收函数参数 - mutations属性 - mutations定义数据更新方式,设置state - 第一个参数通常是局部模块的state - getters属性 - 每项state数据获取器 - vuex数据存取流程 1. 用户调用一个action 2. 该action加载/计算数据 3. 该action提交一个mutation 4. state 被更新 5. getter 将更新后的state返回给组件 6. 组件被更新 - vuex模块使用流程 1. 设置Vue组件，使用生命周期钩子,比如created方法 2. 分发加载动作actions,`this.$store.dispatch` 3. 将数据添加到组件，比如computed属性 4. vue组件数据显示 - vue/router/vuex - vue文件发送动作 -> vuex的actions -> 前端API提交到后端API -> 接收返回结果到Vuex -> Vuex状态更新重新加载 - vue-Router导航守卫 - 在导航改变过程中通过对跳转进行取消或改变来对路由改变进行保护 - 加载用户状态action后监听状态，加载完毕直接执行路由守卫函数 - `requireAuth(to, from, next)` - 要来/去的路由from/to对象，next函数，执行效果依赖next方法的调用参数（类似重载） - 调用next方法，确保钩子被resolved - 使用流程 1. 构建守卫函数 2. 通过Vue存储器获取用户状态，**store.watch第一个参数只接受函数** 3. 在指定路由中使用导航守卫 - sass资源构建 - abstracts目录 - sass动态资源，比如变量 - webpack.mix.js 添加路径别名 - 表单验证 - vue组件前端验证 1. 新增验证对象模型，为字段设置验证占位符 2. 添加验证失败通知,验证逻辑与显示相分离 3. 构建js验证函数(位于组件的methods方法) - 构建后端请求验证类 1. 验证规则 2. 自定义验证失败消息 3. 添加请求验证类到控制器路由 - 第三方接口 - 配置.env文件 - 配置 config/services 文件 - 在app目录下建相应遥服务逻辑类 - vuejs相关 - data内数据属性，通常是用于变迁 - computed属性对象，简单逻辑计算，vuex提供在组件中使用的辅助函数mapState - watch属性可以监听计算,数据属性值前后的变化，有变化则触发相应的回调，ux（用户体验)而给出的通知信息 - 事件数据总线，监听$on 与触发$emit 与nodejs的事件模块一脉相承 - 通过vue组件实现单页面无跳转登录,登录登出session操作与Auth门面相关 - Vuex.Store实例方法 - `watch(fn: Function, callback: Function, options?: Object): Function` - 响应式地侦听 fn 的返回值，当值改变时调用回调函数 - web端文件上传FieldList对象 `files[0]` - vuex可单独一模块专为前端数据逻辑模型，不需要每个vuex模块与后端对齐 - 单条数据用对象，多条则是js简单对象数组 - array.sort - 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。 - 若 a 等于 b，则返回 0。 - 若 a 大于 b，则返回一个大于 0 的值。 - 多条件展示思路 - 每个条件显示为一个过滤器,组合使用 - 以混入的形式将过滤器方法注入组件中mixins - 前端js节流 - debounce 下划线js库 - vue-router路由元信息，给每一个路由meta对象打标签 - vue前后端分离整体开发流程 1. 数据表 2. 后端路由及API 3. 中间件/授权类/请求类 4. 控制器 5. 模型类/Service/unitiy 6. 前端路由Vue-ruter及API 7. 前端页面/组件 8. Vuex模块 - 零宽断言与@import - 通常一个视图使用一个路由组件渲染，多个组件渲染一个视图确保使用components - **正则`?!`(js只支持前瞻[零宽断言])** - *前瞻，后顾，负前瞻，负后顾*（前瞻，要查找的部分在表达式的前面） - `(?=X) X, via zero-width positive lookahead` - 正向前瞻 查找x表达式前面的部分 - exp1(?=exp2) 查找exp2前面的exp1 - `(?!X) X, via zero-width negative lookahead` - 负向前瞻 - exp1(?!exp2) 查找后面不是exp2的exp1 - `(?<=X) X, via zero-width positive lookbehind` - 后顾 查找x表达式后面的部分[js不支持] - `(?softDeletes() 建字段 - SoftDeletes 在相应的模型中添加此trait 10. 授权思路 - laravel支持路由中间件方法使用授权策略,也支持方法内部通过中间件授权 - 管理分级,查阅->修改->增删,对于后台而言用户管理通常只支持超级管理员一家用. - pluck() 第一个参数取键对应的值，第二个参数指定键对应的所有值，数组与关联数组 - 表单验证 - `sometimes` 条件验证 在某些情况下，只有在该字段存在时才会验证 - `'person.*.email'` 验证person数组中的每一个email字段 - 每一条验证规则可对应一条验证消息，一个字段可以应用多条验证规则 - **只有数组的形式才支持匿名函数及自定义规则类实例验证** - 合规 - 当数据量过大，前后端数据过滤就很有必要，前端mixins模块 - 控制器的内http操作方法，以http谓词前缀作为相应的方法命名前缀 - 从vuex中获取应用于实现功能的对应值状态，通常用计算属性来提供，而其ux（用户体验）特性，用watch属性来通知 - vue的计算属性本质上是一个组合属性，而watch属性则是一个监视追踪属性，会比较上一次与本次的值变化。 - 将过滤器与过滤结果分开，要用的地方负责监听事件，发生的地方专注于触发 - service 通常放公共的商业性代码; unitility则是基础设施，如与第三方交涉的代码 - 审核记录(获取数据->执行变更->通过审核) - 通常将审核前后的信息(比如用json_encode)序列化，存入一个记录字段，以便后续审核通过,使用**审核前的请求数据或比对** - 而拒绝动作审核，则只需要将动作标记为审核不通过即可 - 通过中间件来控制用户对网站API接口的访问请求 - Vuex支持动态加载Vuex模块 - created 加载vuex派发初始数据 - computed 合成读取vuex数据 - watch 状态改变，通过事件数据总线，通知其它组件 - method 组件内部处理逻辑，及模板相关事件 - 将vuex数据对象同步到本地数据模型的概念,状态，模型/事件数据总线 - 需要频繁与后台交互的数据，不适宜用vuex比如搜索数据 - 一切基于路由，auth得到的实例也不例外 - laravel模型绑定会控制参数的顺序，但一此特定的类型参数除外，如请求类中的Request，策略类中的User - 数据结构， - 问题归约，目标，算子集 - 数学模型准确性，可自动计算，过程与步骤用算法表示，算法描述与算法分析 - 顺序，分支，重复流程结构 - 回溯法，由后至前不停的试探-返回-再试探。比枚举法更先进，它缩小了解空间，也是一种穷举（部分穷举）。 - 最优解，整体的所有解中最恰当的一个。 - 数据类型表达数据本身，数据结构抽象：集合，线性，树形，图 - 线性表 强调有序，即是一个序列。物理实现 链式存储与顺序存储 - 排序思想 - 选择排序 哨兵侦察位置信息，确定有序索引 - 交换排序 两两交换数据 - 插入排序 把数插入到有序队列合适的位置，整个数据长度发生变化 - 归并排序 将多个有序序列归并为一个有序序列，应用场景：外部排序 - 基数排序 多关键字排序，分组，组内排序，10个桶分类的次数与最大数的位数相关 - 核心原理 - **task vs microtask** - **根据 HTML Standard，在每个 task 运行完以后，UI 都会重渲染** - 使用setTimeout，会在task尾部推入这个函数 - Promise，MutationObserver，setTimeout 优先级由高到低 - 在 microtask 中就完成数据更新，当前 task 结束就可以得到最新的 UI - vuejs 响应式触发顺序 `setter->Dep->Watcher->update->patch`