Приложения Jamstack легко развить и имеют отличную производительность, но есть улов-они в значительной степени предварительно и статичны. Однако они не должны быть! Статические приложения имеют смысл для фиксированных частей вашего сайта, но приложения Jamstack могут также включать динамические интерактивные компоненты.
В этом практическом учебнике мы рассмотрим пошаговый подход, как добавить электронную таблицу FromStjs в приложение Jamstack, созданное с Next.js. Следующая платформа React Next.js обеспечивает серверную сторону предварительное разрешение вне коробки.
Начиная
Перед началом работы убедитесь, что у вас установлен Node.js вместе с NPM. В противном случае установите их, используя один из этих методов:
- Получите правильную двоичную установку для вашей операционной системы из Официальный сайт Анкет
- Используйте официальный менеджер пакетов для вашей системы.
- Используйте диспетчер версий узла, такой как nvm Анкет
Давайте начнем с создания приложения Next.js на основе этого Шаблон Это включает в себя Bootstrap 4 для стилей CSS. Для этого перейдите к новому интерфейсу командной строки (CLI) и запустите следующую команду:
npx create-next-app --example with-react-bootstrap nextspreadjsdemo
npx утилита Выполняет пакеты узлов Анкет Он поставляется в комплекте с NPM из версии 5.2 и выше.
Благодаря NPX, вам не нужно устанавливать Create-next-App Анкет Однако, если вы предпочитаете установить Create-Next-App в вашу систему, вместо этого запустите следующую команду:
npm install create-next-app --global
Затем перейдите в папку своего проекта и запустите сервер разработки, используя следующие команды:
cd nextspreadjsdemo npm run dev
Затем перейдите к http://localhost: 3000/ с вашим веб -браузером, чтобы увидеть, как ваше приложение работает. Это скриншот нашего приложения на данный момент:
Это пользовательский интерфейс (пользовательский интерфейс) с минимальным стилем с картами начальной загрузки. Мы можем отредактировать его из файла страниц нашего проекта/index.js.
Добавление электронной таблицы
Теперь, когда мы настроили наше приложение Next.js, давайте посмотрим на пошаговый шаг, как настроить FrestJS в нашем приложении Jamstack.
Перейдите к новому интерфейсу командной строки и запустите следующую команду из папки вашего проекта, чтобы установить @Grapecity/Spread-Sheets-React от NPM. Этот пакет предоставляет спреда React Pabper Components:
npm install @grapecity/spread-sheets-react
Далее создайте файл компонентов/таблица.
mkdir components && cd components touch SpreadSheet.jsx
После того, как вы создали файл, откройте файл Components/Spreadsheet.jsx и добавьте следующий импорт:
import React, { useState } from "react";
import { SpreadSheets, Worksheet, Column } from "@grapecity/spread-sheets-react";
import * as GC from "@grapecity/spread-sheets";
Затем добавьте следующую строку, чтобы настроить лицензию на оценку:
GC.Spread.Sheets.LicenseKey = window["evalKey_V14"];
Далее, определите следующую функцию:
export default function SpreadSheet() {
const [spreadBackColor, setSpreadBackColor] = useState('aliceblue');
const [sheetName, setSheetName] = useState('Empolyees');
const [hostStyle, setHostStyle] = useState({
width: '100%',
height: '700px'
});
const dataArr = [
{
"jobTitleName":"Developer",
"preferredFullName":"Romin Irani",
"region":"CA",
"phoneNumber":"408-1234567"
},
{
"jobTitleName":"Developer",
"preferredFullName":"Neil Irani",
"region":"CA",
"phoneNumber":"408-1111111"
},
{
"jobTitleName":"Program Directory",
"preferredFullName":"Tom Hanks",
"region":"CA",
"phoneNumber":"408-2222222"
}
];
const [data, setData] = useState(dataArr);
const [columnWidth, setColumnWidth] = useState(200);
return (
);
}
Мы используем Usestate Hook Чтобы определить некоторые переменные состояния, чтобы содержать имя электронной таблицы, цвет, ширину столбца, стиль и данные. Затем мы создаем нашу электронную таблицу, используя электронные таблицы, рабочие листы и компоненты реакции колонки. Это один из способов создания электронных таблиц с распространением и реагировать. В следующем разделе мы рассмотрим второй путь, используя методы JavaScript.
Далее откройте файл страниц/index.jsx и обновите его следующим образом:
import { Container, Row, Col } from 'react-bootstrap';
import dynamic from "next/dynamic";
const SpreadSheet = dynamic(
() => {
return import("../components/SpreadSheet");
},
{ ssr: false }
);
export default function Home() {
return (
Adding Spreadsheets to a Jamstack Application
Next.JS + SpreadJS demo
)
}
Теперь откройте файл Style/index.css и добавьте следующую строку:
@import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
Это импортирует распространение CSS в наше приложение.
Обратите внимание, что если вы импортируете компонент следующим образом:
import SpreadSheet from "../components/SpreadSheet";
Вы получаете ошибку: Ссылкаерр: документ не определен.
Это потому, что FrestJS отвечает на документ объект, который доступен только в браузерах. В node.js документ не определен. Чтобы избежать этой ошибки, мы должны сообщить nest.js отображать этот компонент на клиенте, а не на сервере, используя:
const SpreadSheet = dynamic(
() => {
return import("../components/SpreadSheet");
},
{ ssr: false }
);
Есть много способов Определить компонент только на стороне клиента в next.js Анкет В нашем примере мы импортируем наш компонент электронной таблицы, используя динамический импорт и установить SRR: false, поэтому наш компонент не будет рендеринг на стороне сервера.
Загрузка данных из файла JSON
Теперь, когда мы видели, как отобразить электронную таблицу с данными, загруженными из массива JavaScript, давайте посмотрим, как загрузить данные из файла JSON. Вернитесь в файл компонентов/таблица. JSX и обновите его следующим образом:
const [data, setData] = useState([]);
const [columnWidth, setColumnWidth] = useState(200);
useEffect(()=>{
async function getData(){
const res = await fetch("data.json");
const data = await res.json();
setData(data.employees);
console.log(data);
}
getData();
},[]);
Сначала мы определяем две переменные состояния: данные и протяженность столбца, используя Usestate Hook. Далее, внутри Использовать крючок , мы используем Метод избрать JavaScript с Async/wait, чтобы получить JSON файл данных. Затем мы назначаем извлеченные данные с нашей переменной состояния данных.
Затем, внутри публичной/папки, создайте файл data.json и добавьте следующие данные:
{
"employees": [
{
"jobTitleName": "Developer",
"preferredFullName": "Romin Irani",
"region": "CA",
"phoneNumber": "408-1234567"
},
{
"jobTitleName": "Developer",
"preferredFullName": "Neil Irani",
"region": "CA",
"phoneNumber": "408-1111111"
},
{
"jobTitleName": "Program Directory",
"preferredFullName": "Tom Hanks",
"region": "CA",
"phoneNumber": "408-2222222"
}
]
}
На данный момент ваше приложение должно выглядеть так:
Добавление диаграмм
Теперь давайте добавим диаграммы и визуализации в наше приложение. Подобно Excel, FrestJS поддерживает создание и отображение Диаграммы Использование данных электронной таблицы. Вы можете отображать различные типы двумерных диаграмм и настраивать их элементы, чтобы пользователи могли эффективно визуализировать данные.
Вы можете использовать диаграммы для анализа тенденций и шаблонов в наборах данных. Предположим, у нас есть данные о продажах в течение последних четырех лет. Используя диаграммы, мы можем легко увидеть, какой год больше продаж.
Благодаря функции диаграммы в FirstJS вы можете визуализировать данные в своих приложениях, сохраняя при этом все элементы диаграммы синхронизацией с помощью нативной поддержки привязки данных React. Перед использованием диаграмм в нашей электронной таблице нам сначала нужно расширить FrestJs с поддержкой диаграмм, используя @grapecity/rast-sheets-чарты упаковка.
Перейдите к своему интерфейсу командной строки и запустите следующую команду из корневой папки вашего проекта:
npm install @grapecity/spread-sheets-charts
Теперь вернитесь в файл компонентов/таблица.
import '@grapecity/spread-sheets-charts';
Затем добавьте второй рабочий лист, чтобы отобразить диаграмму и установить рабочее событие следующим образом:
...
Далее добавьте следующий код в компонент электронной таблицы:
let dataArray = [
["", '2012', '2013', '2014', '2015', '2016', '2017'],
["Chrome", 0.3782, 0.4663, 0.4966, 0.5689, 0.6230, 0.6360],
["FireFox", 0.2284, 0.2030, 0.1801, 0.1560, 0.1531, 0.1304],
["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.1073, 0.0834],
];
const workbookInit = (spread) => {
let chartSheet = spread.getSheet(1);
chartSheet.setArray(0, 0, dataArray);
chartSheet.suspendPaint();
let chart = chartSheet.charts.add(('Chart1'), GC.Spread.Sheets.Charts.ChartType.line, 30, 85, 800, 350, "A1:H4", GC.Spread.Sheets.Charts.RowCol.rows);
spread.resumePaint();
};
Рабочая книга инициализированное событие стреляет после инициализации распространения. Мы можем получить доступ к инициализированному объекту электронной таблицы в назначенном обратном вызове событий.
Во -первых, определите массив данных, содержащий использование браузера в течение шести лет. Затем определите функцию рабочей книги.
Мы связываем функцию WorkbookInit с рабочим инициализованным событием, чтобы ссылаться на электронную таблицу. Затем мы получаем доступ к листу, где хотим отобразить диаграмму, используя метод GetSheet. Мы используем метод SetArray листа для установки браузера Использовать данные и метод диаграмм. Результат выглядит так:
Вывод
На протяжении всей этой статьи мы узнали, как быстро и легко добавлять электронные таблицы в приложение Jamstack Next.js, используя FrestJS. Вы можете получить полный код проекта из этого GitHub Repository Анкет
Теперь, когда вы знаете, как добавить электронные таблицы в свои приложения Jamstack, вы можете сделать так много! Вы можете использовать электронные таблицы и диаграммы, чтобы помочь вашим клиентам понять их ежемесячное использование учетной записи, помочь вашим пользователям визуализировать продажи недвижимости в своем районе или даже помочь вашим менеджерам увидеть, сколько времени вы сэкономили подключение FrestJS в свое приложение.
Оригинал: «https://dev.to/grapecity/adding-spreadsheets-to-a-jamstack-application-1b7f»