質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

3745閲覧

500 (Internal Server Error)とUncaught (in promise) Error: Request failed with status code 500

noa-1129

総合スコア25

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2020/10/16 13:26

編集2020/10/17 00:31

前提・実現したいこと

GoとVueでのspa開発で、動作確認の際に2つの500番エラーがでてしまいました。

発生している問題・エラーメッセージ

spread.js:25 GET http://127.0.0.1:8080/fetchAllProducts 500 (Internal Server Error) (anonymous) @ spread.js:25 e.exports @ spread.js:25 e.exports @ spread.js:25 Promise.then (async) r.request @ spread.js:25 r.<computed> @ spread.js:25 (anonymous) @ spread.js:25 doFetchAllProducts @ vueProduct.js:57 boundFn @ vue.js:197 created @ vueProduct.js:50 callHook @ vue.js:2895 Vue._init @ vue.js:4547 Vue$3 @ vue.js:4646 (anonymous) @ vueProduct.js:1
Uncaught (in promise) Error: Request failed with status code 500 at e.exports (spread.js:25) at e.exports (spread.js:25) at XMLHttpRequest.l.onreadystatechange (spread.js:25) e.exports @ spread.js:25 e.exports @ spread.js:25 l.onreadystatechange @ spread.js:25 Promise.then (async) doFetchAllProducts @ vueProduct.js:58 boundFn @ vue.js:197 created @ vueProduct.js:50 callHook @ vue.js:2895 Vue._init @ vue.js:4547 Vue$3 @ vue.js:4646 (anonymous) @ vueProduct.js:1

該当のソースコード

Vue

