- [Instructor] We know what the complains are
with the student manager project,
but let's try to figure out what's causing them.
Let's open up the Chrome development console,
I'll do that by hitting F12.
Now let's go over to the Network tab
to see what could be slowing down our web application.
We'll go over to the students list
and we notice that it makes a call
to the backend to get a list of students.
Then let's go over to new student.
And as we can see, it makes another call
to get the students once again.
Now, if our connection was slow or the server was slow,
or there was an error, this would be a lot slower
and could be the cause of the issues
that the end users reported.
So to reiterate, by going to our new student view,
we're getting a list of students
or making a request to the backend for a list of students
and then by going to the students list,
we're doing that again when we could only be doing that once
and storing it somewhere to access locally
on the client side instead of having to access it
from the backend.
So, we'll start rolling out a data store
which will be responsible for storing our students.
That way, each view can access that data store
instead of having to wait for the server.
Let's begin by opening up our editor.
And if you haven't already,
please open up the student manager project
you have downloaded.
To get it running, the first thing we'll need to do
is open up a terminal.
The first command we'll need to run is npm install.
This will install all of the third party dependencies.
I've already done this on my end,
so it might take a lot longer on your end.
Next, to get the front end running,
we'll use npm run
and then serve.
Once it's running, go ahead and Control + click
on one of the following links
in order to open it in your browser.
You should see the web app load
and if we look at our development console,
under the Console tab, we should get a network error.
And that's because we need to run our backend.
So let's go back to our editor and open up a new terminal.
In order to run our backend,
we'll need to install a global package called JSON server,
so we'll use npm install -g
json-server.
Now to run our backend, we'll use json-server
- -watch db.json.
Notice that we have a db.json file in our folder.
This is a simple JSON file containing our students
and any other data we might need.
And so we aren't really running a node.js-based backend,
but instead, we're emulating a backend
with a simple JSON file and with our JSON server plugin.
This allows us just to focus on problems
in the front end and then on Vuex.
Now let's check our application again.
If we refresh, we should see our data load.
Now that we have our student manager project
and environment set up, let's go ahead
and implement our data store next.