English | 简体中文
An out-of-box UI solution for abp vnext as a React boilerplate.
- 📦 Out of the Box, Based on Umi and Antd Pro，Just configure the back-end service address to get started。It also provides a set of integrated plug-ins for ABP,Realize the seamless docking with ABP。
# install the cli
npm i @potatoabp/cli -gthen
# execute in an empty folder
potatochoose application
? Select the boilerplate type (Use arrow keys)
> application - Create project with a abp vnext react front-end templatetemplate will be installed automatically
Install Dependencies
$ npm installfirst update the service address in src/app.ts
// ... others
export const config: AbpConfig = {
request: {
apis: {
default: {
url: 'https://localhost:44355',
rootNamespace: 'BookStore',
},
},
},
oauthConfig: {
scope: '',
clientId: '',
},
};second update the oauthconfig in src/services/login.ts(this is temporary)
// ... others
export async function fakeAccountLogin(params: LoginParamsType) {
const urlencoded = new URLSearchParams();
urlencoded.append('password', params.password);
urlencoded.append('username', params.username);
urlencoded.append('grant_type', 'password');
urlencoded.append('client_id', 'BookStore_App');
urlencoded.append('client_secret', '1q2w3e*');
urlencoded.append('scope', 'BookStore');
return request('/connect/token', {
method: 'POST',
data: urlencoded,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
}then
$ npm startThis will automatically open http://localhost:8000.
- useLocalization
import { useLocalization } from 'umi';
const locale = useLocalization();
locale('AbpIdentity::Permissions');- useResource
import { usePermission } from 'umi';
const isGranted = usePermission();
isGranted('abp.user.create');- usePermission
Built-in Account and Application layout pages See this config/routes.ts file to learn more
export default [
{
name: 'account',
// set layout account or application
layout: 'account',
path: '/account/login',
component: './User/login',
},
];in the app.ts
export const config: AbpConfig = {
request: {
apis: {
default: {
url: 'https://localhost:44355',
rootNamespace: 'BookStore',
},
},
TenantManagement: {
url: 'https://localhost:44370',
rootNamespace: 'TenantManagement',
},
},
};import { request } from 'umi';
export async function outLogin() {
return request('/api/login/outLogin', { apiName: 'TenantManagement' });
}- module management and addition
- generate proxy
- others...
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent