I'm developing a web application for watching and managing data from my MongoDB. I'm using VueJS as the client side and NodeJS + Express + Mongoose in the server side (MEVN Stack).
I have tried to represent a table of my data in the client side, using the "vue-tables-2" (server-side) table and translate the http requests (Sort\Filter..) in the server to MongoDB query using "Querymen", but it seems the querymen fail to translate the Vue's http request.
The reason is that the Vue wrap the query's parameters with the "query" word:
http://localhost:3000/data?query%5BName%5D=Mor&query%5BLastName%5D=Vino&limit=10
While the querymen expect to receive:
http://localhost:3000/data?Name=Mor&LastName=Vino&limit=10
Did someone find a solution for that?
Or used different table component \ different translation library?
Versions: Vue js 2.5.16, Node js 8.11.1
Thanks
You can customize request by using requestAdapter in options
requestAdapter(data) {
// in here you can access data.query, split, concat or do anything you want
return {
Name: '' // put params here,
LastName: '',
limit: data.limit ? data.limit: 10
}
}
You can check official demo for reference
Related
I have 5 Accordions in localhost:3000/management page and each having dynamic values fetching API in backend node Js using Sequelize so how can I show the 5 accordions value in node js????
I want to know for 5 accordion how can I define backend code for one react URL in frontend???
On your backend your route should start a function that will return the correct value from your db using Sequelize. I don't know if you're using Express, Fastify etc and you didn't provide code so I won't be able to provide a more detailed explanation but feel free to update your post
On your React frontend you need to fetch from your backend. So that would be something like
const data = await fetch("https://yourapiadress...").json()
Once you have this you can easily use it in your accordion
data.map(content =>{
return <Accordion>{content}</Accordion>
})
How does the react client connect to the server via express? Many tutorials talk about Superagent and axios which is adding to my confusion. Are there any resources on server side routing in the context of react? thank you
In MERN stack, you do not necessarily have to think of the entire stack as a single entity. Mongo, ReactJS and NodeJS server can all work independently. And let us for easiness of understanding sake say all of them are on separate servers. That is we can have Mongo on one server, ReactJS on another server and NodeJS with express on a third server, then also it will be a MERN stack app.
How a MERN app work is as follows
For example, let us have an app that displays the details of all the students in a class. First, in the React app let us say you select a class, and then the React front-end will send a query to the nodejs server. The query will contain the particular class name. Now nodejs will send a query to the mongo db asking for the details of the students of that class which it will send back to the node server. The node server will then send the details to the front end and it will update it.
If you ask for connection as such, there can be no connection at all except for querying for data. Instead of using the reactjs front end you can use some other frontend and it will give you the same details. React, Mongo and Node, all are capable of working on their own in their respective fields.
Axios is a promise based HTTP client for the browser and node.js.
They are completely independent. Whether using axios, the native Javascript fetch, jQuery AJAX, etc...each of them runs in the browser and makes a GET/POST request to nodejs. You will have defined corresponding GET/POST routes within nodejs to respond to these requests and return JSON response data for them to consume.
I would start by forgetting about react altogether. Instead build an express API with various GET/POST routes that return JSON responses. Test with a simple client like postman. Once you have a handle on that, then start with a front-end Javascript framework to consume these services.
Here is a cut of my express+react api:
var express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
res.render('index', {myjson: "myValue"});
})
module.exports = router;
Basically I am sending the json string to index.jsx, where the frontend is rendered.
Also I've set in express as:
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());
So the express server knows where React is.
Checkout the npm package Express-react-engine.
All the elements of the stack can be used independently, React , Node.Js, and MongoDB.
They can be installed in different servers and the communication is by using Fetch, Axios or any other tool.
I'm still learning Vue.js 2 so I do apologize if this question is a bit silly. I'm building an application using MongoDB, Node, Express and Vue. Normally I'd use a template engine such as Ejs where data passed through Express's res.render method can be readily captured in the template.
Is there a similar way to pass data from backend to the root Vue component? For example, normally, a get request fetches some data from Mongodb, express will render the template file and pass data to it.
app.get("/gallery/:id", function(res, req) {
var id = req.params.id;
database.findById(id, function(err, data) {
....
res.render("home", data);
}
});
Now my root Vue application is attached to html file. I'd like to be able to dynamically render the app with data returned from the database.
I've built an app before that streams data from an api and passed it to my Vue component via socket but I feel like using a socket in this case is unnecessary.
Use http. What's the problem? You can use XmlHttp, or a lot of folk seem to be using Axios. Trigger the call in the onload of your page, or use one of the vue lifecycle hooks. The very good vue docs don't have much to say about how and when to do this. We do it in the onload of the page, and we instantiate vue when the request for page data returns.
The question has already been answered, but I wanted to share my approach. I've been experimenting with rendering an object server side using res.render(), putting it in a div where display: none, and then grabbing the object on the client and passing it to Vue's data attribute.
Specifically gps coordinates?
Basically the user will be able to view the location of other users on a google map. So I need to figure out how to send the users coordinates to my express app. Once they are stored in a mongodb, all of the coordinates can be rendered on a user's google map.
The basic question is: How can I take the user's coordinates from phonegap and store them in a remote server/mongodb?
I think an XMLHttpRequest Post request will send the relevant data, but how can I set up my server so that it receives that data and stores it using mongoose?
Always appreciate the help. Thanks!
Your question is rather broad. But i'll try to point you in the right direction.
1. Read the phonegap api-docs on geolocation
Here you will find out how to getCurrentPosition and extract other useful data from the client.
Phonegap documentation
2. Send data to your server
With plain JavaScript, zizzle.js, jQuery or any other framework you like you set up a post request to the server with the data.
jQuery Docs: examples using jQuery.post()
3. Recieve data
I don't know what server framework your using, but if you haven't decided yet, go with sails.js. A great framework for CRUD ops / rest-api.
Set up a model for your coordinates
Set up a simple controller in sails
4. Store data in MongoDb
Using Sails.js its very easy to persist data in any source you like. Set ut the config for your mongodb, and read the docs on sailsjs.
Here is a simple create using sails example:
// For example
User.create({
name: 'Mike',
age: 13,
phoneNumber: '(512)-555-5555'
}).done(function(err, user) {
// Error handling
if (err) {
return console.log(err);
// The User was created successfully!
} else {
console.log("User created:", user);
}
});
I am trying to build a test app for learning Node.js. I came from wordpress background and Apache has setup most of backend logics for me. But now, I have to build my own. I have a question about how to serve JSON files from server side to client side. What is the workflow -- Backbone.js handle all client side Data manipulation, send/save/get/fetch from couchDB, serve JSON object from NODE.js backend?
I am using Express Microframework for building HTTP server, installed the Cradle middleware for access CouchDB NoSQL database. I successfully posted the data from Client side HTML (Jade template engine) to the CouchDB Database/Document and able to retrieve those data back from Server through Cradle middleware. Things work out great. But it was all done by Backend.
I want to use Backbone.js for my client side Javascript. Backbone.js is looking for JSON object which send back from the HTTP server. Cradle Middleware is able to create JSON object but only send them directly to the Jade Template, I could use Jade syntax for loop to iterate over the data object but it still not meet what I want for Backbone.js handle all the data entry. I realize that I need to get JSON obj via ajax ( either a file generated by HTTP then send back to the client OR send straight object to the client ). Cradle Middleware could not do that.
I did more research on this questions. I tried CouchApp, it does what I need. Using the Backbone.js to handling all the data, send/save/fetch data from CouchDB database. But it is a running in CouchApp, it is not an Express Node.js workflow. ( Maybe I am wrong or just do not how it work )
I tried backbone-couchdb.js. I read through the Details and still do not know it is going to help me to get what I want. ( Maybe need more tutorial or code example ). I am still thinking that I need a Backbone CouchDB driver to connect those two and somehow serving them by NODE.js backend.
Is there anybody who could tell me about how JSON file is being served by Node.js, how backbone.js interact with data save/fetch/get from CouchDB? What is the best practice / workflow? Other good resources, code examples, useful tools?
Cradle Middleware is able to create JSON object but only send them directly to the Jade Template
This is incorrect. You can just send the json back without rendering a template.
function(req, res, next){
db.view('user/byUsername', { key: 'luke' }, function (err, doc) {
res.send(doc); // or res.json(doc);
});
}