Go+Echo+Vue.js SPA로 가는 첫걸음
Golang + Echo + Vue.js에서 SPA
cotch-io/go-echo-vue-single-page-app 이 리포지토리를 보고 참고로 했습니다만, ajax에 추천되어 있지 않다
vue-resourceを使用している + バージョンが古い 때문에,포크하고
axiosを使用するように書き換え + めちゃくちゃ簡素化 한 것을 해설합니다. 단순화
커밋은 이쪽↓
htps : // 기주 b. 코 m / 사과 야드 토모 / 고 - 쵸 ゔ 에 - 신 g ぇ - 펑 - p / 코미 t / 에후 d92735 푹 헉 c
☆이하 해설입니다☆
main
func main() {
e := echo.New()
e.File("/", "public/index.html")
e.GET("/tasks", handlers.GetTasks)
e.Start(":8080")
}
그 말이지만,
http://localhost:8080/에 액세스하면 public/index.html를 반환하고,http://localhost:8080/tasks에 액세스하면 handlers.GetTasks()를 두드리는 웹 서버를 시작합니다.모델
// Task is a struct containing Task data
type Task struct {
ID int `json:"id"`
Name string `json:"name"`
}
// TaskCollection is collection of Tasks
type TaskCollection struct {
Tasks []Task `json:"items"`
}
// GetTasks
func GetTasks() (tc TaskCollection) {
tc = TaskCollection{
[]Task{
{1, "洗濯"},
{2, "掃除"},
},
}
return
}
Task, TaskCollection의 정의,GetTasks()는 적절한 값을 포함하고 있습니다 TaskCollectionhandler
// GetTasks endpoint
func GetTasks(c echo.Context) error {
return c.JSON(http.StatusOK, models.GetTasks())
}
간단합니다. 위의
models.GetTasks()를 두드리고 models.TaskCollection를 json 형식으로 응답으로 반환합니다.index.html
<html>
<head>
<!-- Vue.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script>
</head>
<body>
<div>
<h1>Hello Vue.js</h1>
<button v-on:click="showTask">タスクを表示する。</button>
<ul>
<li v-for="task in tasks">
{{ task.name }}
</li>
</ul>
</div>
<script>
new Vue({
el: 'body',
data: {
tasks: [],
},
methods: {
showTask: function() {
// Use the vue-resource $http client to fetch data from the /tasks route
this.$http.get('/tasks').then(function(response) {
this.tasks = response.data.items ? response.data.items : []
})
},
}
})
</script>
</body>
</html>
go run todo.go를 터미널에서 두드리고 브라우저에서 http://localhost:8080에 액세스하면
이런 느낌이 될 것 같아요.
그런 다음
タスクを表示する。를 누르면,
이렇게 될 것. 이것만으로는 뭐라고 SPA입니다.
다음은 리팩터에 가깝지만,
Vue.js 버전을 새롭게 (2.5.13) + ajax에 axios 사용
커밋은 이쪽↓
htps : // 기주 b. 코 m / 사과 야드 토모 / 고에 쵸 ゔ 에 응 g ぇ - 펑 - p / 코미 t / 515215733df732422 3d7 ab724 421 23954 bbb
☆이하 해설입니다☆
로드 스크립트 태그 변경
- <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
vue의 버전을 올렸습니다. 버전의 숫자를 바꾼 것 뿐만 아니라 cdn의 도메인도 바뀌거나 새로워진 것 같습니다.
vue-resourece -> axios로 변경되었습니다. vue-resource 는, 사용할 수 없는 것은 아닌 것 같습니다만, 본가 추천이 아니게 된 것 같기 때문에 바꾸어 둡시다.element 변경
- el: 'body',
+ el: '#top',
이것은 단순히 body 태그 (확실히 html 태그도)에는 element로 마운트 할 수 없게 된 것 같습니다 (warning지도)
아야후야입니다, , 곧 시도할 수 있다고 생각하므로 , 스스로 시험해 보세요.
메소드 변경
- this.$http.get('/tasks').then(function(response) {
- this.tasks = response.data.items ? response.data.items : []
- })
+ axios.get('/tasks').then(res => {
+ this.tasks = res.data.items || [];
+ }).catch(function (error) {
+ console.log(error);
+ });
vue-resourece -> axios의 변경에 수반하는 수정입니다.다시 쓴 후에는 예외 처리도 포함하고 있기 때문에, 그것이 없으면 실제로는 거의 같은 것이군요.
이상
이렇게 간단하게 SPA의 구조를 만들 수 있다니!
SPA라든지 묻어 그렇게 사람은 이 기사 정도라면 움직일 수 있다고 생각하므로, 계기로서 이용해 주세요!
고마워요.
Reference
이 문제에 관하여(Go+Echo+Vue.js SPA로 가는 첫걸음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/K-juju/items/f6d0eedb9aee5714cb73텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
