Платформа управления фронтендом для бэкенд-разработки

Предпосылка: подходит для студентов, изучающих бэкенд, которые хотят создать платформу управления бэкендом.

Я узнал, что многим RD необходимо поддерживать как front-end, так и back-end разработку в процессе разработки проектов (особенно платформы управления). Большинство студентов, изучающих back-end, обычно имеют дело с данными, но из-за различных технологий выполнение front-end часто вызывает больше или меньше проблем у back-end гуру. В сочетании с развитием фронтенд-технологий использование React и Vue увеличило стоимость обучения. Ранее я разобрался, как серверная часть запускает внешний проект (платформа управления). Я надеюсь помочь вам создать интерфейсную часть платформы управления с 0 до 1.

Выбор технологии: ant design pro (antd pro) (метод построения управленческой платформы, предоставленный Ant Financial)

Причина выбора:

Поскольку технологический стек представляет собой реакцию, большинство из них соответствуют привычкам программистов к обработке внутренних данных, а реакция также является одной из самых популярных технологий внешнего интерфейса. Это удобно для последующего фронтенда.
Другой — представить дизайн Ant, включающий различные компоненты, что избавит всех от необходимости писать css.
Каркас платформы управления генерируется напрямую, и вам не нужно создавать его с нуля. Содержит различные элементы управления, такие как маршрутизация и разрешения.
В большинстве конструкций платформ управления используется инфраструктура Ant Design Pro;

Далее возьмем за основу antd pro, поговорим о работе antd pro, и попутно узнаем о методе написания react.

Примечание. Концепции внешнего интерфейса, требующие нового понимания

Стрелочные функции: (argu1, argu2, ...) => {} могут быть эквивалентны функции (argu1, argu2) {}
let/const: Новое определение переменной, похожее на var, можно понять глубже.

1. Создайте среду реагирования

Шаг 1: Разверните интерфейсную среду (среду узла)

среда узла (рекомендуется использовать nvm для управления и установки узла)

установить нвм

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

Связать глобальные переменные

touch ~/.bash_profile

установить узел

nvm install 10.4.0

Проверьте, прошла ли установка успешно

node --version

Шаг 2: Используйте umi для создания реактивного проекта

Обзор: метод установки pro.ant.design интегрирован в umi, а среду реагирования можно установить с помощью следующей команды.

Официальный сайт:pro.Anta.design/docs/повседневная физическая энергия…

Создать проект с umi

mkdir first-fe-demo
npm create umi

выберите муравей-дизайн-про

Шаг 3: Запуск проекта

Примечание. Всем учащимся, работающим с этим проектом, необходимо установить файлы зависимостей на первом этапе получения проекта, и вы можете установить их один раз.

Установить зависимости

npm install

Стартовый проект

npm run start

2. Анализ ant-design-pro

1. Обзор каталога файлов

config: элемент конфигурации
- config/config.js: конфигурация маршрутизации
- config/defaultSetting: настройки стиля платформы
- config/proxy: отладка конфигурации IP
src: место записи кода
- src/assets: разместить статические файлы, похожие на изображения
- src/components: общие компоненты
- src/layout: шаблон проекта (общий для нескольких страниц)
- источник/страницы: страницы
- src/service: избыточный запрос данных (неважно)
- src/models: redux (пофиг)
- src/utils: общие методы

2. Наследование шаблонов (src/layout)

Все шаблоны унаследованы от src/layouts/BasicLayout.jsx, если вы хотите изменить стиль фрейма, измените этот файл Содержимое в красном поле определено в указанном выше файле.

3. Как написать реакцию

1. Знание реакции

Есть четыре ключевых момента: состояние/setState/props/жизненный цикл (помните эти четыре, можно использовать реакцию)

состояние: все в компоненте обновляется при изменении состояния
setState: единственный способ изменить состояние, вы можете добавить функцию обратного вызова, this.setState({xxx: 123}, function(){})
props: компоненты передают данные друг другу, геттер использует метод this.props.xxx (то же самое, что и состояние, но значение не может быть установлено, его может изменить только пассер, меняющий состояние)
Жизненный цикл: включая объявление, предварительный рендеринг, выбор и отмену регистрации компонентов. Выберите правильное время для вызова метода или обработки кода. Наиболее часто используемые из них следующие. Студенты, изучающие бэкэнд, могут справиться с большинством потребностей разработки, помня эти два.
- конструктор: определяет начальное состояние
- componentDidMount: страница запрашивает данные, выполняет операции и т. д.

2. Шаблон страницы или компонента

Каждый новый проект может копировать этот файл как стартовый (рекомендуется копировать последний, этот документ будет добавлен позже) Создайте новую папку demo в src/page/ и создайте два файла: index.js, style.less

/* index.js */
import React, { Component } from 'react';
import { connect } from 'dva';
// 继承全局模板
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';

class Index extends Component {
  // 声明组件，放置state属性
  constructor(props) {
    super(props);
    this.state = {
      show: 'hello world',
    }
  }

  // 生命周期部分，常用componentDidMount，详见https://www.jianshu.com/p/46022f1cbbb3
  componentDidMount() {
    this.addRd();
  }

