Laravel Vuejs 实战：开发知乎 （2）用户登录
1.安装一个给用户提示的扩展包： 二选一： https://github.com/laracasts/flash 【我选的这个】https://github.com/oanhnn/laravel-flash-message
使用方法：在需要使用falsh消息的控制器中，调用flash方法即可：
如：
1 public function store()
2 {
3 //flash('Welcome Aboard!');
4 flash()->overlay('Welcome Aboard!', '登录提示');
5 return home();
6 }
同时可以如下方式调用：
1 flash('Message')->success(): Set the flash theme to "success".
2 flash('Message')->error(): Set the flash theme to "danger".
3 flash('Message')->warning(): Set the flash theme to "warning".
4 flash('Message')->overlay(): Render the message as an overlay.
5 flash()->overlay('Modal Message', 'Modal Title'): Display a modal overlay with a title.
6 flash('Message')->important(): Add a close button to the flash message.
7 flash('Message')->error()->important(): Render a "danger" flash message that must be dismissed.
当上述设置的消息存储到了session中，就可以在view中显示出来了，通常情况下，提示的格式都大同小异，所以该扩展包提供了一个开箱即可使用的模板，可以自己修改也可以直接调用。
1 @include('flash::message')
2.要显示提示：
可以参考：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
7 </head>
8 <body>
9
10 <div class="container">
11 @include('flash::message')
12
13 <p>Welcome to my website...</p>
14 </div>
15
16 <!-- If using flash()->important() or flash()->overlay(), you'll need to pull in the JS for Twitter Bootstrap. -->
17 <script src="//code.jquery.com/jquery.js"></script>
18 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
19
20 <script>
21 $('#flash-overlay-modal').modal();
22 </script>
23
24 </body>
25 </html>
更多的使用方法可以参考GitHub的readme介绍。另外介绍一款扩展包可以自己学着尝试使用：http://tamtamchika.net/simple-flash/
如果script放在head部分 参考
1 <!-- Scripts -->
2 <script src="{{ mix('js/app.js') }}" defer></script>
定义和用法 defer 属性规定当页面已完成加载后，才会执行脚本。 注释： defer 属性仅适用于外部脚本（只有在使用 src 属性时）。
最后修改的layouts/app.blade.php
1 <!doctype html>
2 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6
7 <!-- CSRF Token -->
8 <meta name="csrf-token" content="{{ csrf_token() }}">
9
10 <title>{{ config('app.name', 'Laravel') }}</title>
11
12
13 <!-- Fonts -->
14 <link rel="dns-prefetch" href="//fonts.gstatic.com">
15 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
16
17 <!-- Styles -->
18 <link href="{{ mix('css/app.css') }}" rel="stylesheet">
19 </head>
20 <body>
21 <div id="app">
22 <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
23 <div class="container">
24 <a class="navbar-brand" href="{{ url('/') }}">
25 {{ config('app.name', 'Laravel') }}
26 </a>
27 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
28 aria-controls="navbarSupportedContent" aria-expanded="false"
29 aria-label="{{ __('Toggle navigation') }}">
30 <span class="navbar-toggler-icon"></span>
31 </button>
32
33 <div class="collapse navbar-collapse" id="navbarSupportedContent">
34 <!-- Left Side Of Navbar -->
35 <ul class="navbar-nav mr-auto">
36
37 </ul>
38
39 <!-- Right Side Of Navbar -->
40 <ul class="navbar-nav ml-auto">
41 <!-- Authentication Links -->
42 @guest
43 <li class="nav-item">
44 <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
45 </li>
46 @if (Route::has('register'))
47 <li class="nav-item">
48 <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
49 </li>
50 @endif
51 @else
52 <li class="nav-item dropdown">
53 <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
54 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
55 {{ Auth::user()->name }} <span class="caret"></span>
56 </a>
57
58 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
59 <a class="dropdown-item" href="{{ route('logout') }}"
60 onclick="event.preventDefault();
61 document.getElementById('logout-form').submit();">
62 {{ __('Logout') }}
63 </a>
64
65 <form id="logout-form" action="{{ route('logout') }}" method="POST"
66 style="display: none;">
67 @csrf
68 </form>
69 </div>
70 </li>
71 @endguest
72 </ul>
73 </div>
74 </div>
75 </nav>
76
77 <main class="py-4">
78 @include('flash::message')
79 @yield('content')
80 </main>
81 </div>
82 <!-- Scripts -->
83 <script src="{{ mix('js/app.js') }}"></script>
84 <script>
85 $('#flash-overlay-modal').modal();
86 </script>
87
88 </body>
89 </html>
90
效果如图：
Laravel Vuejs 实战：开发知乎 （2）用户登录的更多相关文章
- Laravel Vuejs 实战：开发知乎 （10）使用 Select2 优化话题选择
1.添加选择Topic 使用Select2,如何安装Select2 ,具体使用实例 Select2 and Laravel: Ajax Autocomplete 及 Loading data remo ...
- Laravel Vuejs 实战：开发知乎 （6）发布问题
1.view部分: 安装一个扩展包:Laravel-UEditor composer require "overtrue/laravel-ueditor:~1.0" 配置 添加下面 ...
- Window上python开发--4.Django的用户登录模块User
Android系统开发交流群:484966421 OSHome. 微信公众号:oshome2015 在搭建站点和web的应用程序时,用户的登录和管理是差点儿是每一个站点都必备的. 今天主要从一个实例了 ...
- 项目开发-->身份认证及用户登录模块
1.首先明确的两个问题 如何判断当前申请是由一个已登录用户发起的?如果Request.IsAuthenticated为true,则表示是一个已登录用户. 如何获取当前登录用户的登录名?如果是一个已登录 ...
- Laravel Vuejs 实战：开发知乎 （1）项目环境配置和用户表设计
1.使用laragon新建laravel项目 zhihu 2.配置env文件的database设置 DB_DATABASE=zhihu 3.分析users表需要的字段 4.修改数据库迁移文件: cla ...
- Laravel Vuejs 实战：开发知乎 （2）用户注册
1.本节需要发送验证邮件 2.教程使用SendCloud发送邮件 [我使用的是mailtrap] 3. composer require laravel/ui 安装完成后 php artisan ui ...
- Laravel Vuejs 实战：开发知乎 （9）定义话题与问题关系
1.话题[Topic] 执行命令: php artisan make:model Topic –cmr 修改****_**_**_create_topics_table.php数据库迁移文件如下: c ...
- Laravel Vuejs 实战：开发知乎 （8）美化编辑器
1.使用UEditor增量包: simple-ueditors 执行下载: git clone https://github.com/JellyBool/simple-ueditor.git 2.用此 ...
- Laravel Vuejs 实战：开发知乎 （7）验证问题表单字段
上一节代码中已经实现 下面代码中的validate内部配置就是: public function store(Request $request) { // $data = $request->v ...
随机推荐
- SigXplorer设置延时及Local_Global
通过SigXplorer设置绝对延时和相对延时及对Local-Global的理解 一.基本理解 (感觉可能有偏差) 在于博士的教程第44和45讲中,分别对绝对延时和相对延时进行了设置,通过SigXpl ...
- 移动 APP 端与服务器端用户身份认证的安全方案
最近要做一个项目是java开发后端服务,然后移动APP调用.由于之前没有接触过这块,所以在网上搜索相关的方案.然后搜到下面的一些方案做一些参考. 原文:移动 APP 端与服务器端用户身份认证的安全方案 ...
- Microsoft 常用下载链接
申明:本文所有下载链接皆来自微软官网,推荐使用迅雷下载 推荐:Windows10安装时选择专业版,Office用2016版,其他随意,具体用哪个版本根据配置和需求 Windows系统下载 Window ...
- Java 读取网络资源文件 获取文件大小 MD5校验值
Java 读取网络资源文件 获取文件大小 MD5校验值 封装一个文件操作工具类: package c; import java.io.*; import java.net.HttpURLConnect ...
- LVM逻辑卷：创建LVM分区实例
一.概述 LVM(Logical Volume Manager)是基于内核的一种逻辑卷管理器,LVM适合于管理大存储设备,并允许用户动态调整文件系统的大小.此外LVM快照功能可以帮助我们快速备份数据. ...
- TFTP服务[精简版]：简单文件传输协议
简单文件传输协议(Trivial File Transfer Protocol,TFTP)是一种基于 UDP 协议在客户端 和服务器之间进行简单文件传输的协议.顾名思义,它提供不复杂.开销不大的文件传 ...
- Oracle创表操作记录
Oracle表操作 --主键,复合主键 create table example (id number primary key, name varchar2(20)); create table ex ...
- window10 上的mysql8.0.13的数据库服务丢失后，找回方法
1.由于mysql8 的 话是默认有一个配置文件的,所以在执行 初始化mysql8 mysqld --initialize #执行这个的原因是:因为之前使用的是Mysql8中自带的那个默认的配置文件 ...
- fileupload插件调用upload.parseRequest(request)解析得到空值问题
得到的list长度是0,项目配置不能改变,没办法了,只能将HttpServletRequest强换成DefaultMultipartHttpServletRequest ,直接获取表单中的字段了.方法 ...
- 【转载】Mapreduce实现自定义的InputFormat
转自:http://www.cnblogs.com/dlutxm/archive/2011/09/30/2196653.html 在mapreduce程序运行的开始阶段,hadoop需要将待处理的输入 ...