опубликовано год назадМаленькая книга Vuejs, и я не прикасался к ним несколько дней, а теперь из-за проекта мне нужно использовать полностековую разработку на JavaScript. Итак, мне пришлось настроить эту среду с полным стеком.
Вся серия будет в моем обычном стиле, то есть успокойтесь и расскажите об этом.После обучения вы можете освоить весь набор знаний, которые я упомянул, и получить шаблон кода, который можно скопировать напрямую, и использовать его в ваш проект.
Сложность интерфейса
Многие люди не видят разработку JavaScript. Это не игрушка, какие-то скрипты и надписи. Когда вы говорите это, они могут быть в тонусе или обниматься.
Однако из-за того, что фронт-энд по-прежнему быстро развивается, многое меняется, появляется больше вариантов для строительной среды, и есть много типов технологий, и многие вещи приходится делать самому. Так что на самом деле не все так просто. На картинке этой статьи вы можете заглянуть в сложный угол передней части.Modern Frontend Developer in 2018.
Я прочитал много материалов, многие из которых объясняют технологию на этой картинке.Должны быть какие-то объяснения полного стека, но они часто слишком сложны. В этой статье делается попытка показать панорамный вид разработки JavaScript с полным стеком с помощью набора статей, пытаясь использовать случай, все должно и все хвосты проходят через всю серию, чтобы новички могли быстро понять технологию.
контур
Итак, в статье будут такие:
- Используйте скаффолдинг Vuejs для быстрого создания пользовательского интерфейса CRD. Vuex будет использоваться для управления состоянием, а vue-router — для управления маршрутизацией.
- Используйте Mongodb для хранения и предоставления внутренних сервисов CRD.
- Используйте Nodejs для создания серверной службы CRD.
- Используйте Fecth|Axios для доступа к серверной службе CRD.
- Как использовать компоненты украшения bulfy
- Интеграция услуг полного стека
CRD относится к созданию, чтению, удалению. Целевой объект данных — это объект Todo, который выглядит следующим образом:
{id:1,subject:"Loving"}
В случае нескольких объектов данных это выглядит так:
[
{id:1,subject:"Loving"}，
{id:1,subject:"Writing"}，
{id:1,subject:"Preying"}
]
Этот, казалось бы, простой и понятный JS-объект перемещается между группами функций, модулей и объектов, даже через границы сети, из памяти на диск. Он будет храниться в Mongodb, а также извлекаться из Mongodb и передаваться в пользовательский интерфейс, HTTP-клиент и HTTP-сервер.
Все приложение выглядит как машина, и можно сказать, что код управляет машиной, но также можно сказать, что ею управляют данные.
Используйте скаффолдинг Vuejs для быстрого создания интерфейса приложения Todo.
Мы даем себе предложение сделать TODO-приложение, которое выглядит так:
Пользователь может видеть поле редактирования и список.
- Добавьте новый элемент списка задач в поле редактирования и нажмите Enter, чтобы добавить его в список.
- У каждого элемента в списке есть кнопка, нажмите кнопку, чтобы удалить текущий элемент
Требования к окружающей среде
Говоря о создании среды разработки с полным стеком JS, нужно сказать, что на самом деле нужно много чего сделать. Большие варианты таковы:
- Интерфейс с использованием Vuejs
- Бэкэнд использует Nodejs
- Хранилище использует MongoDB.
После того, как сделан большой выбор, последует небольшой пакет.Фронтенд-пакет требует ряда технологий, особенно фронтенд, который соответствует Vuejs.Есть соответствующие технические средства для управления маршрутизацией, статусом и компонентами. . Самостоятельно сопоставить очень хлопотно.
К счастью, у Vuejs также есть интерфейсный инструмент создания каркасов vue-cli, который может интегрировать вышеуказанные компоненты в проект. Для создания самых простых каркасов проекта vue-cli теперь требуется около 160 МБ места. На моем компьютере и в Интернете это заняло 2 с половиной минуты.
Фронтенд Vuejs
- vue-router, внешнее управление маршрутизацией
- Vuex, интерфейсное управление данными, в профессиональном смысле — это управление состоянием.Эти данные, которые могут быть атрибутами, массивами, объектами и т. д., могут быть доступны между компонентами, в отличие от данных, предоставляемых функцией данных, которые могут только доступ к этому компоненту.Возможно, что интерфейсный проект большего размера должен управляться внешним интерфейсом.
- axios, внешний HTTP-доступ, инкапсулирует такие возможности, как выборка и AJAX, в виде промисов
- buefy, внешний микро-фреймворк, может использовать пользовательские компоненты с пользовательскими тегами, а CSS-фреймворк — это Bulma.
- Bulma, несмотря на использование микрофреймворка, лишь минимизирует знание CSS фреймворка, но это не значит, что знание не нужно. Еще надо учиться. По сравнению со старым Bootstrap, Bulma не нуждается в зависимости от JS-фреймворка и не имеет никакого JS-кода, поэтому его можно хорошо комбинировать с любым фреймворком, например, с Vuejs. Вот почему я выбираю это
бэкэнд кли-сервис
Чтобы обеспечить инструментарий и удобство разработки для фронтенд-разработки, нам часто нужны webpack и babel. С ними вы можете использовать синтаксис ES6, автоматическое обновление после обновления кода и т. д. Это все очень удобные функции, без которых вы не можете жить. С vue-cli понимание webpack и babel может быть сведено к минимуму, но вы не можете не изучить его. Вам нужна некоторая индивидуальная конфигурация, и вы должны ее освоить. По крайней мере, вам нужно знать, как запустить сервер разработки, выпустили сборку и поставили Front-end сервис переходит на back-end сервис через proxyChain и так далее. К счастью, в этом руководстве вам не нужно многому учиться, чтобы запустить корпус.
App Server + Mongodb
Затем посмотрите на серверную часть, и общая привычка — использовать комбинацию Nodejs+Express.js. Говорить об этом особо нечего, это все старье. Для доступа к Mongodb также требуется фреймворк, основанный на Callback, либо на основе Promise+Await+Async, который тоже нужно выбрать.
Для простоты понимания я буду использовать минимальный кейс для завершения всего процесса разработки, то есть кейса в реальности не существует, но он еще и полезный, то есть вы можете использовать их как шаблоны, копировать код напрямую, а затем заполните свой контент. В мире нет ничего плохого в том, чтобы копировать код, ведь писать код — это самое быстрое. Модель данных для этого случая заключается в выполнении CRD (создание списка удаления) для объекта {id, name}.
Установите среду выполнения
Среда установки относительно проста, особенно при использовании Mac OS X. Есть несколько наборов инструментов, которые могут помочь быстро настроить среду. Конечно, с Windows не так уж много проблем, она часто предоставляет установщик, и в большинстве случаев все, что вам нужно, это нажать «Далее».
Здесь используется MAC в качестве примера для объяснения установки.
mongodb
Установите и запустите демон Mongodb:
brew install mongodb
mongodb
Проверочный визит, первая реализация Mongodb Shell:
mongo
Введите команду, запросите список базы данных:
> show dbs
local 0.000GBЕсли вы видите эту информацию, это означает, что mongodb успешно установлен.
Node.js
Установите и проверьте:
$brew install nodejs
$node -v
10.7.0
Если вы видите эту информацию, это означает, что Node.js успешно установлен.
Начать интерфейсное кодирование
Установить среду кодирования
Первая установка VUE-CLI, метод такой же, как общий модуль NPM, версия, которую мы установлена 3.0:
npm i @vue/cli
Посмотреть версию:
vue -V
3.0.0См. следующую информацию, указывающую на успех. Затем создайте код шаблона для приложения:
vue create todoapp
Обратите внимание, что во время этого процесса создания командная строка предложит вам сделать выбор, мы выберем функцию выбора вручную, затем маршрутизатор, vuex и другие не будут выбраны. Затем и выполните этот код:
cd todoapp
npm run serve
Вы можете увидеть заставку Vue, посетив localhost:8080 в своем браузере. Указывает, что леса были созданы успешно.
На этом этапе vue-cli помог установить модуль зависимости vuex и маршрутизатора. В этом разделе одновременно устанавливаются все оставшиеся зависимости NPM, чтобы избежать проблем и многословия при установке по одной в будущем.
npm install buefy --save
npm install axios --save
buefy— это библиотека компонентов пользовательского интерфейса Vuejs на основе Bulma. На этот раз схема UI CSS, используйтеBulma, если Vuejs хочет использовать его в виде пользовательских компонентов, то вам необходимо установить модуль Buefy. На самом деле, я изучал Булму иBootstrap, также написалбесплатная электронная книга, я думаю, что преимущества Bulma перед Bootstrap: 1. Не зависит от какого-либо JS-фреймворка 2. Дизайн пользовательского интерфейса более лаконичен. Вот почему я решил использовать Bulma сейчас.
AxiosЭто библиотека, которая инкапсулирует HTTPClient и предоставляет обещанный интерфейс. Мы используем его для доступа к данным внутреннего HTTP-сервера. Упомянутые выше объекты данных извлекаются клиентом с помощью Axios, и объекты данных также передаются на сервер через Axios.
интерфейсное кодирование
Во-первых, начнем с состояния. Vuex, о котором мы упоминали ранее, является официальным плагином Vuejs для управления состоянием. Так называемое состояние — это объекты данных приложения. То есть объект Todo и коллекция объектов Todo, о которых мы упоминали. Многие данные, которые мы видим в пользовательском интерфейсе приложения, поступают из объектов состояния. Объект состояния находится в src/store.js. Не только информация о состоянии приложения, но и работающие с ними функции. Поскольку требуется список задач, необходимо добавить следующий код:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const defaultTodo = [
{id:1,subject:'Eating'},
{id:2,subject:'Loving'},
{id:3,subject:'Preying'},
]
function indexById(todos,id){
for (var i = 0; i < todos.length; i++) {
if (id == todos[i].id)
return i
}
return -1
}
import axios from 'axios'
export default new Vuex.Store({
state: {
msg:'Todo App',
todos:defaultTodo
},
mutations: {
add(state,subject){
var todo = {id:subject,subject:subject}
state.todos.push(todo)
},
remove(state,id){
state.todos.splice(indexById(state.todos,id),1)
},
reload(state){
state.todos = defaultTodo
}
},
actions: {
add: (context, link) => {
context.commit("add", link)
},
remove: (context, link) => {
context.commit("remove", link)
},
reload: (context) => {
context.commit("reload")
}
}
})
Свойство state.todos — наш основной объект данных. state.msg Это строка заголовка, которая предоставляет приложение. В свойстве мутации предусмотрены методы для модификации данных, такие как
- Нам нужно добавить todo, используя метод add(), соответствующий
- Чтобы удалить задачу, используйте метод remove().
- Для обновления списка задач используется метод load().
Иногда изменение данных может занимать много времени, поэтому, чтобы избежать блокировки основного потока клиента, этот объект также предоставляет асинхронный метод.Объект действий представляет собой асинхронный метод, соответствующий операции модификации.Метод здесь функционально то же, что и мутации Постоянные, но асинхронные. Vuex предоставляет что-то вроде:
context.commit()
Синтаксис обеспечивает стыковку с методами действий и мутаций. Первый параметр — это имя метода мутаций, а следующие параметры — это параметры метода мутаций, переданные в метод мутаций.
В частности, в методе add() в мутациях пользовательский интерфейс будет предоставлять свойство Todo.subject, а идентификатор должен быть сгенерирован автоматически.Мы временно используем значение субъекта в качестве идентификатора, что является ленью. пока тема не вводит дубликаты, вы также можете временно уйти от этого. Поскольку мы знаем, что фоновое хранилище в этом проекте будет использовать Mongodb, после вставки нового объекта в Mongodb будет автоматически сгенерирован идентификатор, и идентификатор нашего объекта Todo будет использовать этот идентификатор. Нет необходимости генерировать его самостоятельно.
В SRC / Views / home.vue вставьте следующий код:
<template>
<div class="home">
<h1>{{msg}}</h1>
<NewTodo></NewTodo>
<TodoList></TodoList>
</div>
</template>
<script>
import NewTodo from '@/components/NewTodo.vue'
import TodoList from '@/components/TodoList.vue'
import {mapState,mapActions} from 'vuex'
export default {
name: 'home',
computed:mapState(['todos','msg']),
components: {
TodoList,NewTodo
},
data(){
return{newtodo:''}
},
methods:{
...mapActions([
'remove',
'add'
]),
add1:function(){
this.add(this.newtodo)
this.newtodo = ''
}
}
}
</script>
...mapState, объяснение действий mapActions.
Другими словами, наше приложение Todo разделено на два компонента, один из которых отвечает за отображение поля редактирования и принимает событие Enter для добавления нового элемента Todo в состояние приложения. Другой компонент отвечает за отображение всех элементов Todo и принимает событие удаления для удаления указанного элемента Todo. Это компонент NewTodo и компонент TodoList:
<NewTodo></NewTodo>
<TodoList></TodoList>
Реализация кода этих двух компонентов находится в файлеsrc/components/NewTodo.vueа такжеsrc/components/TodoList.vueВнутри. Код NewTodo:
<template>
<div class="home">
<form @submit.prevent="add1">
<input type="text" name="newTodo" placeholder="new todo" v-model="newtodo">
</form>
</div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
name: 'newtodo',
computed:mapState(['todos','msg']),
data(){
return{newtodo:''}
},
methods:{
...mapActions([
'add'
]),
add1:function(){
this.add(this.newtodo)
this.newtodo = ''
}
}
}
</script>
Код TodoList:
<template>
<div class="hello">
<ul>
<li v-for="(todo,index) in todos" v-bind:key="todo.id">
{{todo.subject}}<button @click="remove(todo.id)" class="rm">remove</button>
</li>
</ul>
</div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
name: 'todolist',
computed:mapState(['todos','msg']),
components: {
},
methods:{
...mapActions([
'remove','reload'
])
},
mounted(){
this.reload()
}
}
</script>
<style scoped>
</style>
В файле SRC / Main.js добавьте следующий код, представленный BUEFY:
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)
Теперь компонент Buefy готов к использованию. Мы можем превратить стандартный ввод в компоненте NewTodo в составной ввод и заменить метку на b-ввод. код показывает, как показано ниже:
<b-input type="text" name="newTodo" placeholder="new todo" v-model="newtodo"></b-input>
Глядя на браузер сейчас, ввод стал более привлекательным элементом управления в стиле Bulma. Доступ в Интернет с помощью axios. Вам нужно сначала найти src/home.vue, чтобы сослаться на эту библиотеку в начале кода:
import axios from 'axios'
Используйте эту библиотеку внутри одностраничных компонентов Vue. Например, добавление нового метода к объекту кода в src/home.vue:
mounted(){
var url = 'https://api.coindesk.com/v1/bpi/currentprice.json'
axios ({
url:url,
method: 'get',
})
.then( res => {console.log(res.data.chartName)} )
.catch( err => cosole.error(err))
}
Давайте посмотрим на эффект адаптации. Запускаем cli-сервис:
npm run serve
Затем откройте браузер и введите адресlocalhost:8080, Если вы видите ожидаемый нами пользовательский интерфейс в браузере, и вы видите, что консоль печатает Биткойн, то это означает, что код пользовательского интерфейса, начальный код axios для доступа к сети HTTP и функция управления состоянием — все это успешный.
внутренняя кодировка
Теперь мы можем видеть пользовательский интерфейс, но данные внутри пользовательского интерфейса поступают от клиента, а не от сервера. Конечно, наши данные должны поступать с сервера. Поэтому нам нужно запустить собственный сервер, который может принимать новые объекты Todo, введенные клиентами в интерфейсе, а также может предоставлять списки Todo в серверной базе данных.
В целях тестирования часто необходимо подготовить фоновый JSON-сервис приложения todo, который может обеспечивать добавление, удаление, изменение и запрос элементов todo через HTTP.
Такой сервер использует nodejs в качестве серверной части и использует два модуля node, которые можно установить с помощью npm:
npm install express body-parser
body-parserЭто промежуточное ПО, которое может анализировать содержимое запроса и помещать результат анализа в свойство req.body. Самый распространенный способ — разобрать содержимое json.
Код выглядит следующим образом (имя файла: jsonserver.js):
var express = require('express');
var app = express();
var path = require('path')
var bodyParser = require('body-parser')
app.use(bodyParser.json())
var todos = []
var public = path.join(__dirname, '/')
app.use('/',express.static(public))
const defaultTodo = [
{id:1,subject:'Eating'},
{id:2,subject:'Loving'},
{id:3,subject:'Preying'},
]
function rs(){
todos = defaultTodo
}
function indexById(id){
for (var i = 0; i < todos.length; i++) {
if (id ==todos[i].id)return i
}
return -1
}
rs()
app.delete('/api/todo/:id', function (req, res) {
var userkey = +req.params.id
todos.splice(indexById(userkey),1)
res.end( JSON.stringify(todos));
rs()
})
app.get('/api/todos', function (req, res) {
res.end( JSON.stringify(todos));
})
app.post('/api/todo', function (req, res) {
todos.push(req.body)
res.end(JSON.stringify(todos))
rs()
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("listening at http://%s:%s", host, port)
})
Его можно выполнить командой:
node jsonserver.js
Проверка команды Curl
Действительность службы можно проверить с помощью команды curl:
-
ПОЛУЧИТЬ операцию
$curl http://localhost:8081/todo/1 $curl http://localhost:8081/todos -
УДАЛИТЬ операцию
$ curl -X "DELETE" http://localhost:8081/api/todo/1 -
Почтовая операция
$curl -X POST -H "Content-Type: application/json" -d '{"subject":"s4"}' http://localhost:8081/api/todo
Внешний HTML-валидатор
Создайте файл index.html и поместите его в тот же каталог, что и код jsonserver.js.Код выглядит следующим образом:
<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
function remove(){
fetch (
'/api/todo/1',
{
method: 'DELETE',
}
)
.then( res => console.log(res.json()))
.catch( err => cosole.error(err))
}
function create(){
fetch (
'/api/todo',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({id: "4", subject: "s4"})
}
)
.then( res => console.log(res.json()))
.catch( err => cosole.error(err))
}
</script>
Могут быть предоставлены тесты для создания, удаления и списка, а некоторые результаты отображаются в консоли.
Говоря об этом, для JS действительно много библиотек для доступа к HTTP.здесьУпоминаются 9 видов библиотек. Fetch API очень прост в использовании, ноIE не поддерживается. Если вам нужна поддержка IE, лучше использовать Axios. Вот почему Vuejs официально рекомендует Axios:
The Fetch API is a powerful native API for these types of requests. You may have heard that one of the benefits of the Fetch API is that you don’t need to load an external resource in order to use it, which is true! Except… that it’s not fully supported yet, so you will still need to use a polyfill. There are also some gotchas when working with this API, which is why many prefer to use axios for now. This may very well change in the future though.
аксиальный метод доступа
По сравнению с выборкой, использование axios должно полагаться на внешние файлы. Для удобства мы напрямую используем файлы библиотек, предоставленные веб-сайтом unpkg.
Синтаксис axios похож на fetch, но выглядит более лаконично и красиво. Следующий код заменяет внутреннюю реализацию функций создания и удаления, а остальные остаются без изменений.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
function remove(){
axios ({
url:'/api/todo/1',
method: 'DELETE',
})
.then( res => console.log(res.json()))
.catch( err => cosole.error(err))
}
function create(){
axios ({
method: 'POST',
url:'/api/todo',
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify({subject: "s4"})
})
.then( res => console.log(res.json()))
.catch( err => cosole.error(err))
}
</script>
Теперь задняя часть также может работать.
Интеграция: фронтенд и бэкэнд
Установите канал от cli-сервиса до сервера приложений
Каждый раз, когда вы выполняете команду: npm run serve, будет запускаться серверный код кастомного скаффолдинга vue, и он будет предоставлять множество возможностей, удобных для разработки. Но я хочу, чтобы часть URL-адреса была перенаправлена на мой собственный сервер. Например, включите все URL-адреса, начинающиеся с /api. Просто добавьте этот файл в корневой каталог проектаvue.config.js, введите следующее:
module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://localhost:8181",
secure: false
}
}
}
};
Наш собственный тестовый сервер здесь:
var http = require('http');
http.createServer(function (req, res) {
res.write('Hello World!');
res.end();
}).listen(8181);
Наш пользовательский сервер может прослушивать порт локальной машины 8181, ждать переадресации соответствующего URL-адреса клиента и пересылать код ответа нашего сервера клиенту.
Однако в обычном процессе разработки вам нужен собственный код на стороне сервера.Как добавить свой собственный код на основе использования удобства сервера скаффолдинга Vue. Подход состоит в том, чтобы создать еще один пользовательский сервер, а затем позволить серверу пользовательского каркаса vue перенаправить URL-адрес на этот сервер.
В целях тестирования поместим функциюmountedизменить на:
mounted(){
var url = '/api/1'
axios ({
url:url,
method: 'get',
})
.then( res => {console.log(res.data)} )
.catch( err => console.error(err))
}
Вы можете увидеть печать в консоли браузераHello World!.
Интеграция фронтенда в бэкэнд
Мы настроили так, чтобы служба cli передавала все URL-адреса, начинающиеся с api, на сервер приложений. Просто добавьте этот файл в корневой каталог проектаvue.config.js, введите следующее:
module.exports = {
devServer: {
proxy: {
"/api/*": {
target: "http://localhost:8181/api",
secure: false
}
}
}
};
Теперь мы можем изменить внешний код использования Axios, чтобы заменить коды загрузки, удаления и добавления данных внешнего кода, чтобы эти коды могли поддерживать сетевые операции. Чтобы не смешивать код сетевых операций с кодом бизнес-логики, я решил обернуть три функции сетевых операций и поместить их в файл src/store.js:
import axios from 'axios'
function httpadd(subject,cb){
axios ({
method: 'POST',
url:'/api/todo',
headers:[{'Content-Type':'application/json'}],
data: {subject:subject}
})
.then( res => cb(res.data))
.catch( err => console.error(err))
}
function httpremove(id,cb){
axios ({
url:'/api/todo/'+id,
method: 'delete',
})
.then( res => {
cb()
})
.catch( err => console.error(err))
}
function httpreload(cb){
axios ({
url:'/api/todos',
method: 'get',
})
.then( res => {
cb(res.data)
})
.catch( err => console.error(err))
}
Выполните задачи добавления, удаления и поиска соответственно.Когда работа будет завершена, будет вызвана функция обратного вызова.В этой функции могут быть использованы данные ответа, полученные после доступа к сети.
Затем измените объект мутаций src/store.js в файле на следующий код:
mutations: {
add(state,subject){
httpadd(subject,function(todo){
state.todos.push(todo)
})
},
remove(state,id){
httpremove(id,function(){
state.todos.splice(indexById(state.todos,id),1)
})
},
reload(state){
httpreload(function(todos){
// console.log(todos)
state.todos = todos
})
// state.todos = defaultTodo
}
},
Наконец, добавьте новую функцию в TodoList и введите функцию load() из src/store.js в текущий объект через mapActions:
methods:{
...mapActions([
'remove','load'
])
},
mounted(){
this.load()
}
Чтобы вызвать это. Загрузить после запуска () нагрузки.
Интеграция: серверная часть и база данных
Чтобы завершить интеграцию серверной части с базой данных, необходимы следующие изменения:
- Массив данных Todo, первоначально находившийся на внутреннем сервере приложений, теперь должен быть получен из Mongodb.
- Изначально при добавлении объекта Todo он добавлялся только в объект AppServer, а теперь его нужно заодно прописать в Mongodb
- Изначально он удалялся только из массива при удалении, но теперь его нужно заодно удалить и в Mongodb
Поэтому теперь нам нужно добавить три функции, которые выполняют работу по получению списка, добавлению и удалению для Mongodb:
var mongo = require('mongodb')
function insertDoc(subject,callback){
const connectionString = 'mongodb://localhost:27017';
(async () => {
const client = await MongoClient.connect(connectionString,
{ useNewUrlParser: true });
const dbo = client.db('todos');
try {
var res = await dbo.collection('todo').insertOne(
{subject:subject})
callback(undefined,res.insertedId)
}
catch(err){
callback(err)
}
finally {
client.close();
}
})().catch(err => console.error(err));
}
function deleteDoc(_id,callback){
const MongoClient = mongo.MongoClient;
const connectionString = 'mongodb://localhost:27017';
(async () => {
const client = await MongoClient.connect(connectionString,
{ useNewUrlParser: true });
const dbo = client.db('todos');
try {
var myquery = {_id:new mongo.ObjectID(_id)}
var r = await dbo.collection("todo").deleteMany(myquery)
}
catch(err){
callback(err)
}
finally {
client.close();
callback()
}
})().catch(err => console.error(err));
}
function allDoc(callback){
const MongoClient = mongo.MongoClient;
const connectionString = 'mongodb://localhost:27017';
(async () => {
const client = await MongoClient.connect(connectionString,
{ useNewUrlParser: true });
const dbo = client.db('todos');
try {
var r = await dbo.collection("todo").find().toArray()
var ts = []
for (var i = 0; i < r.length; i++) {
ts.push({id:r[i]._id,subject:r[i].subject})
}
callback(undefined,ts)
}
catch(err){
callback(err)
}
finally {
client.close();
}
})().catch(err => console.error(err));
}
Функции и использование этих трех функций следующие:
- Функция allDoc получит все наборы задач из Mongodb и передаст этот набор вызывающей функции через обратный вызов.
- Функция deleteDoc удалит запись todo с указанным идентификатором из Mongodb и уведомит вызывающую сторону через обратный вызов после завершения удаления.
- Функция deleteDoc добавит запись задачи в Mongodb. После завершения добавления вызывающая сторона будет уведомлена посредством обратного вызова, и новый объект задачи будет передан вызывающей стороне.
Код здесь не сложный, но поскольку он включает в себя доступ к Mongodb, он включает в себя больше понятий. Я не буду давать здесь конкретных объяснений. Вы можете использовать их в первую очередь. Если вы хотите узнать больше о доступе к Mongodb после завершения этого руководства, вы можете проверить «Краткий справочник Mongodb» в приложении ниже.
И подключитесь с кодом, соответствующим App Server, замените исходный код маршрутизации следующим образом:
app.delete('/api/todo/:id', function (req, res) {
var userkey = req.params.id
deleteDoc(userkey,function(){
todos.splice(indexById(userkey),1)
res.end( JSON.stringify(todos));
})
})
app.get('/api/todos', function (req, res) {
allDoc(function(err,todos){
res.end( JSON.stringify(todos));
})
})
app.post('/api/todo', function (req, res) {
insertDoc(req.body.subject,function(err,_id){
var obj ={id:_id,subject:req.body.subject}
todos.push(obj)
res.end(JSON.stringify(obj))
rs()
})
})
Краткий справочник по MongoDB
В этой статье объект todo object (с атрибутами {id, name}) будет храниться в Mongodb и тестироваться на удаление запроса (Create Remove Delete = CRD). Этот тест включает в себя использование оболочки Mongodb, использование кода доступа в классическом стиле CallBack и использование кода в современном стиле Await/Async. Пройдя эту проверку, вы сможете освоить самый предварительный Mongodb.
Я использую Nodejs версии 10.7. Среда операционной системы — Mac OS X High Sierra.
Подготовьте среду
Установите и запустите демон MongoDB.
brew install mongodb
mongodb
проверка доступа
Сначала запустите оболочку MongoDB:
mongo
Введите команду для запроса списка базы данных:
> show dbs
local 0.000GB
создать базу данных
use todos
(Если база данных не существует, она будет создана. Если вы выйдете, ничего не делая, MongoDB удалит базу данных)
db.todos.insert({id:1,name:"reco"})
db.todos.insert({id:2,name:"rita"})
Спросите :
db.todos.find()
{ "_id" : ObjectId("5b727c0846b6c71a98d3af52"), "id" : 1, "name" : "reco" }
{ "_id" : ObjectId("5b727c7046b6c71a98d3af53"), "id" : 2, "name" : "reta" }
Удалить запись:
db.todo.remove({id:1})
удалить базу данных
db.todo.drop()
Доступ к MongoDB с помощью nodejs
Используйте nodejs для выполнения CRD, аналогичного объекту Shell, код выглядит следующим образом:
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/todos";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
console.log("Database created!");
var dbo = db.db("todos");
// var myobj = { id: 1, name: "reco" };
// dbo.collection("todo").insertOne(myobj, function(err, res) {
// if (err) throw err;
// console.log("1 document inserted");
// db.close();
// });
var myobj = [
{ id: 1, name: 'reco'},
{ id: 2, name: 'rita'},
];
dbo.collection("todo").insertMany(myobj, function(err, res) {
if (err) throw err;
console.log("Number of documents inserted: " + res.insertedCount);
dbo.collection("todo").find({}).toArray(function(err, result) {
if (err) throw err;
console.log(result);
var myquery = { id: 1 };
dbo.collection("todo").deleteMany(myquery, function(err, obj) {
if (err) throw err;
console.log("document deleted");
db.close();
});
});
});
})
Код очень прост и не требует дополнительных пояснений. Этот код использует модуль mongodb, который необходимо сначала установить:
npm init -y
npm i mongodb --save
затем используйтеnode index.jsЗапустите, чтобы увидеть эффект:
Database created!
Number of documents inserted: 2
[ { _id: 5b72ab9e3245f169ef5f43d2, id: 1, name: 'reco' },
{ _id: 5b72ab9e3245f169ef5f43d3, id: 2, name: 'rita' } ]
document deleted
Воспользуйтесь расширенными асинхронными функциями
Использование функции Await/Async может эффективно уменьшить ад обратных вызовов в вашем коде. Та же функциональность может быть использована с таким кодом:
const MongoClient = require('mongodb').MongoClient;
const connectionString = 'mongodb://localhost:27017';
(async () => {
const client = await MongoClient.connect(connectionString,
{ useNewUrlParser: true });
const dbo = client.db('todos');
try {
var res = await dbo.collection('todo').insertMany(
[{id:1,name:"reco"}, {id:2,name:"rita"}]);
console.log("Number of documents inserted: " + res.insertedCount);
var r = await dbo.collection("todo").find().toArray()
console.log(r);
var myquery = { id: 1 };
var r = await dbo.collection("todo").deleteMany(myquery)
console.log("document deleted");
}
finally {
client.close();
}
})().catch(err => console.error(err));
Выполняя этот код, вывод выглядит следующим образом:
Number of documents inserted: 2
[ { _id: 5b72ae8a1c674a6ac1c5aa6e, id: 1, name: 'reco' },
{ _id: 5b72ae8a1c674a6ac1c5aa6f, id: 2, name: 'rita' } ]
document deleted
Краткий справочник по Vuejs
Самому Vuejs есть чему поучиться, поэтому я написал о нем книгу. Но когда дело доходит до начала, я написал простойВступительная статья. Может пожелает прочитать.
Вышеупомянутая статья также имеет общее представление о Vuejs и вызвала интерес. Если вы действительно хотите изучить Vuejs, вам все равно придется читать книги. Здесь также есть реклама моей книги, пожалуйста, обратитесь к ней.
Указатель вопросов
Несмотря на то, что воробей маленький и полный, хотя это небольшой пример приложения, необходимо использовать каждую технологию, а возникающие технические проблемы необходимо решать одну за другой. Проблемы, с которыми я столкнулся здесь, перечислены в виде указателя, который также можно рассматривать как список проблем, которые я решил в процессе написания. Повторно просмотрите здесь проблемы, а затем используйте код, чтобы проверить собственное понимание и усвоение проблемы.
- Как создать RESTFUL-сервис с помощью Nodejs?
- Как передать доступ по URL-адресу от клиента, но нужно серверу приложений в cli-сервисе на сервер приложений?
- Как разобрать Json, отправленный внешним интерфейсом?
- Как упаковать Json в ответ?
- Как создать уникальный идентификатор? Первоначально он использовался для создания уникального идентификатора, поэтому ObjectID, сгенерированный MongoDB, не нужно использовать, поэтому эффективность вставки будет выше. Однако, в конце концов, Mongo был принят по соглашению.
- Как добавить новые одностраничные компоненты?
- Куда вставить код для получения данных на стороне сервера?
- Как использовать Буфи?
- Использование Buefy внутри приложения Vuejs?
- Использование Buefy внутри одностраничного компонента Vuejs?
- Как отключить функцию автозаполнения ввода? Это автозаполнение отображает список предыдущих записей каждый раз, когда вы печатаете, что очень раздражает.
- Как разделить состояние между компонентами?
- Почему нам нужно поделиться государством Frontend?
- Как отличить использование синхронных и асинхронных операций состояния?
- Как сопоставить операции состояния с компонентами, чтобы облегчить вызовы компонентов для методов?
- Как получить доступ к Монго?
- Как установить Mongo и быстро проверить Mongo?
- Как вставить, удалить, перечислить коллекцию из командной строки?
- Какие есть библиотеки Nodejs для доступа к Mongo и в чем их отличия?
- Как сделать вставку, удаление и список с кодом стиля ожидания?
- Как получить идентификатор элемента после вставки элемента?
- Как использовать ObjectId для запроса соответствующего элемента?
- Как получить доступ к сети, включая curl, axios, fetch и другие методы?
- Как отправить запрос Get?
- Как отправить запрос на пут?
- Как отправить json внутри тела?
- Как указать тип содержимого заголовков запроса json?
- Как получить данные Json в ответ?
Справочная статья
Хоть это приложение и маленькое, но пишется оно не за один раз, до этого я написал несколько более подробных и конкретных статей, а также написал некоторый код. Конечно, должно быть много внешних ссылок, особенно веб-сайты Medium и Stack Overflow, которые меня очень поддерживают. Некоторые ключевые справочные статьи перечислены здесь.
- Я буду использовать vuex для управления состоянием здесь, я уже писал статью.Что такое Vuex, там еще много чтений и отзывов. Конечно, кейс, который я привёл немного неохотно.Он используется ради использования.В реальном кейсе Vuex не нужен, а состояние в компоненте можно использовать.
- Хранить и обслуживать с помощью MongoDBСерверная служба CRD
- Используйте Nodejs для создания серверной службы CRD для объектов {id, name}. Планируйте обратиться к моим собственным 2 предыдущим статьям и SO Q&A о том, как создать запрос PUT внутри AJAX.
- Подготовьте сервер JSON и получите к нему доступ
- шпаргалка по разработке vuejs api server
- Axios PUT request to serveraxios-put-request-to-server
- Используйте Fecth|Axios для доступа к серверной службе CRD. В этой статье перечислены несколько способов доступа к сетевой библиотеке, что дает мне глобальный обзор, поэтому я получаю от этого пользу. [Fetch против Axios.js для выполнения http-запросов
- Метод украшения компонентов с помощью buefy. Это очень мало, так что я могу только смотреть на негоофициальная документация.