Одиннадцатая пуля из серии квалифицированных интерфейсов — предварительное изучение секретного сада Nuxt.js.

Node.js сервер JavaScript axios
Одиннадцатая пуля из серии квалифицированных интерфейсов — предварительное изучение секретного сада Nuxt.js.

предисловие

Автор недавно хотел узнать что-то новое в свободное время, поэтому он начал связываться с рендерингом на стороне сервера (SSR).

Технологический стек — Nuxt, гладкий из коробки, весь проект объединяет vue + nuxt + axios + vuex + vue-router (nuxt поставляется с vuex и vue-router).

Проект в настоящее время реализует следующие основные функции

  • Рендеринг на стороне сервера

  • Развертывание статической страницы

  • Наггетс Главная

  • Рекомендуемый список наггетсов

  • Загрузка постраничной прокрутки

  • Адаптация планировки с разных сторон

Полный адрес проекта:nuxt-ssr-demo

Группа внешнего обмена:731175396

1. Диаграмма эффекта

1. Сторона ПК

2. Мобильный терминал

После прочтения окончательных визуализаций давайте начнем наше настоящее боевое путешествие~

2. Боевой проект

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

1. Используйте стартовый шаблон

Вот про инициализацию проекта, я ее использую напрямуюNuxtСтартовый шаблон предоставлен официальным сайтом

# 安装 vue-cli
npm install -g vue-cli
# 初始化项目
vue init nuxt-community/starter-template nuxt-ssr-demo
# 安装依赖
cd nuxt-ssr-demo
npm install # Or yarn install
# 启动本地服务
npm run dev

доступhttp://localhost:3000, теперь посмотрим на инициализированный каталог проекта

├── assets						css，图片等资源都在这
├── components                  组件相关
├── layouts                     路由布局
├── middleware                  中间件
├── pages                  		路由页面
├── static                  	静态资源
├── pages                  		路由页面
├── store              	      	vuex 相关
├── nuxt.config.js              nuxt 相关配置
├── package.json              	依赖相关
├── README.md              	    项目介绍

был тронутvueМладший партнер, в настоящее время глядя на это может быть небольшое сомнение, почему не файл, связанный с маршрутизацией? Мо паника,NuxtЭто поможет вам автоматически разбирать файлы на страницах в маршруты. Так что в следующей разработке помните, что нельзя добавлять файлы под страницы вслепую, каждый vue-файл под страницами — это маршрут.

2. Введите аксиомы

I. Установите зависимости

npm i axios -S

ii. Пакетные аксиомы

Для более удобного развития после проекта нам необходимо инкапсулировать аксиомы, и такую ​​полезную привычку надо выработать всегда.

Сначала создайте новый в корневом каталогеserviceкаталог, в которомconfig.jsа такжеindex.jsДва файла, следующий код предназначен только для справки, если вашему проекту необходимо выполнить дополнительную настройку, вы можете расширить его самостоятельно.

существуетconfig.jsнаписать в:

import http from 'http'
import https from 'https'

export default {
  // 自定义的请求头
  headers: {
    post: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    'X-Requested-With': 'XMLHttpRequest'
  },
  // 超时设置
  timeout: 10000,
  // 跨域是否带Token
  withCredentials: true,
  // 响应的数据格式 json / blob /document /arraybuffer / text / stream
  responseType: 'json',
  // 用于node.js
  httpAgent: new http.Agent({
    keepAlive: true
  }),
  httpsAgent: new https.Agent({
    keepAlive: true
  })
}

существуетindex.jsнаписать в:

import axios from 'axios'
import qs from 'qs'
import config from './config'

const service = axios.create(config)

