Think of our server as a library that houses key app data. In this lesson, we will learn how to store this data in our server. We'll use JavaScript to create JSON objects, which will store our data in an easily accessible manner. Imagine that we're building a blog app, and we are storing a list of blog posts.

JavaScript
Copy to clipboard
1const data = {
2    posts: [
3        { // First blog post
4            id: 1,
5            title: 'Hello, world!',
6            content: 'This is my first blog post.',
7        },
8        { // Second blog post
9            id: 2,
10            title: 'Goodbye, world!',
11            content: 'This is my last blog post.',
12        },
13    ]
14};

Here, our data object stores an array of blog post objects. Each post has an id, title, and content.

Just as a library retrieves books for you, our server fetches data when needed. We use routes in Express.js to handle these requests.

JavaScript
Copy to clipboard
1app.get('/api/posts', (req, res) => {
2    res.json(data.posts);
3});

This line instructs the server to respond to a GET request at /api/posts with the posts data in our data object.

Communicating data between the client and server is a two-way street, not only do we need to send data from the server to the client, but we often need to update our server-side data based on information received from the client. Therefore, we'll see how to modify data on the server based on client-side input.

Specifically, we'll use the HTTP POST method, which is designed to send data in a request to a server.

Imagine a user who wants to add a new blog post. They'd fill in the details on our client-side app, which would then package this data and send it over to our server using Axios. Let's see what the client-side code for this might look like:

JavaScript
Copy to clipboard
1const message, setMessage = useState([]);
2
3const newPost = {
4    id: 3,
5    title: 'Hello, again, world!',
6    content: 'This is another blog post.',
7}; // The new blog post filled in the form/page
8
9axios.post('/api/posts', newPost).then(response => {
10    setMessage(`User ${response.data.user.id} has been successfully added`);
11});

In this code, we're sending a new post to our server using axios.post(). The new post data is included in the request. Once the server receives the POST request, it sends back a response to the client with information such as if the POST request was successful or not. Here, we see the server’s response is response.data.user.id.

Let's see how we can set up our server to receive this POST request and add the new post to our data:

JavaScript
Copy to clipboard
1app.post('/api/posts', (req, res) => {
2    const newPost = req.body; // retrieving new post from the request
3    data.posts.push(newPost); // Adds the new post to our posts data
4    res.json(newPost); // Response with the newly added post
5});

In this code, our server is set up to receive a POST request at the /api/posts endpoint. The req.body contains the data our client sent - the new post. We then add this new post to our posts array and send the newly added post back in the response.

By running the above code, you can now add new posts to your server data through your client app! This prepares you for a bit more realistic handling of server data in your future web development endeavors.

Congratulations! You have successfully tackled data handling with Express.js. You now understand how to set up your server to store data, how to fetch and modify this data upon a client request, and how to use Axios to handle GET and POST requests. Now, undertake the exercises to test your new skills. Keep practicing, and preserve your journey toward becoming a seasoned web developer!