laravel小白入门教程:如何自定义网页并跳转

2022年2月14日21:11:13后端程序开发评论525 views字数 1362阅读模式

如何自定义网页并跳转呢?

一、首先在 vscode 中打开控制台,创建一个视图控制器:php artisan make:controller viewsController

名字可以自定义,我是用 viewsController 来表示

laravel小白入门教程:如何自定义网页并跳转

二、然后在views文件夹下新建base.blade.php文件

这个文件可以作为其他网页的基层,负责显示网站底部的备案信息,网站头顶的导航栏等,相当于一个显示的框架(电视机),需要往电视机里填充什么内容的话,用以下代码来代替。

@yield('content')

@yield('content2','我是base基础模板,内容2')

laravel小白入门教程:如何自定义网页并跳转

例如,将项目自带的 welcome.blade.php 修改如下,继承上面定义的显示框架,并填充了自己想要显示的具体内容

@extends('base.base')@section('content')

welcome

@endsection@section('content2')

welcome2

@endsection
laravel小白入门教程:如何自定义网页并跳转

在视图控制器中 定义一个名为index的函数

//首页    public function index(){        return view('welcome');    }
laravel小白入门教程:如何自定义网页并跳转

当用户访问首页时,路由会经视图控制器调用这个index方法,返回welcome这个页面展示。若welcome.blade.php在views里面的其他文件夹下,需要使用“点”来指向这个welcome.blade.php(例如index.welcome。views/index/welcome.blade.php)

三、浏览器中输入的链接都会经过路由文件 web.php

我们修改如下

Route::get('/', 'viewsController@index')->name('index');

laravel小白入门教程:如何自定义网页并跳转

当浏览器访问 localhost 时(部署上线后,应为http://www.xxx.com,或xxx.com),get 的第一个参数 与 浏览器中输入的链接 进行匹配,匹配通过,经由 viewsController 控制器调用 index 方法。

->name('index') 在网页上点击链接跳转时起作用(后续会涉及)

相匹配的例子(浏览器中输入的链接 与 get 的第一个参数):

localhost/ >>> '/'localhost/guanglu >>> '/gaunglu'

访问首页效果:

laravel小白入门教程:如何自定义网页并跳转

四、要实现点击链接跳转,单单一个页面是不够的

我们基于上述步骤再制作一个其他页面

1、views 文件夹下新建 guanglu.blade.php

laravel小白入门教程:如何自定义网页并跳转

2、视图控制器 viewsController 定义guanglu()

//guanglu页面    public function guanglu(){        return view('guanglu');    }
laravel小白入门教程:如何自定义网页并跳转

3、路由中添加规则:

Route::get('/gaunglu', 'viewsController@guanglu')->name('guanglu');

laravel小白入门教程:如何自定义网页并跳转

4、在链接中使用 route 实现跳转

href="{{route('guanglu')}}">

需要注意的是,这里的 'guanglu' 指的是路由名称。因为前面在写路由规则时,加了 ->name('gaunglu')

这样做的好处是:当路由规则变了,只要命名没变,前端仍然能找到这个路由规则

laravel小白入门教程:如何自定义网页并跳转

跳转成功:

laravel小白入门教程:如何自定义网页并跳转

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/bc/23193.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定