0👍
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.
0👍
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 in javascript 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
- [Vuejs]-When refreshing, it returning The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
- [Vuejs]-TypeError: Cannot read property 'type' of null – testing vue component with async functions
0👍
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);
};
- [Vuejs]-How to toggle a todo completed option?
- [Vuejs]-In Vue.js, how can I add additional parameters alongside an emit?
0👍
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
- [Vuejs]-Laravel 9 Vue 3 Inertia Project
- [Vuejs]-How to run Vue on port 5173 when using Laravel? – This is the Vite development server that provides Hot Module Replacement
0👍
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
};
- [Vuejs]-Vue.js data object not getting updated on mounted – vue-file-uploder
- [Vuejs]-How to make sure that my extension will be loaded after the another one?
Source:stackexchange.com