Эта статья участвовала в приказе о созыве Haowen, нажмите, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!

Описание юниклауда

uniCloudЭто платформа облачной разработки, основанная на безсерверном режиме и программировании js, предоставляемая DCloud совместно с Alibaba Cloud и Tencent Cloud.

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

Интерактивная тема

С облачной разработкой порог для full-stack инженеров внезапно стал очень низким. Считаете ли вы, что термин «полный стек» устарел? Будете ли вы представлять себя в качестве полного стека в своем резюме?

Пожалуйста, оставьте свое мнение в разделе комментариев!

начать строить

Создайте новый проект uniapp

Установите флажок Включить uniCloud и выберите Alibaba Cloud.

Различия между Tencent Cloud и Alibaba Cloud

Учитывая два варианта, некоторые друзья обязательно спросят, почему вы выбрали Alibaba Cloud? В чем разница между ними?

Али Клауд

50 бесплатных облачных пространств с бесплатным статическим веб-хостингом,

Тенсент Облако

1 бесплатное облачное пространство, статический веб-хостинг требует оплаты, а экология Tencent не требует аутентификации.

Поскольку это nodejs, трудно ли аутентифицироваться, полагаясь на массивные пакеты npm? Определенно выберите Alibaba Cloud~

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

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

облачная функция

Нашел такой интерфейс обоев от Du Niang, от 360, надеюсь не заблокируют.

Получить категории обоев

http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAllCategories

Получить список обоев по категориям

http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid=26&start=0

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

Код для получения облачной функции классификации обоев

const res = await uniCloud.httpclient.request("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAllCategories",{
        dataType:"json"
});
return res.data

Получите код облачной функции списка обоев в категории

//cid是分类id
const cid = event.cid || 26;
//start是该分类列表的当前的指针，用于分页
const start = event.start || 0;

const res = await uniCloud.httpclient.request("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid="+cid+"&start="+start,{
        dataType:"json"
});
return res.data

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

URL-адресация облачных функций

После завершения двух вышеуказанных облачных функций мы можем использовать их в среде uniapp.uniCloud.callFunctionпришел просить.

//请求壁纸分类
uniCloud.callFunction({
        name:"getAllCategories",
        success: (res) => {
                console.log(res);
        }
})

//请求分类下壁纸列表
uniCloud.callFunction({
        name:"getAppsByCategory",
        data:{
                cid:21,
                start:0
        },
        success: (res) => {
                console.log(res);
        }
})

Предположим, мы хотим написать приложение Flutter в будущем, а также хотим вызвать эту облачную функцию. В настоящее время вам необходимо использовать URL-адресацию облачных функций, то есть позволить облачной функции быть отделенной от среды uniapp и использовать обычные http-запросы для вызова.

Нажмите на домен привязки облачной функции, он будет автоматически назначен намbspapp.comдоменное имя второго уровня

Затем мы входим на страницу сведений об облачной функции, нажимаем кнопку редактирования в области URL-адреса облачной функции и устанавливаем суффикс адреса URL-запроса на/http/getAllCategories, этот адресный суффикс можно взять произвольно

После завершения настройки к этому интерфейсу можно будет получить доступ через общий URL-адрес. Вы можете попробовать запросить следующие два URL-адреса.

//获取分类
https://b739e39d-73fb-432d-b357-3dc97e6446c3.bspapp.com/http/getAllCategories

//获取分类下的壁纸列表
https://b739e39d-73fb-432d-b357-3dc97e6446c3.bspapp.com/http/getAppsByCategory?cid=21&start=0

я используюpostwoman(Классики) Пожалуйста, покажите это всем

Здесь следует отметить, что после URL-адреса облачной функцииgetа такжеpostСпособ передачи параметров отличается

URL-адрес облачной функции для получения параметра

if(event.queryStringParameters){
        start = event.queryStringParameters.start || 0;
        cid = event.queryStringParameters.cid || 26;
}

Облачная функция URL-адреса параметров публикации

let bodyData = JSON.parse(event.body);
start = bodyData.start || 0;
cid = bodyData.cid || 26;

Кроме того, после преобразования URL-адреса разработчикам необходимо обратить внимание на безопасность бизнеса и ресурсов.

Безопасность. Чтобы обеспечить безопасность бизнеса, разработчикам необходимо реализовать в коде контроль разрешений и защиту безопасности, чтобы предотвратить несанкционированный доступ к запуску конфиденциальных операций.
Выставление счетов: после включения URL-адресации для облачной функции, если обнаруживается большое количество злонамеренных обращений и потребляются ресурсы облачной функции, разработчик может установить пустой адрес доступа к облачной функции, чтобы прекратить поддержку доступа по протоколу HTTP.

Распространение в один клик, внешний веб-хостинг

Внешний вид этого сайта с обоями очень прост. Есть только одна единственная страница Vue. В основном она посвящена следующим вещам. Код не публикуется. Вы можете проверить исходный код самостоятельно.

запросить облачную функцию классификации обоев
Облачная функция списка обоев категории запроса
Пейджинг и подтягивание для загрузки дополнительной логики
Скачать обои в разных разрешениях

Затем мы щелкаем правой кнопкой мыши по каталогу проекта и выбираем发行>上传网站到服务器

Выберите облачное пространство, которое мы хотим развернуть

После завершения развертывания доступное доменное имя будет предоставлено по умолчанию, а это означает, что на данный момент мы не потратили ни цента, а веб-сайт был развернут в Интернете и доступен людям со всего мира.

static-b739e39d-73fb-432d-b357-3dc97e6446c3.bspapp.com/#/

Однако текущее доменное имя немного уродливое, а доменное имя по умолчанию будет ограничено по скорости, поэтому мы все равно потратим немного денег на покупку доменного имени и его анализ.

Введите конфигурацию параметров веб-хостинга

После прохождения аудита настройте сгенерированный адрес CNAME в разрешении доменного имени.

Теперь доменное имя этого сайта с обоями выглядит неплохо, верно?wallpaper.jnsii.com/

Эпилог

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

Исходный код и видеоурок

Эта статья поддерживает видеоруководство и адрес исходного кода.

Обратите внимание на красивую старую обезьяну

Если эта статья оказалась для вас полезной, я надеюсь, что вы поставите лайк и поддержите меня.