UmiJS in der Praxis

1. Konfigurationselemente

• Hash: Konfigurieren Sie, ob die generierte Datei hashein Suffix enthält, das normalerweise für die inkrementelle Veröffentlichung und zur Vermeidung des Browser-Cache-Ladens verwendet wird.hash: true,
• Basis: Legen Sie das Routing-Präfix fest, das normalerweise für die Bereitstellung in Nicht-Root-Verzeichnissen verwendet wird.base: '/dengta/',
• publicPath: Beim Packen fügt Webpack publicPathden Wert vor dem statischen Dateipfad hinzu; publicPath: 'http://xxx.com.cdn'; Statische Ressourcen beziehen sich auf: src des Skripts, href im Link usw.;
• Ausgabepfad: Gibt den Ausgabepfad an. Er wird standardmäßig im Dist-Ordner gepackt und kann über Ausgabepfad geändert werden.
• Titel: Legen Sie den Titel der Website fest.
• Verlauf: Die Anzeigeform der Route history: { type: 'hash' },verwendet einen Hash. Die Route fügt standardmäßig ein # vor dem Pfad hinzu, z. B. localhost:8000/#/path1;
• Ziele: targets: { ie: 11 }, Konfigurieren Sie die Mindestversion des Browsers, die kompatibel sein muss;
• Proxy:

proxy: {
    
    
  '/api': {
    
    
    'target': 'http://jsonplaceholder.typicode.com/',
    'changeOrigin': true,
    'pathRewrite': {
    
     '^/api' : '' },
  },
},

Der Zugriff /api/userskann auf http://jsonplaceholder.typicode.com/usersdie Daten von zugreifen.
Der Proxy wird nur während der Entwicklung wirksam.

• Thema: Konfigurieren Sie das Thema, das eigentlich weniger variabel ist.

theme: {
    
    
  '@primary-color': '#1DA57A',
},

• Routen: Routing-Konfiguration;
• ChainWebpack: Webpack-bezogene Konfiguration;

2. Routenführung

In umi handelt es sich bei Anwendungen um Einzelseitenanwendungen, und Seitenadressensprünge werden auf der Browserseite abgeschlossen . Der Server wird nicht erneut aufgefordert, HTML abzurufen. HTML wird während der Anwendungsinitialisierung nur einmal geladen. Der
Seitenwechsel ist tatsächlich eine Komponente Für einen Switch müssen Sie in der Konfiguration lediglich unterschiedliche Routing-Pfade den entsprechenden Komponenten zuordnen.

Um eine neue Funktionskomponente zu erstellen, geben Sie rsc ein und klicken Sie auf die Tabulatortaste. Der Code der Funktionskomponente wird formatiert;

Wrapper: Hochrangige Komponentenkapselung zum Konfigurieren des Routings; kann beispielsweise für die Berechtigungsüberprüfung auf Routing-Ebene verwendet werden; wenn
der Pfad in /user eintritt, gelangt er nicht direkt in die Benutzerkomponente und muss vor der Verarbeitung durch Wrapper verarbeitet werden entschieden.

export default {
    
    
  routes: [
    {
    
     path: '/user', component: 'user',
      wrappers: [
        '@/wrappers/auth',
      ],
    },
    {
    
     path: '/login', component: 'login' },
  ]
}

export default {
    
    
  routes: [
    {
    
     path: '/login', component: 'login' },
    {
    
    
      path: '/',
      component: '@/layouts/index',
      routes: [
        {
    
     path: '/list', component: 'list' },
        {
    
     path: '/admin', component: 'admin' },
        {
    
     component: '@/pages/404' }, // 如果匹配不到路由，就加载这个组件
      ],
    }, 
  ],
}

Routenführung

{
    
     path: '/user/:id', component: 'user' } // 在组件中，可以通过props拿到id的值
{
    
     path: '/user/:id?', component: 'user' } // id可有可无

3. Seitensprung

In Umi gibt es zwei Möglichkeiten, zwischen Seiten zu springen: deklarativ und imperativ.

Deklarativ: Wird über Link verwendet und normalerweise als React-Komponente verwendet.

import {
    
     Link } from 'umi';

export default () => (
  <Link to="/list">Go to list page</Link>
);

import {
    
     NavLink } from 'umi';
