Home>

I'm new to Laravel and MySQL, but I'm making a list app with Laravel + MySQL.
I'm trying to use Vue.js on the front side.

Be in trouble

First, I created a database with Laravel and MySQL and was able to display it in a list.
From now on, I would like to implement the front part using Vue.js and arrange the display of the list part as well.

However, when I looked it up,I wasn't sure how to create a new database (create a new one) instead of using an existing database.

If anyone knows how to proceed from here, I would appreciate it if you could teach me the procedure alone.

Vue.js itself has been installed.
The database name is alcs and the table name is alc.

Supplement

code in welcome.blade.php

<! DOCTYPE html><html>getLocale ())}}"><head>    <meta charset = "utf-8">    <meta name = "viewport" content = "width = device-width, initial-scale = 1">    <title>Laravel</title>    <!-Fonts->    <link href = "https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">    <!-Styles->    <style>          /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html {line-height: 1.15;-webkit-text-size-adjust: 100%} body {margin: 0} a {background-color: transparent} [hidden] {display: none} html {font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;line-height: 1.5} * ,: after ,: before {box-sizing: border-box;border: 0 solid # e2e8f0} a {color: inherit ;text-decoration: inherit} svg, video {display: block;vertical-align: middle} video {max-width: 100%;height: auto} .bg-white {--bg-opacity: 1;background-color : # fff;background-color: rgba (255,255,255, var (--bg-opacity))}. bg-gray-100 {-bg-opacity: 1;background-color: # f7fafc;background-color: rgba ( 247,250,252, var (--bg-opacity))}. Border-gray-200 {-border-opacity: 1;border-color: # edf2f7;border-color: rgba (237,242,247, var (--border-opacity)) )}. Border-t {border-top-width: 1px} .flex {display: flex} .grid {display: grid} .hidden {display: none} .items-center {alig n-items: center} .justify-center {justify-content: center} .font-semibold {font-weight: 600} .h-5 {height: 1.25rem} .h-8 {height: 2rem} .h- 16 {height: 4rem} .text-sm {font-size: .875rem} .text-lg {font-size: 1.125rem} .leading-7 {line-height: 1.75rem} .mx-auto {margin-left : auto;margin-right: auto} .ml-1 {margin-left: .25rem} .mt-2 {margin-top: .5rem} .mr-2 {margin-right: .5rem} .ml-2 { margin-left: .5rem} .mt-4 {margin-top: 1rem} .ml-4 {margin-left: 1rem} .mt-8 {margin-top: 2rem} .ml-12 {margin-left: 3rem } .-mt-px {margin-top: -1px} .max-w-6xl {max-width: 72rem} .min-h-screen {min-height: 100vh} .overflow-hidden {overflow: hidden}. p-6 {padding: 1.5rem} .py-4 {padding-top: 1rem;padding-bottom: 1rem} .px-6 {padding-left: 1.5rem;padding-right: 1.5rem} .pt-8 { padding-top: 2rem} .fixed {position: fixed} .relative {position: relative} .top-0 {top: 0} .right-0 {right: 0} .shadow {box-shadow: 0 1px 3px 0 rgba (0,0,0, .1), 0 1px 2px 0 rgba (0,0,0, .06)} .text-center {text-align: center} .text-gray-200 {-text-opacity : 1;color: # edf2f7;color: rgba (237,242,247,var (--text-opacity))} .text-gray-300 {--te xt-opacity: 1;color: # e2e8f0;color: rgba (226,232,240, var (--text-opacity))} .text-gray-400 {-text-opacity: 1;color: # cbd5e0;color: rgba (203,213,224, var (--text-opacity))} .text-gray-500 {-text-opacity: 1;color: # a0aec0;color: rgba (160,174,192, var (--text-opacity))}. text-gray-600 {-text-opacity: 1;color: # 718096;color: rgba (113,128,150, var (--text-opacity))} .text-gray-700 {-text-opacity: 1;color: # 4a5568;color: rgba (74,85,104, var (--text-opacity))} .text-gray-900 {-text-opacity: 1;color: # 1a202c;color: rgba (26,32) , 44, var (--text-opacity))} .underline {text-decoration: underline} .antialiased {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} .w-5 { width: 1.25rem} .w-8 {width: 2rem} .w-auto {width: auto} .grid-cols-1 {grid-template-columns: repeat (1, minmax (0,1fr))} @media (min-width: 640px) {.sm \: rounded-lg {border-radius: .5rem} .sm \: block {display: block} .sm \: items-center {align-items: center} .sm \ : justify-start {justify-content: flex-start} .sm \: justify-between {justify-content: space-between} .sm \: h-20 {height: 5rem} .sm \: ml-0 { margin-left: 0} .sm \: px-6 {padding-left: 1.5rem;padding-right: 1.5rem} .sm \: pt-0 {padding-top: 0} .sm \: text-left { text-align: left} .sm \: text-right {text-align: right}} @media (min-width: 768px) {.md \: border-t-0 {border-top-width: 0}. md \: border-l {border-left-width: 1px} .md \: grid-cols-2 {grid-template-columns: repeat (2,minmax (0,1fr))}} @media (min-width) : 1024px) {.lg \: px-8 {padding-left: 2rem;padding-right: 2rem}} @media (prefers-color-scheme: dark) {.dark \: bg-gray-800 {-bg -opacity: 1;background-color: # 2d3748;background-color: rgba (45,55,72, var (--bg-opacity))} .dark \: bg-gray-900 {-bg-opacity: 1;background-color: # 1a202c;background-color: rgba (26,32,44, var (--bg-opacity))}. dark \: border-gray-700 {--border-opacity: 1;border -color: # 4a5568;border-color: rgba (74,85,104, var (--border-opacity))}. dark \: text-white {--text-opacity: 1;color: # fff;color: rgba (255,255,255, var (--text-opacity))}. dark \: text-gray-400 {--text-opacity: 1;color: # cbd5e0;color: rgba (203,213,224, var (--text-opacity)) )}}
      </style>    <style>          body {
                font-family:'Nunito';
            }
      </style></head><body>                  @if (Route :: has ('login'))
                                    @auth
                         Home                     @else
                         Login                         @if (Route :: has ('register')) Register                         @endif
                    @endif
                            @endif
                          <example-component></example-component>                                       Alc                           <script src = "{{mix ('js/app.js')}}"></script></body></html>