// POST 传参序列化
service.interceptors.request.use(
  config => {
    if (config.method === 'post') config.data = qs.stringify(config.data)
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 返回结果处理
service.interceptors.response.use(
  res => {
    return res.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default {
  // post 方法
  post (url, data) {
    console.log('post request url', url)
    return service({
      method: 'post',
      url,
      params: data
    })
  },
  // get 方法
  get (url, data) {
    console.log('get request url', url)
    return service({
      method: 'get',
      url,
      params: data
    })
  },
  // delete 方法
  delete (url, data) {
    console.log('delete request url', url)
    return service({
      methods: 'delete',
      url,
      params: data
    })
  }
}

iii. Междоменная обработка

использовалvueСтуденты, должны знать, что для междоменного в проекте,vue-cliправильноwebpackсерединаproxyОпции инкапсулированы. Он раскрываетproxyTableвариант, даwebpackсерединаproxyи его сторонние плагиныhttp-proxy-middlewareинтеграция.

К сожалениюNuxtНет вproxyTableТакой элемент конфигурации используется для междоменной конфигурации. К счастью, вNuxtВы можете напрямую настроитьhttp-proxy-middlewareдля обработки междоменных доменов. более удачливыйNuxtОфициальный предоставляет два пакета для решенияaxiosмеждоменные проблемы.

Сначала установите

npm i @nuxtjs/axios @nuxtjs/proxy -D

затем вnuxt.config.jsнастроить в файле

modules: [
  '@nuxtjs/axios'
],
axios: {
  proxy: true
},
proxy: {
  '/api': {
    target: 'xxx.target.com',
    pathRewrite: { '^/api': '' }
  }
}

Здесь следует отметить, что, поскольку это рендеринг на стороне сервера, мы всегда должны знать, принадлежит ли текущий адрес переходу маршрутизации или запросу axios. Поэтому нам нужноservice/index.jsНапишите следующее суждение

// 判断是路由跳转还是 axios 请求
if (process.server) {
  config.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
}

Затем вы можете безопасно использовать свои аксиомы для выполнения междоменных запросов.

3. Управление вьюексом

Давайте взглянем на некоторые из файлов, которые нам нужны в каталоге хранилища.

├── actions.js                  axios 请求相关
├── index.js					主入口文件
├── mutations.js                同步状态操作相关
├── state.js                  	初始状态相关

Далее давайте посмотрим на содержимое каждого файла.

i. actions.js

import request from '~/service'

const api = '/api'

export const banner = async (store, params) => {
  return await request.get(`${api}/v1/get_banner`, params)
}

ii. state.js

export default {
  counter: 1,
  isPhone: false
}

iii. mutations.js

export function INCREMENT (state) {
  state.counter++
}

export function PCORPHONE (state, bool) {
  state.isPhone = bool
}

iv. index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import * as mutations from './mutations'
import * as actions from './actions'

Vue.use(Vuex)

const store = () => new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

Затем вы можете использовать его на странице

<template>
  <div class="page">
    <button @click="handleClick">{{ counter }}</button>
    <p>{{ banner.name }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  async asyncData ({ store, error }) {
    // 对 axios 进行批量处理
    let [ res ] = await Promise.all([
      store.dispatch('banner')
    ]).catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
    return {
      banner: res.banner
    }
  },
  computed: {
    ...mapState({
      counter: state => state.counter
    })
  },
  methods: {
    handleClick () {
      this.$store.commit('INCREMENT')
    }
  }
}
</script>

4. Глобальное управление компонентами

Nuxtпроекты не сравнитьvueПроект предоставляет нам основной входной файл для настройки глобальных компонентов. Но сделать это тоже относительно просто, нам нужно лишь следоватьNuxtСогласно спецификациям, приведенным на официальном сайте, вы можете записать соответствующую конфигурацию, введенную компонентом, в каталог плагинов.

Например, мне нужно внедрить стороннюю библиотеку компонентовelement-ui, нам просто нужно создать новый в каталоге плагиновelement-ui.jsфайл и пиши

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

затем вnuxt.config.jsимпортируется в файл

plugins: [
  '~/plugins/element-ui'
]

Наконец, вы можете использовать в своем проектеelement-uiКомпоненты в библиотеке компонентов.

Конечно, если вы хотите настроить свои собственные локальные глобальные компоненты, то же самое верно. Сначала создайте новый файл js в каталоге плагинов, затем импортируйте свой файл и, наконец, вnuxt.config.jsЕго можно импортировать в файл.

5. Управление глобальным стилем

Как и в случае с управлением компонентами, разница в том, что CSS необходимо хранить в каталоге ресурсов. Например, теперь мне нужно иметьmain.cssПерейти, чтобы перенаправить документы для динамического переключения.

Во-первых, вы должны бытьassets/main.cssНапишите стиль сброса в баре

.page-enter-active, .page-leave-active {
  transition: opacity .2s;
}

.page-enter, .page-leave-active {
  opacity: 0;
}

Тогда вы простоnuxt.config.jsВведите, чтобы импортировать

css: [
  '~/assets/stylus/main.styl'
]

оNuxtДля более подробного использования я не буду представлять их по одному.Документация Nuxt.js Официальный сайт

Дальше специфическое развитие проекта тоже банально, и я не буду его здесь описывать. Если вы хотите знать, вы можете пойти вgithubУбедитесь сами. Если есть вопросы, то можете добавить старого водителя в группу 731175396 и задать мне в группе.

В следующей главе я расскажу о некоторых моментах развертывания проекта

3. Развертывание проекта

На этом этапе вы должны убедиться, что у вас есть собственный сервер. Если нет, я чувствую, что должен купить его.Сейчас и Alibaba Cloud, и Tencent Cloud работают, и это очень дешево ~

Хорошо, статья продолжается. Прежде чем перейти к объяснению развертывания, давайте посмотримNuxtПредусмотрено несколько команд

Заказ описывать
nuxt Запустите веб-сервер с горячей загрузкой (режим разработки)localhost:3000
nuxt build Скомпилируйте приложение с помощью webpack, сожмите ресурсы JS и CSS (для публикации)
nuxt start Запустите веб-сервер в режиме сборки (nuxt buildбудет выполнен первым)
nuxt generate Скомпилируйте приложение и создайте соответствующий файл HTML в соответствии с конфигурацией маршрутизации (для развертывания статических сайтов).

1. Развертывание статической страницы

Из документов, представленных на официальном сайте, мы видим, что команды, необходимые для развертывания статических страниц,nuxt generate, при выполнении каталог dist будет создан в корневом каталоге, а файлы в нем — это все упакованные файлы, необходимые для статических страниц.

Здесь следует обратить особое внимание на то, что если в вашем проекте есть запрос axios, не забудьте запустить локальную службу локально ~ В противном случае будет сообщено об ошибке при выполнении запроса axios во время упаковки. Потому что мы использовали процесс узла, чтобы определить, является ли рабочая среда переходом или запросом, а запрос пакета не зависит от среды узла.

I. Использование gh-страниц

Здесь я сначала предполагаю, что друзья могут выполнять нормальноnuxt generateИ создайте соответствующий каталог dist.

Для параллельной разработки проекта мы обычно.gitignoreУпакованные файлы игнорируются в файле, но для развертывания наших статических страниц необходимо использовать все упакованные файлы в каталоге dist. Итак, здесь мы будем использоватьgh-pagesОпубликуйте упакованные файлы в наш репозиторий git.

# 安装 gh-pages
npm i gh-pages -D

затем вpackage.jsonНапишите конфигурацию (конечно, вы также можете создать новый файл для выполнения релиза)

"scripts": {
  "deploy": "gh-pages -d dist"
}

воплощать в жизньnpm run deploy, тогда ваш каталог dist будет отправлен в ветку gh-pages вашего репозитория

ii. Запустите развертывание

После загрузки файла пакета первое, что вам нужно сделать, это подключиться к вашему серверу. Затем перейдите в корневой каталог сервера, вdata/wwwНиже каталога будет ваш проектgit cloneвниз. затем переключитесь наgh-pagesветвь

Далее приступайте к настройке nginx (для тех, кто не скачал nginx, решите сами)

 server {
  # 端口，默认是 80
  listen 81;
  # 服务名(写域名或者 ip 地址都可以)
  server_name 123.12.123.12;
  # server 根目录
  root  /data/www/nuxt-ssr-demo;
  # 主入口文件
  index  index.html;
  # 反向代理
  location /api/ {
    proxy_pass https://xxx.target.com/;
  }
}

Затем перезапустите nginx

sudo service nginx restart

Тогда ты можешьhttp://123.12.123.12:81Посетите статическую страницу, которую вы развернули

2. Развертывание рендеринга на стороне сервера

Увидев приведенное выше развертывание статической страницы, некоторые учащиеся спросят подробности. При развертывании статической страницы нет преимуществ рендеринга на стороне сервера.

Да, если ваш проект состоит только из статических страниц, статическое развертывание — это полностью OJBK. Но если это связано с запросом, давайте послушно выполним развертывание на стороне сервера~

Прежде чем начать, убедитесь, что на вашем сервере настроена среда узла. Для тех, у кого его нет, рекомендую использоватьnvmУстановить узел. Далее приступайте к развертыванию

I. Действовать в качестве сервисного агента

Первый шаг — переключить проект git под предыдущим клоном на основную ветку разработки, а затем модифицировать свой для удобства в будущем.package.json

"scripts": {
  "build": "npm run lint && nuxt build && npm start",
  "start": "nuxt start"
}

Второй шаг, запуск службы

npm run build

Третий шаг, настройте файл nginx

# 通过 upstream nodejs 可以配置多台 nodejs 节点，做负载均衡
# keepalive 设置存活时间。如果不设置可能会产生大量的 timewait
# proxy_pass 反向代理转发 http://nodejs

upstream nodenuxt {
    server 127.0.0.1:3000; # nuxt 项目监听端口
    keepalive 64;
}
server {
  listen 82;
  server_name 118.25.109.133;
  
  location / {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_cache_bypass $http_upgrade;
    proxy_pass http://nodenuxt; # 反向代理
  }
}

Наконец, перезапустите службу nginx.

sudo service nginx restart

ii. Используйте pm2 в качестве демона процесса

Если мы развернемся в соответствии с вышеуказанными шагами, сервер будет часто отключаться, и наша служба будет отключена. Итак, чтобы защитить наш процесс nodejs, здесь я буду использовать pm2 для защиты процесса.

Сначала установите pm2 глобально

npm i pm2 -g

Затем перейдите в каталог проекта и выполните

pm2 start npm --name "nuxt-ssr-demo" -- run build

Тогда моей матери больше не нужно беспокоиться о том, что мой процесс nodejs будет прерван, когда он будет прерван ~

Для использования pm2 введитеpm2 --helpТогда проверьте это сами

Суммировать

На этом статья подходит к концу, и здесь я делаю небольшое резюме. Через неделю обучения и практики, уступив высокую имитацию Nuggets SSR Demo, но также наступив на несколько ям.

дляNuxt, на уровне использования он относительно прост и удобен в использовании. По сравнению с vue-ssr он значительно упрощает настройку разработки, так что разработчики могут думать только о развитии бизнеса, не слишком заботясь о конфигурации файлов. вNuxtОтслеживая изменения файла каталога страниц и автоматически генерируя маршруты, он напрямую сохраняет нашу обычную конфигурацию маршрутизации.

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

В любом случае, надеюсьNuxtСообщество может стать лучше и лучше~

Наконец, для тех, кто хочет увидеть исходный код проекта, здесь я поставлю последнюю ссылку

Полный адрес проекта:nuxt-ssr-demo

Группа внешней связи: 731175396

Лично я готов снова забрать свой официальный аккаунт.После этого гарантирую качественную и хорошую статью каждую неделю.Заинтересованные друзья могут обратить на нее внимание.

Категории