Итак, на этой неделе на работе на работе коллега поболтал со мной на том, чтобы положить то, что он научился использовать (связанные с Android), но нуждался в небольшом API для работы. Моя начальная мысль делала это Express.js. Через несколько часов назад я понял, что мне нужно было работать с загрузкой изображения и как обычное обладание для спасения. На полпути, я застрял, но не мог найти много помощи, поэтому я решил написать это, как только я закончил. Этот пост предполагает, что вы уже используете Adonis (вероятно, влюблен в него), поэтому я не пойду пытаться проповедовать вам Adonis (вы все равно можете проверить здесь, чтобы начать работу). В этом посте мы создадим сообщение с прикрепленным изображением и загруженным изображением для Peouliary. Во-первых, давайте создадим новое приложение с
Adonis New Postapp.
Затем CD в каталог проекта и запустите команду ниже
Адонис подают –dev.
Если все прошло хорошо, приложение должно быть подано в порту 3333. Посещение http://127.0.0.1:3333, мы должны увидеть страницу ниже
Большой! Так, что дальше? Помните, что Adonis – это Framework MVC для Node.js Да? Итак, давайте начнем положить компоненты нашего небольшого приложения вместе. Давайте начнем с миграции. Для этого учебника мы будем использовать базу данных MySQL. Итак, давайте сначала установим MySQL, запустив
NPM установить mysql –save
После установки нам нужно сделать Adonis в наших настройках базы данных. Открыть .env Файл и обновите элементы ниже, устанавливая значения в свои собственные учетные данные базы данных.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_USER=root DB_PASSWORD= DB_DATABASE=adonis
Обратите внимание, что по умолчанию db_connection in adonis – sqlite. Обязательно измените его в MySQL, как указано выше.
Далее мы создаем файл миграции для проведения наших постов таблицы. Стол столба должен содержать ID, название, тело Image_URL и Timestamps Отказ Запустите следующую команду, чтобы создать миграцию.
Adonis Make: Миграция
При появлении запроса выберите параметр «Создать таблицу», чтобы создать новую таблицу и нажмите Enter. Вновь созданный файл миграции можно найти в База данных/миграции каталог. Поскольку мы не будем нуждаться в существующих таблицах, давайте удалим две файлы миграции по умолчанию, уже созданные Adonis – таблице пользователей и таблицей токенов. Обновите посты миграции на один ниже
up () {
this.create('posts', (table) => {
table.increments();
table.string('title');
table.text('body');
table.string('image_url').nullable();
table.timestamps()
})
}
С этим мы можем провести нашу миграцию с
Миграция Adonis: Run
Как только миграция успешно запустится, мы можем затем создать нашу почтовую модель с
Адонис делает: модель пост
Приведенное выше создает нашу модель в каталоге приложения/моделей
Теперь давайте обновим наш маршрут соответствующим образом. Маршруты можно найти в начале/маршрутах. Джей, тогда мы можем обновить маршруты, как показано ниже
const Route = use('Route');
Route.get('/', 'PostController.index');
Route.post('/', 'PostController.create');
Далее мы создаем PostController с
Adonis Make: Controller Post
При появлении запроса выберите HTTP Restells и нажмите Enter. Контроллер можно найти в каталоге App/Controllers/HTTP. Теперь, когда у нас есть настройка нашего контроллера, давайте создадим необходимые методы. На данный момент наш постконтроллер должен выглядеть так
'use strict';
const Post = use('App/Models/Post');
class PostController {
async index( {view}) {
const posts = await Post.all();
return view.render('index', {posts: posts.toJSON()})
}
async create( {request, response, view}) {
}
}
module.exports = PostController;
Давайте создадим пользовательский интерфейс для нашего маленького приложения сейчас. Нам понадобится два файла, чтобы держать наши взгляды. Один для главного макета и другого, чтобы держать наши посты. Давайте создадим эти два файла с
Adonis Make: просмотр мастера
а также
Adonis Make: Просмотр индекса
Представления можно найти в каталоге ресурсов/просмотров. Файл Master.Edge – это базовый макет и распространяется на индекс. Мастер-макет содержит следующее
Posts App {{style('style.css')}}@!section('content')
В Index.Edge форма представлена в виде модального загрузки, как показано ниже
@layout('master')
@section('content')
@endsection
Не забывайте добавленные в форму, поскольку мы отправляем файл на сервер.
Далее – обработать файл на сервере. Давайте установим библиотеку Vectorial Node.js, запустив
NPM установить Petouthary –Save
Затем зарегистрируйтесь на Countrary, если у вас нет учетной записи еще или если у вас уже есть аккаунт, скопируйте свои учетные данные FRO Dashboard и вставьте в свой .env как ниже
CLOUDINARY_API_KEY = CLOUDINARY_API_SECRET = CLOUDINARY_CLOUD_NAME =
Далее создайте файл cloudaryservice.js в каталоге приложений/сервисов, чтобы держать наш облачный конфиг. Файл Cloudaryservice.js должен иметь в нем следующее
const cloudinary = require('cloudinary');
const Env = use('Env');
cloudinary.config({
cloud_name: Env.get('CLOUDINARY_CLOUD_NAME'),
api_key: Env.get('CLOUDINARY_API_KEY'),
api_secret: Env.get('CLOUDINARY_API_SECRET')
});
module.exports = cloudinary;
Если вы попытаетесь отправить форму сейчас, вы, скорее всего, получите ошибку несоответствия токена CSRF, как ниже
Это связано с тем, что флажка токена не работает с Multipart/Form-data. Обходной путь для этого должен перейти к конфигурации/Shield.js и добавить URL в FilterUris в клавише CSRF, как ниже. Это предотвращает промежуточную программу токена на этом маршруте.
csrf: {
enable: true,
methods: ['POST', 'PUT', 'DELETE'],
filterUris: ['/'],
cookieOptions: {
httpOnly: false,
sameSite: true,
path: '/',
maxAge: 7200
}
}
Далее, давайте обработаем форму на бэкэнде, обновляя метод создания в PostController, чтобы иметь фрагмент ниже
'use strict';
const Post = use('App/Models/Post');
const CloudinaryService = use('App/Services/CloudinaryService');
class PostController {
async index( {view}) {
const posts = await Post.all();
return view.render('index', {posts: posts.toJSON()})
}
async create( {request, response, session}) {
const {title, body} = request.all();
const file = request.file('image');
try {
const cloudinaryResponse = await CloudinaryService.v2.uploader.upload(file.tmpPath, {folder: 'postsapp'});
let post = new Post();
post.title = title;
post.body = body;
post.image_url = cloudinaryResponse.secure_url;
await post.save();
session.flash({success: 'Successfully added post'});
return response.redirect('back');
} catch (e) {
session.flash({error: 'Error Uploading Image'});
return response.redirect('/')
}
}
}
module.exports = PostController;
Обратите внимание на V2 и {папка: «PostApp»}, добавленные в облачность, чтобы убедиться, что изображения загружаются в папку.
Наконец, давайте обновим index.gee, чтобы отобразить сообщения и уведомления и сделать небольшой стиль. Стайлинг находится в Public/style.css.
@if(old('success')){{old('success')}}@elseif(old('error')){{old('error')}}@endif@each(post in posts)@endeach{{post.title}}
{{post.body}}
Still.css
body, html {
background: #efefef;
}
.wrapper {
padding: 50px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background: #ffffff;
padding: 20px;
transition: 0.3s;
}
.card .title {
font-weight: bold;
}
.notifications {
padding-top: 30px;
}
.posts-wrapper {
padding-top: 20px;
}
.post-body {
padding-top: 10px;
}
.single-post-wrapper {
height: 350px;
}
Тестирование нашего небольшого приложения, мы должны иметь что-то вроде того, что показано ниже
Вот и все! У нас есть наше рабочее приложение с функцией загрузки изображений.