Изучите это (Nextjs), интерфейс может быть таким же, как у программиста PHP

PHP внешний интерфейс JavaScript React.js
Изучите это (Nextjs), интерфейс может быть таким же, как у программиста PHP

Говоря, что PHP — это «лучший» язык в мире, я не PHPer, поэтому сегодня наш главный герой — не PHP, а внешний интерфейс (Nextjs). Итак, вопрос в том, что такое Nextjs?

Next.js is a lightweight framework for static and server-rendered applications.

Проще говоря: Next.js — это фреймворк для рендеринга на стороне сервера, основанный на React. Итак, сегодня мы поговорим о реализации Next.js.

представлять

В этом проекте реализована схема изоморфизма React с использованием технологии Nextjs. Используя Nodejs для создания службы в сочетании с базой данных Mongoose, реализована простая система блогов.
Также см. проектверсия v1.0 через шаблон Ejsреализация,Похожие статьи >>.

Техническая реализация

  • Node > 8.x
  • Express
  • mongoose
  • react > 16.x
  • Nextjs
  • sass
  • isomorphic-unfetch

Структура каталогов

├─server # 服务
│  ├─controllers # 控制器
│  ├─dto  #
│  ├─models # 模型
│  ├─routes  # 路由
│  └─service
├─pages # 页面
│  ├─…… #
│  └─index.js # 主页面
├─compontents # 组件
│  └─#……
├─config # 配置文件
│  └─#……
├─assets # 静态资源
│  └─#……
├─build # 发布目录
│  └─ #……
├─next.config.js # next配置文件
├─package.json
├─postcss.config.js # postcss配置
├─server.js # 服务入口文件
└─.babelrc

как использовать

В основном для моего текущего проекта >>node-blog-appДавайте поговорим о том, как его использовать:

Install

git clone https://github.com/Hancoson/node-blog-app.git

yarn

Install mongodb

brew install mongodb

Start Mongo

mongod
# or
brew services start mongodb

Наконец выполните:

mongo

Create a datebase

use {nodeApp}

Start App

npm run dev #(start dev)

npm run build #(构建)

npm start #(启动项目)

Столкнуться с проблемами

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

компилировать

Изначально клонировал официальную демку, но скомпилировал(npm run dev) столкнется(node:58300) UnhandledPromiseRejectionWarning: Error: Cannot find module 'babel-plugin-transform-runtime'Я сообщил об ошибке.Позже я проверил информацию и упомянул об этом в вопросах.Официальный ответ мне устарел..babelrcвлияние. Эй~ Я потратил впустую полдня, по словам великого бога@timneutkensруководство, добавлены новые.babelrc, который решает проблему.

//.babelrc
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

получить данные

Nextjs предоставляет новую функцию жизненного циклаgetInitialProps. Конкретное использование заключается в следующем:

import React from 'react'
export default class extends React.Component {
  static async getInitialProps({ req }) {
    //这里可以使用 isomorphic-unfetch 获取 server 端数据
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
    return { userAgent }
  }

  render() {
    return (
      <div>
        Hello World {this.props.userAgent}
      </div>
    )
  }
}

Когда страница отображает и загружает данные, мы используемgetInitialPropsЭтот асинхронный статический метод для получения реквизита (что-то вродеJSON.stringify) объект. При инициализации страницыgetInitialPropsМетод будет выполнен только на стороне сервера.

Категории