Welcome Guest, Not a member yet? Register   Sign In
VueJs + CI 4
#1

(This post was last modified: 04-26-2018, 01:58 PM by ponzo.)

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($success200);



A snippet of Vue 

PHP Code:
axios({
headers: {
'Content-Type''application/json',
},
responseType'json',
method'post',
urlurl,
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
-Typemultipart/form-databoundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
Cache
-Controlno-cache
Postman
-TokenXXXXXXX-XXXX-XXX-XXXX-XXXXXXXXX

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content
-Dispositionform-dataname="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
Reply
#2

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!
Reply
#3

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

Nope

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

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...
Reply
#5

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($json200); 

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]
Reply
#6
Smile 

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! Idea

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
Reply
#7

(This post was last modified: 09-27-2019, 05:00 PM by MGatner.)

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?
Reply
#8

(This post was last modified: 09-27-2019, 08:03 PM by donpwinston.)

(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
Reply
#9

(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
Reply
#10

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.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB