README

localhost/:1 加载失败 http://127.0.0.1:8050/api/v1/tasks：请求的资源中没有 'Access-Control-Allow-Origin' 标头。因此不允许源 'https://:8080' 访问。

资源

• https://mdn.org.cn/en-US/docs/Web/HTTP/CORS

Laravel

测试

HTTP

• https://laravel.net.cn/docs/5.7/http-tests
• https://laravel.net.cn/docs/5.7/database-testing

关系

学习函数的一个好方法是TDD和Wishful programming。

资源

• https://laracasts.com/series/eloquent-relationships

Eloquent

CRUD (CREATE RETRIVE UPDATE DELETE)

'''资源'''

• https://laravel.net.cn/docs/5.7/eloquent

列表

方法

• Task::all() -> 结果为集合
• Task::where('completed', true)->orderBy('name', 'desc')->take(10)->get();
• Fresh: $freshFlight = $flight->fresh();

资源

• https://laravel.net.cn/docs/5.7/eloquent#retrieving-models

集合

Laravel 集合: https://laravel.net.cn/docs/5.7/collections

显示

$flight = App\Flight::find(1);
$flights = App\Flight::find([1, 2, 3]);
$flight = App\Flight::where('active', 1)->first();
$model = App\Flight::findOrFail(1);

创建

INSERTS: https://laravel.net.cn/docs/5.7/eloquent#inserting-and-updating-models

$flight = new Flight;

        $flight->name = $request->name;

        $flight->save();

批量赋值

OCO: fillable 字段

protected $fillable = ['name'];

$flight = App\Flight::create(['name' => 'Flight 10']);

更新

$flight = App\Flight::find(1);

$flight->name = 'New Flight Name';

$flight->save();

删除

$flight = App\Flight::find(1);

$flight->delete();

API CRUD (JSON) 与 HTML CRUD

CRITERI: 尝试不要与已存在的控制器冲突 -> API 命名空间 (文件夹)

app/Http/Controlloers/Api

ApiResources 控制器

 Route::apiResource('photos', 'API\PhotoController');

php artisan make:controller API/PhotoController --api

不要冲突方法 create 和 edit (没有 PHP/HTML 表单)

CRUD 路由

• CRUD (英文中的 Cru)
• BREAD (英文中的 Pà)
• BROWSE READ EDIT ADD DELETE

推荐视频: https://laracasts.com/series/laravel-from-scratch-2018/episodes/11

路由

• GET /projects (index)
• GET /projects/create (create) -> 创建表单
• GET /projects/1 (show)
• POST /projects (store)
• GET /projects1/edit (edit)
• PATCH /projects/1 (update)
• DELETE /projects/1 (destroy)

Laravel 帮助 (https://laravel.net.cn/docs/5.7/controllers#resource-controllers)

 Route:resource('/projects') 

或

Route::resources([
    'photos' => 'PhotoController',
    'posts' => 'PostController'
]);

控制器

• https://laravel.net.cn/docs/5.7/controllers#resource-controllers

当事情更复杂/更真实时（我们不一定只做 CRUD），我们将遵循 Cruddy By Design 标准

• 更复杂的例子：将任务的完成状态从完成改为未完成，反之亦然

技术

• 为嵌套资源提供一个专用控制器
• 将独立编辑的属性视为单独的资源
• 将连接模型视为它们自己的资源
• 将不同的状态视为不同的资源

资源

• https://www.youtube.com/watch?v=MF0jFKvS4SI
• Github: https://github.com/adamwathan/laracon2017

路由模型绑定

https://laravel.net.cn/docs/5.7/controllers#resource-controllers

动词 URI 动作 路由名称 GET /photos index photos.index GET /photos/create create photos.create POST /photos store photos.store GET /photos/{photo} show photos.show GET /photos/{photo}/edit edit photos.edit PUT/PATCH /photos/{photo} update photos.update DELETE /photos/{photo} destroy photos.destroy

Vue

vue-tasks

工作指南

• https://012.vuejs.org/guide/
• Patro MVVM: https://www.packtpub.com/mapt/book/web_development/9781786469946/2/ch02lvl1sec18/mvvm-architectural-pattern
• 基本数据绑定: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/1
• V-MODEL: 它是如何工作的，相当于: v-model="varName" 等同于 :value="varName" @input="e => varName = e.target.value"。

与以下相同

<input v-bind:value="searchText" v-on:input="searchText = $event.target.value"

• https://vuejs.ac.cn/v2/guide/forms.html
• 懒加载（使用onchange代替output）: https://vuejs.ac.cn/v2/guide/forms.html#lazy
• 自定义
  • https://vuejs.ac.cn/v2/guide/components.html#Using-v-model-on-Components
• 自定义: https://vuejs.ac.cn/v2/guide/components-custom-events.html#Customizing-Component-v-model

Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > })

VUE 开发者工具

列表

• https://vuejs.ac.cn/v2/guide/list.html
• 指令 v-for
• Vue 模板双大括号
• 数组操作: https://vuejs.ac.cn/v2/guide/list.html#Mutation-Methods -- push/pop/shift/unshift/splice/sort/reverse -- filter/ foreach 等数组操作函数

V-IF 和 V-SHOW

显示已完成和未完成的任务

RANGES

CRUD

• https://vuejs.ac.cn/v2/examples/todomvc.html

编辑模式

Laracast 视频测试工具: https://laracasts.com/series/testing-vue/episodes/7

计算属性

• 重要：始终是基于vue（数据）中的数据进行计算。不要在vue未监控的元素或常量上操作。
• 有时可以使用方法来实现与计算属性相同的功能。
• 示例：任务过滤器 -> 完成任务或未完成任务
• https://vuejs.ac.cn/v2/guide/computed.html

组件属性

组件/API/合约之间的通信

父子组件之间的通信

• https://medium.com/@sky790312/about-vue-2-parent-to-child-props-af3b5bb59829

• 更复杂的通信模式：事件总线（Bus）和状态管理（Vuex）

• 属性验证

• Vue 钩子：created/mounted

VUE 事件

• 两种事件类型：内置（click, dblclick, change, input）和自定义
• https://vuejs.ac.cn/v2/guide/events.html
• 组件自定义事件: https://vuejs.ac.cn/v2/guide/components-custom-events.html

插槽

TODO

Axios

• 与API通信
• JavaScript Promise
• 异步编程和JavaScript

-->

tasks_javascript

• 文件夹：tasks:javascript
• tailwind CSS

故障排除。问题解决

CORS。无法加载URL：请求的资源中没有'Access-Control-Allow-Origin'头。源...因此不允许访问。

重要：当客户端/前端和后端/服务器位于同一域名时，不需要CORS。

需要安装Laravel库

https://github.com/barryvdh/laravel-cors

$ composer require barryvdh/laravel-cors

添加中间件

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];