next-blog

Введение в проект

Блог, написанный с использованием серверного фреймворка next.js. Если он вам нравится, дайте ему звезду за его поддержку.Github.com/weibo zzz / it ...Интернет-адрес:www.liuweibo.cnВ этом проекте используется обмен опытом next.js:www.liuweibo.cn/p/206

Архитектура программного обеспечения

Описание архитектуры программного обеспеченияreact.js next.js antd mysql node koa2 fetch

Технология использования сайта

Интерфейс: React(16.x) Next.js и выборка дизайна Меньше
Backend: узел кадр KOA и MySQL (в настоящее время передние и задние концы, здесь только ответственные за запись интерфейса, обычный Ajax получить интерфейс, это не откроет исходный код)
Цель сайта: любительское обучение, запись технических статей, применение того, что вы узнали
Возможности веб-сайта
- уценка публиковать статьи
- Изменить статью (добавить, удалить, изменить и проверить)
- комментарий пользователя
- Загрузить картинки в облачное хранилище QINIU

Руководство по установке

быстрый старт Хотя это рендеринг на стороне сервера, необходимо вызвать интерфейс, поэтому необходимо вызвать внутренний интерфейс.

Введите isShow env.js в папке конфигурации и установите для него значение true., вот только звоню в мой собственный онлайн-интерфейс, конечно вы Вы можете только видеть и не можете изменять интерфейс. Если оно ложно, интерфейс не может быть настроен, и вам нужно написать интерфейс самостоятельно.

бегать

cnpm i
npm run dev

развертывать

cnpm i
npm run build
npm start

Инструкции по применению

Что касается демонстрации, которую нельзя загрузить, вы не можете опубликовать статью или изменить ее, это нормально, потому что она просто показывает ее.
Также нормально не видеть опубликованные статьи о дороге и фоновом управлении.Вы можете изменить код, чтобы отобразить эффект маршрутизации.

Скриншот сайта

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

Введение в технологию веб-сайта

полностью с помощьюnext.jsРазработан персональный сайт, онлайн-адресwww.liuweibo.cnОбобщить опыт и использовать опыт после завершения разработки. исходный код gtihubGitHub.com/weibo zzz/ как насчет…. Дайте звезду, чтобы поддержать его, если вам это нравится.

Зачем использовать рендеринг на стороне сервера (SSR)?

Веб-сайт будет продвигаться, поэтому ему нужно улучшить SEO, чтобы поисковые системы могли сканировать всю страницу.
Скорость доступа, более быстрая загрузка статических страниц

Технология использования сайта

Интерфейс: React(16.x) Next.js и выборка дизайна Меньше
Backend: node framework koa и mysql (на данный момент front-end и back-end разделены, тут отвечает только за написание интерфейса, так же как и обычный ajax интерфейс доступа, тут не с открытым исходным кодом)
Цель сайта: любительское обучение, запись технических статей, применение того, что вы узнали
Возможности веб-сайта
- опубликовать статью
- Изменить статью (добавить, удалить, изменить и проверить)
- комментарий пользователя

Анализ исходного кода

В этом как раз и дело

входной файл`server.js`

Официальный используется здесьexpress, пока включивgzipкомпрессия

const express = require('express')
const next = require('next')

const compression = require('compression')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
let port= dev?4322:80

app.prepare()
  .then(() => {
    const server = express()

    if (!dev) {
      server.use(compression()) //gzip
    }
    //文章二级页面
    server.get('/p/:id', (req, res) => {
      const actualPage = '/detail'
      const queryParams = { id: req.params.id }
      app.render(req, res, actualPage, queryParams)
    })

    server.get('*', (req, res) => {
      return handle(req, res)
    })

    server.listen(port, (err) => {
      if (err) throw err
      console.log('> Ready on http://localhost ' port)
    })
  })
  .catch((ex) => {
    process.exit(1)
  })

корень страницы component_app.js

Для передачи избыточных данных store такой же, как и при обычном использовании реакции, и здесь можно разместить верхний и нижний колонтитулы, и аналогичным образом есть_err.jsдля обработки 404 страниц


import App, {Container} from 'next/app'
import React from 'react'
import {withRouter} from 'next/router' // 接入next的router
import withReduxStore from '../lib/with-redux-store' // 接入next的redux
import {Provider} from 'react-redux'


class MyApp extends App {
  render() {

    const {Component, pageProps, reduxStore, router: {pathname}} = this.props;
    return (
      <Container>
        <Provider store={reduxStore}>
         <Component {...myPageProps}  />
        </Provider>

      </Container>
    )
  }
}

export default withReduxStore(withRouter(MyApp))

Страница рендеринга веб-сайта на стороне сервера Страница блога

linkИспользуется для перехода по страницам, используйте as, чтобы превратить исходный http://***.com?id=1 в красивый /id/1.
headВы можете вкладывать метатеги для SEO
Настройте компоненты, которые не требуют SEO

import dynamic from 'next/dynamic';

//不需要seo
const DynasicTopTipsNoSsr = dynamic(import('../../components/TopTips'),{
  ssr:false
})

import React, {Component} from 'react'
import {connect} from 'react-redux'
import Router from 'next/router'
import 'whatwg-fetch' // 用于fetch请求数据
import Link from 'next/link'; // next的跳转link
import Head from 'next/head'  // next的跳转head可用于seo

class Blog extends Component {

