laravel5.8+Vue+ Element +axios环境搭建

￡神魔★判官ぃ 2023-03-13 03:50 23阅读 0赞

**下载安装laravel**

composer create-project --prefer-dist laravel/laravel laravel-element "5.8.*"

在环境搭建的前提是已经在本地搭建好了laravel框架,并且安装npm.

**1.安装前端依赖库**

npm install

**2.添加laravel路由**  
修改 routes/web.php 文件为

Route::get('/', function () {
        return view('index');
    });

**3.新建 Hello.vue 文件**  
在 resources/js/components 目录下新建 Hello.vue 文件

<template>
        <div>
            <h1>Hello, Larvuent!</h1>
            <p class="hello">{
       { msg }}</p>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                msg: 'This is a Laravel with Vue and Element Demo.'
            }
        }
    }
    </script>
    
    <style>
    .hello {
        font-size: 2em;
        color: green;
    }
    </style>

**4.修改 app.js 文件，渲染组件**

require('./bootstrap');
    
    window.Vue = require('vue');
    
    // Vue.component('example', require('./components/Example.vue')); // 注释掉
    import Hello from './components/Hello.vue'; // 引入Hello 组件
    
    const app = new Vue({
        el: '#app',
        render: h => h(Hello)
    });

说明：app.js 是构建 Vue 项目的主文件，最后所有的组件都会被引入到这个文件，在引入所有组件之前，bootstrap.js 文件做了一些初始化的操作。同时，因为有了 window.Vue = require(‘vue’) 这句话，就不再需要使用 import Vue from ‘vue’ 重复导入 Vue 了。\*

**5.新建 Laravel 视图文件，和 Vue 交互**  
在 resources/views 目录下新建 index.blade.php 文件

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Larvuent</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="{
       { mix('js/app.js') }}"></script>
    </body>
    </html>

说明：你可能在其他教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的，如果现在还不明白，不要紧，你记得使用 mix 函数就好了，然后继续往后看。

**6.编译前端组件，运行**  
执行以下命令，编译前端资源

npm run dev

该命令默认会去执行根目录下的 webpack.mix.js 文件，使用 Laravel 提供的 Laravel Mix 编译资源，并将编译好的资源放在根目录 public 文件夹下。

说明：前端编译工具有许多，比如 gulp、webpack 等等，Laravel 也为自己提供了开箱即用的编译工具，比如 Laravel5.3 及更早版本提供基于 gulp 的 Laravel Elixir 和从 Laravel5.4 开始提供基于 webpack 的 Laravel Mix，当然你也可以不使用官方提供的工具，自己去配置编译工具。这些编译工具的作用都是一样的，使用方法也大同小异。前面说过，本文第一次安装尽量简单，能运行即可，所以不再去配置前端编译工具，使用官方提供的即可。

**7,访问项目**  
到目前为止，Laravel + Vue 已经完成了，下面开始引入 Element .  
![在这里插入图片描述][format_png_pic_center]**8.引入 Element**

执行命令，安装 ElementUI

npm i element-ui -S

**9.修改 resources/js/app.js 文件**

import Hello from './components/Hello.vue'; // 引入Hello 组件
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-default/index.css';
    Vue.use(ElementUI);

**10.修改 Hello.vue 文件，使用 Element 组件**

修改 resources/js/components/Hello.vue 文件为

<template>
        <div>
            <h1>Hello, Larvuent!</h1>
            <el-button @click="visible = true">按钮</el-button>
            <el-dialog v-model="visible">
                <p>欢迎使用 Element</p>
            </el-dialog>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                visible: false
            }
        }
    }
    </script>
    
    <style>
    .hello {
        font-size: 2em;
        color: green;
    }
    </style>

**11.再次编译前端资源，运行**

npm run dev

**12.访问**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]  
好了，到目前为止，Laravel5.5 + Vue2 + Element 的环境搭建已经完成了，为了方便理解，第一次的搭建过程尽量简洁。本文下面的部分将使用 Vue 路由等等，逐步完善，便于后期的开发。

**13.CSRF 防护**  
Laravel 为了避免应用遭到跨站请求伪造攻击(CSRF)，自动为每一个有效用户会话生成一个 CSRF 令牌，该令牌用于验证授权用户和发起请求者是否是同一个人。

修改 resources/views/index.blade.php 文件为

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="csrf-token" content="{
       { csrf_token() }}">
        <title>Larvuent</title>
    </head>
    <body>
        <div id="app"></div>
    
        <script src="{
       { mix('js/app.js') }}"></script>
    </body>
    </html>

创建一个 meta 标签并将令牌保存到该 meta 标签中，问题可解决。

