laravel 实战之 - 数据展示

前言
- 实战环境
  
  操作系统：centOS 7
  数据库：sqlite3
  php：7.2
  laravel：5.8
  工作目录：默认为项目根目录
- 今日预期
  - 新建表 theone ，插入数据，并在前端显示

实操

创建数据库 lbb
参考：https://www.runoob.com/sqlite/sqlite-tutorial.html

# 新建数据库 lbb，新建表 theone，并插入一条记录
sqlite3 ./database/lbb.sqlite
sqlite> create table theone (
   id integer primary key  autoincrement,
   title text,
   content text
);
sqlite> insert into theone (title,content) values ('laravel实战','数据展示');
sqlite> .quit

连接数据库 lbb
参考：https://laravel.com/docs/5.8/database

# 在 ./env 中找到以下内容：
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret
# 替换为，注意 $absolute-path 为 lbb 数据库所在的绝对路径，一般在项目根目录下的 database 文件夹下：
DB_CONNECTION=sqlite
DB_DATABASE=$absolute-path/lbb.sqlite

新建路由 first ，PS：路由即为访问网址中的虚拟目录，像是 http://www.xingdao.xyz/first 中的 first，即可为一条路由

# 在 ./routes/web.php 文件中追加以下内容，PS：IndexController 为控制器名称，index 为控制器中的方法：
Route::get('/first',"IndexController@index");

新建控制器 IndexController，PS：名称不做特别要求，被正确引用即可：

# 在项目根目录下执行
php artisan make:controller IndexController --invokable

# 验证是否成功
ls ./app/Http/Controllers/IndexController.php

# 获取 thone 表数据
# 编辑控制器文件，在 `use Illuminate\Http\Request;` 处追加一行：
user DB;
# 编辑控制器文件，在 `class IndexController extends Controller` 类中添加 index 方法，其中 first 为视图文件名称，将在下一小节说明：
public function index() {
    $data=DB::table('theone')->get();
    return view('first')->with("data",$data);
}

新建视图 first，PS：名称不做特别要求，被正确引用即可，其中 .blade.php 是 laravel 模板视图文件的默认后缀

# 创建视图文件 first
touch ./resources/views/first.blade.php

# 引用控制器传入数据，PS：视图文件其余部门皆为 html 文件，后面将会贴出完整代码
@foreach($data as $values)
<tr>
  <th scope="row">{{$values->id}}</th>
  <td>{{$values->title}}</td>
  <td>{{$values->content}}</td>
</tr>
@endforeach

完整文件：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>laravel 实战之 - 数据展示</title>
  </head>
  <body>
    <div class="container">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">id</th>
              <th scope="col">title</th>
              <th scope="col">content</th>
            </tr>
          </thead>
          <tbody>

            @foreach($data as $values)
            <tr>
              <th scope="row">{{$values->id}}</th>
              <td>{{$values->title}}</td>
              <td>{{$values->content}}</td>
            </tr>
            @endforeach

          </tbody>
        </table>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

展示

1557241923277.png

总结

我们今天一共做了以下操作：

新增 sqlite 数据库 lbb，并新建 theone 表，并插入了一条数据
修改了一个配置文件 ./env ,配置了到数据库 lbb 的链接；
新增了一个控制器文件 ./app/Http/Controllers/IndexController.php ,它将从数据库 lbb 中读取 theone 表的数据，并引入到视图文件 first 中去；
新增了一个视图文件 ./resources/views/first.blade.php ，用来引用并展示控制器文件传入的数据；
在 ./routes/web.php 文件中追加了一条路由；

你都有掌握到吗，还记的现在非常流行的网络开发 MVC 模式吗，其中 M 便相当于我们今天创建的数据库，V 便相当于我们今天使用的视图文件，C 便相当于我们今天使用的控制器文件，怎么样，代入实际案例后这个概念是不是很好理解。

虽然我们最后实现了今天的预期，但是我们一下子操作了这么多文件，你知道他们都是如何相互工作的吗，不知道的话下面的流程图可要仔细看噢：

【用户访问http://localhost/first】-->【获得到路由first】-->【调用控制器IndexController下的index方法】

【控制器IndexController下的index方法】-->【获取 lbb 数据库下的 theon 表数据】
【控制器IndexController下的index方法】-->【调取 first 视图，显示从数据库获取到的数据】-->【用户正常获取到自己需要的数据】