Login

ponzo · 04-26-2018, 01:54 PM

I'm building a simple example to include vuejs in codeigniter.
I hoped to finish today, and share it within the CI forum

But... Im stuck now for 3 hours with posting an object to the CI 4 controller

The routes, (get is already working ) Wink

PHP Code:
$routes->post('products', 'Product::create');
//id or 'all'
$routes->get('products/(:any)', 'Product::read/$1');
$routes->put('products/(:num)', 'Product::update/$1');
$routes->delete('products/(:num)', 'Product::delete/$1'); 

The controller, to create an item , from vue with axios (POST)

PHP Code:
public function create()
{    
    $model = new ProductsModel();
    $created = $model->save([
        'title' => $this->request->getVar('title'),
        'description'  => $this->request->getVar('description')
    ]);
    $success = array("success");
    return $this->respond($success, 200);
} 

A snippet of Vue

PHP Code:
axios({
headers: {
'Content-Type': 'application/json',
},
responseType: 'json',
method: 'post',
url: url,
data: {title:'testing title',decription:'testing desc, 

It tried 'application/x-www-form-urlencoded' as wel for the content-type

Sending the title or description from postman is working, so I tried to set the axios headers to multipart/form-data, but with no luck.

PHP Code:
POST /products/all HTTP/1.1
Host: vue-ci4.test
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
Cache-Control: no-cache
Postman-Token: XXXXXXX-XXXX-XXX-XXXX-XXXXXXXXX

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="title"

this is a test
------WebKitFormBoundary7MA4YWxkTrZu0gW-- 

In CI 3 i had the same problem, and fixed it with:
$_POST = json_decode(file_get_contents("php://input") , true);

I hope to wrap this thing up, with your help

albertleao · 04-26-2018, 02:43 PM

Do you have csrf enabled?

Codeigniter is simply one of the tools you need to learn to be a successful developer. Always add more tools to your coding arsenal!

ponzo · 04-26-2018, 03:00 PM

(04-26-2018, 02:43 PM)albertleao Wrote: Do you have csrf enabled?

Nope

PHP Code:
public $globals = [
        'before' => [
            // 'csrf'
        ],
        'after'  => [
            'toolbar'
        ]
    ]; 

***kilishan*** · 04-26-2018, 08:32 PM

Try using the getJSON() method in the Request object:

Code:
$json = $request->getJSON();

'title' => $json->title;

I thought you could grab the variable directly from that, but I guess not. I'll need to look into that...

Support Development • CodeIgniter 4 Foundations • Practical CodeIgniter 3 • CodeIgniter Tutorials

ponzo · 04-27-2018, 10:43 AM

Thanks for the support.

From postman

Code:
POST /products HTTP/1.1

Host: vue-ci4.test

Content-Type: application/x-www-form-urlencoded

Cache-Control: no-cache

Postman-Token: 2b815a80-3c3a-40a5-93c4-cdbc49ba085c

title=efefeffejansssssf

In the controller

PHP Code:
  $json = $this->request->getJSON();  // tried getJSON(TRUE) as well
  return $this->respond($json, 200); 

is giving an empty result, but I'm not sure if getJSON is going to work with post since the documentation says : [b]Retrieving Raw data (PUT, PATCH, DELETE)

[/b]

PHP Code:
$json = $this->request->getRawInput(); 

gives the string back as expacted

PHP Code:
$json = $this->request->getPost(TRUE);

return $this->respond(array('dwwddw'=>$json), 200); 

As well.

But still, in vue it's only giving me a 404

[Image: screendump.png]

ponzo · 04-28-2018, 05:34 AM

Today I created a new installation of CI4, and gave it a new chance.

added two routes

PHP Code:
$routes->add('/home', 'Home::vueform');
$routes->post('/createjson', 'Home::createjson'); 

Created a simple view with CDN based sources instead of a previous full webpack

Code:
<!DOCTYPE html>

 <html>

 <head>

 <title>VUE CI4 test</title>

 <script src="https://unpkg.com/vue"></script>

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 </head>

 <body>

 <div id="app">

 {{info}}

 <input v-model="message" placeholder="edit me">

 <button @click="postform">Send!</button>

 </div>

 </body>

 <script>

 new Vue({

 el: '#app',

 data () {

 return {

 info: null,

 message:''

 }

 },

 methods:{

 postform:function(){

 axios

 .post('http://ci4test.test/createjson',{title:this.message})

 .then(response => (this.info = response.data))

 }

 },

 })

 </script>

 </html>

And in the controller Home.php two functions

PHP Code:
public function createjson()
 {
 if ( $this->request)
 {
 $json = $this->request->getJSON();
 return $this->respond($json->title);
 }
 }

 public function vueform()
 {
 echo view('Vueform');
 
 } 

It works!

I will check it again within my webpack config
Npm run dev runs at http://localhost:8080

In my previous example I added the code below to my view (for development), since it was rendering the GET response with a list of items without problems I thought CORS shouldnt be the problem here. But I will check again

Code:
<script src="http://localhost:8080/vendor.js"></script>

<script src="http://localhost:8080/app.js"></script>

Thanks

***MGatner*** · 09-27-2019, 04:59 PM

If anyone is still watching this thread... I’ve been using JQuery with a few plugins and a few of my own copy-paste “usuals” for years. I decided it’s time to update to some real front-end tech and after reading through a number of comparisons I found VueJS was really my style. I worked through some tutorials and made some a few components and got ready to try my first integration with CI4 - and I couldn’t figure out why I would. Don’t get me wrong, Vue is awesome and makes some magic happen, but it was basically adding a layer between my C and V that I don’t need. The one thing that I was most looking forward to was tight RESTful CRUD forms but a lot of that automation appears to be outsourced to Axios. Most of the time it seems like I will be injecting entity data into JS components that I could be handling directly with view templates.

So, genuinely curious, what are CI4 develops using heavy front-end tech for?

donpwinston · 09-27-2019, 08:00 PM

(09-27-2019, 04:59 PM)MGatner Wrote: If anyone is still watching this thread... I’ve been using JQuery with a few plugins and a few of my own copy-paste “usuals” for years. I decided it’s time to update to some real front-end tech and after reading through a number of comparisons I found VueJS was really my style. I worked through some tutorials and made some a few components and got ready to try my first integration with CI4 - and I couldn’t figure out why I would. Don’t get me wrong, Vue is awesome and makes some magic happen, but it was basically adding a layer between my C and V that I don’t need. The one thing that I was most looking forward to was tight RESTful CRUD forms but a lot of that automation appears to be outsourced to Axios. Most of the time it seems like I will be injecting entity data into JS components that I could be handling directly with view templates.

So, genuinely curious, what are CI4 develops using heavy front-end tech for?

I believe the only reason to use one of the front end frameworks is if you want to build a single page app. (And you love JS)

Simpler is always better

***kilishan*** · 09-27-2019, 09:59 PM

(09-27-2019, 04:59 PM)MGatner Wrote: If anyone is still watching this thread... I’ve been using JQuery with a few plugins and a few of my own copy-paste “usuals” for years. I decided it’s time to update to some real front-end tech and after reading through a number of comparisons I found VueJS was really my style. I worked through some tutorials and made some a few components and got ready to try my first integration with CI4 - and I couldn’t figure out why I would. Don’t get me wrong, Vue is awesome and makes some magic happen, but it was basically adding a layer between my C and V that I don’t need. The one thing that I was most looking forward to was tight RESTful CRUD forms but a lot of that automation appears to be outsourced to Axios. Most of the time it seems like I will be injecting entity data into JS components that I could be handling directly with view templates.

So, genuinely curious, what are CI4 develops using heavy front-end tech for?

If you're just using it for small bits of interactivity on a page, it's likely not needed.

Front-end frameworks can provide a more seamless, interactive, app-like experience that can be more pleasing to the end user. If that's the experience your app could benefit from, then they can be worth it.

At my company, we've started using React a lot over the last year because we do a lot of projects that involve both a website and mobile apps. Since we have to write an API anyway, it often makes sense to reuse what code we can and have the site built with front-end libs, using the same API as the mobile apps.

Are they necessary? Nope - and they can give a lot of bloat to your site if you're not careful, as well as land you in dependency hell. Smile

Support Development • CodeIgniter 4 Foundations • Practical CodeIgniter 3 • CodeIgniter Tutorials

***MGatner*** · 09-28-2019, 04:37 AM

Thanks! Glad to hear that hunch validated. The single page thing makes a lot of sense, as well as reusing API endpoints. Neither applicable to my typical web app.

Follow up question - if I’m not using one of the modern heavy-hitting front end tech, does anyone have a recommendation for a good AJAX form library? I usually write each one manually with JQuery AJAX helpers but I was excited the VueJS seemed to have the two-way form linking with v-model that I could have leveraged, and/or resource endpoints.