laravel5.8+vue+element 后台搭建（2）-

最近一直在写东西，没来得及更新，上一篇已经搭建完了基本结构，接下来是数据请求，就从登陆开始

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

1. 在resources/js/config/router.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('admin/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>

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