安装Laravel
-
从getcomposer.org/download/下载并安装最新版本的Composer.
-
在Visual Studio Code中打开Windows终端，用下面的命令安装Laravel安装器。
composer global require laravel/installer(adsbygoogle = window.adsbygoogle || []).push({});
-
创建新的文件夹命名为LearnLaravelWithRealApps.使用Visual Studio Code打开LearnLaravelWithRealApps文件夹。在这个文件夹中，创建名为LearnLaravelWithRealApps的新项目，命令如下。
laravel new LearnLaravelWithRealApps(adsbygoogle = window.adsbygoogle || []).push({});
-
运行LearnLaravelWithRealApps项目，命令如下。
php artisan serve -
打开LearnLaravelWithRealApps项目，网址如下。
http://localhost:8000(adsbygoogle = window.adsbygoogle || []).push({});
添加JQuery库
在公共文件夹中创建名为js的新文件夹。将JQuery库复制到public/js文件夹。
(adsbygoogle = window.adsbygoogle || []).push({})。
模型
在app/Models文件夹下创建名为Product.php的新PHP文件，如下所示。
<?php
namespace App\Models;
class Product
{
var $id;
var $name;
var $price;
var $quantity;
var $photo;
function __construct($id, $name, $price, $quantity, $photo)
{
$this->id = $id;
$this->name = $name;
$this->price = $price;
$this->quantity = $quantity;
$this->photo = $photo;
}
}
(adsbygoogle = window.adsbygoogle || []).push({})。
创建控制器
在app/Http/Controllers文件夹下创建名为DemoController.php的新PHP文件，如下所示。
<?php
namespace App\Http\Controllers;
use App\Models\Product;
class DemoController extends Controller
{
public function index()
{
return view('demo/index');
}
public function ajax()
{
$product = new Product('p01', 'Name 1', 4.5);
return response()->json($product);
}
}
(adsbygoogle = window.adsbygoogle || []).push({})。
创建视图
在resources/views文件夹下创建名为demo的新文件夹。在这个文件夹中，创建名为index.blade.php的新刀片文件，如下所示。
<html>
<head>
<title>Laravel</title>
<script src="{{asset('js/jquery-3.6.0.min.js')}}" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#buttonDemoAjax').on('click', function() {
$.ajax({
type: 'GET',
url: "{{url('/demo/ajax')}}",
success: function(product) {
var result = 'id: ' + product.id;
result += '<br>name: ' + product.name;
result += '<br>price: ' + product.price;
$('#result').html(result);
}
});
});
});
</script>
</head>
<body>
<h3>Index</h3>
<input type="button" value="Demo Ajax" id="buttonDemoAjax">
<br>
<span id="result"></span>
</body>
</html>
(adsbygoogle = window.adsbygoogle || []).push({})。
创建路线
打开路由文件夹中的web.php文件，添加新的路由，如下所示。
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DemoController;
Route::group([], function () {
Route::get('/', [DemoController::class, 'index']);
Route::get('/demo', [DemoController::class, 'index']);
Route::get('/demo/index', [DemoController::class, 'index']);
Route::get('/demo/ajax', [DemoController::class, 'ajax']);
});
(adsbygoogle = window.adsbygoogle || []).push({});
Laravel项目的结构
(adsbygoogle = window.adsbygoogle || []).push({});
运行应用程序
在Demo控制器中访问索引动作，其URL如下。
输出
点击Demo Ajax按钮来调用Ajax
