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

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

后端的 API 就用 laravel 来做!

组团开发报名哦!

《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 37

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

5年前 评论
dongzhiyu (楼主) 5年前
pikalu 5年前
blankqwq

报名!!!!

5年前 评论

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

5年前 评论

报名了

5年前 评论
pikalu (作者) 5年前

antd vue Pro 要收钱的吗?

5年前 评论
dongzhiyu (楼主) 5年前

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

5年前 评论
CrazyZard

报名

5年前 评论

laravel 7 + passport 报名

5年前 评论

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

5年前 评论

报名

5年前 评论

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

5年前 评论

什么时候开搞?

5年前 评论

报名,laravel,vue 都会

5年前 评论

咋报名啊

5年前 评论

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

5年前 评论

一群人等着发车

5年前 评论

难道是做外包吗?

5年前 评论

目标是准备做哪方面的?

5年前 评论

没消息了 :joy:

5年前 评论

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

帐号管理

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

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

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

5年前 评论
dongzhiyu (楼主) 5年前
小李世界 5年前
Fenguoz

@flykoala 我要参加 react 版本的

5年前 评论
小李世界 5年前

@Fenguoz 等我整好的,放 github 上

5年前 评论

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

5年前 评论
小李世界 5年前
黑将军

要用 ts 吗?

5年前 评论
李阳

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

5年前 评论
chenzx

antd 版本的 vue 一点也不好用

5年前 评论

报名,有群吗?

5年前 评论