reactjs - 从数据库中获取数据到路由器后,从后端到前端获取数据
问题描述
我正在构建一个 mern expo 应用程序登录和登录页面。单击登录按钮时,它应该登录,但我无法从后端获取数据,尽管我已经在路由器 express 中进行了查找查询。我相信我的代码会帮助你更好地理解。
routeSignIn.js
const express = require("express");
const router = express.Router();
const User = require("../models/User");
router.post("/", async (req, res) => {
User.findOne({ email: req.body.email }).then((user) => {
if (!user) {
return res.status(404).json("Email or password is incorrect");
} else {
const foundUser = res.json(user);
}
});
});
module.exports = router;
服务器.js
const express = require("express");
const app = express();
const mongoose = require("mongoose");
const url = "mongodb://localhost/my-project1";
mongoose.connect(url, { useNewUrlParser: true });
const con = mongoose.connection;
app.use(express.json());
//Router
const routeSignIn = require("../route/routeSignIn");
app.use("/getUser", routeSignIn);
con.on("open", () => {
console.log("Database is connected...");
});
const server = app.listen(3000, () => {
const { address, port } = server.address();
console.log(`Server started. Listening at http://${address}:${port}`);
});
这就是问题所在,我无法从路由器中获取它
登录.js
const loginHandle = (email, password) => {
axios
//The address here is my laptop IP address, because i wanted to link my mern server with expo server
.get("http://192.168.29.7:3000/getUser")
.then((res) => {
if (!res) {
Alert.alert("Invalid User, Username or password is incorrect.");
}
})
.catch((err) => {
console.log("Error fetching data : ", err);
});
if (data.email.length == 0 || data.password.length == 0) {
Alert.alert("Email or password field cannot be empty");
}
};
应用程序.js
const authContext = useMemo(
() => ({
signIn: async (email) => {
const userToken = String(foundUser);
try {
await AsyncStorage.setItem("userToken", userToken);
} catch (err) {
console.log("SignIn error", err);
}
dispatch({ type: "LOGIN", email: email, token: userToken });
},
}),
[]
);
正如您在上面看到的,我想要做的是在路由(在 routeSignIn.js 中)与特定用户之后,我想要获取该数据(来自 signIn.js)并将该数据传递到 App.js 以调度它。请注意,reducers 函数与调度的文件位于同一文件(App.js)中。
解决方案
我认为我可以通过您从数据库中发布和检索数据的方式检测到几个问题。
首先,您使用的是axios.get
函数,而不是将axios.post
其发布到一个根本不存在的 URL ( "http://192.168.29.7:3000/getUser"
)。您将需要使用类似"/getUser/login"
. 还将您的 const 定义为loginHandle = userData
,并在您的userData
定义电子邮件中定义为user.email
,密码为user.password
。
在服务器端,您可能想使用端口 3000 或 5000 并查看哪个效果最好,因为有时您可能需要在端口 5000 上运行服务器。
在您的routeSignIn.js
文件中,请router.post("/login"
改用,以便确保您路由到正确的 URL。
我不太确定你的app.js
所以不会评论它。
希望这在某种程度上可以解决您的问题,但我建议您尽可能遵循这一点,当您对 NodeJS 和 React 感到满意时,然后自定义代码。
推荐阅读
- laravel-5 - 返回响应()->下载();显示空白页
- git - 为什么 git commit 让我及时回到 master 分支?
- sql - 根据每个案例中的其他列生成一列
- excel - 需要 Excel IF 函数帮助
- python - keras:用无维度重塑张量
- c# - NHibernate:在/从 Sqlite 中存储/检索日期
- android - 关于 IOS App Store 和 Google Store 促销代码
- app-engine-flexible - Google App Engine Flexible 每周更新 - 它是如何工作的?
- python - Python生成矩阵的所有可能组合
- c++ - 具有一致索引的快速查找的数据结构