# hooks **Repository Path**: SessionKey_966/hooks ## Basic Information - **Project Name**: hooks - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-09-02 - **Last Updated**: 2024-09-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

函数式全栈框架

"零" Api & 类型安全 & 全栈套件 & 强大后端

在阿里巴巴，有 2800+ 全栈应用基于 Midway Hooks 开发（2022.01）

[English](./README.md) | 简体中文 ## ✨ 特性 - ☁️ 最大化生产力 & 开发者体验，支持开发全栈应用 & Api 服务 - ⚡️ 开箱即用的全栈套件，支持 React/Vue/Svelte...多框架 - 🌈 "零" API，全栈应用下导入函数直接调用接口，抹去胶水层 - ⛑️ 类型安全，从前端到后端使用同一份类型定义，提前发现错误 - 🌍 函数式编程，前后端统一使用 `Hooks` - ⚙️ 支持 Webpack / Vite 前端工程体系接入 - ✈️ 部署至 Server & Serverless - 🛡 基于超强的 Node.js 框架 Midway，支撑企业级应用开发 ## 🔨 预览

Backend(Midway Hooks)	Frontend(React)
_{```tsx // src/api/index.ts import { Api, Get, Post, Validate, Query, useContext, } from '@midwayjs/hooks'; import { z } from 'zod'; import db from './database'; export const getArticles = Api( Get(), Query<{ page: string; per_page: string }>(), async () => { const ctx = useContext(); const articles = await db.articles.find({ page: ctx.query.page, per_page: ctx.query.per_page, }); return articles; } ); const ArticleSchema = z.object({ title: z.string().min(3).max(16), content: z.string().min(1), }); export const createArticle = Api( Post(), Validate(ArticleSchema), async (article: z.infer) => { const newArticle = await db.articles.create(article); return { id: newArticle.id, }; } ); ```}	_{```ts // src/pages/articles.tsx import { getArticles } from '../api'; import { useRequest } from 'ahooks'; import ArticleList from './components/ArticleList'; export default () => { const { data } = useRequest(() => getArticles({ query: { page: '1', per_page: '10', }, }) ); return ; }; // src/pages/new.tsx import { createArticle } from '../api'; import Editor from './components/Editor'; import { useState } from 'react'; export default () => { const [loading, setLoading] = useState(false); const handleSubmit = async (article) => { setLoading(true); const { id } = await createArticle(article); setLoading(false); location.href = `/articles/${id}`; }; return ; }; ```}

Backend(Midway Hooks)

Frontend(React)

_{```tsx
// src/api/index.ts
import {
Api,
Get,
Post,
Validate,
Query,
useContext,
} from '@midwayjs/hooks';
import { z } from 'zod';
import db from './database';

export const getArticles = Api(
Get(),
Query<{ page: string; per_page: string }>(),
async () => {
const ctx = useContext();

const articles = await db.articles.find({
page: ctx.query.page,
per_page: ctx.query.per_page,
});

return articles;
}
);

const ArticleSchema = z.object({
title: z.string().min(3).max(16),
content: z.string().min(1),
});

export const createArticle = Api(
Post(),
Validate(ArticleSchema),
async (article: z.infer) => {
const newArticle = await db.articles.create(article);
return {
id: newArticle.id,
};
}
);
```}

_{```ts
// src/pages/articles.tsx
import { getArticles } from '../api';
import { useRequest } from 'ahooks';
import ArticleList from './components/ArticleList';

export default () => {
const { data } = useRequest(() =>
getArticles({
query: {
page: '1',
per_page: '10',
},
})
);

return ;
};

// src/pages/new.tsx
import { createArticle } from '../api';
import Editor from './components/Editor';
import { useState } from 'react';

export default () => {
const [loading, setLoading] = useState(false);

const handleSubmit = async (article) => {
setLoading(true);
const { id } = await createArticle(article);
setLoading(false);
location.href = `/articles/${id}`;
};

return ;
};
```}

## 🧩 Templates Midway Hooks 提供如下模版： - Fullstack - [react](https://github.com/midwayjs/hooks/blob/main/examples/react) - [vue](https://github.com/midwayjs/hooks/blob/main/examples/vue) - [prisma](https://github.com/midwayjs/hooks/blob/main/examples/prisma) - [react-with-upload](https://github.com/midwayjs/hooks/blob/main/examples/react-with-upload) - Serverless - [react-faas](https://github.com/midwayjs/hooks/blob/main/examples/react-faas) - [vue-faas](https://github.com/midwayjs/hooks/blob/main/examples/vue-faas) - Api Server - [api](https://github.com/midwayjs/hooks/blob/main/examples/api) - [api-bundle](https://github.com/midwayjs/hooks/blob/main/examples/api-bundle) 你可以使用下面的命令快速创建应用: ```bash npx degit https://github.com/midwayjs/hooks/examples/ ``` 以 React 全栈应用为例: ```bash npx degit https://github.com/midwayjs/hooks/examples/react ``` ## Contribute 1. Fork 仓库! 2. 创建分支: `git checkout -b my-new-feature` 3. 提交改动: `git commit -am 'Add some feature'` 4. 推送到刚才创建的分支: `git push origin my-new-feature` 5. 提交 Pull Request :D 我们使用 pnpm 管理项目 - install dependencies ```bash $ pnpm install ``` - build ```bash $ pnpm build ``` - watch ```bash $ pnpm watch ``` - test ```bash $ pnpm test ``` ## 关于我们 [Alibaba Open Source](https://opensource.alibaba.com/)