@20:00 Why are you binding "item" and "index". I know "key" should be bound for rendering purposes, but neither of those need to be bound to work in this example, so I'm curious.
For everyone having problems with the getPosts()-function, here is how i rewrote it and that worked for me: static async getPosts() { try { const res = await axios.get(url); const data = res.data; return data.map(post => ({ ...post, createdAt: new Date(post.createdAt) })); } catch(err) { return Promise.reject(err); } }
By the way, since the client directory is being ignored, we can't copy and paste the css code from anywhere. Not a lot to do by hand, but thought I'd say something anyway.
I'm a bit confused as to why we ignore the client folder? I did watch part 3, and I understand it wouldn't be necessary for heroku deployment. But during development, shouldn't we track all changes to both client and server side of the code base? Is there some way you are tracking your client side code for posterity that I'm not aware of? What would happen if we broke something on client side while developing a new feature and couldn't roll back? Or if your work machine / hard disk dies? I legitimately am curious because I'm tracking my client folder to github during development of my current project, and wonder if I'm wrong?
Thank you Brad for another great course. for the "getPosts()", the parameter be returned as promise. So, you need to extract that out by add .then(function(result) { //and you will get data inside promise in this }
For anyone reading this and getting even more confused: What is questionable with the code here, is that Brad is mixing two styles of doing asynchronous code, which we can argue is harder to understand/read than just sticking to one of them. What we can do instead is pick one of the two and only use that one. We can choose between purely using promises or using the new way that is async/await(pure oldfashioned callbacks being a third option). What I ended up doing was using pure async/await syntax. It is what I think is easier to read, and it is what we're using in the rest of the project.
He did this to make axios request look synchronized. Promise inside promise might look very messy I really appreciate this move. By the way l guess this Tutorial is not for absolute beginner.
@@akash-kumar737 You are completly wrong. Async await is just a syntax sugar for promise, so he created promise in promise which is misunderstanding/wrong implementation of async task. How can it make look like its synchronized?
Hey thanks for the great tutorial!! Helps me alot :) For those who have the same issue: at 22:11 I couldn't get any output and fixed it with using "createdA" instead of "createdAt" {{post.createdA.getDate()}}/{{post.createdA.getMonth()}}/{{post.createdA.getFullYear()}}
For Those who are facing problem in delete in newer version in PostService deletePost change : return axios.delete(url, id); to return axios.delete(url+ id);
hey, I keep getting... This dependency was not found: * dns in ./src/PostService.js To install it, you can run: npm install --save dns "import PostService from '../PostService';"
22:09 I've just replaced strict getPost function with the one commented bellow. My backend works, but whenever I try to open my client, it says Network Error.Failed to load resource: net::ERR_NAME_NOT_RESOLVED lohalhost:5000/api/posts/:1 Has anyome the same issue?
I ran into the same thing. Chances are if you try to load 'localhost:5000/api/posts' it will fail out. The reason being is our backend is not running. Pull up a second terminal and run 'npm run dev' and try again. Should work. Then try to reload your 'localhost:8080/' it should pull all posts from the database. TLDR: Back end has to be running for front end to grab the data
Why mixing Vue and JS template syntax? It should be easier to use {{ post.createdAt.getDate() }} / {{ post.createdAt.getMonth() }} / {{ post.createdAt.getFullYear() }}
I cannot display any posts on front-end. I checked everything in code and it's all correct. I can access my server URL in browser (I see all posts on server) and even get them on Postman. Any tips please? I get error ERR_CONNECTION_REFUSED in browser. Is this something about permissions on Mac?
Definitely a noob question, but when developing something with a team, then I suppose client directory wont go do .gitignore list or? Otherwise how we can both develop to the project?
+Traversy Media - Yo Brad, the error you're seeing at @19:24 is coming from your Vetur plugin. It's the one in this thread ... github.com/vuejs/vetur/issues/261#issuecomment-409651895 github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-v-for-key.md TL,DR: By default, Vetur's settings expect you to provide a v-bind:key="index" when you do v-for. You can change that in your settings, but the Vue developer docs recommend that you bind keys.
I had the same problem. In my case I was missing parenthesis after await postService.getPosts in create and delete methods. Also check if you have used v-bind:key in v-for. I know the question is few months old, but it might help someone.
Im having the same issue right now, I checked what you had down @makovako15 but that seemed to be looking good. Seeing if anyone came to any different conclusions
great series, but any ideas how to handle this I get this "[Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property." ?
If you want to serve Vue on the remote VDS or something you should then add `vue.config.js` file in the root of your Vue app (`client` folder in this case) with this configs: module.exports = { devServer: { proxy: 'example.com/', disableHostCheck: true } } Then just run as usual `npm run serve` and enjoy
Any idea why we need "import axios from 'axios'" and why "const axios = require('axios')" doesn't work? The latter is giving me a network error in the application. What's the difference between import-from and require? The npm page for axios uses require. Thanks in advance!
both are somewhat the same but require works best for Node while Import is newly added on ES6 and doesn't work well on Node with that i can say that: Node = require , Vue = Import.. I maybe wrong but this is what i understand
@@ekoydakoykoy Having done some more research into the matter at the time, I think my conclusion was that import is front end and require is server. Vue being front end uses import, whereas server side node applications use require. I don't promise that is this right though.
Once again, a great one, Brad. And good to see you're human as well (meaning, making the small mistakes as we all devs do :) :) Just kidding... This is Top Stuff !!
If you get Uncaught (in promise) TypeError: post is undefined, in PostComponent.vue:7 you can remove index in the v-for loop. It isn't used and that fixed the error for me:
Hey Brad really loving the series, I am only occurring a problem that when I add or delete a post, the browser doesn't automatically refresh and show the changes client sided. Could you or someone else please help me out?
can anyone help me please i get the warning below when i try to run. I did exacty the same things in the video but it says postservice in not defined.I googled the error and but couldn't find any solution. WARNING Compiled with 1 warnings 00:14:11 Module Warning (from ./node_modules/eslint-loader/index.js): error: 'PostService' is not defined (no-undef) at src\components\PostComponent.vue:38:26: 36 | async created() { 37 | try { > 38 | this.posts = await PostService.getPosts(); | ^ 39 | } catch(err){ 40 | this.error = err.message; 41 | } here is postservice: import axios from "axios"; const url = "localhost:5000/api/posts/"; class PostService { static getPosts(){ return new Promise(async (resolve, reject) => { try { const res = await axios.get(url); const data = res.data; resolve( data.map(post =>({ ...post, createdAt: new Date(post.createdAt) })) ) } catch (err) { reject(err); } }) } static insertPost(text) { return axios.post(url, { text }); } static deletePost(id) { return axios.delete(`${url}${id}`); } } export default PostService; and here is the script part ot the component: export default { name: 'PostComponent', data() { return{ posts: [], error: "", text: "" } }, async created() { try { this.posts = await PostService.getPosts(); } catch(err){ this.error = err.message; } }, methods: { async createPost(){ await PostService.insertPost(this.text); this.posts = await PostService.getPosts(); }, async deletePost(id){ await PostService.deletePost(id); this.posts = await PostService.getPosts(); } } }
I think I've fixed it by changing postservice.js' folder to components (same as postcomponent.vue) and imported post service with import PostService from './PostService' it worked but than i got an error at the run time forgetFullYear() function so it wasn't displaying my posts just remoning that part fixed that too
hi i got this error while delete text UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
Any updates to this? I am stuck with errors. I went through the video 3 times but it is exact. Error: TypeError: axios__WEBPACK_IMPORTED_MODULE_14___default.a.todo is not a function And now when I post via post man, my text field is null. Anybody get this to work recently?
At the 6 minute mark: when I run "npm run serve" from the client folder I get an error stating "'vue-cli-service' is not recognized as an internal or external command, operable program or batch file." I'm running this on a windows 10 laptop... Any ideas?
Any particular reason to have the client folder ? I see two node_modules folders created in the entire project (one for root and one for FE), would it be ok to have vue setup in the root folder?
BTW the FE doesn't need to be excluded because you do an `npm run build` to spit out a production ready version. But I guess you wanted to keep it simple! All good.
// DELETE Post static deletePost(id) { return axios.delete(`${url}${id}`); } } anyone have any idea why this delete function does nothing? i dont even get errors it just doesnt remove the item from the database, i can add just fine
If you're using Firefox and getting 'XML Parsing error' when deleting posts, add an empty object to the api delete response. In other words, use response.status(200).send({}) instead of response.status(200).send() You can see exactly what I mean here: github.com/bradtraversy/microposts_fullstack_vue/pull/5/files I've opened a pull request here: github.com/bradtraversy/microposts_fullstack_vue/pull/5 Brad, thanks for the tutorial! I love your teaching style.
Hi, I am trying this client example on my own server code, which is working by itself, but when I try to data.map my response on a specified server endpoint( running locally ), I get a "data.map is not a function" error on my vue frontend. Anyone has an idea what could be the issue here ?
Does anyone have the full code for this app? Brad's repo only has parts of it, and I have run into a bug that is causing my axios.get to fail. I was going full steam until that point.
Here is what I have created using the Knowledge which I have learned from my Teacher Brad. I have created a video tutorial of Authentication app using Vue.js, Vuex and Node.js, Express.js and MongoDB. ua-cam.com/video/F9cvPtMI7JI/v-deo.html
Hi, I'm new to Vue. Can someone please tell me why do we need the 'PostService.js'? Can't we just use the methods in Vue? Is it what professional Vue developers do? Please excuse my ignorance. Thank you.
You can simply write these functions in your Vue component, Brad made it to make code cleaner and easier to read. If you don't want to create PostService.js - you don't have to :)
@@jessieluo4319 Try to find Taimur Sohrab's comment and replace your static getPosts function with the one in his comment. It helped me. Let me know if it works.
@@bunny_potatoface5296 Thanks! It works a little bit, but then it throws a new error./(ㄒoㄒ)/~~ Uncaught (in promise) TypeError: post.createdAt.getData is not a function at eval (eval at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/PostComponent.vue?vue&type=template&id=043ff5bd&scoped=true&bindings={"posts":"data","error":"data","text":"data"} (app.js:974), :47:154) at renderList (runtime-core.esm-bundler.js?5c40:6556) at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/PostComponent.vue?vue&type=template&id=043ff5bd&scoped=true&bindings={"posts":"data","error":"data","text":"data"} (app.js:974), :41:386) at Proxy.eval (runtime-core.esm-bundler.js?5c40:1432) at renderComponentRoot (runtime-core.esm-bundler.js?5c40:673) at componentEffect (runtime-core.esm-bundler.js?5c40:4548) at reactiveEffect (reactivity.esm-bundler.js?a1e9:42) at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154) at flushJobs (runtime-core.esm-bundler.js?5c40:364) ---------------------------------------------------------------------------------------------------------------------------------------------- PostComponent.vue: Latest Posts
For anyone doing this with the fetch API and getting "Cannot read property 'map' Of undefined". You need to convert the fetched data to Json before passing it to your data variable. You also no longer need to pass res.data to your data variable, you only need to pass res (or whatever you named your then parameter). Code for reference: static getPosts() { return new Promise((resolve, reject)=>{ fetch(url) .then((res)=>{ return res.json(); }) .then((res)=>{ const data = res resolve( data.map(post => ({ ...post, createdAt: new Date(post.createdAt) })) ) }) .catch((err) => { reject(err) })
New user here: This command: git add . && git commit -m 'Initial backend created' Gives this error: warning: LF will be replaced by CRLF in package.json. The file will have its original line endings in your working directory. error: pathspec 'backend' did not match any file(s) known to git. error: pathspec 'created'' did not match any file(s) known to git. Anybody with similar issue?
I'm really disappointed in the way that the frontend is just excluded from the source code entirely. I watched this to learn how to neatly package a full-stack app with express and vue, and was really disappointed.
When I run my client side code using npm run serve it still shows the old scaffold Vue app instead of the Posts lists. No errors are thrown, anyone knows what might the issue be?
![Full Stack Vue.js, Express & MongoDB [3] - Prepare & Deploy](http://i.ytimg.com/vi/W-b9KGwVECs/mqdefault.jpg)
![Full Stack Vue.js, Express & MongoDB [3] - Prepare & Deploy](/img/tr.png)
![Full Stack Vue.js, Express & MongoDB [1] - Express API](http://i.ytimg.com/vi/j55fHUJqtyw/mqdefault.jpg)
@20:00 Why are you binding "item" and "index". I know "key" should be bound for rendering purposes, but neither of those need to be bound to work in this example, so I'm curious.
For everyone having problems with the getPosts()-function, here is how i rewrote it and that worked for me:
static async getPosts() {
try {
const res = await axios.get(url);
const data = res.data;
return data.map(post => ({
...post,
createdAt: new Date(post.createdAt)
}));
} catch(err) {
return Promise.reject(err);
}
}
Thanks it works
Thank you so much for this! I was having trouble as well
By the way, since the client directory is being ignored, we can't copy and paste the css code from anywhere. Not a lot to do by hand, but thought I'd say something anyway.
Quite simply the most to the point, no bullshit, here's what you need tutorial. You're the man, thank you!
Here's the CSS for anybody complaining about client being in .gitignore, Merry Christmas :)
div.container {
max-width: 800px;
margin: 0 auto;
}
p.error {
border: 1px solid #ff5b5f;
background-color: #ffc5c1;
padding: 10px;
margin-bottom: 15px;
}
div.post {
position: relative;
border: 1px solid #5bd658;
background-color: #bcffb8;
padding: 10px 10px 30px 10px;
margin-bottom: 15px;
}
div.created-at {
position: absolute;
top: 0;
left: 0;
padding: 5px 15px 5px 15px;
background-color: darkgreen;
color: white;
font-size: 13px;
}
p.text {
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
}
thanks a lot!
You're the real MVP
i love you lol
HoHoHo
I'm a bit confused as to why we ignore the client folder? I did watch part 3, and I understand it wouldn't be necessary for heroku deployment. But during development, shouldn't we track all changes to both client and server side of the code base? Is there some way you are tracking your client side code for posterity that I'm not aware of?
What would happen if we broke something on client side while developing a new feature and couldn't roll back? Or if your work machine / hard disk dies? I legitimately am curious because I'm tracking my client folder to github during development of my current project, and wonder if I'm wrong?
What's the reason to do v-bind:item="post" and v-bind:index="index" in the PostComponent template? No sure I understand that point.
Thank you Brad for another great course.
for the "getPosts()", the parameter be returned as promise.
So, you need to extract that out by add .then(function(result) { //and you will get data inside promise in this }
Whats the point of writing async inside of another promise? Im not sure but its not needed in 9:00
agreed, all can be done with just async await
Agree. It is not needed. The way implemented in the video will make misunderstanding about Promise and async/await for new programers.
For anyone reading this and getting even more confused: What is questionable with the code here, is that Brad is mixing two styles of doing asynchronous code, which we can argue is harder to understand/read than just sticking to one of them.
What we can do instead is pick one of the two and only use that one. We can choose between purely using promises or using the new way that is async/await(pure oldfashioned callbacks being a third option). What I ended up doing was using pure async/await syntax. It is what I think is easier to read, and it is what we're using in the rest of the project.
He did this to make axios request look synchronized. Promise inside promise might look very messy I really appreciate this move. By the way l guess this Tutorial is not for absolute beginner.
@@akash-kumar737 You are completly wrong. Async await is just a syntax sugar for promise, so he created promise in promise which is misunderstanding/wrong implementation of async task. How can it make look like its synchronized?
I think it's better to use getMonth()+1, because getMonth() returns 0 to 11, 0 represents January, 1 represents February ... 11 represents December.
`client` folder on github is empty(
div.container {
max-width: 800px;
margin: 0 auto;
}
p.error {
border: 1px solid #ff5b5f;
background-color: #ffc5c1;
padding: 10px;
margin-bottom: 15px;
}
div.post {
position: relative;
border: 1px solid #5bd658;
background-color: #bcffb8;
padding: 10px 10px 30px 10px;
margin-bottom: 15px;
}
div.created-at {
position: absolute;
top: 0;
left: 0;
padding: 5px 15px 5px 15px;
background-color: darkgreen;
color: white;
font-size: 13px;
}
p.text {
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
}
@@PALIXOTV thx, bro!
@@PALIXOTV thanks man!
@@PALIXOTV Thank you!!!
Hey thanks for the great tutorial!! Helps me alot :) For those who have the same issue: at 22:11 I couldn't get any output and fixed it with using "createdA" instead of "createdAt" {{post.createdA.getDate()}}/{{post.createdA.getMonth()}}/{{post.createdA.getFullYear()}}
Thanks man! i have been looking for this video for long time. It solved all the doubts.
For Those who are facing problem in delete in newer version
in PostService deletePost change : return axios.delete(url, id);
to return axios.delete(url+ id);
no files in the /client/ folder in the github repo
Let me check it out
True.
One of the first things he says is he added client to .gitignore. Which I don't think makes much sense, but that's why it's not on GitHub.
Thanks, I forget he mentioned, and he explained why in the 3rd part
hey, I keep getting...
This dependency was not found:
* dns in ./src/PostService.js
To install it, you can run: npm install --save dns
"import PostService from '../PostService';"
yahooo.. so mevn stack from boss brad at last.
Can this MEVN stack be updated. Great tutorial, pity it's out of date since Oct. 2018.
is it possible to use mongoose to get, post or delete posts inside of the PostService class
be aware: the month is zero indexed - to receive the right display, you have to add 1 to the month in the postComponent
22:09 I've just replaced strict getPost function with the one commented bellow. My backend works, but whenever I try to open my client, it says Network Error.Failed to load resource: net::ERR_NAME_NOT_RESOLVED lohalhost:5000/api/posts/:1
Has anyome the same issue?
I ran into the same thing. Chances are if you try to load 'localhost:5000/api/posts' it will fail out. The reason being is our backend is not running. Pull up a second terminal and run 'npm run dev' and try again. Should work. Then try to reload your 'localhost:8080/' it should pull all posts from the database. TLDR: Back end has to be running for front end to grab the data
Since you can not copy the css from the repo bcz the client folder is ignored here is the css :
div.container {
max-width: 800px;
margin: 0 auto;
}
p.error {
border: 1px solid #ff5b5f;
background-color: #ffc5c1;
padding: 10px;
margin-bottom: 15px;
}
div.post {
position: relative;
border: 1px solid #5bd658;
background-color: #bcffb8;
padding: 10px 10px 30px 10px;
margin-bottom: 15px;
}
div.created-at {
position: absolute;
top: 0;
left: 0;
padding: 5px 15px;
background-color: darkgreen;
color: azure;
font-size: 13px;
}
p.text {
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
}
Why mixing Vue and JS template syntax?
It should be easier to use
{{ post.createdAt.getDate() }} / {{ post.createdAt.getMonth() }} / {{ post.createdAt.getFullYear() }}
I cannot display any posts on front-end. I checked everything in code and it's all correct. I can access my server URL in browser (I see all posts on server) and even get them on Postman. Any tips please? I get error ERR_CONNECTION_REFUSED in browser. Is this something about permissions on Mac?
Hm, localhost for be 5000 and for vue 8080m how you do not get CORS error?
MEVN udemy course. 🙏
Hope he calls is "VENM" stack! I will take the course either way! Brad is the best!
@@ridechain or "VENoM"... :)
@@PedroPisandelli It actually sounds awesome :D
I'm getting _PostService__WEBPACK_IMPORTED_MODULE_2__.default.getpost is not a function when I run the frontend... Any idea why?
same here
solved: i had put "PostService.vue" as file name it should be "PostService.js"
Hey Brad, the client folder in the repo is empty.
Definitely a noob question, but when developing something with a team, then I suppose client directory wont go do .gitignore list or? Otherwise how we can both develop to the project?
+Traversy Media - Yo Brad, the error you're seeing at @19:24 is coming from your Vetur plugin. It's the one in this thread ...
github.com/vuejs/vetur/issues/261#issuecomment-409651895
github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-v-for-key.md
TL,DR: By default, Vetur's settings expect you to provide a v-bind:key="index" when you do v-for. You can change that in your settings, but the Vue developer docs recommend that you bind keys.
So if you're pushing to a git repo, you have to have another git repo for the client folder?
It doesn't automatic refresh when adding or deleting a post
have you solved this? i have the same prob. needs to be refreshed before you can see the added post.
follow
I had the same problem. In my case I was missing parenthesis after await postService.getPosts in create and delete methods. Also check if you have used v-bind:key in v-for. I know the question is few months old, but it might help someone.
Im having the same issue right now, I checked what you had down @makovako15 but that seemed to be looking good. Seeing if anyone came to any different conclusions
@@makovako15 in my case it auto refreshes on adding a post but doesn't when I delete one! and I'm binding key... any idea!
great series, but any ideas how to handle this I get this "[Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property." ?
If you want to serve Vue on the remote VDS or something you should then add `vue.config.js` file in the root of your Vue app (`client` folder in this case) with this configs:
module.exports = {
devServer: {
proxy: 'example.com/',
disableHostCheck: true
}
}
Then just run as usual `npm run serve` and enjoy
Any idea why we need "import axios from 'axios'" and why "const axios = require('axios')" doesn't work? The latter is giving me a network error in the application. What's the difference between import-from and require? The npm page for axios uses require.
Thanks in advance!
both are somewhat the same but require works best for Node while Import is newly added on ES6 and doesn't work well on Node with that i can say that:
Node = require , Vue = Import..
I maybe wrong but this is what i understand
@@ekoydakoykoy Having done some more research into the matter at the time, I think my conclusion was that import is front end and require is server. Vue being front end uses import, whereas server side node applications use require. I don't promise that is this right though.
div.container {
max-width: 800px;
margin: 0 auto;
}
p.error{
border: 1px solid #ff5b5f;
background-color: #ffc5c1;
padding: 10px;
margin-bottom: 15px;
}
div.post{
position: relative;
border: 1px solid #5bd658;
background-color: #bcffb8;
padding: 10px 10px 30px 10px;
}
div.created-at{
position: absolute;
top:0;
left:0;
padding: 5px 15px 5px 15px;
background-color: darkgreen;
color:white;
font-size: 13px;
}
p.text{
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
}
what a legend
Once again, a great one, Brad.
And good to see you're human as well (meaning, making the small mistakes as we all devs do :) :)
Just kidding... This is Top Stuff !!
Hey, really useful tutorial, just letting you know that the /client/ folder is empty on github
Help! - Cannot read property 'protocol' of undefined
Is there any other way to return data in getPosts method? It's a little tricky part.
I get this error:
Promise executor functions should not be async no-async-promise-executor
ua-cam.com/video/X-JZ-QPApUs/v-deo.html&lc=UgyFrjNjK_ZtqQB9S-N4AaABAg
I could really use som advice and help on how to add update to this as well
same
Hi Brad Inside the repository cannot find the client folder..
If you get Uncaught (in promise) TypeError: post is undefined, in PostComponent.vue:7 you can remove index in the v-for loop. It isn't used and that fixed the error for me:
i'm geting this error
Error in render: "TypeError: post.createdAt.getDate is not a function"
Hey Brad really loving the series, I am only occurring a problem that when I add or delete a post, the browser doesn't automatically refresh and show the changes client sided. Could you or someone else please help me out?
I added "loading..." text. Very fun vue.js
can anyone help me please i get the warning below when i try to run. I did exacty the same things in the video but it says postservice in not defined.I googled the error and but couldn't find any solution.
WARNING Compiled with 1 warnings 00:14:11
Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'PostService' is not defined (no-undef) at src\components\PostComponent.vue:38:26:
36 | async created() {
37 | try {
> 38 | this.posts = await PostService.getPosts();
| ^
39 | } catch(err){
40 | this.error = err.message;
41 | }
here is postservice:
import axios from "axios";
const url = "localhost:5000/api/posts/";
class PostService {
static getPosts(){
return new Promise(async (resolve, reject) => {
try {
const res = await axios.get(url);
const data = res.data;
resolve(
data.map(post =>({
...post,
createdAt: new Date(post.createdAt)
}))
)
} catch (err) {
reject(err);
}
})
}
static insertPost(text) {
return axios.post(url, {
text
});
}
static deletePost(id) {
return axios.delete(`${url}${id}`);
}
}
export default PostService;
and here is the script part ot the component:
export default {
name: 'PostComponent',
data() {
return{
posts: [],
error: "",
text: ""
}
},
async created() {
try {
this.posts = await PostService.getPosts();
} catch(err){
this.error = err.message;
}
},
methods: {
async createPost(){
await PostService.insertPost(this.text);
this.posts = await PostService.getPosts();
},
async deletePost(id){
await PostService.deletePost(id);
this.posts = await PostService.getPosts();
}
}
}
I think I've fixed it by changing postservice.js' folder to components (same as postcomponent.vue) and imported post service with
import PostService from './PostService'
it worked but than i got an error at the run time forgetFullYear() function so it wasn't displaying my posts just remoning that part fixed that too
all the errors are fixed but still don't understand why that happenned can anyone please explain it to me?
Hey Brad, Is it possible if I could use this same process but instead of mongodb, I use mysql?
sure you can, investigate sequelize it's an multi dialect ORM for NodeJS. I was using it for working with SQLlite and PostgreSQL
you can use sql, just adding ajax call to your vue js then you are boom done
Thanks for your reply! I actually did it using express
hey, but we ignore /client folder, how we can access css code? :)
when am tried to run frontend (vue js) with command npm run serve..its showing error like missing script: serve My package.json is
{
"name": "fullstack_vue_express",
"version": "1.0.0",
"description": "Full stack vue and express app",
"main": "index.js",
"scripts": {
"start": "node server/index.js",
"dev": "nodemon server/index.js"
},
"author": "Ramakanth Rapaka",
"license": "MIT",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mongodb": "^3.5.7"
},
"devDependencies": {
"nodemon": "^2.0.3"
}
}
hi i got this error while delete text
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error
originated either by throwing inside of an async function without a catch block, or by
rejecting a promise which was not handled with .catch(). To terminate the node process
on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
Is there anything other than node for handling mongodb !
Can anyone help me understand how to organize the posts to display with the most current one on top instead of at the bottom?
Any updates to this? I am stuck with errors. I went through the video 3 times but it is exact. Error: TypeError: axios__WEBPACK_IMPORTED_MODULE_14___default.a.todo is not a function
And now when I post via post man, my text field is null. Anybody get this to work recently?
At the 6 minute mark: when I run "npm run serve" from the client folder I get an error stating "'vue-cli-service' is not recognized as an internal or external command,
operable program or batch file."
I'm running this on a windows 10 laptop... Any ideas?
Oh... I have to use "yarn serve" instead of "npm run serve".
Any particular reason to have the client folder ? I see two node_modules folders created in the entire project (one for root and one for FE), would it be ok to have vue setup in the root folder?
BTW the FE doesn't need to be excluded because you do an `npm run build` to spit out a production ready version. But I guess you wanted to keep it simple! All good.
// DELETE Post
static deletePost(id) {
return axios.delete(`${url}${id}`);
}
}
anyone have any idea why this delete function does nothing? i dont even get errors it just doesnt remove the item from the database, i can add just fine
I have the same problem, don't know what's the problem
Hey Guys, I have just done this and noticed there was no answer. Check where you call v-on:dblclick="deletePost(post.id)" it should be post._id
Any idea on how to get vue's hot module reload working, so you don't have to manually reload the browser after making a change in the client folder?
mine reloads just fine on itself
It stopped working after I updated vue cli3. I also noticed that Brad was manually reloading his browser to view changes in this course.
@@nnaemekaish007 try to create new project using cli3 and see if it works there
Thanks but i tried and it didn't work.
Yeah, I also have to reload. And so does Brad.
Thank u for this awesome video and series
If you're using Firefox and getting 'XML Parsing error' when deleting posts, add an empty object to the api delete response. In other words, use response.status(200).send({}) instead of response.status(200).send()
You can see exactly what I mean here: github.com/bradtraversy/microposts_fullstack_vue/pull/5/files
I've opened a pull request here: github.com/bradtraversy/microposts_fullstack_vue/pull/5
Brad, thanks for the tutorial! I love your teaching style.
Great video dude, but seriously, when will you do a full MEVN course?
Please!
Hi, I am trying this client example on my own server code, which is working by itself, but when I try to data.map my response on a specified server endpoint( running locally ), I get a "data.map is not a function" error on my vue frontend. Anyone has an idea what could be the issue here ?
did you ever get this solved, igor? I am having the same issue
CSS of Post Component
div.container{
max-width: 800px;
margin : 0 auto;
}
p.error{
border : 1px solid #ff5b5f;
background-color: #ffc5c1;
padding: 10px;
margin-bottom: 15px;
}
div.post {
position: relative;
border: 1px solid #5bd658;
background-color: #bcffb8;
padding: 10px 10px 30px 10px;
margin-bottom: 15px;
}
div.created-at{
position: absolute;
top: 0;
left: 0;
padding: 5px 15px 5px 15px;
background-color: darkgreen;
color: white;
font-size: 13px
}
p.text{
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
}
P.S. You rock Brad!
In my case I had to install Axios separately (dep. was not found), idk why.. Vue 3.1.1
did u solve that?
Does anyone have the full code for this app? Brad's repo only has parts of it, and I have run into a bug that is causing my axios.get to fail. I was going full steam until that point.
to note: this is in the PostService, which is one of the files that has to be typed in from the video.
mongodb allow anywhere (ip address settings) otherwise there's problem sometimes
A finished code repo would be nice.
Post something like Vue Express authentication app with vuex.
Here is what I have created using the Knowledge which I have learned from my Teacher Brad. I have created a video tutorial of Authentication app using Vue.js, Vuex and Node.js, Express.js and MongoDB.
ua-cam.com/video/F9cvPtMI7JI/v-deo.html
Hey Brad, How do you came out with these applications? I'm really curious :) Btw. Good work! Keep sharing with us you experience.
Hi, I'm new to Vue. Can someone please tell me why do we need the 'PostService.js'? Can't we just use the methods in Vue? Is it what professional Vue developers do? Please excuse my ignorance. Thank you.
You can simply write these functions in your Vue component, Brad made it to make code cleaner and easier to read. If you don't want to create PostService.js - you don't have to :)
@@iamtofu7408 Thanks man, I appreciate it.
Dude, how are we suppose to copy the style code? You put the entire client folder in gitignore!
Dude seriously! it's less than 25 lines of code!! besides there is more than a dozen people that added the code in the comments section!!
I get an error "Cannot read property 'map' of undefined". Anyone know how to solve this?
I get the same error, and I have no idea about it, either./(ㄒoㄒ)/~~
@@jessieluo4319 Try to find Taimur Sohrab's comment and replace your static getPosts function with the one in his comment. It helped me. Let me know if it works.
@@bunny_potatoface5296 Thanks! It works a little bit, but then it throws a new error./(ㄒoㄒ)/~~
Uncaught (in promise) TypeError: post.createdAt.getData is not a function
at eval (eval at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/PostComponent.vue?vue&type=template&id=043ff5bd&scoped=true&bindings={"posts":"data","error":"data","text":"data"} (app.js:974), :47:154)
at renderList (runtime-core.esm-bundler.js?5c40:6556)
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/PostComponent.vue?vue&type=template&id=043ff5bd&scoped=true&bindings={"posts":"data","error":"data","text":"data"} (app.js:974), :41:386)
at Proxy.eval (runtime-core.esm-bundler.js?5c40:1432)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:673)
at componentEffect (runtime-core.esm-bundler.js?5c40:4548)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at flushJobs (runtime-core.esm-bundler.js?5c40:364)
----------------------------------------------------------------------------------------------------------------------------------------------
PostComponent.vue:
Latest Posts
{{error}}
{{`${post.createdAt.getData()}/${post.createdAt.getMonth()}/${post.createdAt.getFullYear()}`}}
{{post.text}}
import PostService from '../PostService';
export default {
name: 'PostComponent',
data() {
return {
posts: [],
error: '',
text: ''
}
},
async created() {
try {
this.posts = await PostService.getPosts();
} catch (err) {
this.error = err.message;
}
}
}
--------------------------------------------------------------------------------------------------------------------------
PostService.js:
class PostService {
// Get Posts
static getPosts() {
return new Promise((resolve, reject) => {
axios.get(url).then((res) => {
const data = res.data;
resolve(
data.map(post => ({
...post,
createdAt: new Date(post.createdAt)
}))
);
})
.catch((err) => {
reject(err);
})
});
}
@@jessieluo4319 I had similar error and I found some typos in my code. Trace the code carefully.
@@bunny_potatoface5296 OK👌! Thanks a lot!!! I will check them later line by line, if necessary, rewrite it. Hope it will work!😃
So cool, thanks)
Style code for PostComponent:
div.container{
max-width:800px;
margin: 0 auto;
}
p.error{
border: 1px solid #ff5b5f;
background-color:#ffc5c1;
padding:10px;
margin-bottom: 15px;
}
div.post{
position: relative;
border:1px solid #5bd658;
background-color: #bcffb8;
padding: 10px 10px 30px 10px;
margin-bottom: 1rem;
}
div.created-at{
position: absolute;;
top:0;
left:0;
padding: 5px 15px 5px 15px;
background-color: darkgreen;
color:white;
font-size:13px;
}
p.text{
font-size:22px;
font-weight: 700;
margin-bottom: 0;
}
Thanks Brad! :D
I suppose it's better to write post.createAt.getMonth()+1 instead of post.createAt.getMonth() when we add a date. Thanks for your videos)
For anyone doing this with the fetch API and getting "Cannot read property 'map' Of undefined". You need to convert the fetched data to Json before passing it to your data variable. You also no longer need to pass res.data to your data variable, you only need to pass res (or whatever you named your then parameter). Code for reference:
static getPosts() {
return new Promise((resolve, reject)=>{
fetch(url)
.then((res)=>{
return res.json();
})
.then((res)=>{
const data = res
resolve(
data.map(post => ({
...post,
createdAt: new Date(post.createdAt)
}))
)
})
.catch((err) => {
reject(err)
})
})
}
I have this problem too, and i didn't get a way to solve :/
Great tutorial, but de client folder is empty.
Solution?
if there chance to create project bigger than this with node js & mongodb & vuex will be awesome
PostComponent.vue CSS:
div.container {
max-width: 800px;
margin: 0 auto;
}
p.error {
border: 1px solid #ff5b5f;
background-color: #ffc5c1;
padding: 10px;
margin-bottom: 15px;
}
div.post {
position: relative;
border: 1px solid #5bd658;
background-color: #bcffb8;
padding: 10px 10px 30px 10px;
margin-bottom: 15px;
}
div.created-at {
position: absolute;
top: 0;
left: 0;
padding: 5px 15px 5px 15px;
background-color: darkgreen;
color: white;
font-size: 13px;
}
p.text {
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
}
New user here:
This command:
git add . && git commit -m 'Initial backend created'
Gives this error:
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory.
error: pathspec 'backend' did not match any file(s) known to git.
error: pathspec 'created'' did not match any file(s) known to git.
Anybody with similar issue?
have you solved it yet?
the '&&" was not recognized so i type it into 2 and you need to define the username and email to got through
@@ekoydakoykoy Just use Batch, then it will recognize "&&"
Hello bro,,,can you give me some suggestion about proggraming for make app????
You should probably give him literally any information at all if you want help.
Where my MEVN heads at??
I'm really disappointed in the way that the frontend is just excluded from the source code entirely. I watched this to learn how to neatly package a full-stack app with express and vue, and was really disappointed.
Promise executor functions should not be async
how did you fix that?
@@TheFoxstory watched completely different tutorial.
Spoiler alert: there are some bugs in this code!!
have u make it run?
1
No files in clent folder in github repo. :/
When I run my client side code using npm run serve it still shows the old scaffold Vue app instead of the Posts lists. No errors are thrown, anyone knows what might the issue be?
Nevermind, it was cached.