I have a web application which is linked to an API. Usually I launch the API and it works. And now, for no reason ( I change nothing in my code and in the API ), it does not work anymore and I can a ton of error like the one I shared on my web application. What can I do ? `
at callWithErrorHandling (vue.runtime.esm-bundler.js?ebac:123)
at setupStatefulComponent (vue.runtime.esm-bundler.js?ebac:1242)
at setupComponent (vue.runtime.esm-bundler.js?ebac:1238)
at mountComponent (vue.runtime.esm-bundler.js?ebac:838)
at processComponent (vue.runtime.esm-bundler.js?ebac:834)
at patch (vue.runtime.esm-bundler.js?ebac:755)
at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm-bundler.js?ebac:856)
at ReactiveEffect.run (vue.runtime.esm-bundler.js?ebac:67)
at setupRenderEffect (vue.runtime.esm-bundler.js?ebac:881)
`
I tried to relaunch the web application but same problem.
CodePudding user response：
I had the same problem and I solved it. You can try to relaunch the API every 15min. It works at the second time for me. But I don't know why.
CodePudding user response：
I also have a really long answer so I will try to shorten it but it can come from the store in src/stores/yourstore.js
First you will have to import what you need and do it like if it was a state
import { defineStore } from "pinia";
export const useGlobalStateStore = defineStore("global", {
state: () => ({
globalSell: 0,
whateverarray: [...],
}),
Then, you have the getter and actions ( not getter and setter be carful )
getters: {
doubleCount(state) {
return state.globalSell * 2;
},
},
actions: {
incrementGlobalSell() {
this.globalSell ;
},
deleteCategory(id) {
this.categories = this.categories.filter((element) => {
return element.id != id;
});
},
And if you want to import it on you file, it will be first an import pn indexPage.js for example or whatever you want
<script>
-> import {useGlobalStateStore} from "stores/globalState";
import NavComponent from "components/NavComponent";
In the data you get the store
data() {
return {
-> store : useGlobalStateStore(),
email: "",
And to use it it will be this.store.whatyouwant = whatyouwanttostore
CodePudding user response：
Now for the potential API problem, Make sure to do the good configuration. this is for the db.config.js in app/config/
module.exports = {
HOST:"sql12.freemysqlhosting.net",
USER:"user",
PASSWORD:"pass",
DB:"nameOfDB"
}
Other configuration you may need is the token config but it's a little bit complicated so no problem with it, tell me if you need it later.
Example of my file from customer.controller.js
const Customer = require("../models/customer.model.js");
const getAllCustomer = (req, res) => {
Customer.getAllRecords((err, data) => {
if (err) {
res.status(500).send({
message: err.message || "Some error occured while
retriveing data.",
});
} else res.send(data);
});
};
const createNewCustomer = (req, res) => {
if (!req.body) {
res.status(400).send({
message: "Content can not be empty.",
});
}
const customerObj = new Customer({
name: req.body.name,
mail: req.body.mail,
password: req.body.password,
address: req.body.address,
postCode: req.body.postCode,
city: req.body.city
});
Customer.create(customerObj, (err, data) => {
console.log(req.body)
if (err) {
res.status(500).send({
message: err.message || "Some error occured while
creating.",
});
} else {
res.send(data);
}
});
};
const updateCustomer = (req, res) =>{
if(!req.body){
res.status(400).send({ message: "Content can not be
empty."});
}
const data = {
name: req.body.name,
mail: req.body.mail,
password: req.body.password,
address: req.body.address,
postCode: req.body.postCode,
city: req.body.city
};
Customer.updateByID(req.params.id, data, (err, result)=>{
if(err){
if(err.kind == "not_found"){
res.status(401).send({
message: "Not found Customer id: "
req.params.id
});
} else{
res.status(500).send({
message: "Error update Customer id: "
req.params.id
});
}
} else res.send(result);
});
};
const deleteCustomer = (req, res) =>{
Customer.delete(req.params.id, (err, result)=>{
if(err){
if(err.kind == "not_found"){
res.status(401).send({
message: "Not found Customer id: "
req.params.id
});
}else{
res.status(500).send({
message: "Error delete Customer id: "
req.params.id
});
}
}
else res.send(result);
});
};
const loginCustomer = (req, res) => {
if (!req.body) {
res.status(400).send({
message: "Content can not be empty.",
});
}
const account = new Customer({
mail: req.body.mail,
password: req.body.password
});
Customer.login(account, (err, data)=>{
if(err){
if(err.kind == "not_found"){
res.status(401).send({
message: "Not found " req.body.mail
});
} else if (err.kind == "invalid_pass"){
res.status(401).send({
message: "Invalid Password"
});
} else{
res.status(500).send({
message: "Error retriveing " req.body.mail
});
}
}else res.send(data);
});
};
module.exports = {
getAllCustomer,
createNewCustomer,
updateCustomer,
deleteCustomer,
loginCustomer
};
CodePudding user response：
Maybe there is a problem with the axios.js file in src/boot/ folder
import { boot } from 'quasar/wrappers'
import axios from 'axios'
// example: const RESTURL = "http://172.26.117.16:3000/api"
const RESTURL = "http://localhost:3000/api"
const api = axios.create({
baseURL: RESTURL,
headers:{ "Content-type" : "application/json" }
})
export default boot(({ app }) => {
app.config.globalProperties.$axios = axios
app.config.globalProperties.$api = api
app.config.globalProperties.$RESTURL = RESTURL
})
export { api, RESTURL }
You can try this !
And to use you new formatted axios injavascript page
this.$api.post("/customer/login", data)
.then(res => {
if (res.status == 200){
this.errorMessage = ""
this.store.loggedUser = res.data
this.$router.push('/')
}
})
.catch((err) => {
this.errorMessage = "Wrong Mail / Password"
})
Example of my customer.model.js
const sql = require("./db");
//Constructor
const Customer = function (customer) {
this.name = customer.name;
this.mail = customer.mail;
this.password = customer.password;
this.address = customer.address;
this.postCode = customer.postCode;
this.city = customer.city;
};
Customer.getAllRecords = (result) => {
sql.query("SELECT * FROM Customer", (err, res) => {
if (err) {
console.log("Query error: " err);
result(err, null);
return;
}
result(null, res);
});
};
Customer.create = ( newCustomer, result ) => {
sql.query("INSERT INTO Customer SET ?", newCustomer, (err, res)
=> {
if (err) {
console.log("Query error: " err);
result(err, null);
return;
}
console.log("Created Customer: ", {
id: res.insertId,
...newCustomer
});
result(null, {
id: res.insertId,
...newCustomer
});
})
}
Customer.updateByID = (id, data, result) => {
sql.query(
"UPDATE Customer SET name=?, mail=?, password=?, address=?,
postCode=?, city=? WHERE id=?",
[data.name, data.mail, data.password, data.address,
data.postCode, data.city, id],
(err, res) => {
if (err) {
console.log("Query error: " err);
result(err, null);
return;
}
if (res.affectedRows == 0) {
//this id not found
result({ kind: "not_found" }, null);
return;
}
console.log("Updated Customer: ", { id: id, ...data });
result(null, { id: id, ...data });
}
);
};
Customer.delete = ( id, result ) => {
sql.query("DELETE FROM Customer WHERE id = ?", id, (err, res)
=> {
if (err) {
console.log("Query error: " err);
result(err, null);
return;
} if(res.affectedRows == 0){
result({kind: "not_found"}, null)
return;
}
console.log("Deleted Customer id: ", id)
result(null, {id: id})
});
}
Customer.login = (account, result) => {
sql.query(
"SELECT * FROM Customer WHERE mail = ?", account.mail,
(err, res) => {
if (err) {
console.log("Query error: " err);
result(err, null);
return;
}
if (res.length) {
const validPassword = account.password ==
res[0].password
if (validPassword) {
result(null, res[0]);
return;
} else {
console.log("Password invalid.");
result({ kind: "invalid_pass" }, null);
return;
}
}
result({ kind: "not_found" }, null);
}
);
};
module.exports = Customer
CodePudding user response：
The problem you have could come from the route also in src/router/routes.js
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/IndexPage.vue') },
{ path: 'signin', component: () => import('pages/SigninPage.vue')
},
{ path: 'signup', component: () => import('pages/SignupPage.vue')
},
]
},
{
path: '/:catchAll(.*)*',
component: () => import('pages/ErrorNotFound.vue')
}
]
export default routes
This error could come from the route, try this an give me update!
And if we follow this priciple, the API route would be
module.exports = (app) => {
const customer_controller =
require("../controllers/customer.controller")
var router = require("express").Router();
router.post("/add", customer_controller.createNewCustomer);
router.get("/all", customer_controller.getAllCustomer);
router.put("/:id", customer_controller.updateCustomer);
router.delete("/:id", customer_controller.deleteCustomer);
router.post("/login", customer_controller.loginCustomer);
app.use("/api/customer", router);
};