  render() {
    return (
      <div className="Blog">
        <Head>
          <title>{BLOG_TXT}&raquo;{COMMON_TITLE}</title>
        </Head>
        <MyLayout>
          <Link   as={`/Blog/${current}`} href={`/Blog?id=${current}`}>
            <a onClick={this.onClickPageChange.bind(this)}>{current}</a>
          </Link>
        </MyLayout>
      </div>
    )
  }
}
//这里才是重点，getInitialProps方法来请求数据进行渲染，达到服务端渲染的目的
Blog.getInitialProps = async function (context) {
  const {id = 1} = context.query
  let queryStringObj = {
    type: ALL,
    num: id,
    pageNum
  }
  let queryTotalString = {type: ALL};
  const pageBlog = await fetch(getBlogUrl(queryStringObj))
  const pageBlogData = await pageBlog.json()


  return {pageBlogData}
}
// 这里根据需要传入redux
const mapStateToProps = state => {
  const {res, searchData, searchTotalData} = state
  return {res, searchData, searchTotalData};
}
export default connect(mapStateToProps)(Blog)

статические ресурсы

создание корневого каталогаstaticПапка, здесь обязательное требование, иначе статические ресурсы не будут загружены

Настройте antd и темы и загрузите их по запросу

Конфигурация темы

antd-custom.less

@primary-color: #722ED0;

@layout-header-height: 40px;
@border-radius-base: 0px;

styles.less

@import "~antd/dist/antd.less";
@import "./antd-custom.less";

Окончательная унифицированная конфигурация находится в открытом доступеhead

<Head>
    <meta charSet="utf-8"/>
    <meta httpEquiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="renderer" content="webkit"/>
    <meta httpEquiv="description" content="刘伟波-天天向上"/>
    <meta name="author" content="刘伟波,liuweibo"/>
    <link rel='stylesheet' href='/_next/static/style.css'/>
    <link rel='stylesheet' type='text/css' href='/static/nprogress.css' />
    <link rel='shortcut icon' type='image/x-icon' href='/static/favicon.ico' />
  </Head>

Настройка нагрузки по требованию

.babelrcдокумент

{
  "presets": ["next/babel"],
  "plugins": [
    "transform-decorators-legacy",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "less"
      }
    ]
  ]
}

next.config.jsконфигурация файла

const withLess = require('@zeit/next-less')

module.exports =   withLess(
  {
    lessLoaderOptions: {
      javascriptEnabled: true,
      cssModules: true,

    }
  }
)

css страницы

чувствовать иvueизscopeТакой же,styleизjsx,Добавленglobalявляется глобальным, иначе он вступит в силу только здесь

render() {

    return (
      <Container>
        <Provider store={reduxStore}>
          <Component {...myPageProps}  />
        </Provider>

        <style jsx global>{`

.fl{
    float: left;
}
.fr{
    float: right;
}
        `}</style>
      </Container>
    )

Индикатор загрузки в верхней части страницы

import Router from 'next/router'
import NProgress from 'nprogress'

Router.onRouteChangeStart = (url) => {
  NProgress.start()
}
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()

Markdown публикует статьи и основные моменты кода

использовать толькоmarked('放入markdown字符串');

import marked from 'marked'
import hljs from 'highlight.js';

hljs.configure({
  tabReplace: '  ',
  classPrefix: 'hljs-',
  languages: ['CSS', 'HTML, XML', 'JavaScript', 'PHP', 'Python', 'Stylus', 'TypeScript', 'Markdown']
})
marked.setOptions({
  highlight: (code) => hljs.highlightAuto(code).value,
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false
});

Я устал учиться, давай сфотографируемся, чтобы расслабиться

https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/9/14/165d740e731aee75~tplv-t2oaga2asx-image.image

Участвуйте и вносите свой вклад

Вилка Этот проект
Новая ветка Feat_xxx
Отправить код
Новый запрос на слияние

Оставшаяся проблема

Кэширование данных нужно делать при большом объеме трафика
cdn узел просмотр изображения дата
Настройте описание изображения и изменить
Загрузка картинок качественная, но загрузка пока не поддерживается, а код загрузки доработан
Загружено как ровно 1M ошибка
После входа в систему он поддерживает добавление статей в закладки и изменение комментариев.
Верхняя полоса прокрутки загрузки не загружается в первый раз
Добавить подмодуль koa
Комментарии поддерживают уценку, если комментариев слишком много, рекомендуется перейти на платформу sf

Для изучения и модификации

Предупреждение среды разработки.js:33 Предупреждение. КомпонентcontentEditable
eslint

Об авторе / Об авторе

github:github.com/Weibozzz
личный блог:www.liuweibo.cn
segmentfault:segmentfault.com/u/weibozzz

Уведомление об авторских правах

Авторские права на все оригинальные статьи принадлежат Weibozzz.

Автор: Лю Вейбо

Связь:www.liuweibo.cn/p/206

источник:Блог Лю Вейбо

Оригинальные авторские права на эту статью принадлежат Лю Вейбо, пожалуйста, укажите источник для перепечатки, спасибо за сотрудничество

next-blog

Введение в проект

Архитектура программного обеспечения

Технология использования сайта

Руководство по установке

Инструкции по применению

Скриншот сайта

Введение в технологию веб-сайта

Зачем использовать рендеринг на стороне сервера (SSR)?

Технология использования сайта

Анализ исходного кода

входной файлserver.js

корень страницы component_app.js

Страница рендеринга веб-сайта на стороне сервера Страница блога

статические ресурсы

Настройте antd и темы и загрузите их по запросу

Конфигурация темы

Настройка нагрузки по требованию

css страницы

Индикатор загрузки в верхней части страницы

Markdown публикует статьи и основные моменты кода

Я устал учиться, давай сфотографируемся, чтобы расслабиться

Участвуйте и вносите свой вклад

Оставшаяся проблема

Для изучения и модификации

Об авторе / Об авторе

Уведомление об авторских правах

входной файл`server.js`