<NavLink to="/list">Go to list page</NavLink>
<NavLink to="/cover">Go to cover page</NavLink>

// 使用NavLink，被激活的组件拥有一个class，名叫active
.active {
    
    
	color: #13c2c2;
	font-size: 22px;
}

Imperativ: im Verlauf der Geschichte verwendet, üblicherweise in der Ereignisverarbeitung genannt;

import {
    
     history } from 'umi';

function goToListPage() {
    
    
  history.push('/list');
}

4. HTML-Vorlage

Erstellen Sie eine neue Datei src/pages/document.ejs. Umi stimmt zu, dass diese Datei, wenn sie vorhanden ist, als Standardvorlage verwendet wird, z. B.:
EJS-Vorlagen-Engine
, BootCDN, Ressourcen eines Drittanbieters,
Bootstrap, einer der Vorlagenstile

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Your App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

5. Scheindaten

https://umijs.org/plugins/plugin-request
In der package.json-Datei: Suchen Sie nach @umijs und klicken Sie darauf, um das Anforderungs-Plug-in einzugeben,
oder suchen Sie in der Navigationsleiste: Dokumentation, Konfiguration, API, Anleitung, Plug -in ;

im Scheinordner Schreiben Sie die Schnittstelle und fordern Sie die Schnittstelle über useRequest an

6. DvaJS

https://umijs.org/zh-CN/plugins/plugin-dva

Datenflusslösung:

import {
    
     request } from 'umi';

export default {
    
    
  // 调用model的时候，通过命名空间调用，不要和其他的model同名
  namespace: 'tags',

  // 状态，和react中的state类似，和redux中保存的state一样
  state: {
    
    
    tagsList: [],
  },

  // 更新state
  reducers: {
    
    
    setTagsList(state, {
    
     data }) {
    
    
      return {
    
    ...state, tagsList: data}
    }
  },

  // 调用服务端接口，获取数据
  effects: {
    
    
    *fetchTags({
    
     payload, callback }, {
    
     put, call }) {
    
    
      // 获取tags数据
      const res = yield call(request, '/api/tags', {
    
     ...payload });
      // 调用reducer
      yield put({
    
    
        type: 'setTagsList',
        data: res,
      });
    }
  },
}

Komponenten:

import {
    
     connect } from 'umi';
const Dva = (props) => {
    
    
	const {
    
     tags, loading, dispatch } = props;
	useEffect(() => {
    
    
	  dispatch({
    
    
	    type: 'tags/fetchTags', // 命名空间/方法
	    payload: null,
	  })
	}, []);
	console.log('tags', tags);
	console.log('loading', loading);
	return (
		<div>Dva的应用</div>
	);
};

export default connect (({
    
    tags, loading}) => ({
    
    tags, loading}))(Dva);
// 会将tags作为props传给Dva；

7. Laufzeitkonfiguration

Acht, Umi UI

config „start:umi-ui“: „UMI_UI=1 umi dev“

Wählen Sie beim Ausführen npm start:umi-ui aus

9. Kapselungsanforderungsmethode

Abfangjäger anfordern
https://github.com/umijs/umi-request#interceptor

Wenn Sie eine Anfrage senden, verwenden Sie request, um sie selbst zu kapseln (mit Request Interceptor und Response Interceptor):

import request from 'umi-request';
import {
    
     message } from 'antd';

// 请求拦截器
request.interceptors.request.use((url, options) => {
    
    
  return {
    
    
    url: `${
      
      url}`,
    options: {
    
     ...options, interceptors: true, headers: {
    
    Hello: 'hello'} },
    // 这里的headers是在请求头中，加了Hello字段
  };
});

// 响应拦截器
request.interceptors.response.use(response => {
    
    
  if (response.status > 400) {
    
    
	  const codeMaps = {
    
    
	    404: '未找到',
	    502: '网关错误。',
	    503: '服务不可用，服务器暂时过载或维护。',
	    504: '网关超时。',
	  };
	  message.error(codeMaps[response.status]);
  }
  return response;
});

export default Zidingrequest;

Zitat gekapseltZidingrequest

import Zidingrequest from '../utils/request';

export const getTags = () => {
    
    
	return Zidingrequest('/api/tags');
};

十、Ant Design PRO

https://pro.ant.design/zh-CN/docs/getting-started