1new Vue({ 2 // 「el」プロパティーで、Vueの表示を反映する場所=HTML要素のセレクター(id)を定義 3 el: '#app', 4 5 // data オブジェクトのプロパティの値を変更すると、ビューが反応し、新しい値に一致するように更新 6 data: { 7 // 商品情報 8 products: [], 9 // 品名 10 productName: '', 11 // メモ 12 productMemo: '', 13 // 商品情報の状態 14 current: -1, 15 // 商品情報の状態一覧 16 options: [ 17 { value: -1, label: 'すべて' }, 18 { value: 0, label: '未購入' }, 19 { value: 1, label: '購入済' } 20 ], 21 // true:入力済・false:未入力 22 isEntered: false 23 }, 24 25 // 算出プロパティ 26 computed: { 27 // 商品情報の状態一覧を表示する 28 labels() { 29 return this.options.reduce(function (a, b) { 30 return Object.assign(a, { [b.value]: b.label }) 31 }, {}) 32 }, 33 // 表示対象の商品情報を返却する 34 computedProducts() { 35 return this.products.filter(function (el) { 36 var option = this.current < 0 ? true : this.current === el.state 37 return option 38 }, this) 39 }, 40 // 入力チェック 41 validate() { 42 var isEnteredProductName = 0 < this.productName.length 43 this.isEntered = isEnteredProductName 44 return isEnteredProductName 45 } 46 }, 47 48 // インスタンス作成時の処理 49 created: function() { 50 this.doFetchAllProducts() 51 }, 52 53 // メソッド定義 54 methods: { 55 // 全ての商品情報を取得する 56 doFetchAllProducts() { 57 axios.get('/fetchAllProducts') 58 .then(response => { 59 if (response.status != 200) { 60 throw new Error('レスポンスエラー') 61 } else { 62 var resultProducts = response.data 63 64 // サーバから取得した商品情報をdataに設定する 65 this.products = resultProducts 66 } 67 }) 68 }, 69 // 1つの商品情報を取得する 70 doFetchProduct(product) { 71 axios.get('/fetchProduct', { 72 params: { 73 productID: product.id 74 } 75 }) 76 .then(response => { 77 if (response.status != 200) { 78 throw new Error('レスポンスエラー') 79 } else { 80 var resultProduct = response.data 81 82 // 選択された商品情報のインデックスを取得する 83 var index = this.products.indexOf(product) 84 85 // spliceを使うとdataプロパティの配列の要素をリアクティブに変更できる 86 this.products.splice(index, 1, resultProduct[0]) 87 } 88 }) 89 }, 90 // 商品情報を登録する 91 doAddProduct() { 92 // サーバへ送信するパラメータ 93 const params = new URLSearchParams(); 94 params.append('productName', this.productName) 95 params.append('productMemo', this.productMemo) 96 97 axios.post('/addProduct', params) 98 .then(response => { 99 if (response.status != 200) { 100 throw new Error('レスポンスエラー') 101 } else { 102 // 商品情報を取得する 103 this.doFetchAllProducts() 104 105 // 入力値を初期化する 106 this.initInputValue() 107 } 108 }) 109 }, 110 // 商品情報の状態を変更する 111 doChangeProductState(product) { 112 // サーバへ送信するパラメータ 113 const params = new URLSearchParams(); 114 params.append('productID', product.id) 115 params.append('productState', product.state) 116 117 axios.post('/changeStateProduct', params) 118 .then(response => { 119 if (response.status != 200) { 120 throw new Error('レスポンスエラー') 121 } else { 122 // 商品情報を取得する 123 this.doFetchProduct(product) 124 } 125 }) 126 }, 127 // 商品情報を削除する 128 doDeleteProduct(product) { 129 // サーバへ送信するパラメータ 130 const params = new URLSearchParams(); 131 params.append('productID', product.id) 132 133 axios.post('/deleteProduct', params) 134 .then(response => { 135 if (response.status != 200) { 136 throw new Error('レスポンスエラー') 137 } else { 138 // 商品情報を取得する 139 this.doFetchAllProducts() 140 } 141 }) 142 }, 143 // 入力値を初期化する 144 initInputValue() { 145 this.current = -1 146 this.productName = '' 147 this.productMemo = '' 148 } 149 } 150}) 151

Go

1package controller 2 3import ( 4 // 文字列と基本データ型の変換パッケージ 5 strconv "strconv" 6 7 // Gin 8 "github.com/gin-gonic/gin" 9 10 // エンティティ(データベースのテーブルの行に対応) 11 entity "github.com/noa-1129/golang_spa/models/entity" 12 13 // DBアクセス用モジュール 14 db "github.com/noa-1129/golang_spa/models/db" 15) 16 17// 商品の購入状態を定義 18const ( 19 // NotPurchased は 未購入 20 NotPurchased = 0 21 22 // Purchased は 購入済 23 Purchased = 1 24) 25 26// FetchAllProducts は 全ての商品情報を取得する 27func FetchAllProducts(c *gin.Context) { 28 resultProducts := db.FindAllProducts() 29 30 // URLへのアクセスに対してJSONを返す 31 c.JSON(200, resultProducts) 32} 33 34// FindProduct は 指定したIDの商品情報を取得する 35func FindProduct(c *gin.Context) { 36 productIDStr := c.Query("productID") 37 38 productID, _ := strconv.Atoi(productIDStr) 39 40 resultProduct := db.FindProduct(productID) 41 42 // URLへのアクセスに対してJSONを返す 43 c.JSON(200, resultProduct) 44} 45 46// AddProduct は 商品をDBへ登録する 47func AddProduct(c *gin.Context) { 48 productName := c.PostForm("productName") 49 productMemo := c.PostForm("productMemo") 50 51 var product = entity.Product{ 52 Name: productName, 53 Memo: productMemo, 54 State: NotPurchased, 55 } 56 57 db.InsertProduct(&product) 58} 59 60// ChangeStateProduct は 商品情報の状態を変更する 61func ChangeStateProduct(c *gin.Context) { 62 reqProductID := c.PostForm("productID") 63 reqProductState := c.PostForm("productState") 64 65 productID, _ := strconv.Atoi(reqProductID) 66 productState, _ := strconv.Atoi(reqProductState) 67 changeState := NotPurchased 68 69 // 商品状態が未購入の場合 70 if productState == NotPurchased { 71 changeState = Purchased 72 } else { 73 changeState = NotPurchased 74 } 75 76 db.UpdateStateProduct(productID, changeState) 77} 78 79// DeleteProduct は 商品情報をDBから削除する 80func DeleteProduct(c *gin.Context) { 81 productIDStr := c.PostForm("productID") 82 83 productID, _ := strconv.Atoi(productIDStr) 84 85 db.DeleteProduct(productID) 86} 87

試したこと

・既存のコードのコピペ

throw new Error('レスポンスエラー')

.catch(error => { console.error(error);

に変えてみたり

補足情報(FW/ツールのバージョンなど)

・go version go1.15.2 darwin/amd64

vue@2.6.12

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

ターミナルにエラーが出力されており、そちらを確認したら
Error 1045: Access denied for user 'root'@'localhost' (using password: YES)
Error 1049: Unknown database 'shopping'
db接続のパスワードをrootにしていたので自身のrootパスワードに変更。
shoppinというデータベースがないとのことなので、create database shoppingで作成することで解決できました!

今回はdb接続のコードに問題があり、データベースは自動作成されるものだと思ってしまっていました????

投稿2020/10/17 06:19

noa-1129

総合スコア25

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問