Полная разработка стека Получение примера (nodejs + vuejs + mongodb)

В этой статье рассказывается, как использовать nodejs+vuejs для создания личного блога.

В основном делится на три части:

Подготовка окружающей среды
Бэкенд-система управления блогом (админ)
Внутренние службы (в основном предоставляющие административный и веб-интерфейсы)
Внешний вид блога (веб)

Подготовка окружающей среды

nodejs

Просто зайдите на официальный сайт, чтобы загрузить последнюю стабильную версию, ниже приведена ссылка для скачивания:
узел будет .org/en/download…
vue-cli

Это мощный инструмент сборки, который позволяет легко управлять проектом vue, не требуя дополнительной настройки веб-пакета. Рекомендуется установить глобально:
```
npm install --global vue-cli
```
mongodb

База данных, используемая серверной частью. Просто зайдите на официальный сайт, чтобы загрузить версию соответствующей системы, обратите внимание на загрузку серверной версии. ссылка на скачивание:
downloads.mongodb.com/

Бэкенд-система управления блогом

создание проекта

Сначала создайте базовый бэкэнд-проект vue, вы можете использовать следующую команду:

    vue create admin

Для некоторых отображаемых параметров просто выберите значение по умолчанию. Созданная структура каталогов выглядит следующим образом:

интеграция с маршрутизатором

Использование vue-cli позволяет легко интегрировать маршрутизацию:

vue add router

Обратите внимание, что режим истории используется по умолчанию. Для удобства в будущем выберите (n) готовый к использованию режим хеширования вместо режима истории браузера.

интеграция с элементом пользовательского интерфейса

Для удобства мы используем некоторые компоненты, предоставляемые element-ui, для реализации внутренней страницы, поэтому нам нужно интегрировать element-ui:

vue add element

Опции подсказки, все можно выбрать по умолчанию.

Что ж, пока построена базовая структура бэкенд-проекта. Его можно запустить с помощью следующей команды:

npm run serve

Страница по умолчанию после запуска выглядит следующим образом:

Базовый макет страницы

Вы можете использовать макет-контейнер element-ui, просто скопируйте пример кода и поместите его в шаблон Home.vue. Но здесь есть одно замечание, так как при переключении левого меню мы надеемся, что меняется только правая часть, а левая часть должна оставаться неизменной, поэтому здесь нужно использовать ее.<router-view>. Установите измененную деталь справа на<router-view>здесь.

Страница новой категории

Сначала создайте новый файл CategoryEdit.vue, а затем добавьте маршруты. Маршрутизация здесь должна быть отмечена тем, что переменная страница справа должна использоваться как подмаршрут компонента Home. Таким образом, содержимое страницы CategoryEdit будет отображаться в ранее определенном<router-view>позиция.

Итак, когда мы вводим в браузере "http://localhost:8080/#/categories/create", будет отображена страница CategoryEdit. Конкретное содержимое страницы здесь не представлено. Используются компоненты element-ui.

Из-за ограниченного места другие страницы здесь подробно не представлены. Конкретный исходный код был открыт дляGitHub.

Окончательная структура страницы проекта будет выглядеть так:

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

Что касается интерфейса, используемого на странице, он будет представлен в следующем разделе сервера.

серверная служба

В этой части используетсяnodejs + mongodbвыполнить.

сборка проекта

Сначала создайте новую папку server в корневом каталоге (каталог на том же уровне, что и admin).
Создайте новый файл package.json, вы можете использовать следующую команду для его инициализации
```
npm init
```
Все можно выбрать по умолчанию.
Установка зависимости. Серверная часть в основном использует следующие зависимости.

    "cors": "^2.8.5",       // 允许跨域请求
    "express": "^4.17.1",   // 后端框架
    "mongoose": "^5.6.12",  // 数据库
    "nodemon": "^1.19.2",   // 当文件变更后会自动重启后端服务

После установки вышеуказанных зависимостей создайте новый файл index.js.

const express = require('express')
const cors = require('cors')
const app = express()

// 允许跨域
app.use(cors())
app.use(express.json())

app.listen('3000', async(req, res) => {
  console.log("http://localhost:3000")
})

Бэкенд-сервис можно запустить с помощью следующей команды:

    nodemon start index.js

определение маршрута

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

