搜索 <<城市+房产交易网>> 或 <<城市+楼盘备案价>>,这两个总有一个能搜索到,

进去后点击商品房

然后再点击楼盘查询,把楼盘名称输入进去

 

 

以上命令会为我们生成 app/Listeners/EmailVerified.php 文件,稍作修改:

 

进行事件监听的绑定app/Providers/EventServiceProvider.php

安装扩展包

我们将以第三方扩展包 mews/captcha 作为基础来实现 Laravel 中的验证码功能。

使用 Composer 安装:

运行以下命令生成配置文件 config/captcha.php

我们可以打开配置文件,查看其内容:

config/captcha.php

可以看到这些配置选项都非常通俗易懂,characters 选项是用来显示给用户的所有字符串,defaultflatminiinverse 分别是定义的四种验证码类型,你可以在此修改对应选项自定义验证码的长度、背景颜色、文字颜色等属性,在此不做过多叙述。

页面嵌入

此扩展包的使用分为两步:

  1. 前端展示 —— 生成验证码给用户展示,并收集用户输入的答案;
  2. 后端验证 —— 接收答案,检测用户输入的验证码是否正确。

 

前段

后端验证

1下载配置包

完成上面的操作后,将项目文件 config/app.php 中的下一行

替换为:

2将语言包发布到项目中

首先要确定已完成laravel 6.^ 集成 Bootstrap这个步骤

Laravel 自带了用户认证功能,我们将利用此功能来快速构建我们的用户中心。

首先执行认证脚手架命令,生成代码:

命令 ui:auth 会询问我们是否要覆盖 app.blade.php,因为我们在前面章节中已经自定义了『主要布局文件』—— app.blade.php,所以此处输入 no,如下:

打开 routes/web.php 查看修改了哪些内容:

routes/web.php

可以看到在我们的主页下,多了两个表达式,先看第一个:

此处是 Laravel 的用户认证路由,可以在 vendor/laravel/framework/src/Illuminate/Routing/Router.php 中搜索关键词 LoginController 即可找到定义的地方,以上等同于:

为了更加直观,我们将在 web.php 中使用以上替换 Auth::routes();

再来看下面这一行:

生成的视图

ui:auth 命令为我们生成了 resources/views/auth 下几个文件:

视图名称 说明
register.blade.php 注册页面视图
login.blade.php 登录页面视图
verify.blade.php 邮箱认证视图
passwords/email.blade.php 提交邮箱发送邮件的视图
passwords/reset.blade.php 重置密码的页面视图

移除无用页面

因为无需使用 ui:auth 生成的主页,请运行以下命令删除无用文件:

本项目我们将使用 Font Awesome 来作为字体图标库。Font Awesome 提供了可缩放的矢量图标,允许我们使用 CSS 所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

1. 安装

输出:

file

打开 package.json 可以看到新增了这一行依赖:

package.json

2. 载入

我们还需要在样式中载入:

resources/sass/app.scss

3. 编译

运行 mix 编译命令:

能看到类似以下的输出即可:

file

Laravel 项目中使用 Bootstrap 前端框架,需要先执行以下命令:

composer require 是用来安装扩展包使用的命令,参数 --dev 是指定此扩展包只在开发环境中使用。

上面的命令安装完成后,使用以下命令来引入 Bootstrap :

以上命令做了以下事情:

  1. 在 npm 依赖配置文件 package.json 中引入 bootstrapjquerypopper.js 作为依赖;
  2. 修改 resources/js/bootstrap.js ,在此文件中初始化 Bootstrap UI 框架的 JS 部分;
  3. 修改 resources/sass/app.scss 以加载 Bootstrap 的样式文件;
  4. 新增 resources/sass/_variables.scss 样式配置文件。

运行 Laravel Mix

Laravel Mix 一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器,通过简单的调用,你可以轻松地管理前端资源。

使用 Mix 很简单,首先你需要使用以下命令安装 npm 依赖即可。我们将使用 Yarn 来安装依赖,在这之前,因为国内的网络原因,我们还需为 NPM 和 Yarn 配置安装加速:

使用 Yarn 安装依赖:

安装成功后,运行以下命令即可:

watch-poll 会在你的终端里持续运行,监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下,一旦资源文件发生变化,Webpack 会自动重新编译。

注意:在后面的课程中,我们需要保证 npm run watch-poll 一直处在执行状态中。

正常运行的界面应类似:

 

  • 选项卡 Stack trace —— 是程序调用堆栈,这里看到脚本调用的顺序,包括哪个地方执行错误的;
  • 选项卡 Request —— 是一些运行环境的信息,包括:
    • Request —— 请求简介;
    • Headers —— 请求头信息;
    • Query String —— URL 请求参数,用户提交的 GET 请求,PHP 超级全局变量 $_GET 里的内容
    • Body —— 表单提交的数据,PHP 超级全局变量 $_POST 里的内容
    • Files —— 用户上传文件的数据,PHP 超级全局变量 $_FILES 里的内容
    • Session —— 当前用户会话信息,PHP 超级全局变量 $_SESSION 里的内容
    • Cookies —— 当前用户的 Cookie 信息,PHP 超级全局变量 $_COOKIE 里的内容
  • 选项卡 App —— 应用启动信息,执行逻辑,包括路由调用、中间件调用、控制器调用、模板文件等信息;
  • 选项卡 User —— 登录用户信息,以及浏览器等客户端信息;
  • 选项卡 Context —— 环境信息,项目 .env 里的内容等;
  • 选项卡 Debug —— 将显示异常发生之前发生的事情。比如查询、日志和转储。在转储旁边,我们还显示您将 dump 语句放在何处的文件名等。

上面只是一个简单介绍,请先按照课程思路走下去,后续想要深入学习 Laravel Ignition ,请见 翻译:Laravel Ignition 功能全解析