组团开发全栈——用 antd vue Pro 做前端,用 Laravel7.0 做后端 API 支持!

如今的WEB,已经是前后端分离的天下,前端发展的如此迅速,Laravel7.0 兼容前端的VUE和REACT,个人感觉有很多好轮子,比如蚂蚁金服的前端框架 ANTD 的前端三大框架真的不错!

后端的API就用laravel来做!

组团开发报名哦!

《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 36

支持做个一键CRUD的项目出来,类似laravel-admin这样子的,哈哈哈哈,觉得antd的前端用的很舒服

1个月前 评论
dongzhiyu (楼主) 1个月前
pikalu 1个月前

报名!!!!

1个月前 评论

一直在用laravel+antd开发,7.0+4.0有搞头

1个月前 评论

报名了

1个月前 评论
pikalu (作者) 1个月前

antd vue Pro 要收钱的吗?

1个月前 评论
dongzhiyu (楼主) 1个月前

我也正在等Laravel 7 出来,做个全栈项目 :smile: :smile: :smile:

1个月前 评论
CrazyZard

报名

1个月前 评论

菜鸡能报名么 :joy:

1个月前 评论

laravel 7 + passport 报名

1个月前 评论

还是等段时间吧, Laravel 7 才 release, 很多 package 都还不支持...

1个月前 评论
likunyan

报名

1个月前 评论

报名参与。这两东西都使用过。但是具体要做个什么?

1个月前 评论
likunyan

什么时候开搞?

1个月前 评论

报个名

1个月前 评论

报名,laravel,vue都会

1个月前 评论

咋报名啊

1个月前 评论

还有位置没?加我一个!!!

1个月前 评论
likunyan

一群人等着发车

1个月前 评论

难道是做外包吗?

4周前 评论

目标是准备做哪方面的?

4周前 评论
likunyan

没消息了 :joy:

4周前 评论

我结合公司实际情况,写了一个帐号管理系统,先把截图呈上

帐号管理

file

详情

file

域名管理

file

主机管理

file

站点管理

file

前端框架React+AntD4.0,暂时没有用TS(项目有使用Larave-echo-server)

主要重新定义了鉴权模块的处理,来配合后端返回,还有自定义日期组件,因为日期组件接收的时间格式原因,以及其他细节优化。

import React from 'react';
import moment from "moment";
import { DatePicker } from 'antd';

const CustomDatePicker = props => {
  const {value, onChange, ...other} = props;
  const time = value ? moment(value) : null;
  const triggerChange = (_, dateStr) => {
    onChange && onChange(dateStr);
  };

  return (
    <DatePicker
      defaultValue={time}
      onChange={triggerChange}
      {...other}
    />
  )
};

export default CustomDatePicker;

后端主要是Laravel7.0

鉴权使用airlock+laravel-permission

自己写了一个AntRequestMiddleware来转换接收数据和相应

    public function handle($request, Closure $next)
    {
        $request->headers->set('Accept', 'application/json');
        $this->handleQueries($request->query);
        $response = $next($request);
        // 返回解析
        if ($response instanceof JsonResponse) {
            /* @var array $data */
            $data = $response->getData(true);
            $data['success'] = $response->isSuccessful();
            $response->setData($data);
        }

        return $response;
    }

    /**
     * 处理Query参数
     * @param ParameterBag $bag
     */
    protected function handleQueries(ParameterBag $bag)
    {
        // 过滤无效数据
        $params = collect($bag->all())->filter(function ($value) {
            $value = trim($value);
            return $value && !in_array($value, $this->invalid);
        });
        $data = [
            'with' => $params->get('with'),
            'withCount' => $params->get('withCount'),
            'sorter' => $params->get('sorter'),
            'page' => $params->get('current', 1),
            'pageSize' => $params->get('pageSize'),
            'filters' => $params->except(['with', 'withCount', 'sorter', 'current', 'pageSize'])->toArray()
        ];
        $bag->replace($data);
    }

对Laravel中的Resource二次封装,更易懂

基类ApiController

    /**
     * @param $resource
     * @param string|null $collects
     * @return JsonResponse
     */
    protected function toPagination($resource, $collects = null)
    {
        return (new CollectionResource($resource, $collects))->response();
    }

    /**
     * @param $resource
     * @param string|null $collects
     * @return JsonResponse
     */
    protected function toCollection($resource, $collects = null)
    {
        return (new CollectionResource($resource, $collects))->response();
    }

    /**
     * @param $resource
     * @return JsonResponse
     */
    protected function toItem($resource)
    {
        if ($resource instanceof JsonResource) {
            return $resource->response();
        }
        return (new JsonResource($resource))->response();
    }

    /**
     * @param array $data
     * @return JsonResponse
     */
    protected function toArray(array $data)
    {
        return response()->json(['data' => $data]);
    }


    /**
     * 为了返回结构一致
     *
     * @return JsonResponse
     */
    protected function noContent()
    {
        return response()->json([]);
    }

分页部分

    /**
     * @param Request $request
     * @return array
     */
    protected function paginationInformation($request)
    {
        $paginated = $this->resource->resource->toArray();

        return [
            'page' => Arr::get($paginated, 'current_page', 1),
            'total' => Arr::get($paginated, 'total', 0),
            'meta' => $this->antMeta($paginated),
        ];
    }

对于以上只贴了部分代码,懂的人自然懂!!

接下来会引入文档管理,看大家有没有兴趣一起。

3周前 评论
dongzhiyu (楼主) 2周前
likunyan 2周前

@flykoala 我要参加react版本的

3周前 评论
likunyan 2周前

@Fenguoz 等我整好的,放github上

2周前 评论

报名,但是一直好像没动静

2周前 评论
likunyan 2周前
黑将军

要用ts吗?

2周前 评论
李阳

我会,而且比较熟练react和laravel,上车的时候通知一下

1周前 评论

antd版本的vue一点也不好用

1周前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!