前言
虽然只是一个小项目,但是也可以给我带来不少经验。
在这里不得不感谢一下 @齐子老师,着实让我学到了不少东西。
技术栈
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