Vue JS + Codeigniter

Getting started

[Falta saber cómo preparar el proyecto, como ejecutar un comando que monte un proyecto
codeigniter, etc...]

* Llamar siempre desde dentro de /panel: npm run serve (ejecutar primero `npm i`)

El proyecto dispone de dos bloques: el backend (codeigniter) y el frontend (vuejs).

/api [backend]

/application/config/config.php
Es donde tenemos la url base de nuestro proyecto, donde lo desplegamos.
$config['base_url']
Puede ser localhost o un enlace externo.

/application/config/database.php
La configuración de la base de datos a la que nos conectamos.

/application/config/routes.php
Aquí definimos todas las rutas

/application/controllers

Aquí se encuentran todos los controladores de nuestra aplicación, tienen este aspecto:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Exhibitor extends CI_Controller {

    
    public function __construct()
    {
        parent::__construct();
        $this->load->model('exhibitor_model');
    }

    public function getId()
    {
        $result = $this->exhibitor_model->getId();

        //Manage retrieved data to send it to the view properly
        echo json_encode(array('status' => true, 'data' => $result));
    }

    public function edit()
    {
        $sentData = ($this->input->post());
        var_dump($sentData);
        //aqui controlo la data que me llega por post y luego la envio al modelo (en es
te caso update si todo esta bien)
        $this->exhibitor_model->edit();
    }
}

/application/models
Esta es la carpeta donde se encuentran todos los modelos
Tienen el siguiente aspecto:

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Exhibitor_model extends CI_model
{

    public function __construct()
    {
        $this->load->database(); // Iniciar la base de datos
    }
    public function getId()//NO es getId, sino getExhibitor
    {
        $exhibitor_id = 2;
        $sSQL = "SELECT * FROM exhibitors WHERE id = ".$exhibitor_id; // no hacer selec
t de todos los campos, no coger id??
        $query = $this->db->query($sSQL);

        if ($query != false) {
             return $query->result(); // Respuesta de la base de datos para el controlado
r 
        }
    }

    public function edit()
    {
        var_dump("ACTUALIZAR EXHIBITOR AQUI!");
    }

/panel [frontend]

/src/assets
Donde metemos las imagenes que usaremos en la web

/src/components
Componentes(trozos de código?)
/src/router
Aquí declaramos todas las rutas que necesitamos. Tienen que coincidir con las que están en el
backend.

Tiene este aspecto:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
  ,
  {
    path: '/exhibitor_modify',
    name: 'Exhibitor_modify',
    component: () => import(/* webpackChunkName: "about" */ '../views/
Exhibitor_modify.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

/src/store
Donde se procesa toda la información antes de enviarla a las vistas o componentes.
Tiene este aspecto:
import { createStore } from 'vuex'
import axios from 'axios'
import router from '../router'

export default createStore({
  state: {
    api: process.env.VUE_APP_API_URL + '/api',
    test: {},
    exhibitor_modify: {}
  },
  mutations: {
    setTest(state, value) {
      state.test = value
    },
    setExhibitor(state, value) {
      state.exhibitor_modify = value
    }
  },
  actions: {
    async getTest({ commit, state }) {
      var result = await axios.get(`${state.api}/test`);
      let obj = await result.data;

      document.title = obj.title
      commit('setTest', obj)
    },
    async getExhibitor({ commit, state }) {
      console.log(state.exhibitor_modify);
      var result = await axios.get(`${state.api}/exhibitor_modify`);
      let obj = await result.data;
      commit('setExhibitor', obj.data[0])
    },
    async sendToBackend({ commit, state }) {
      let result = await axios({
        method: 'post',
        url: `${state.api}/exhibitor_modify/edit`,
        data: state.exhibitor_modify,
        transformRequest: function (obj) {
          var str = [];
          for (var p in obj)
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
          return str.join("&");
        },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
      })
      console.log(result);
    }
  },
  modules: {
  }
})

src/views
Son todas las vistas que usaremos.
Hay una principal que posiblemente tenga un navbar general.
<template>
  <div>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/exhibitor_modify">Modify Exhibitor</router-link>
    </div>
    <router-view />
  </div>
</template>
<script>
  import { mapActions } from 'vuex'
  export default {
    name: 'App',

    methods: {
      ...mapActions(['getTest']),
    },
    created() {
      this.getTest()
    },
  }
</script>
<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  #nav {
    padding: 30px;
  }

  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  #nav a.router-link-exact-active {
    color: #42b983;
  }
</style>

Y una de las vistas hijas es como esta:

<template>
  <div>
    {{exhibitor_modify}}
    <form @submit.prevent="sendToBackend">
        <label for="name">Name</label><br>
        <input type="text" id="name" name="name" v-model="exhibitor_modify.name"><br>
        <label for="full_name">Full name</label><br>
        <input type="text" id="full_name" name="full_name" v-
model="exhibitor_modify.full_name"><br>
        <label for="code">Code</label><br>
        <input type="text" id="code" name="code" v-model="exhibitor_modify.code"><br>
        <label for="description">Description</label><br>
        <textarea id="description" name="description" v-
model="exhibitor_modify.description"></textarea><br>
        <label for="website">Website</label><br>
        <input type="text" id="website" name="website" v-
model="exhibitor_modify.website"><br>
        <input type="submit" value="Submit">
    </form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    name: 'Modify_exhibitor',
    computed: {
      ...mapState(['exhibitor_modify']),
      
    },
    methods: {
      ...mapActions(['getExhibitor', 'sendToBackend']),
    },
    created() {
      this.getExhibitor()
    },

}
</script>

<style>

</style>