Home>

In spa development with Go and Vue, I got two 500 errors when checking the operation.

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
Corresponding source code
new Vue ({{
    // In the "el" property, define the location that reflects the Vue display = HTML element selector (id)
    el:'#app',
    // When you change the value of a property of the data object, the view reacts and updates to match the new value
    data: {
        // Product information
        products: [],


        // Product name
        productName:'',
        // Note
        productMemo:'',
        // Product information status
        current: -1, -1,
        // Product information status list
        options: [
            {value: -1, label:'all'},


            {value: 0, label:'not purchased'},


            {value: 1, label:'purchased'}
        ],,


        // true: Entered/false: Not entered
        isEntered: false
    },


    // Calculated properties
    computed: {
        // Display the status list of product information
        labels () {
            return this.options.reduce (function (a, b) {
                return Object.assign (a, {[b.value]: b.label})
            },

 {})
        },


        // Return the product information to be displayed
        computedProducts () {
          return this.products.filter (function (el) {
            var option = this.current<0? true: this.current === el.state
            return option
          },

 this)
        },


        // Check the input
        validate () {
            var isEnteredProductName = 0<this.productName.length
            this.isEntered = isEnteredProductName
            return isEnteredProductName}
    },


    // Processing when creating an instance
    created: function () {
        this.doFetchAllProducts ()
    },


    // Method definition
    methods: {
        // Get all product information
        doFetchAllProducts () {
            axios.get ('/ fetchAllProducts')
            .then (response =>{
                if (response.status! = 200) {
                    throw new Error ('response error')
                } else {
                    var resultProducts = response.data
                    // Set the product information obtained from the server in data
                    this.products = resultProducts
                }
            })
        },


        // Get one product information
        doFetchProduct (product) {
            axios.get ('/ fetchProduct', {
                params: {
                    productID: product.id
                }
            })
            .then (response =>{
                if (response.status! = 200) {
                    throw new Error ('response error')
                } else {
                    var resultProduct = response.data
                    // Get the index of the selected product information
                    var index = this.products.indexOf (product)
                    // You can use splice to reactively change the elements of an array of data properties
                    this.products.splice (index, 1, resultProduct [0])
                }
            })
        },


        // Register product information
        doAddProduct () {
            // Parameters to send to the server
            const params = new URLSearchParams ();
            params.append ('productName', this.productName)
            params.append ('productMemo', this.productMemo)
            axios.post ('/ addProduct', params)
            .then (response =>{
                if (response.status! = 200) {
                    throw new Error ('response error')
                } else {
                    // Get product information
                    this.doFetchAllProducts ()
                    // Initialize the input value
                    this.initInputValue ()
                }
            })
        },


        // Change the status of product information
        doChangeProductState (product) {
            // Parameters to send to the server
            const params = new URLSearchParams ();
            params.append ('productID', product.id)
            params.append ('productState', product.state)
            axios.post ('/ changeStateProduct', params)
            .then (response =>{
                if (response.status! = 200) {
                    throw new Error ('response error')
                } else {
                    // Get product information
                    this.doFetchProduct (product)
                }
            })
        },


        // Delete product information
        doDeleteProduct (product) {
            // Parameters to send to the server
            const params = new URLSearchParams ();
            params.append ('productID', product.id)
            axios.post ('/ deleteProduct', params)
            .then (response =>{
                if (response.status! = 200) {throw new Error ('response error')
                } else {
                    // Get product information
                    this.doFetchAllProducts ()
                }
            })
        },


        // Initialize the input value
        initInputValue () {
            this.current = -1
            this.productName =''
            this.productMemo =''
        }
    }
})
package controller
import (
    // String and basic data type conversion package
    strconv "strconv"
    // Gin
    "github.com/gin-gonic/gin"
    // Entity (corresponds to a row in a database table)
    entity "github.com/noa-1129/golang_spa/models/entity"
    // Module for DB access
    db "github.com/noa-1129/golang_spa/models/db"
)
// Define the purchase status of the item
const (
    // Not Purchased not purchased
    NotPurchased = 0
    // Purchased is purchased
    Purchased = 1
)
// FetchAllProducts gets all product information
func FetchAllProducts (c * gin.Context) {
    resultProducts: = db.FindAllProducts ()
    // Return JSON for access to URL
    c.JSON (200, resultProducts)
}
// FindProduct gets the product information of the specified ID
func FindProduct (c * gin.Context) {
    productIDStr: = c.Query ("productID")
    productID, _: = strconv.Atoi (productIDStr)
    resultProduct: = db.FindProduct (productID)
    // Return JSON for access to URL
    c.JSON (200, resultProduct)
}
// AddProduct registers the product in the DB
func AddProduct (c * gin.Context) {
    productName: = c.PostForm ("productName")
    productMemo: = c.PostForm ("productMemo")
    var product = entity.Product {
        Name: productName,
        Memo: productMemo,
        State: Not Purchased,
    }
    db.InsertProduct (&product)
}
// ChangeStateProduct changes the state of product information
func ChangeStateProduct (c * gin.Context) {
    reqProductID: = c.PostForm ("productID")
    reqProductState: = c.PostForm ("productState")
    productID, _: = strconv.Atoi (reqProductID)
    productState, _: = strconv.Atoi (reqProductState)
    changeState: = NotPurchased
    // If the product status is not purchased
    if productState == NotPurchased {
        changeState = Purchased
    } else {
        changeState = NotPurchased
    }
    db.UpdateStateProduct (productID, changeState)
}
// DeleteProduct deletes product information from DB
func DeleteProduct (c * gin.Context) {
    productIDStr: = c.PostForm ("productID")
    productID, _: = strconv.Atoi (productIDStr)
    db.DeleteProduct (productID)
}
What I tried

・ Copy and paste of existing code

throw new Error ('response error')


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

Try changing to

Supplementary information (FW/tool version, etc.)

・ Go version go1.15.2 darwin/amd64

[email protected]

  • Answer # 1

    An error is output to the terminal, and if you check that,
    Error 1045: Access denied for user'root' @'localhost' (using password: YES)
    Error 1049: Unknown database'shopping'
    Since the password for the db connection was root, I changed it to my own root password.
    It is said that there is no database called shoppin, socreate database shoppingI was able to solve it by creating it in!

    This time there was a problem with the db connection code and I thought the database would be created automatically