Question

我对React Native非常陌生。作为我学习的一部分，我试图将Mongodb Atlas集群连接到我的RN App。但是我在为Mongodb集群的发布请求开发代码时非常困惑。我正在遵循一个教程来开发示例出租车预订应用程序。如果有人帮助我理解代码，那就太好了。

所以我的服务器代码如下：

var express = require("express");
var path = require("path");
var bodyParser = require("body-parser");
var index = require("./routes/index");
var bookings = require("./routes/bookings");

var app = express();

var port = 3000;

app.listen(port,function(){
    console.log("Server running on port",port);
})

//views

app.set("views", path.join(__dirname,"views"));
app.set("view engine","ejs");
app.engine("html", require("ejs").renderFile);

//Body Parser MW

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}))

//Routes

app.use("/",index);
app.use("/api",bookings);

然后我有一个bookings.js文件，如下所示：


var express = require("express");
var router = express.Router();
var MongoClient = require("mongodb").MongoClient ;
var uri = "mongodb+srv://TheCarAdmin:admin0000@thecarcluster-3hqxd.mongodb.net/test?&w=majority";

router.post("/bookings",function(req,res,next){
    var bookings =req.body.data;
    if(!bookings.username){
        res.status(400);
        res.json({
            error:"Bad data"
        });
    }
    else {
        MongoClient.connect(uri)
        .then(client=>{
            const db = client.db("TheCar");
            const coll = db.collection("bookings");
            coll.save(bookings,function(err,savedBooking){
                if(err){
                    res.send(err);
                }
                res.json(savedBooking);
            });
        })
        .catch(err=>console.log(err));
    }
});


module.exports = router;

在我的App代码中，我有一个函数可以按如下方式处理将预订请求记录到MongoDB集合中：


import update from "react-addons-update";
import constants from "./actionConstants";
import Geolocation from "react-native-geolocation-service";
import {Dimensions} from "react-native";
import RNGooglePlaces from "react-native-google-places";
import request from "../../../util/request";
import calculateFare from "../../../util/fareCalaculator";

export function bookCar(){
    return(dispatch,store)=>{
        const payload = {
            data:{
                username:"eman",
                pickUp:{
                    address :store().home.selectedAddress.selectedPickUp.address,
                    name : store().home.selectedAddress.selectedPickUp.name,
                    latitude: store().home.selectedAddress.selectedPickUp.location.latitude,
                    longitude: store().home.selectedAddress.selectedPickUp.location.longitude
                },
                dropOff:{
                    address :store().home.selectedAddress.selectedDropOff.address,
                    name : store().home.selectedAddress.selectedDropOff.name,
                    latitude: store().home.selectedAddress.selectedDropOff.location.latitude,
                    longitude: store().home.selectedAddress.selectedDropOff.location.longitude
                },
                fare: store().home.fare,
                status:"pending"                
            }
        }

        request.post("http://172.20.10.2:3000/api")
        .send(payload)
        .finish((err,res)=>{
            dispatch({
                type : BOOK_CAR,
                payload : res.body
            });
            console.log(err.message);
            console.log(res.status);
        });
    };
}

因此，如上所示，请求是从以下文件导入的：


const request = require("superagent");
const defaultAjaxTimeout = 30000;
//const cookie = require("cookie");
request.Request.prototype.finish = function (callback) {
    // this replaces superagent's .end() function to include our custom error handling (see above)
    this.end((err,res)=>{
        callback(err,res);
    });
};

var requestWrapper = function(method) {
    // this is here so that we can append the .timeout call to all of our ajax requests with the default value.
    return function(url) {
        return request[method](url)
            .type("form")
            .timeout(defaultAjaxTimeout);
    };
};
export default {
    get: requestWrapper("get"),
    put: requestWrapper("put"),
    post: requestWrapper("post"),
    del: requestWrapper("del"),
};

当我调试时，我意识到它没有被重定向到booking.js代码来处理POST请求，因此引发错误。任何人都可以帮助我了解如何将其重定向到bookings.js或在书面代码错误的情况下纠正我。

谢谢！！！！

与React Native App的MongoDb集群连接

0 个答案: