前言
虽然只是一个小项目，但是也可以给我带来不少经验。
在这里不得不感谢一下 @齐子老师，着实让我学到了不少东西。
技术栈
php/laravel/redis/mysql/git
负责部分
- @齐子老师 负责前端+后端
- 我负责后端
Mysql
垂直分表
- 常用的字段和不常用的字段分开
- 变长字段和定长字段分开
通过访问器处理图片链接
// 模型文件
public function getWImgAttribute()
{
return $this->attributes['w_img'] = storageUrl($this->img);
}
// 辅助函数
function storageUrl($path, $disk = null)
{
return \Illuminate\Support\Facades\Storage::disk($disk)->url($path);
}
用 TODO
// TODO: 实现 pay()
Laravel-admin
字段处理
// 后台控制器
// 定义属性
protected $attrs = [
'on_sales' => [
'on' => ['value' => MoonCake::ON_SALE, 'text' => MoonCake::ON_SALES[MoonCake::ON_SALE], 'color' => 'primary'],
'off' => ['value' => MoonCake::SALE_OUT, 'text' => MoonCake::ON_SALES[MoonCake::SALE_OUT], 'color' => 'danger']
]
];
// 在 gird 和 form 中使用 之前定义的属性
$form->switch('on_sale', '是否上架')
->rules('required')
->states($this->attrs['on_sales'])
->default(MoonCake::ON_SALE);
$grid->column('on_sale', __('是否上架'))->switch($this->attrs['on_sales']);
模型类枚举
前端脚手架
app.js
...
const App = new Vue({
// vue实例的dom选择器，这个dom一般写在布局文件里
el: '#app',
/**
* 注意：下面不仅仅引入了在本文件(入口js)中定义的全局 data和 methods
* 还为布局页面和具体的页面(如index.blade.php)预留了 data 和 methods 的位置
* （例如：如果具体的页面定义了 page_data 、 page_methods ，就会将其引入）
*/
data: $.extend(data, (typeof page_data != 'undefined') ? page_data : {}, (typeof global_data != 'undefined') ? global_data : {}),
methods: $.extend(methods, (typeof page_methods != 'undefined') ? page_methods : {}, (typeof global_methods != 'undefined') ? global_methods : {})
});
window.App = App;
layout
...
// 预留给 app.js 实例化 vue 对象的容器
<div id="app"></div>
...
{{--js start， 预留给具体 page 来实现的--}}
@yield('script_s')
<script>
// 布局级 data
var global_data = {}
// 布局级 methods
var global_methods = {
...这里可以定义一些公用函数什么的
}
</script>
<script src="{{ asset('js/app.js') }}"></script>
{{--引入路由，方便 axios 请求--}}
@routes
<script>
/**
* 进行一些初始化操作
*/
$(function () {
... 为所有 axios 请求添加 token
... 为所有 axios 请求添加一个响应拦截器
... 一些事件监听、初始化
});
</script>
{{--js end， 预留给具体 page 来实现的--}}
@yield('script_e')
具体页面
/**
* 把页面级数据、方法定义到 js start (最前面的js)
* 让 app.js(里面调用了这里定义的页面数据、方法) 在后面，这样符合 先声明后使用 的变量原则
*/
@section('script_s')
<script>
var page_data = {};
var page_methods = {};
</script>
@endsection