  // 函数声明部分，备注 (a,b,c) => {} 的意义是 function(a,b,c) {}
  addRd = () => {
    setTimeout(() => {
      this.setState({
        show: 'hello RDs',
      }, alert('success'));
    }, 2000);
  } 
  
  // 页面渲染
  render() {
    return (
      <div className={styles.red}>
        {this.state.show}
      </div>
    );
  }
}

export default connect()(Index);

3. Конфигурация внешней маршрутизации

Расположение конфигурации маршрутизации: файл config/config.js

Файл маршрутизации будет располагаться списком слева, а также может быть многоуровневым, как в подменю слева.

4. Откройте страницу

Как и на рисунке выше, после того, как мы настроим новый путь, указанный стрелкой (скопируйте приветствие), и сохраним его, откройте его.http://localhost:8000/welcome2

Примечания: По умолчанию порт будет 8000. Если обнаружится, что машина занята 8000, новый порт будет автоматически указан и уведомлен при запуске проекта.Это может быть 8001 или другой.Пожалуйста, проверьте вывод информации журнала когда запуск завершен.

Проект работает нормально (последующие изменения перезапускать не нужно, в проекте предусмотрена функция горячего обновления)

5. Совместная отладка с бэкендом

Запустите серверную службу

Настройте адрес серверной службы в config/proxy.js. Метод настройки аналогичен nginx. Обратите внимание, что серверная конфигурация cros открыта для всех доменов.

Как показано на рисунке, например, мы запустили веб-сервис под локальным портом 3000 и написали интерфейс /api/test. Внешний проект должен отправлять все запросы из /api в веб-проект через порт 3000.

Используйте внешний адрес для прямого доступа к интерфейсу, например: localhost:8000/api/test, содержимое внутреннего интерфейса должно возвращаться нормально.

Запустите совместную отладку кода, добавьте код на предыдущую демонстрационную страницу и обратите внимание на следующие два момента:

Вводится путем добавления запроса; запрос — это инструмент запроса, и его функция аналогична предыдущему ajax;
Метод запроса — request().then(), затем запишите содержимое операции после запроса;

/* index.js */
import React, { Component } from 'react';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
// 引入 request（请求接口方法）
import request from '@/utils/request';
import styles from './style.less';

class Index extends Component {
  // 声明组件，放置state属性
  constructor(props) {
    super(props);
    this.state = {
      show: 'hello world',
    }
  }

  // 生命周期部分，常用componentDidMount，详见 https://www.jianshu.com/p/46022f1cbbb3
  componentDidMount() {
    // this.addRd();
    // 【新加】页面加载完成后，请求需要的数据
    this.getData();
  }

  // 函数声明部分
  addRd () {
    setTimeout(() => {
      this.setState({
        show: 'hello RDs',
      }, () => {alert('success')});
    }, 2000);
  }

  // 【新加】请求后端服务，返回数据
  getData = () => {
    request('/api/test?mount=1', {
      method: 'GET',
      data: {
        mount: 1,
      },
    }).then((res) => {
       this.setState({show: res.data});   
    });
  }

  render() {
    return (
      <div className={styles.red}>
        {this.state.show}
      </div>
    );
  }
}

export default connect()(Index);

6. Проверка входа

См. src/layouts/SecurityLayout.jsx

В методе componentDidMount напишите метод запроса входа в систему; во-первых, серверный проект должен добавить, следует ли входить в систему или нет.Вы можете проверить, входить ли в систему, поэтому вы можете выбрать вход на страницу функции или перейти к входу в систему страница для авторизации;

Ввести запрос (такой же, как описано в 5)

Напишите метод входа для запроса входа и сброса состояния входа isReady:

componentDidMount() {
  request('/api/islogin', {}).then((res) => {
    if(res.success) {
      this.setState({
        isReady: true,
      });  
    } else {
      location.href = "";
    }
  })
}

В-четвертых, введение antd (компоненты стиля)

Пролистайте документацию antd, документацию Api:Anta.design/docs/реагировать/…
Выберите компонент, который вы хотите использовать, и скопируйте сгенерированный код ниже компонента:

Пример: выберите поле ввода вводаAnta.design/components/…

// 文件头部引入组件
import {Input} from 'antd'

// render方法中添加对应HTML代码
  render() {
    return (
      <div className={styles.red}>
        <Input placeholder="Basic usage" />
      </div>
     )
  }

Добавить событие То, как позволить пользователям инициировать взаимодействие компонентов, должно быть неотделимо от событий.Ниже приведен метод привязки событий в реакции. Основные свойства указаны на + собственное имя события js (первая буква заглавная)

Общие свойства событий: onClick, onChange, onInput, onSelect

Определите метод события: onClick={() => {return ''}}
```
render() {
  return (
    <div className={styles.red}>
      {this.state.show}
      <Input placeholder="Basic usage" onChange={(e) => {
        this.setState({inputText: e.target.value})
      }} />
      <p>输入内容：{this.state.inputText}</p>
    </div>
   )
}
```

5. Упаковка проекта

Выполнить в корневом каталоге проекта:

npm run build

Результаты:

При этом после упаковки в корневом каталоге проекта будет дополнительная папка ./dist, где хранятся скомпилированные файлы фронтенда.

Разверните папку dist на сервере, и проект готов.

** Ссылка: Начните работу с проектом Java