Рубрики
Без рубрики

Как настроить реальный проект с Go и Vue

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

Автор оригинала: FreeCodeCamp Community Member.

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

Быстро вперед через несколько месяцев, и теперь я общий вентилятор и использую его для многих проектов.

В этой статье я покажу вам, как я устанавливаю веб-приложение Full-Stack с GO и VUE.

Давайте погрузиться в!

Что мы собираемся создать

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

Настройка модуля Go

Во-первых, я создаю новый каталог. Затем я настроил модуль GO, запустив следующую команду.

go mod init github.com/Dirk94/website-thumbnail-generator

Это создаст Go.mod Файл, который отслеживает все зависимости модулей. Это похоже на Package.json файл в узле проекта.

Далее я создаю новый каталог Главная в котором я добавляю server.go файл. Это будет главная точка входа в приложение.

На данный момент давайте просто распечатаем сообщение «Hello World».

package main

import "fmt"

func main() {
	fmt.Println("Hello world")
}

Для запуска программы я запускаю следующую команду из каталога проекта.

go run main/server.go
Hello world

Отлично, пока все работает! ?

Настройка веб-сервера

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

Давайте обновим основную функцию.

func main() {
	http.HandleFunc("/", homePageHandler)

	fmt.Println("Server listening on port 3000")
	log.Panic(
		http.ListenAndServe(":3000", nil),
	)
}

Это запустит веб-сервер и прослушивает порт 3000.

Любой запрос, приходящий, будет обрабатываться HomepageHandler функция. Это еще не существует, поэтому давайте создадим это.

func homePageHandler(w http.ResponseWriter, r *http.Request) {
	_, err := fmt.Fprintf(w, "hello world")
	checkError(err)
}

func checkError(err error) {
	if err != nil {
		log.Panic(err)
	}
}

Все эта функция делает написание «Hello World» к http.responsewriter

Checkerror Функция – это просто удобная функция, которая остановит программу и распечатает трассировку стека, если Ошибка . не ноль.

При запуске программы веб-сервер печатает сообщение «Hello World» правильно!

Создание проекта Vue

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

vue create frontend

Это создает много файлов, но не перегружены. Давайте начнем с помощью сервера Vuue Development.

yarn serve

При навигации по localhost: 8081 Вы можете увидеть, что приложение Vue работает!

Хорошо, давайте немного очистим каталог Frontend.

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

Тогда я обновляю App.vue файл.

Я использую V-модель Тег и я называю MakeWebsitethumbnail функция, когда форма представляет. Прямо сейчас они не существуют. Давайте добавим их.

Я также использую несколько классов загрузки 4, поэтому для работы я должен добавить CSS Bootstrap на Public/index.html файл.

Хорошо, давайте выстрелите веб-сервер и проверьте, видим ли мы сообщение журнала.

Хорошо, это работает! ?

Создание эскизы веб-сайта

Чтобы создать миниатюру сайта, я собираюсь использовать Screenshotapi.net Отказ Таким образом, мне нужно позвонить только на API, чтобы сделать тяжелый подъем для меня.

Сначала я устанавливаю Axios.

yarn add axios

Тогда я импортирую его в App.vue файл.

Читайте ещё по теме: