title
Full Stack Vue.js, Express & MongoDB [2] - Vue Frontend
description
In part 2 we will be adding the client side using the Vue CLI and connect to our backend Express app. We will create a PostService to interact with the API from part 1
Code:
https://github.com/bradtraversy/microposts_fullstack_vue
💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia
Website & Udemy Courses
http://www.traversymedia.com
Follow Traversy Media:
https://www.facebook.com/traversymedia
https://www.twitter.com/traversymedia
https://www.instagram.com/traversymedia
detail
{'title': 'Full Stack Vue.js, Express & MongoDB [2] - Vue Frontend', 'heatmap': [{'end': 156.728, 'start': 120.267, 'weight': 0.7}, {'end': 1334.219, 'start': 1298.616, 'weight': 0.707}], 'summary': 'Series on full stack vue.js, express, and mongodb covers setting up a vue application with vue cli, integrating it with express api, creating an axios service for api requests, post creation and deletion, data binding, post display, and adding application functionality for successful post creation and deletion, culminating in preparation for deployment to heroku.', 'chapters': [{'end': 220.064, 'segs': [{'end': 44.664, 'src': 'embed', 'start': 20.433, 'weight': 0, 'content': [{'end': 26.795, 'text': 'So now what we want to do is generate a Vue application inside of a folder called Client.', 'start': 20.433, 'duration': 6.362}, {'end': 29.797, 'text': 'And this is going to be generated with the Vue CLI.', 'start': 27.456, 'duration': 2.341}, {'end': 32.938, 'text': "So I'm actually going to leave my backend server running.", 'start': 30.157, 'duration': 2.781}, {'end': 35.26, 'text': "As you can see, it's still running on port 5000.", 'start': 32.998, 'duration': 2.262}, {'end': 44.664, 'text': "So I'm going to open up a new terminal while that runs, and we're going to install the Vue CLI globally, so npm install-g.", 'start': 35.26, 'duration': 9.404}], 'summary': 'Generating a vue application in a folder called client using vue cli, while leaving the backend server running on port 5000.', 'duration': 24.231, 'max_score': 20.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs20433.jpg'}, {'end': 156.728, 'src': 'heatmap', 'start': 81.694, 'weight': 2, 'content': [{'end': 88.736, 'text': "And then when we're ready, we're going to we're going to build all of our static assets out to the public folder in the server folder.", 'start': 81.694, 'duration': 7.042}, {'end': 91.736, 'text': "So we'll have to add some extra config to be able to do that.", 'start': 88.796, 'duration': 2.94}, {'end': 93.857, 'text': "And then that's what we'll get deployed.", 'start': 92.197, 'duration': 1.66}, {'end': 98.218, 'text': 'The actual client folder with all the dev stuff review is not going to get deployed.', 'start': 93.897, 'duration': 4.321}, {'end': 103.819, 'text': 'In fact, we want to create a dot get ignore file that prevents that from even being committed.', 'start': 98.258, 'duration': 5.561}, {'end': 106.06, 'text': "So let's do that before we do anything.", 'start': 104.319, 'duration': 1.741}, {'end': 114.784, 'text': "I'm going to create a file in the root, not in server, not anywhere else, just in the root called .gitignore.", 'start': 106.1, 'duration': 8.684}, {'end': 119.366, 'text': "And we're going to put in here slash client.", 'start': 115.745, 'duration': 3.621}, {'end': 122.948, 'text': "Client hasn't been created yet, but we're going to create it in a minute.", 'start': 120.267, 'duration': 2.681}, {'end': 125.509, 'text': 'And then also, of course, node modules.', 'start': 123.428, 'duration': 2.081}, {'end': 128.11, 'text': "We don't want any of those folders to get pushed.", 'start': 125.569, 'duration': 2.541}, {'end': 129.291, 'text': "So let's save that.", 'start': 128.27, 'duration': 1.021}, {'end': 134.334, 'text': "now let's generate the client folder using the view CLI.", 'start': 130.05, 'duration': 4.284}, {'end': 138.997, 'text': "so we're simply going to say view create and we're going to call it client.", 'start': 134.334, 'duration': 4.663}, {'end': 142.259, 'text': "okay, make sure that you're not in your server folder.", 'start': 138.997, 'duration': 3.262}, {'end': 143.62, 'text': "you're in the root here.", 'start': 142.259, 'duration': 1.361}, {'end': 145.361, 'text': "let's run that.", 'start': 143.62, 'duration': 1.741}, {'end': 156.728, 'text': "I'm just going to click the default here, babble eslint, and I'm using the version 3.0.4,, as you can see.", 'start': 145.361, 'duration': 11.367}], 'summary': 'Configure .gitignore to exclude client folder and node modules, then generate the client folder using vue cli.', 'duration': 41.254, 'max_score': 81.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs81694.jpg'}, {'end': 220.064, 'src': 'embed', 'start': 184.448, 'weight': 5, 'content': [{'end': 186.608, 'text': "but um, i'll go ahead and do that now.", 'start': 184.448, 'duration': 2.16}, {'end': 190.21, 'text': "so i'm going to say git init, make sure you're in.", 'start': 186.608, 'duration': 3.602}, {'end': 193.611, 'text': "if you're doing this with me, just make sure you're in your root.", 'start': 190.21, 'duration': 3.401}, {'end': 196.992, 'text': "so we'll say git init or init.", 'start': 193.611, 'duration': 3.381}, {'end': 213.787, 'text': "let's say git add all and git commit, And I'll just say initial back end created.", 'start': 196.992, 'duration': 16.795}, {'end': 217.67, 'text': "Probably should have did this a while ago, but that's fine.", 'start': 215.108, 'duration': 2.562}, {'end': 220.064, 'text': 'All right.', 'start': 219.764, 'duration': 0.3}], 'summary': "Performed git initialization, added all files, and committed with message 'initial back end created'.", 'duration': 35.616, 'max_score': 184.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs184448.jpg'}], 'start': 0.489, 'title': 'Full stack vue.js express mongo series', 'summary': 'Focuses on setting up a vue application using vue cli, integrating it with the existing backend express api, and creating a .gitignore file to prevent certain files from being committed. it aims to generate a client folder for vue cli, run a dev server, and deploy static assets to the public folder, along with initializing a git repository with initial backend commit.', 'chapters': [{'end': 98.218, 'start': 0.489, 'title': 'Full stack vue.js express mongo series', 'summary': 'Focuses on setting up a vue application using vue cli and integrating it with the existing backend express api, aiming to generate a client folder for vue cli, run a dev server, and deploy static assets to the public folder.', 'duration': 97.729, 'highlights': ['Setting up Vue application using Vue CLI The chapter emphasizes the process of generating a Vue application using Vue CLI to integrate it with the existing backend Express API.', 'Running a dev server for Vue.js The video mentions the intention to run a dev server for Vue.js within the client folder to manage the entire development environment.', 'Deploying static assets to the public folder in the server There is a plan to deploy all static assets from the client folder to the public folder in the server, requiring additional configuration for deployment.']}, {'end': 220.064, 'start': 98.258, 'title': 'Setting up .gitignore and creating client folder', 'summary': 'Covers creating a .gitignore file to prevent certain files from being committed, generating a client folder using the view cli, and initializing a git repository with initial backend commit.', 'duration': 121.806, 'highlights': ['Creating a .gitignore file to prevent certain files from being committed, such as /client and node_modules, to avoid pushing unwanted folders.', "Generating a client folder using the view CLI by running 'view create client' in the root directory to set up the frontend structure.", "Initializing a git repository with 'git init', adding all files with 'git add all', and committing the initial backend with 'git commit'."]}], 'duration': 219.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs489.jpg', 'highlights': ['Setting up Vue application using Vue CLI to integrate with existing backend Express API', 'Running a dev server for Vue.js within the client folder', 'Deploying static assets to the public folder in the server', 'Creating a .gitignore file to prevent certain files from being committed', "Generating a client folder using the Vue CLI by running 'vue create client'", "Initializing a git repository with 'git init', adding all files with 'git add all', and committing the initial backend with 'git commit'"]}, {'end': 646.255, 'segs': [{'end': 249.863, 'src': 'embed', 'start': 220.184, 'weight': 0, 'content': [{'end': 224.827, 'text': 'So in our client folder, we have just our default view stuff.', 'start': 220.184, 'duration': 4.643}, {'end': 229.09, 'text': 'I actually want to run the the front end dev server.', 'start': 225.748, 'duration': 3.342}, {'end': 233.172, 'text': "So I'm going to go ahead and CD into clients.", 'start': 229.63, 'duration': 3.542}, {'end': 236.434, 'text': "And from here, let's run.", 'start': 234.913, 'duration': 1.521}, {'end': 239.596, 'text': 'What is it? NPM run serve, I believe.', 'start': 237.255, 'duration': 2.341}, {'end': 243.158, 'text': "Yes, that's going to start the view server.", 'start': 241.397, 'duration': 1.761}, {'end': 247.141, 'text': 'Okay, and that starts on port 8080 by default.', 'start': 243.178, 'duration': 3.963}, {'end': 249.102, 'text': "So let's go ahead and open that up.", 'start': 247.241, 'duration': 1.861}, {'end': 249.863, 'text': 'And there we go.', 'start': 249.302, 'duration': 0.561}], 'summary': 'Running front end dev server on port 8080 for client folder.', 'duration': 29.679, 'max_score': 220.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs220184.jpg'}, {'end': 324.905, 'src': 'embed', 'start': 299.855, 'weight': 1, 'content': [{'end': 306.998, 'text': "And then this hello world, which has a prop of message, we're going to get rid of that and we're going to say post component instead.", 'start': 299.855, 'duration': 7.143}, {'end': 308.879, 'text': 'And of course, we need to bring that in.', 'start': 307.398, 'duration': 1.481}, {'end': 317.262, 'text': "So post component, and that's going to come from component slash, post component, dot view,", 'start': 310.399, 'duration': 6.863}, {'end': 321.624, 'text': 'and then we just want to change this reference down here to post component.', 'start': 317.262, 'duration': 4.362}, {'end': 324.905, 'text': "We'll save and now we should be back and up and running.", 'start': 321.664, 'duration': 3.241}], 'summary': "Replacing 'hello world' prop with 'post component' for functionality.", 'duration': 25.05, 'max_score': 299.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs299855.jpg'}, {'end': 393.984, 'src': 'embed', 'start': 360.066, 'weight': 2, 'content': [{'end': 368.871, 'text': "And now inside our source folder in the client folder, we're going to create a file called posts.", 'start': 360.066, 'duration': 8.805}, {'end': 371.493, 'text': 'She called posts.', 'start': 370.712, 'duration': 0.781}, {'end': 372.353, 'text': "Let's do post.", 'start': 371.933, 'duration': 0.42}, {'end': 383.999, 'text': 'OK, so this service, like I said, is going to handle all of our requests and then we can reference this from our component.', 'start': 376.556, 'duration': 7.443}, {'end': 388.982, 'text': "So let's first import Axios from Axios.", 'start': 384.46, 'duration': 4.522}, {'end': 393.984, 'text': 'All right.', 'start': 393.604, 'duration': 0.38}], 'summary': 'Creating a file called posts in the client folder for handling requests using axios.', 'duration': 33.918, 'max_score': 360.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs360066.jpg'}, {'end': 459.358, 'src': 'embed', 'start': 435.249, 'weight': 3, 'content': [{'end': 443.632, 'text': 'So for the for getting posts, I want to create a method called get posts, but we want to make this static.', 'start': 435.249, 'duration': 8.383}, {'end': 454.236, 'text': "OK, and what what I mean by static is is it means that, even though we have a class here and we have a method, we don't have to instantiate,", 'start': 444.493, 'duration': 9.743}, {'end': 456.877, 'text': 'like a post object, to be able to use this?', 'start': 454.236, 'duration': 2.641}, {'end': 459.358, 'text': "We don't have to say new post service or whatever.", 'start': 456.917, 'duration': 2.441}], 'summary': 'Create static method getposts to avoid instantiation.', 'duration': 24.109, 'max_score': 435.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs435249.jpg'}, {'end': 512.556, 'src': 'embed', 'start': 485.265, 'weight': 4, 'content': [{'end': 488.246, 'text': "And there's a million different ways you can do this stuff.", 'start': 485.265, 'duration': 2.981}, {'end': 491.407, 'text': "But we're going to say a sync and promise.", 'start': 488.266, 'duration': 3.141}, {'end': 493.968, 'text': 'Promises take in two things.', 'start': 492.308, 'duration': 1.66}, {'end': 495.189, 'text': 'They take in resolve.', 'start': 494.008, 'duration': 1.181}, {'end': 498.03, 'text': 'And reject.', 'start': 496.79, 'duration': 1.24}, {'end': 505.533, 'text': "OK, so basically, when the promise is done, like when we do what we want it to do, when we're finished, we want to call resolve.", 'start': 498.45, 'duration': 7.083}, {'end': 508.854, 'text': "If there's some kind of error, we want to call reject.", 'start': 505.993, 'duration': 2.861}, {'end': 512.556, 'text': "So from here, let's use an arrow function.", 'start': 509.955, 'duration': 2.601}], 'summary': 'Using sync and promise, resolve and reject are called upon promise completion.', 'duration': 27.291, 'max_score': 485.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs485265.jpg'}], 'start': 220.184, 'title': 'Vue.js server and axios service', 'summary': "Covers running vue.js frontend server using 'npm run serve' on port 8080, modifying the default 'hello world' component to 'post component', and creating an axios service for handling api requests with static methods for fetching, creating, and deleting posts, and utilizing promises and async/await for error handling.", 'chapters': [{'end': 321.624, 'start': 220.184, 'title': 'Running vue.js frontend server and modifying default component', 'summary': "Demonstrates running the vue.js frontend server using 'npm run serve' which starts on port 8080, and modifying the default 'hello world' component to 'post component' in the vue.js application.", 'duration': 101.44, 'highlights': ["Running the Vue.js frontend server using 'NPM run serve' starts on port 8080. The Vue.js frontend server is started using 'NPM run serve' and it runs on port 8080 by default.", "Modifying the default 'hello world' component to 'post component' in the Vue.js application. The default 'hello world' component in the Vue.js application is modified to 'post component' by changing the component name and references."]}, {'end': 646.255, 'start': 321.664, 'title': 'Creating axios service for handling api requests', 'summary': 'Explains the process of creating a service using axios for handling api requests, including setting up a url, creating a post service class with static methods for fetching, creating, and deleting posts, and utilizing promises and async/await for error handling.', 'duration': 324.591, 'highlights': ['The chapter explains the process of creating a service using Axios for handling API requests, including setting up a URL, creating a post service class with static methods for fetching, creating, and deleting posts, and utilizing promises and async/await for error handling.', "The instructor emphasizes the use of the 'static' keyword to enable direct calling of methods without instantiating a post object, simplifying the code structure and usage.", 'The explanation of promises and the use of async/await for error handling in API requests is highlighted, showcasing the versatility and reliability of this approach in handling asynchronous operations.']}], 'duration': 426.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs220184.jpg', 'highlights': ["The Vue.js frontend server is started using 'NPM run serve' and it runs on port 8080 by default.", "Modifying the default 'hello world' component to 'post component' in the Vue.js application.", 'The chapter explains the process of creating a service using Axios for handling API requests, including setting up a URL, creating a post service class with static methods for fetching, creating, and deleting posts, and utilizing promises and async/await for error handling.', "The instructor emphasizes the use of the 'static' keyword to enable direct calling of methods without instantiating a post object, simplifying the code structure and usage.", 'The explanation of promises and the use of async/await for error handling in API requests is highlighted, showcasing the versatility and reliability of this approach in handling asynchronous operations.']}, {'end': 1116.933, 'segs': [{'end': 683.261, 'src': 'embed', 'start': 646.295, 'weight': 0, 'content': [{'end': 652.98, 'text': "We're just we're just making the request and we're getting either a 200 back or two or one or whatever.", 'start': 646.295, 'duration': 6.685}, {'end': 659.825, 'text': "So let's say static and we'll call this insert post post.", 'start': 653.6, 'duration': 6.225}, {'end': 663.948, 'text': "And it's just going to take in one parameter of text.", 'start': 661.406, 'duration': 2.542}, {'end': 671.997, 'text': 'And then in here, we just want to return Axios.', 'start': 667.496, 'duration': 4.501}, {'end': 679.359, 'text': "We're going to return directly Axios.post and pass in the URL.", 'start': 672.638, 'duration': 6.721}, {'end': 683.261, 'text': 'And then we want the data, which is just text.', 'start': 680.54, 'duration': 2.721}], 'summary': 'A request is made, receiving a 200 or 201 response, and an axios.post call with text as a parameter is returned.', 'duration': 36.966, 'max_score': 646.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs646295.jpg'}, {'end': 742.131, 'src': 'embed', 'start': 712.689, 'weight': 1, 'content': [{'end': 716.552, 'text': "And that's actually going to take in an ID because we need to know which one to delete.", 'start': 712.689, 'duration': 3.863}, {'end': 722.697, 'text': "Right So we're going to return Axios dot make a delete request.", 'start': 716.632, 'duration': 6.065}, {'end': 731.263, 'text': 'And remember, with with this, we need to actually go to API slash post slash and then the ID.', 'start': 724.598, 'duration': 6.665}, {'end': 736.207, 'text': "So I'm going to take this URL and then put the this ID directly after it.", 'start': 731.283, 'duration': 4.924}, {'end': 737.548, 'text': "So I'm going to put in back ticks.", 'start': 736.287, 'duration': 1.261}, {'end': 742.131, 'text': "We'll use the variable syntax here for the URL.", 'start': 738.188, 'duration': 3.943}], 'summary': 'Using axios to make a delete request with the specified id.', 'duration': 29.442, 'max_score': 712.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs712689.jpg'}, {'end': 789.548, 'src': 'embed', 'start': 762.844, 'weight': 4, 'content': [{'end': 767.306, 'text': 'So we want to export default post service.', 'start': 762.844, 'duration': 4.462}, {'end': 770.348, 'text': 'OK, and we should be all set here.', 'start': 768.427, 'duration': 1.921}, {'end': 772.088, 'text': "So let's close this up.", 'start': 771.108, 'duration': 0.98}, {'end': 773.929, 'text': "Let's go to our post component.", 'start': 772.128, 'duration': 1.801}, {'end': 779.172, 'text': "And this is obviously, you know, this is the view that we're going to that people will see.", 'start': 774.83, 'duration': 4.342}, {'end': 787.926, 'text': "So I'm going to actually get rid of everything in the template Let's get rid of all this in the template.", 'start': 779.192, 'duration': 8.734}, {'end': 789.548, 'text': "We'll leave the template tags, though.", 'start': 787.966, 'duration': 1.582}], 'summary': 'Export default post service and modify post component template.', 'duration': 26.704, 'max_score': 762.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs762844.jpg'}, {'end': 916.864, 'src': 'embed', 'start': 882.467, 'weight': 3, 'content': [{'end': 886.111, 'text': 'and then what we want to do is make a request to our back end and fill that array.', 'start': 882.467, 'duration': 3.644}, {'end': 891.837, 'text': "We're also going to have error, which is just going to be an empty string to begin with,", 'start': 886.131, 'duration': 5.706}, {'end': 896.822, 'text': 'and then text is going to represent whatever is typed into the input to add a post.', 'start': 891.837, 'duration': 4.985}, {'end': 901.206, 'text': "OK so that's the data associated with this component.", 'start': 898.243, 'duration': 2.963}, {'end': 904.17, 'text': 'Then what we want to do is go under data.', 'start': 902.328, 'duration': 1.842}, {'end': 908.775, 'text': "We'll put a comma here and we're going to use a sync created.", 'start': 904.27, 'duration': 4.505}, {'end': 916.864, 'text': "OK so created is like a lifecycle method it runs automatically when your component is created or when it's initialized.", 'start': 909.596, 'duration': 7.268}], 'summary': "The transcript discusses making a request to the backend, handling errors, and using the 'created' lifecycle method in a component.", 'duration': 34.397, 'max_score': 882.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs882467.jpg'}, {'end': 963.3, 'src': 'embed', 'start': 937.906, 'weight': 2, 'content': [{'end': 944.411, 'text': 'When the component is created, I want to make a request to the back end through the post service that we just created.', 'start': 937.906, 'duration': 6.505}, {'end': 951.716, 'text': 'Remember, that returns asynchronously, so we want to use a wait, and then postService.', 'start': 945.132, 'duration': 6.584}, {'end': 955.298, 'text': 'dot, and we want to call get posts.', 'start': 952.617, 'duration': 2.681}, {'end': 956.858, 'text': 'Okay, remember that?', 'start': 956.078, 'duration': 0.78}, {'end': 963.3, 'text': "If we go in our post service, so we're reaching into post service and we can use post service dot,", 'start': 957.338, 'duration': 5.962}], 'summary': 'Create component, request to backend using post service, call get posts', 'duration': 25.394, 'max_score': 937.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs937906.jpg'}], 'start': 646.295, 'title': 'Vue post creation and deletion', 'summary': 'Covers creating and deleting posts in vue using axios, passing text and id parameters, and exporting post service. it also includes adding css styling, setting data for post components, creating an empty array for posts, setting up lifecycle method to fetch posts, and importing post service.', 'chapters': [{'end': 789.548, 'start': 646.295, 'title': 'Creating post and deleting post in vue', 'summary': 'Discusses creating a post and deleting a post in vue, using axios to make requests and passing in parameters such as text and id. it also covers exporting the post service and modifying the post component template.', 'duration': 143.253, 'highlights': ['Using Axios to make post requests with text parameter The chapter demonstrates using Axios to make post requests in Vue with a text parameter and using ES6 syntax for simplified code.', 'Creating a method to delete a post with ID parameter It explains creating a method for deleting a post by passing in an ID parameter and constructing the delete request using Axios.', 'Exporting the post service The chapter covers the process of exporting the post service to make it accessible for use in other components.', 'Modifying the post component template It mentions modifying the post component template by removing its content and leaving the template tags for further development.']}, {'end': 1116.933, 'start': 790.028, 'title': 'Styling and setting data for post component', 'summary': 'Discusses adding css styling and setting data for a post component, including creating an empty array for posts, setting up a lifecycle method to fetch posts from the backend, and importing post service for making requests.', 'duration': 326.905, 'highlights': ['Creating empty array for posts, error, and text The chapter discusses creating an empty array for posts, error, and text as the initial data associated with the post component.', 'Setting up lifecycle method to fetch posts from the backend It explains using the created lifecycle method to fetch posts from the backend by making an asynchronous request to the post service and filling the posts array with the response.', 'Importing post service for making requests It covers the process of importing the post service for making requests to the backend and handling errors using try-catch to set the error message.']}], 'duration': 470.638, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs646295.jpg', 'highlights': ['Using Axios to make post requests with text parameter The chapter demonstrates using Axios to make post requests in Vue with a text parameter and using ES6 syntax for simplified code.', 'Creating a method to delete a post with ID parameter It explains creating a method for deleting a post by passing in an ID parameter and constructing the delete request using Axios.', 'Setting up lifecycle method to fetch posts from the backend It explains using the created lifecycle method to fetch posts from the backend by making an asynchronous request to the post service and filling the posts array with the response.', 'Creating empty array for posts, error, and text The chapter discusses creating an empty array for posts, error, and text as the initial data associated with the post component.', 'Exporting the post service The chapter covers the process of exporting the post service to make it accessible for use in other components.']}, {'end': 1315.974, 'segs': [{'end': 1146.382, 'src': 'embed', 'start': 1116.973, 'weight': 0, 'content': [{'end': 1126.36, 'text': 'And then underneath that, we want a container, a post container, and then we want to loop through each post.', 'start': 1116.973, 'duration': 9.387}, {'end': 1132.628, 'text': "So we'll have a div with the class of post, but we want to put a bunch of attributes on here.", 'start': 1127, 'duration': 5.628}, {'end': 1133.368, 'text': "So I'm going to go in here.", 'start': 1132.648, 'duration': 0.72}, {'end': 1133.989, 'text': 'We want to do a v-4.', 'start': 1133.388, 'duration': 0.601}, {'end': 1135.992, 'text': 'This is how we can loop through.', 'start': 1134.009, 'duration': 1.983}, {'end': 1146.382, 'text': "V4 equals, and I'm going to say parentheses.", 'start': 1141.458, 'duration': 4.924}], 'summary': 'The transcript discusses creating a post container and looping through each post using v-4 in vue.js.', 'duration': 29.409, 'max_score': 1116.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs1116973.jpg'}, {'end': 1315.974, 'src': 'embed', 'start': 1186.888, 'weight': 1, 'content': [{'end': 1193.072, 'text': "And then under that, let's do V dash bind, and let's set our key.", 'start': 1186.888, 'duration': 6.184}, {'end': 1195.234, 'text': "Actually, let's do our index.", 'start': 1194.033, 'duration': 1.201}, {'end': 1197.355, 'text': "So we'll do V bind.", 'start': 1196.054, 'duration': 1.301}, {'end': 1202.219, 'text': 'colon index to the index.', 'start': 1198.636, 'duration': 3.583}, {'end': 1207.864, 'text': 'And then we want our key, so v dash bind key.', 'start': 1203.38, 'duration': 4.484}, {'end': 1212.127, 'text': "And what I'm going to use for the key is the ID of the post.", 'start': 1208.784, 'duration': 3.343}, {'end': 1215.01, 'text': 'And we can get that with post dot underscore ID.', 'start': 1212.167, 'duration': 2.843}, {'end': 1217.872, 'text': 'Remember, MongoDB creates an underscore ID field.', 'start': 1215.03, 'duration': 2.842}, {'end': 1224.868, 'text': 'All right, so now in here, we should be able to display our post text.', 'start': 1219.246, 'duration': 5.622}, {'end': 1227.769, 'text': "So I'll put a paragraph with the class of text.", 'start': 1225.268, 'duration': 2.501}, {'end': 1233.351, 'text': 'And inside here, we want double curly braces and just say post.text.', 'start': 1228.649, 'duration': 4.702}, {'end': 1237.412, 'text': 'Now above that, I want to format the created at, the date.', 'start': 1234.031, 'duration': 3.381}, {'end': 1243.814, 'text': 'So I basically want to get the day, the month, and the year and format it that way.', 'start': 1238.112, 'duration': 5.702}, {'end': 1246.535, 'text': "So let's go ahead and put our expression in here.", 'start': 1243.954, 'duration': 2.581}, {'end': 1248.216, 'text': "We're going to use backticks.", 'start': 1246.975, 'duration': 1.241}, {'end': 1251.057, 'text': 'and use our variable syntax.', 'start': 1249.276, 'duration': 1.781}, {'end': 1264.341, 'text': "so we want to say post dot created at dot, get date, okay, so that'll give us the the day and then, after the curly brace,", 'start': 1251.057, 'duration': 13.284}, {'end': 1266.982, 'text': "let's do a slash and then we want the month.", 'start': 1264.341, 'duration': 2.641}, {'end': 1275.845, 'text': "so i'm just going to copy what i just did here and paste that in and accept instead of get date,", 'start': 1266.982, 'duration': 8.863}, {'end': 1287.207, 'text': "we're going to do get month And then after that we'll do another slash and paste it in and then we're gonna do get full year.", 'start': 1275.845, 'duration': 11.362}, {'end': 1290.01, 'text': 'These are just standard JavaScript methods.', 'start': 1287.207, 'duration': 2.803}, {'end': 1296.194, 'text': 'So get full year and that should give us the format that we want, and I think that should do it.', 'start': 1290.01, 'duration': 6.184}, {'end': 1298.596, 'text': "Let's save And let's go.", 'start': 1296.214, 'duration': 2.382}, {'end': 1315.974, 'text': "Oh an error here See what's going on? import Axios And post service import Axios from Axios.", 'start': 1298.616, 'duration': 17.358}], 'summary': 'Setting v-bind and formatting post data for display.', 'duration': 129.086, 'max_score': 1186.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs1186888.jpg'}], 'start': 1116.973, 'title': 'Vue.js data binding and post display', 'summary': "Covers looping through posts with v-for in vue.js, setting attributes, and using mongodb's _id field. it also demonstrates displaying post text with formatting the date using javascript methods.", 'chapters': [{'end': 1217.872, 'start': 1116.973, 'title': 'Vue.js looping and binding', 'summary': "Discusses looping through posts using v-for in vue.js, setting attributes such as index and key, with a focus on binding data and using mongodb's _id field.", 'duration': 100.899, 'highlights': ['The chapter explains how to loop through posts using v-for in Vue.js, with emphasis on using v-bind to set item and key attributes.', "It also highlights the usage of MongoDB's _ID field to set the key attribute for the looped posts."]}, {'end': 1315.974, 'start': 1219.246, 'title': 'Displaying post text and formatting date', 'summary': 'Demonstrates how to display post text using the class of text and format the date to show the day, month, and year using standard javascript methods.', 'duration': 96.728, 'highlights': ['The chapter demonstrates how to display post text using the class of text.', 'The date is formatted to show the day, month, and year using standard JavaScript methods.', "The process involves using backticks and variable syntax to access the post's created date."]}], 'duration': 199.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs1116973.jpg', 'highlights': ['The chapter explains how to loop through posts using v-for in Vue.js, with emphasis on using v-bind to set item and key attributes.', "It also highlights the usage of MongoDB's _ID field to set the key attribute for the looped posts.", 'The chapter demonstrates how to display post text using the class of text.', 'The date is formatted to show the day, month, and year using standard JavaScript methods.', "The process involves using backticks and variable syntax to access the post's created date."]}, {'end': 1723.708, 'segs': [{'end': 1424.543, 'src': 'embed', 'start': 1347.665, 'weight': 0, 'content': [{'end': 1354.581, 'text': "So let's go up in the template.", 'start': 1347.665, 'duration': 6.916}, {'end': 1354.981, 'text': 'where are we?', 'start': 1354.581, 'duration': 0.4}, {'end': 1359.505, 'text': 'we want to go to post component and in the template we want to replace this with our form.', 'start': 1354.981, 'duration': 4.524}, {'end': 1367.952, 'text': "so i'm going to have a class of create dash post and let's put a label.", 'start': 1359.505, 'duration': 8.447}, {'end': 1381.848, 'text': "i'll say label for create dash post and we'll just say say something, And then underneath that let's do an input.", 'start': 1367.952, 'duration': 13.896}, {'end': 1387.149, 'text': 'And this is going to have an ID of create-post.', 'start': 1382.588, 'duration': 4.561}, {'end': 1396.512, 'text': 'What else do we want to do here? We actually want to bind this.', 'start': 1391.811, 'duration': 4.701}, {'end': 1401.653, 'text': 'We want to bind this value, text, to this input.', 'start': 1396.832, 'duration': 4.821}, {'end': 1405.274, 'text': 'So to do that, we use v-model.', 'start': 1403.334, 'duration': 1.94}, {'end': 1410.13, 'text': 'And we want to set that to text.', 'start': 1408.268, 'duration': 1.862}, {'end': 1411.831, 'text': "Okay, so we're going to bind that.", 'start': 1410.55, 'duration': 1.281}, {'end': 1413.813, 'text': "Let's also add a placeholder.", 'start': 1412.392, 'duration': 1.421}, {'end': 1421.24, 'text': "So placeholder equals, and we'll just say create a post.", 'start': 1416.515, 'duration': 4.725}, {'end': 1424.543, 'text': 'All right, and then we want a button.', 'start': 1422.821, 'duration': 1.722}], 'summary': 'Updating template with form for creating a post, binding input values using v-model.', 'duration': 76.878, 'max_score': 1347.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs1347665.jpg'}, {'end': 1526.618, 'src': 'embed', 'start': 1494.655, 'weight': 2, 'content': [{'end': 1497.297, 'text': 'OK, so these are just like custom methods that we create.', 'start': 1494.655, 'duration': 2.642}, {'end': 1500.365, 'text': 'So one of them is going to be create post.', 'start': 1498.504, 'duration': 1.861}, {'end': 1506.026, 'text': "We're going to say async create post.", 'start': 1500.385, 'duration': 5.641}, {'end': 1513.889, 'text': "And let's await from the post service.", 'start': 1508.227, 'duration': 5.662}, {'end': 1519.394, 'text': 'So post service and remember we created an insert post method.', 'start': 1515.692, 'duration': 3.702}, {'end': 1521.876, 'text': 'We want to pass in this dot text.', 'start': 1519.774, 'duration': 2.102}, {'end': 1526.618, 'text': 'OK Because this text value right here is bound to the input.', 'start': 1522.476, 'duration': 4.142}], 'summary': "Creating custom method 'create post' to insert data into post service", 'duration': 31.963, 'max_score': 1494.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs1494655.jpg'}, {'end': 1612.281, 'src': 'embed', 'start': 1582.208, 'weight': 4, 'content': [{'end': 1587.091, 'text': "so method let's see, It's going to be pretty similar.", 'start': 1582.208, 'duration': 4.883}, {'end': 1594.76, 'text': "so I'm just going to copy this whole thing, put a comma here, paste that and change it to delete post.", 'start': 1587.091, 'duration': 7.669}, {'end': 1598.685, 'text': "And we're going to use the post service instead of insert.", 'start': 1595.181, 'duration': 3.504}, {'end': 1599.566, 'text': 'We want delete.', 'start': 1598.725, 'duration': 0.841}, {'end': 1603.611, 'text': "And we're going to pass in here.", 'start': 1602.209, 'duration': 1.402}, {'end': 1606.156, 'text': 'ID OK.', 'start': 1605.615, 'duration': 0.541}, {'end': 1609.739, 'text': "And I realize we haven't created this up above yet, but we will.", 'start': 1607.076, 'duration': 2.663}, {'end': 1612.281, 'text': 'And then again, we just want to fetch the post.', 'start': 1610.159, 'duration': 2.122}], 'summary': "Using the 'delete' method and the post service to delete and fetch posts by id.", 'duration': 30.073, 'max_score': 1582.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs1582208.jpg'}, {'end': 1723.708, 'src': 'embed', 'start': 1697.883, 'weight': 5, 'content': [{'end': 1700.744, 'text': "so i think that's it, guys, in the next video.", 'start': 1697.883, 'duration': 2.861}, {'end': 1702.904, 'text': "we're gonna just do a little preparation.", 'start': 1700.744, 'duration': 2.16}, {'end': 1705.645, 'text': 'uh, before we deploy to heroku.', 'start': 1702.904, 'duration': 2.741}, {'end': 1716.247, 'text': 'we want to make it so that, um, we need a proxy so that instead of our url and our post service being localhost 5000, we can just do slash api,', 'start': 1705.645, 'duration': 10.602}, {'end': 1718.027, 'text': 'slash posts.', 'start': 1716.247, 'duration': 1.78}, {'end': 1721.428, 'text': 'so we need to actually add a special config file for that.', 'start': 1718.027, 'duration': 3.401}, {'end': 1721.728, 'text': 'all right.', 'start': 1721.428, 'duration': 0.3}, {'end': 1723.708, 'text': "so we're going to do that stuff in the next video.", 'start': 1721.728, 'duration': 1.98}], 'summary': 'Preparing for heroku deployment by configuring proxy for api and posts.', 'duration': 25.825, 'max_score': 1697.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs1697883.jpg'}], 'start': 1318.816, 'title': 'Application functionality and deployment', 'summary': 'Discusses adding functionality to an application, such as replacing a template with a form, binding input values, and creating event methods, aiming to enable post creation. it also covers implementing custom methods for creating and deleting posts, using async functions and event handlers, resulting in successful post creation and deletion, with the next steps involving preparation for deployment to heroku.', 'chapters': [{'end': 1493.915, 'start': 1318.816, 'title': 'Adding functionality to an application', 'summary': 'Discusses adding functionality to an application by replacing a template with a form, binding input values, and creating event methods, aiming to enable post creation through the application.', 'duration': 175.099, 'highlights': ['Replacing the template with a form The speaker discusses the process of replacing the template with a form to enable user input for creating a post.', 'Binding input values using v-model The importance of binding input values using v-model to enable the user to input text for creating a post is explained.', "Creating event methods for post creation The process of creating event methods, specifically the 'create post' method, is highlighted as essential for enabling the functionality of creating a post through the application."]}, {'end': 1723.708, 'start': 1494.655, 'title': 'Implementing create and delete functionality', 'summary': 'Covers the implementation of custom methods for creating and deleting posts, including the use of async functions and event handlers, resulting in successful post creation and deletion, with the next steps involving preparation for deployment to heroku.', 'duration': 229.053, 'highlights': ['The implementation of custom methods for creating and deleting posts includes using async functions and event handlers, resulting in successful post creation and deletion.', 'The process involves using the post service to insert and delete posts, with the ability to access and manipulate data within the input fields.', "Preparation for deployment to Heroku involves configuring a special proxy file to replace the localhost URL with '/api/posts' for the post service."]}], 'duration': 404.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X-JZ-QPApUs/pics/X-JZ-QPApUs1318816.jpg', 'highlights': ['Replacing the template with a form to enable user input for creating a post', 'Binding input values using v-model to enable user input for creating a post', "Creating event methods, specifically the 'create post' method, essential for post creation functionality", 'Implementation of custom methods for creating and deleting posts using async functions and event handlers', 'Using the post service to insert and delete posts, accessing and manipulating data within input fields', "Preparation for deployment to Heroku involves configuring a special proxy file to replace the localhost URL with '/api/posts' for the post service"]}], 'highlights': ['Creating a .gitignore file to prevent certain files from being committed', "Initializing a git repository with 'git init', adding all files with 'git add all', and committing the initial backend with 'git commit'", "The Vue.js frontend server is started using 'NPM run serve' and it runs on port 8080 by default", "Modifying the default 'hello world' component to 'post component' in the Vue.js application", 'The chapter explains the process of creating a service using Axios for handling API requests, including setting up a URL, creating a post service class with static methods for fetching, creating, and deleting posts, and utilizing promises and async/await for error handling', 'Using Axios to make post requests with text parameter The chapter demonstrates using Axios to make post requests in Vue with a text parameter and using ES6 syntax for simplified code', 'Creating a method to delete a post with ID parameter It explains creating a method for deleting a post by passing in an ID parameter and constructing the delete request using Axios', 'Setting up lifecycle method to fetch posts from the backend It explains using the created lifecycle method to fetch posts from the backend by making an asynchronous request to the post service and filling the posts array with the response', 'The chapter explains how to loop through posts using v-for in Vue.js, with emphasis on using v-bind to set item and key attributes', "It also highlights the usage of MongoDB's _ID field to set the key attribute for the looped posts", 'Replacing the template with a form to enable user input for creating a post', 'Binding input values using v-model to enable user input for creating a post', "Creating event methods, specifically the 'create post' method, essential for post creation functionality", 'Implementation of custom methods for creating and deleting posts using async functions and event handlers', 'Using the post service to insert and delete posts, accessing and manipulating data within input fields', "Preparation for deployment to Heroku involves configuring a special proxy file to replace the localhost URL with '/api/posts' for the post service"]}