Insert Data Into Database using Vue.js with PHP Mysql

In this Post We Will Explain About is Insert Data Into Database using Vue.js with PHP Mysql With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Insert Data into MySQL Database using PHP Example

In this post we will show you Best way to implement insert data into database in vuejs, hear for how to insert data in database using vuejs in php with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Vue.js CRUD Operations with PHP and MySQL

In this Example,First of all Add or Include External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple javascript file like as a index.js or main.js, It is also add your web-application First Header Part to some priority set.After that Include your relevant CSS Class.

Creating simple Add Modal popup using vuejs

	

		

			Add New User
			×
		
		

			

				User Firstname:
				
			
			

				User Lastname:
				
			
		
		

		

			

				 Cancel USER Save
			
		
	

style.css

.liveModal{
	position:fixed;
	bottom:0;
	background: rgba(0, 0, 0, 0.4);
	top:0;
	left:0;
	left:0;
}
 
.lstmodelctn{
	width: 800px;
	background: #3d3d3d;
	margin:auto;
	margin-top:52px;
}
 
.mdlheader{
	font-size:20px;
	padding-left:14px;
	padding:12px;
	background: #008852;
	color: #FFFFFF;
	height:52px;
}
 
 
.mdlBody{
	padding:38px;
}
 
.mdlFooter{
	height:39px;
}
 
.footerBtn{
	margin-left:11px;
	margin-top:-9px;
}
 
.closeBtn{
	background: #c60000;
	color: #3d3d3d;
	border:none;
}

Updating index.php

	
	
	



	
simple Vue.js Insert update delete  Operation with PHP and MySQLi
	

		

			

				

					
User List
					 User
					
				
			
 
			

				×
				 {{ msgError }}
			
 
			

				×
				 {{ msgSuccess }}
			
 
			

				

					
User Firstname
					
User Lastname
					
User Action
				
				

					

						
{{ user.userfname }}
						
{{ user.userlname }}
						

							 Edit  Remove
 
						
					
				
			
		
 
		
	

Add API(api.php)

if($crud == 'create'){
 
	$userfname = $_POST['userfname'];
	$userlname = $_POST['userlname'];
 
	$sql = "insert into users (userfname, userlname) values ('$userfname', '$userlname')";
	$query = $conn->query($sql);
 
	if($query){
		$resOutput['message'] = "User Added Successfully";
	}
	else{
		$resOutput['error'] = true;
		$resOutput['message'] = "Could not add User";
	}
 
}

Updating our Vue source Code( main.js)

var main = new Vue({
	el: '#users',
	data:{
		displaySimpleModal: false,
		msgError: "",
		msgSuccess: "",
		users: [],
		newUser: {userfname: '', userlname: ''}
	},
 
	mounted: function(){
		this.getAllUsers();
	},
 
	methods:{
		getAllUsers: function(){
			axios.get('api.php')
				.then(function(dataRes){
					//console.log(dataRes);
					if(dataRes.data.error){
						main.msgError = dataRes.data.message;
					}
					else{
						main.users = dataRes.data.users;
					}
				});
		},
 
		saveUser: function(){
			//console.log(main.newUser);
			var memForm = main.toFormData(main.newUser);
			axios.post('api.php?crud=create', memForm)
				.then(function(dataRes){
					//console.log(dataRes);
					main.newUser = {userfname: '', userlname:''};
					if(dataRes.data.error){
						main.msgError = dataRes.data.message;
					}
					else{
						main.msgSuccess = dataRes.data.message
						main.getAllUsers();
					}
				});
		},
 
		toFormData: function(obj){
			var liveFrmDta = new FormData();
			for(var key in obj){
				liveFrmDta.append(key, obj[key]);
			}
			return liveFrmDta;
		},
 
		msgCls: function(){
			main.msgError = '';
			main.msgSuccess = '';
		}
 
	}
});

Vue.js CRUD Operations with PHP and MySQL

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is INSERT DATA INTO DATABASE USING VUEJS AND PHP And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.