web.php code

<? php
use Illuminate \ Support \ Facades \ Route;
/ *
| ------------------------------------------------- -------------------------
| Web Routes
| ------------------------------------------------- -------------------------
|
Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
* /
Route :: get ('/', function () {
    return view ('welcome');
});
Route :: get ('alc','App \ Http \ Controllers \ AlcController @ alcList');

Code in AlcController.php

<? php
namespace App \ Http \ Controllers;
use Illuminate \ Http \ Request;
use Illuminate \ Support \ Facades \ DB;
class AlcController extends Controller{
    public function alcList (Request $request) {
        $items = DB :: select ('select * from alc');
        return view ('alcList', ['items' =>$items]);
    }
}
Usage environment

PC: macOS Big Sur (version: 11.0.1)

Editor: VS Code

Browser: Google Chrome

compposer.json partial excerpt

"require": {
        "php": "^ 7.3 | ^ 8.0",
        "fideloper/proxy": "^ 4.4",
        "fruitcake/laravel-cors": "^ 2.0",
        "guzzlehttp/guzzle": "^ 7.0.1",
        "laravel/framework": "^ 8.12",
        "laravel/tinker": "^ 2.5",
        "laravel/ui": "^ 3.1"
    },

package.json partial excerpt

"devDependencies": {
        "axios": "^ 0.19",
        "bootstrap": "^ 4.0.0",
        "cross-env": "^ 7.0",
        "jquery": "^ 3.2",
        "laravel-mix": "^ 5.0.1",
        "lodash": "^ 4.17.19",
        "popper.js": "^ 1.12",
        "resolve-url-loader": "^ 3.1.2",
        "sass": "^ 1.20.1",
        "sass-loader": "^ 8.0.0",
        "vue": "^ 2.5.17",
        "vue-template-compiler": "^ 2.6.10"
    }
  • Answer # 1

    Output json from the server side (Laravel).
    The front (Vue.js) receives and displays json.
    You need to understand this concept first before the details.
    There is no point unless you increase the knowledge that can be used other than Laravel and Vue.

    When learning this, think completely separately.

    Laravel

    Create a new route and controller.
    (It's a common mistake to write in routes/api.php here. Web.php is fine.)

    Route :: get ('api/alc','App \ Http \ Controllers \ Api \ AlcController @ alcList');


    "If you return the Eloquent model from the controller, it will be json as it is" is Laravel limited knowledge.

    <? php
    namespace App \ Http \ Controllers \ Api;
    use App \ Http \ Controllers \ Controller;
    use App \ Models \ Alc;
    use Illuminate \ Http \ Request;
    class AlcController extends Controller
    {
        public function alcList (Request $request) {
            return Alc :: all ();
        }
    }


    In the browser/ api/alcIf you look at it, json is displayed.
    With Laravel, it's easy to simply output json.
    That's it for the role on the server side.

    $items = DB :: select ('select * from alc');I don't have enough learning about Laravel at the time of using it, so I should touch Laravel more before Vue.

    Vue

    If you don't know that "axios is standard for http requests in JS"
    Even if Laravel wrote axios in package.json from the beginning, I can't understand it.

    Laravel has nothing to do with how to use Vue and axios.
    There is so much information on how to use axios that you can easily find out.
    If you look up "How to use Vue and axios in Laravel", there should be only information that can not be used at once.
    It is important to look up information that is not related to Laravel by itself.