WEB前端-React

简单React搭建(umi)

安装脚手架
yarn create(或npx) @umijs/umi-app

安装依赖
yarn

启动项目
yarn start

修改配置
在.umirc.ts中配置layout:{}

获得上面效果

部署发布
yarn build

可以通过tree来查看./dist生成的目录

本地验证
yarn global add serve
serve ./dist

Ant-Design的搭建与使用

安装
yarn create uim or npm create umi
选择
ant-design-pro
目录结构

安装依赖
npm install

启动项目
npm run start

网络请求
使用useRequest，其内置一个hook，通过它获得强大的请求接口能力
默认的接口格式为：

export interface response{
	success:boolean;
	data?:any;
	errorCode?:string;
	errorMessage?:string;
	showType?:number;
	traceId?:string;
	host?:string
}

后端接口路径统一添加/api的前缀
后端接口范式

{
	"success":true,
	"data":{},
	"errorCode":"1001",
	"errorMessage":"error message",
	"showType":2,
	"traceId":"someid",
	"host":"10.1.1.1"
}

添加左侧菜单栏内容
config/routes.ts

添加权限定义
src/access.ts //权限定义文件
config/route.ts // 给路由配置权限

隐藏左侧菜单，导航头，footer

layout:{
	hideMenu: true,//隐藏左侧菜单
    hideNav: true,//隐藏导航头
    hideFooter: true,//隐藏footer
}

新增页面
src/pages下新建*.js和*.less文件，然后在路由菜单上进行注册(记得修改src/locales里面显示信息的内容转换)

Ant-Design项目中，把http请求改成https请求

在根目录的package.json中，把“scripts”中"start"项中加入set HTTPS=true的字样

然后再运行项目就能把http请求改为https请求