**14.使用 Vue Router**  
构建大型项目时，使用 Vue Router 将是一个好的方式，它可以帮助你更好的组织代码，优化路由。  
**14.1 安装 vue-router**  
执行命令，安装 vue-router

npm install vue-router --save-dev

14.2配置 vue-router

在 resources/js 目录下新建目录 router ，同时在 router 目录下新建 index.js 文件

**14.3.引入 vue-router**  
在 resources/js 目录下新建 App.vue 文件

<template>
        <div>
            <h1>Hello, {
       { msg }}!</h1>
            <router-view></router-view> 
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                msg: 'Vue'
            }
        }
    }
    </script>
    
    <style>
    </style>

修改 resources/js/app.js 文件为

require('./bootstrap');
    
    window.Vue = require('vue');
    // import Hello from './components/Hello.vue';
    import App from './App.vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-default/index.css';
    Vue.use(ElementUI);
    
    import router from './router/index.js';  
    
    const app = new Vue({
        el: '#app',
        router,
        render: h => h(App)
    });

**14.4.重新编译**

npm run dev

通过路由访问 hello 组件

## axios请求 ##

vue数据请求一般用axios，尤大也推荐这个，而且laravel有自带的vue相关例子，axios不需要你自己进行配置安装，可以在package.json里面查看版本，composer安装的axios版本是0.15，可以自己再进行更新

**1. 在resources/js/router/index.js里面添加路由**

import Vue from 'vue';
    import VueRouter from 'vue-router';
    Vue.use(VueRouter);
    
    export default new VueRouter({
        saveScrollPosition: true,
        routes: [
            {
                name: 'hello',
                path: '/',
                component: resolve => void(require(['../components/Hello.vue'], resolve))
            },
            {
                name: 'login',
                path: '/login',
                component: resolve => void(require(['../components/Login.vue'], resolve))
            }
        ]
    });

**2. 在router/web.php添加laravel路由**

Route::get('/', function () {
        return view('index');
    });
    Route::post('admin/login', 'Admin\LoginController@login_submit');

**3. 在app/httpcontroller/admin下 新建LoginController**

namespace App\Http\Controllers\Admin;
    
    use App\Http\Controllers\Controller;
    use App\Models\QsAdmin;
    use Illuminate\Http\Request;
    
    class LoginController extends Controller{
        public function login_submit(Request $request){
               //这里是你的登录逻辑
        }
    }

**4. 在resources/js/components下新建Login.vue文件**  
用的element的表单组件

<template>
        <div class="login-container">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"  label-position="left"
                     label-width="0px"  class="demo-ruleForm login-page">
                <h3 class="title">后台登录</h3>
                <el-form-item  prop="name">
                    <el-input type="text" v-model="ruleForm.name" autocomplete="off" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item  prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
    
    <script>
        export default {
            data() {
                var checkUser = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('用户名不能为空'));
                    }
                    setTimeout(() => {
                        if (value.length > 30) {
                            callback(new Error('长度不能超过30'));
                        } else {
                            callback();
                        }
                    }, 1000);
                };
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        if (this.ruleForm.checkPass !== '') {
                            this.$refs.ruleForm.validateField('checkPass');
                        }
                        callback();
                    }
                };
                return {
                    ruleForm: {
                        name: '',
                        pass: ''
                    },
                    rules: {
                        name: [
                            { validator: checkUser, trigger: 'blur' }
                        ],
                        pass: [
                            { validator: validatePass, trigger: 'blur' }
                        ]
                    }
                };
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            var parm = {};
                            let t = this;
                            axios.post('/admin/login', {
                                name : this.$refs[formName].model.name,
                                pass : this.$refs[formName].model.pass
                            })
                            .then(function (response) {
                                tips(response.data.message);  //这是项目定义的消息提示
                                t.$router.push({path:'/hello'});
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                            //alert('submit!');
                        } else {
                            console.log('验证不通过，提交错误');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        }
    </script>
    
    <style scoped>
        .login-container {
            width: 100%;
            height: 100%;
        }
        .login-page {
            -webkit-border-radius: 5px;
            border-radius: 5px;
            margin: 180px auto;
            width: 350px;
            padding: 35px 35px 15px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
        }
        label.el-checkbox.rememberme {
            margin: 0px 0px 15px;
            text-align: left;
        }
    </style>

发送请求，通过你的登录逻辑返回数据，成功跳转新的页面。

[format_png_pic_center]: /images/20230312/676f75efc66f453aa39a1f5c9e710d83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]: /images/20230312/6d6b534b8646476f963fecb5ad2ed2cf.png