module.exports = app => {
  const express = require('express')
  const router = express.Router()

  // 获取资源
  router.get('/getData', async (req, res) => {
    res.send("hello world")
  })
  
  app.use('/admin/api/rest', router)
}

Обратите внимание, что здесь экспортируется функция. Преимущество этого заключается в том, что можно передавать параметры. Здесь мы передаем app в качестве параметра.

В файле index.js корневого каталога нужно ввести:

require('./routers/admin/index')(app) // 直接执行函数并传入app作为参数

При входе "http://localhost:3000/admin/api/rest/getData", вы увидите "привет, мир".

Подключиться к базе данных

Затем создайте новую папку db, а затем создайте новый файл db.js:

module.exports = app => {
  const mongoose = require('mongoose')

  mongoose.connect('mongodb://localhost:27017/myblog', {
    useNewUrlParser: true
  })
}

После установки MongoDB по умолчанию запускается порт 27017. Myblog назван нашей базой данных.

Затем вам нужно импортировать db.js в файл index.js.

require('./db/db')(app)

Создать модель

Создайте новую папку моделей и создайте в ней новый файл Category.js в качестве модели для классификации.

const mongoose = require('mongoose')

const schema = new mongoose.Schema({
  title: {type: String}
})

module.exports = mongoose.model('Category', schema)

Временно определите только одно имя категории "название"

запрос данных

Данные в таблице категорий можно запросить с помощью следующего кода в routers/admin/index.js.

  // 获取分类列表
  router.get('/categories', async (req, res) => {
    const res = await Category.find()
    res.send(res)
  })

При входе "http://localhost:3000/admin/api/rest/categories", чтобы получить данные таблицы категорий.

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

промежуточное ПО

В процессе разработки мы обязательно столкнемся с проблемой.

Как упоминалось ранее, серверная часть администратора в основном включает три модуля: управление классификацией, управление статьями и управление пользователями.

Каждый модуль включает операции добавления, удаления, модификации и поиска. Если мы определим для каждого модуля набор собственного интерфейса добавления-удаления-изменения-проверки, это неизбежно будет генерировать много дублирующегося кода, а если классификаций много, дублирующийся код будет более серьезным. Итак, здесь вы можете рассмотреть возможность настройки промежуточного программного обеспечения.

Сначала создайте новую папку MiddleWare, затем создайте файл resource.js (мы можем понимать каждую классификацию как ресурс) и унифицируйте ресурс, чтобы увеличить модификацию, единственная разница — это имя ресурса.

module.exports = options => {
  return async (req, res, next) => {
    const inflection = require('inflection')
    const modelName = inflection.classify(req.params.resource)
    req.Model = require(`../models/${modelName}`)
  
    next()
  }
}

Здесь используется библиотека inflection, ее нужно сначала установить, а затем использовать inflection.classify для преобразования входящих параметров в форму единственного числа в качестве имени модели.

Затем измените routers/admin.index.js на следующее

  // 获取资源
  router.get('/', async (req, res) => {
    const data = await req.Model.find()
    res.send(data)
  })

  app.use('/admin/api/rest/:resource', resourceMiddleware(), router)

Что ж, из-за ограниченного места какой-то другой контент пока не будет представлен, подробный код можно найти здесь.GitHub.

Внешний вид блога (веб)

Строительный проект

Эта часть административного и почти нового веб-проекта должна быть интегрирована в маршрутизатор, но не требует элемента пользовательского интерфейса, конкретная внутренняя система управления проектами может ссылаться на введение выше.

Выбор темы

Тематическая часть, из которой я непосредственноJekyll ThemesОдну из библиотеки тем выбрал, так как времени не так много, плюс я сам этим занимаюсь, поэтому мне лень. разместил здесьоригинальный автор Liberxue.

Статистика посещения

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

Главная страница

конец

Что ж, давайте пока представим так много, и есть много другого контента, который не будет расширяться один за другим. Если у вас есть какие-либо вопросы, вы можете оставить сообщение.

Так как я из фронтенда, я работаю фронтендом уже шесть или семь лет. Бэк-энд только что был в контакте, поэтому фронт-часть выше может быть меньше, но бэк-энд будет больше.Если есть какие-то ошибки, пожалуйста, поправьте меня.