This is the second part of tutorial on how to build application with Node.js, ExpressJs, MongoDB and Vue.js. After setting up the Node.js server and database on part 1, now we start to develop the front-end application. Then, we build the code using Webpack, so that it can be loaded from HTML. In this tutorial, we're building a simple application with basic CRUD functionality for managing posts.
Create Vue.js Components
For managing posts, there are three components we're going to create. The first one is for creating a new post. The second is for editing a post. The other is for managing posts (displaying list of posts and allow post deletion)
First, this is the component for creating a new post. It has one method createPost which validate data and send HTTP request to the server. We use axios for sending HTTP request.
public/src/components/Posts/Create.vue
<template>
<b-container>
<h1 class="d-flex justify-content-center">Create a Post</h1>
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<b-form @submit.prevent>
<b-form-group>
<b-form-input type="text" class="form-control" placeholder="Title of the post" v-model="post.title"></b-form-input>
</b-form-group>
<b-form-group>
<b-form-textarea class="form-control" placeholder="Write the content here" v-model="post.content"></b-form-textarea>
</b-form-group>
<b-button variant="primary" v-on:click="createPost">Create Post</b-button>
</b-form>
</b-container>
</template>
<script>
import axios from 'axios';
export default {
data: () => ({
errors: [],
post: {
title: '',
content: '',
},
}),
methods: {
createPost(event) {
if (event) {
event.preventDefault();
}
if (!this.post.title) {
this.errors = [];
if (!this.post.title) {
this.errors.push('Title required.');
}
return;
}
const url = 'http://localhost:4000/api/posts';
const param = this.post;
axios
.post(url, param)
.then((response) => {
console.log(response);
window.location.href = 'http://localhost:4000/posts';
}).catch((error) => {
console.log(error);
});
},
}
}
</script>
Below is the component for editing a post. Of course, we need the current data of the post before editing it. Therefore, there's fetchPost method called when the component is created. There's also updatePost method which validate data and call the API for updating post.
public/src/components/Posts/Edit.vue
<template>
<b-container>
<h1 class="d-flex justify-content-center">Edit a Post</h1>
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<b-form @submit.prevent>
<b-form-group>
<b-form-input type="text" class="form-control" placeholder="Title of the post" v-model="post.title"></b-form-input>
</b-form-group>
<b-form-group>
<b-form-textarea class="form-control" placeholder="Write the content here" v-model="post.content"></b-form-textarea>
</b-form-group>
<b-button variant="primary" v-on:click="updatePost">Update Post</b-button>
</b-form>
</b-container>
</template>
<script>
import axios from 'axios';
export default {
data: () => ({
errors: [],
post: {
_id: '',
title: '',
content: '',
},
}),
created: function() {
this.fetchPost();
},
methods: {
fetchPost() {
const postId = this.$route.params.id;
const url = `http://localhost:4000/api/posts/${postId}`;
axios
.get(url)
.then((response) => {
this.post = response.data;
console.log('this.post;');
console.log(this.post);
});
},
updatePost(event) {
if (event) {
event.preventDefault();
}
if (!this.post.title) {
this.errors = [];
if (!this.post.title) {
this.errors.push('Title required.');
}
return;
}
const url = `http://localhost:4000/api/posts/${this.post._id}`;
const param = this.post;
axios
.patch(url, param)
.then((response) => {
console.log(response);
window.alert('Post successfully saved');
}).catch((error) => {
console.log(error);
});
},
}
}
</script>
For managing posts, we need to fetch the list of post first. Similar to the edit component, in this component, we have fetchPosts method called when the component is created. For deleting a post, there's also a method deletePost. If post successfully deleted, the fetchPosts method is called again to refresh the post list.
public/src/components/Posts/List.vue
<template>
<b-container>
<h1 class="d-flex justify-content-center">Post List</h1>
<b-button variant="primary" style="color: #ffffff; margin: 20px;"><a href="/posts/create" style="color: #ffffff;">Create New Post</a></b-button>
<b-container-fluid v-if="posts.length">
<table class="table">
<thead>
<tr class="d-flex">
<td class="col-8">Titleqqqqqqqqq</td>
<td class="col-4">Actions</td>
</tr>
</thead>
<tbody>
<tr v-for="post in posts" class="d-flex">
<td class="col-8">{{ post.title }}</td>
<td class="col-2"><a v-bind:href="'http://localhost:4000/posts/' + post._id"><button type="button" class="btn btn-primary"><i class="fa fa-edit" aria-hidden="true"></i></button></a></td>
<td class="col-2"><button type="button" class="btn btn-danger" v-on:click="deletePost(post._id)"><i class="fa fa-remove" aria-hidden="true"></i></button></td>
</tr>
</tbody>
</table>
</b-container-fluid>
</b-container>
</template>
<script>
import axios from 'axios';
export default {
data: () => ({
posts: [],
}),
created: () => {
this.fetchPosts();
},
methods: {
fetchPosts() {
const url = 'http://localhost:4000/api/posts/';
axios
.get(url)
.then((response) => {
console.log(response.data);
this.posts = response.data;
});
},
deletePost(id) {
if (event) {
event.preventDefault();
}
const url = `http://localhost:4000/api/posts/${id}`;
const param = this.post;
axios
.delete(url, param)
.then((response) => {
console.log(response);
console.log('Post successfully deleted');
this.fetchPosts();
}).catch((error) => {
console.log(error);
});
},
}
}
</script>
All of the components above are wrapped into a root component which roles as the basic template. The root component renders the navbar which is same across all components. The component for each routes will be rendered on router-view.
public/src/App.vue
<template>
<div>
<b-navbar toggleable="md" type="dark" variant="dark">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-navbar-brand to="/">My Vue App</b-navbar-brand>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<b-nav-item to="/">Home</b-nav-item>
<b-nav-item to="/posts">Manage Posts</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<!-- routes will be rendered here -->
<router-view />
</div>
</template>
<script>
export default {
name: 'app',
data () {},
methods: {}
}
</script>
For determining which component should be rendered, we use Vue.js' router. For each routes, we need to define the path, component name and the component itself. A component will be rendered if the current URL matches the path.
public/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import CreatePost from '../components/Posts/Create.vue';
import EditPost from '../components/Posts/Edit.vue';
import ListPost from '../components/Posts/List.vue';
Vue.use(Router);
let router = new Router({
mode: 'history',
routes: [
{
path: '/posts',
name: 'ListPost',
component: ListPost,
},
{
path: '/posts/create',
name: 'CreatePost',
component: CreatePost,
},
{
path: '/posts/:id',
name: 'EditPost',
component: EditPost,
},
]
});
export default router;
Lastly, we need a main script as the entry point which imports the main App component and the router. Inside, it creates a new Vue instance
webpack.config.js
import BootstrapVue from 'bootstrap-vue';
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
render: h => h(App),
});Configure Webpack
For building the code into a single JavaSript file. Below is the basic configuration for Webpack 4.
webpack.config.js
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './public/src/main.js',
output: {
path: `${__dirname}/public/dist/js/`,
filename: '[name].js',
},
resolve: {
modules: [
'node_modules',
],
alias: {
// vue: './vue.js'
}
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
]
},
plugins: [
new VueLoaderPlugin(),
]After that, run ./node_modules/webpack/bin/webpack.js. You can add the command to the scripts section of package.json, so you can run Webpack with a shorter command npm run build, as examplified below.
"dependencies": {
...
},
"devDependencies": {
...
},
"scripts": {
"build": "./node_modules/webpack/bin/webpack.js",
"start": "node app/index.js"
},Finally, you can start to try the application. This code is also available on Woolha.com's Github.
