vuejs http get and post methods PHP MySQLi

vuejs http get and post methods PHP MySQLi

Today, We want to share with you vuejs http get and post methods PHP MySQLi.
In this post we will show you vuejs http get and post methods example | Fetching and persisting data using vue.js, hear for Fetching and persisting data using vue.js we will give you demo and example for implement.
In this post, we will learn about Vue.js Fetch Data from MySQL Database using PHP with an example.

vuejs http get and post methods example

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.vuejs http get and post methods example

Include Vuejs Libs

first of all the include in libs/vue-resource/ and vuejs.

    <a href="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js">http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js</a>
    <a href="http://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js">http://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js</a>
    

index.html

using vuejs html all the display view using vuejs v-for to loops.and here example of the users is a one type of the object.

 <!-- APP Start -->
            <div id="users">
              <div class="row noprint">
                <div class="col-sm-12">
                  <div class="card-box">
                     <div class="btn-group row noprint" role="group">
                      <button type="button" class="btn btn-default">Export</button>
                      <button type="button" class="btn btn-default">Print</button>
                      <button type="button" class="btn btn-default">Something</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="card-box">
                    <table class="table m-0">
                      <thead>
                        <tr>
                          <th>ID</th>
                          <th>Image</th>
						  <th>Address</th>
						  <th>Contact</th>
						  <th>Department</th>
						  <th>Position</th>
						  <th>Created at</th>
                          <th>Updated at</th>
						 
						  </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>#{{ user.id }}</td>
                          <td><img src="{{ user.avatar }}" height="150px" width="150px" /></td>
						 
						  <td>
								<div class="row">
									
									   {{user.address_1}},<br />
									   {{user.address_2}},<br />
									   {{user.address_3}}.
								
								</div>
								<div class="row">
									<div class="col-md-5">City : {{user.city}}</div>
									<div class="col-md-5">State : {{user.state || "----"}}</div>
								</div>
								<div class="row">
									<div class="col-md-5">Country : {{user.country}}</div>
									<div class="col-md-5">Zip :{{user.zip}}.</div>
								</div>    
						  </td>
						   
						  <td>
								<div class="row">
									<div class="col-md-5">Telephone :  </div>
									<div class="col-md-6">{{user.telephone}}</div>
								</div> 
								<div class="row">
									<div class="col-md-5">Mobile :</div>
									<div class="col-md-6">{{user.mobile}}</div>
								</div> 
								<div class="row">
									<div class="col-md-5">Fax :</div>
									<div class="col-md-6">{{user.fax}}</div>
								</div> 
						  </td>
						  <td>{{user.department}}</td>
						  <td>{{user.position}}</td>
                          <td>{{ user.created_at }}</td>
                          <td>{{ user.updated_at }}</td>
						
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- end row -->
            <!-- APP End -->

Processing AJAX requests from Vue.js : – Vuejs – Vue-Resource Get Request

here products is a one type of id and products type is a one type of array to store all the data.

new Vue({
  el: '#products',
  
	data: {
		//debug: true,
		products: []
	},
	  
	ready: function() {
		this.$http.get('https://infinityknow.com/modelLayerV0.1/ProductLayer/public/api/v1/product', function(data, status, request){
	    this.products = data;
	  });
  }
});

Vuejs Get Method Request CORS – Laracasts

onther example of the get request to all the data display and fetch records.and simple request to data fetch using veusjs

      new Vue({
        el: '#users',
        
      	data: {
      		//debug: true,
      		chk:'',
      		users: []
      	},
      	  
      	ready: function() {
		
      		this.$http.get('https://infinityknow.com/api/v1/user/2/profile', function(data, status, request){
      	  
				this.users =data;
      		//alert("success");
      
      	  }
      	  ).error(function(data, status, request){
      	  console.log(request);
      	  //alert(request);
      			//this.chk = true;
      	});
       },
       //Export button click
         methods: {
      		greet: function (event) {
      		  // `this` inside methods point to the Vue instance
      			var today = new Date();
      			var dd = today.getDate();
      			var mm = today.getMonth()+1; //January is 0!
      
      			var yyyy = today.getFullYear();
      			if(dd<10){
      				dd='0'+dd
      			} 
      			if(mm<10){
      				mm='0'+mm
      			} 
      			var today = dd+'/'+mm+'/'+yyyy;
      		   JSONToCSVConvertor(this.users, "Report_"+today, true);
      		
      		},
					print:function(event)
					{
						window.print();
					}

      	  }
      });

vue-resource get methods example with javascript to all the data

If JSONData is not an object then JSON.parse will parse the JSON string in an Object

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    var CSV = '';    

    
    CSV += ReportTitle + '\r\n\n';
    if (ShowLabel) {
        var row = "";
        
        for (var index in arrData[0]) {
           
            row += index + ',';
        }

        row = row.slice(0, -1);
        
        CSV += row + '\r\n';
    }
    
    for (var i = 0; i < arrData.length; i++) {
        var row = "";
        
        for (var index in arrData[i]) {
            row += '"' + arrData[i][index] + '",';
        }

        row.slice(0, row.length - 1);
        
        CSV += row + '\r\n';
    }

    if (CSV == '') {        
        alert("your data : Invalid data");
        return;
    }   
    
	//here fileName is a savefile_name
    var fileName = "Users_";
    fileName += ReportTitle.replace(/ /g,"_");   
    
	//here uri is a varibles
    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
    
	//here link is a varibles
    var link = document.createElement("a");    
    link.href = uri;
    

    link.style = "visibility:hidden";
    link.download = fileName + ".csv";
    

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}  

Demo Example