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

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

后端的API就用laravel来做!

组团开发报名哦!

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 37

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

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

报名!!!!

9个月前 评论

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

9个月前 评论

报名了

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

antd vue Pro 要收钱的吗?

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

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

8个月前 评论
CrazyZard

报名

8个月前 评论

laravel 7 + passport 报名

8个月前 评论

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

8个月前 评论
小李世界

报名

8个月前 评论

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

8个月前 评论
小李世界

什么时候开搞?

8个月前 评论

报个名

8个月前 评论

报名,laravel,vue都会

8个月前 评论

咋报名啊

8个月前 评论

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

8个月前 评论
小李世界

一群人等着发车

8个月前 评论

难道是做外包吗?

8个月前 评论

目标是准备做哪方面的?

8个月前 评论
小李世界

没消息了 :joy:

8个月前 评论

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

帐号管理

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

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

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

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

@flykoala 我要参加react版本的

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

@Fenguoz 等我整好的,放github上

8个月前 评论

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

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

要用ts吗?

8个月前 评论
李阳

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

8个月前 评论

antd版本的vue一点也不好用

8个月前 评论

报名,有群吗?

6个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!