There are the Following The simple About Vue.js Simple CRUD Tutorial Example From Scratch Full Information With Example and source code.
As I will cover this Post with live Working example to develop Laravel 5.6 + Vue.js: Simple CRUD Project, so the some major files and Directory structures for this example is following below.
simple setup Vue.js using Vue CLI.
This is where I will make a simple HTML form and Then Create a new vuejs project using the following some command. source code for our web application. To make the forms simply all souce code copy and write it into your any text membereditor Like Notepad++, then save file it as setup Vue.js using Vue CLI..
// create a new project
vue membercreate vuecrud
npm install vue-router axios vue-axios --save
MemberCreate.vue
// MemberCreate.vue
<div>
MemberCreate Component
</div>
export default {
}
MemberEdit.vue
// MemberEdit.vue
<div>
MemberEdit Component
</div>
export default {
}
Index.vue
Vue.js Simple CRUD Tutorial Example From Scratch
// Index.vue
<div>
Index Component
</div>
export default {
}
src >> main.js
// main.js
import Vue from 'vue'
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import App from './App.vue';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
Vue.config.productionTip = false
const router = new VueRouter({ mode: 'history' });
new Vue({
render: h => h(App),
router
}).$mount('#memberapp')
main.js
// main.js
import Vue from 'vue'
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import App from './App.vue';
import MemberCreate from './components/MemberCreate.vue';
import MemberEdit from './components/MemberEdit.vue';
import Index from './components/Index.vue';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
Vue.config.productionTip = false;
const routes = [
{
name: 'MemberCreate',
path: '/membercreate',
component: MemberCreate
},
{
name: 'MemberEdit',
path: '/memberedit',
component: MemberEdit
},
{
name: 'Index',
path: '/index',
component: Index
},
];
const router = new VueRouter({ mode: 'history', routes: routes });
new Vue({
render: h => h(App),
router
}).$mount('#memberapp')
src >> App.vue
// App.vue
export default {
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
install Bootstrap 4
npm install bootstrap --save
// main.js
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
App.vue
Simple add the CSS classes on this files for Vue.js Simple CRUD Tutorial Example From Scratch.
<div class="container">
</div>
App.vue
// App.vue
<div id="memberapp" class="container">
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-member">
Add Member
</li>
<li class="nav-member">
All Members
</li>
</ul>
</nav>
<div class="gap">
</div>
</div>
export default {
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
.gap {
margin-top: 50px;
}
install nprogress
npm install nprogress --save
Add vuejs nprogress custome CSS inside a main.js file.
// main.js
import '../node_modules/nprogress/nprogress.css';
main.js
// main.js
import Vue from 'vue'
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import NProgress from 'nprogress';
import App from './App.vue';
import MemberCreate from './components/MemberCreate.vue';
import MemberEdit from './components/MemberEdit.vue';
import Index from './components/Index.vue';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/nprogress/nprogress.css';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
Vue.config.productionTip = false;
const routes = [
{
name: 'MemberCreate',
path: '/membercreate',
component: MemberCreate
},
{
name: 'MemberEdit',
path: '/memberedit',
component: MemberEdit
},
{
name: 'Index',
path: '/index',
component: Index
},
];
const router = new VueRouter({ mode: 'history', routes: routes });
router.beforeResolve((to, from, next) => {
if (to.name) {
NProgress.start()
}
next()
});
router.afterEach(() => {
NProgress.done()
});
new Vue({
render: h => h(App),
router
}).$mount('#memberapp')
MemberCreate.vue
// MemberCreate.vue
<div class="container">
<div class="card">
<div class="card-header">
<h3>Add Member</h3>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label>Member Name:</label>
</div>
<div class="form-group">
<label>Member Age:</label>
</div>
<div class="form-group">
</div>
</form>
</div>
</div>
</div>
export default {
components: {
name: 'AddMember'
}
}
install express.js framework
npm install --save express body-parser cors mongoose
install nodemon
npm install nodemon --save-dev
server.js
// server.js
const express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
cors = require('cors'),
mongoose = require('mongoose');
const memberapp = express();
var port = process.env.PORT || 4000;
var server = memberapp.listen(function(){
console.log('Listening on port ' + port);
});
DB.js
// DB.js
module.exports = {
DB: 'mongodb://localhost:27017/vuecrud'
};
server.js
// server.js
const express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
cors = require('cors'),
mongoose = require('mongoose'),
config = require('./config/DB');
mongoose.Promise = global.Promise;
mongoose.connect(config.DB).then(
() => {console.log('Database is connected') },
err => { console.log('Can not connect to the database'+ err)}
);
const memberapp = express();
memberapp.use(express.static('public'));
memberapp.use(bodyParser.json());
memberapp.use(cors());
const port = process.env.PORT || 4000;
const server = memberapp.listen(port, function(){
console.log('Listening on port ' + port);
});
Member.js
// Member.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
// Define collection and schema for Members
var Member = new Schema({
name: {
type: String
},
age: {
type: Number
}
},{
collection: 'members'
});
module.exports = mongoose.model('Member', Member);
memberRoutes.js
// memberRoutes.js
var express = require('express');
var memberapp = express();
var memberRoutes = express.Router();
// Require Member model in our routes module
var Member = require('../models/Member');
// Defined store route
memberRoutes.route('/add').post(function (req, res) {
var member = new Member(req.body);
member.save()
.then(member => {
res.status(200).json({'member': 'Member added successfully'});
})
.catch(err => {
res.status(400).send("unable to save to database");
});
});
// Defined get data(index or listing) route
memberRoutes.route('/').get(function (req, res) {
Member.find(function (err, members){
if(err){
console.log(err);
}
else {
res.json(members);
}
});
});
// Defined memberedit route
memberRoutes.route('/memberedit/:id').get(function (req, res) {
var id = req.params.id;
Member.findById(id, function (err, member){
res.json(member);
});
});
// Defined update route
memberRoutes.route('/update/:id').post(function (req, res) {
Member.findById(req.params.id, function(err, member) {
if (!member)
return next(new Error('Could not load Document'));
else {
member.name = req.body.name;
member.age = req.body.age;
member.save().then(member => {
res.json('Update complete');
})
.catch(err => {
res.status(400).send("sorry, unable to update the database");
});
}
});
});
memberRoutes.route('/delete/:id').get(function (req, res) {
Member.findByIdAndRemove({_id: req.params.id}, function(err, member){
if(err) res.json(err);
else res.json('Successfully removed');
});
});
module.exports = memberRoutes;
server.js
// server.js
const express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
cors = require('cors'),
mongoose = require('mongoose'),
config = require('./config/DB');
const memberRoutes = require('./expressRoutes/memberRoutes');
mongoose.Promise = global.Promise;
mongoose.connect(config.DB).then(
() => {console.log('Good Luck, Your Database is connected') },
err => { console.log('Can not connect to the database'+ err)}
);
const memberapp = express();
memberapp.use(express.static('public'));
memberapp.use(bodyParser.json());
memberapp.use(cors());
memberapp.use('/members', memberRoutes);
const port = process.env.PORT || 4000;
const server = memberapp.listen(port, function(){
console.log('Listening on port ' + port);
});
MemberCreate.vue
// MemberCreate.vue
<div class="container">
<div class="card">
<div class="card-header">
<h3>Add Member</h3>
<p>Vue.js Simple CRUD Tutorial Example From Scratch</p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label>Member Name:</label>
</div>
<div class="form-group">
<label>Member Age:</label>
</div>
<div class="form-group">
</div>
</form>
</div>
</div>
</div>
export default {
components: {
name: 'AddMember'
},
data() {
return {
member: {}
}
},
methods: {
addMember() {
let uri = 'http://localhost:4000/members/add';
this.axios.post(uri, this.member).then((response) => {
console.log(response.data)
});
}
}
}
Index.vue
// Index.vue
<div>
<h1>Members - List Vue.js Simple CRUD Tutorial Example From Scratch</h1>
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Member Name</td>
<td>Member Age</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ member._id }}</td>
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
<td>MemberEdit</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
export default {
data(){
return{
members: []
}
},
membercreated: function()
{
this.fetchMembers();
},
methods: {
fetchMembers()
{
let uri = 'http://localhost:4000/members';
this.axios.get(uri).then((response) => {
this.members = response.data;
});
}
}
}
MemberEdit.vue
simple the following source code inside a operationsof the MemberEdit records MemberEdit.vue file.
// MemberEdit.vue
<div class="container">
<div class="card">
<div class="card-header">
<h3>Edit Member - Vue.js Simple CRUD Tutorial Example From Scratch</h3>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label>Member Name:</label>
</div>
<div class="form-group">
<label>Member Age:</label>
</div>
<div class="form-group">
</div>
</form>
</div>
</div>
</div>
export default{
data(){
return{
member:{}
}
},
membercreated: function(){
this.getMember();
},
methods: {
getMember()
{
let uri = 'http://localhost:4000/members/memberedit/' + this.$route.params.id;
this.axios.get(uri).then((response) => {
this.member = response.data;
});
},
updateMember()
{
let uri = 'http://localhost:4000/members/update/' + this.$route.params.id;
this.axios.post(uri, this.member).then((response) => {
this.$router.push({name: 'Index'});
});
}
}
}
Index.vue
// Index.vue
<div>
<h1>Members</h1>
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Member Name</td>
<td>Member Age</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ member._id }}</td>
<td>{{ member.name }}</td>
<td>{{ member.age }}</td>
<td>MemberEdit</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
export default {
data(){
return{
members: []
}
},
membercreated: function()
{
this.fetchMembers();
},
methods: {
fetchMembers()
{
let uri = 'http://localhost:4000/members';
this.axios.get(uri).then((response) => {
this.members = response.data;
});
},
deleteMember(id)
{
let uri = 'http://localhost:4000/members/delete/'+id;
this.members.splice(id, 1);
this.axios.get(uri);
}
}
}
I hope you get an idea about Vue.js Simple CRUD Tutorial Example From Scratch.