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

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

后端的API就用laravel来做!

组团开发报名哦!

《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 37

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

6个月前 评论
dongzhiyu (楼主) 6个月前
pikalu 6个月前
blankqwq

报名!!!!

6个月前 评论

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

6个月前 评论

报名了

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

antd vue Pro 要收钱的吗?

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

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

6个月前 评论
CrazyZard

报名

6个月前 评论

菜鸡能报名么 :joy:

6个月前 评论

laravel 7 + passport 报名

6个月前 评论

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

6个月前 评论
小李世界

报名

6个月前 评论

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

6个月前 评论
小李世界

什么时候开搞?

6个月前 评论

报个名

6个月前 评论

报名,laravel,vue都会

6个月前 评论

咋报名啊

6个月前 评论

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

6个月前 评论
小李世界

一群人等着发车

6个月前 评论

难道是做外包吗?

6个月前 评论

目标是准备做哪方面的?

6个月前 评论
小李世界

没消息了 :joy:

6个月前 评论

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

帐号管理

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),
        ];
    }

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

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

6个月前 评论
dongzhiyu (楼主) 6个月前
小李世界 6个月前

@flykoala 我要参加react版本的

6个月前 评论
小李世界 6个月前

@Fenguoz 等我整好的,放github上

6个月前 评论

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

6个月前 评论
小李世界 6个月前
黑将军

要用ts吗?

6个月前 评论
李阳

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

5个月前 评论

antd版本的vue一点也不好用

5个月前 评论

报名,有群吗?

3个月前 评论

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