• 欢迎来到我的博客
  • [email protected]

* 好多味商城项目实战经验

学习笔记 tianlan 12个月前 (05-16) 599次浏览 0个评论 扫描二维码
文章目录[隐藏]

前言

虽然只是一个小项目,但是也可以给我带来不少经验。

在这里不得不感谢一下 @齐子老师,着实让我学到了不少东西。

技术栈

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

天蓝, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:* 好多味商城项目实战经验
喜欢 (0)
[[email protected]]
分享 (0)

您必须 登录 才能发表评论!