当前位置: 首页 > news >正文

layuiadmin与laravel 12 前后端分离nginx配置

layuiadmin更新到2.7.0了(https://dev.layuion.com/themes/layuiadmin)。

作为老用户,很高兴又有更新了。

Herd的Nginx模式一直没搞懂,弄了一下没通。换成PHPstudy了。

先下载PHPstudy8.1,安装。然后从php官网下载php8.3,或者最新的php8.5或者php8.4等等。因为phpcas目前最高只支持php8.3,所以我下载的是php8.3。

点击下面这里,换成Windows环境的php8.3包,

选择对应的php版本。下载zip压缩包,解压到

C:\phpstudy_pro\Extensions\php

文件夹里,模仿php7.3.4nts这个命名方式,把8.3命名为php8.3.27nts。

在PHPstudy里需要添加3个网站。第一个域名站,就是实际的真实域名站80端口的,在cas认证服务器里进入白名单的那个域名。这个站就是一个空站。但是它的Nginx配置是最主要的。

在PHPstudy的设置-》配置文件,可以看到新建的域名站的配置文件,xxx.com_80,点击打开,编辑为:

server {listen        80;server_name  xxx.com;# 前端 layuiadmin 站点location / {proxy_pass http://localhost:5500;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}# 后端apilocation /api {proxy_pass http://localhost:8000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}}

主站就建好了。

然后就是前端的layuiadmin站点了。建立一个包含5500的端口的站点。为什么用5500呢?没有特定含义,我有时候习惯使用live server,直接在vscode上右键就打开了,属于个人习惯,可以随意换成其他端口。

建好后,把layuiadmin的singe文件夹里的内容都丢到这个文件夹里即可。layuiadmin自带路由,放到web环境里,就可以自成一个站点。

然后就是添加后端的laravel12了。

先把PHPstudy目录下的php8.3文件夹放到系统的环境变量里。

这样就可以在任意打开的cmd命令行里运行php命令了。然后下载composer最新版,直接安装。

然后使用命令安装laravel安装器:

composer global require laravel/installer

安装好安装器后,就可以新建laravel最新版了:

laravel new example-app

注意,PHPstudy的路径需要指向laravel的public文件夹,宝塔的站点配置里可以指定运行目录。PHPstudy没有这个功能。

然后就是laravel的Nginx配置了:

        location / {index index.php index.html error/index.html;           include C:/Users/andu/web/one/public/nginx.htaccess;autoindex  off;if (!-e $request_filename) {rewrite ^(.*)$ /index.php?s=/$1 last;break;}}

注意,如果点击了PHPstudy的该站点的伪静态,有可能会重置这个配置文件到默认的时候,就要把它修改过来。这个配置是解决只能访问laravel首页的Nginx配置。

记住,每次修改vhosts.conf配置文件,都需要重启Nginx服务,PHPstudy上就是在首页里点击WNMP停止,再点击启动。默认配置如下。

server {listen        80;server_name  localhost;root   "C:/phpstudy_pro/WWW";location / {index index.php index.html;error_page 400 /error/400.html;error_page 403 /error/403.html;error_page 404 /error/404.html;error_page 500 /error/500.html;error_page 501 /error/501.html;error_page 502 /error/502.html;error_page 503 /error/503.html;error_page 504 /error/504.html;error_page 505 /error/505.html;error_page 506 /error/506.html;error_page 507 /error/507.html;error_page 509 /error/509.html;error_page 510 /error/510.html;autoindex  off;}location ~ \.php(.*)$ {fastcgi_pass   127.0.0.1:9001;fastcgi_index  index.php;fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;fastcgi_param  PATH_INFO  $fastcgi_path_info;fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;include        fastcgi_params;}
}

laravel 12做api后端接口时,默认是没有routes/api.php文件的。需要使用命令生成:

php artisan install:api

routes/api.php

<?phpuse Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Api\UserController;Route::get('/user', function (Request $request) {return $request->user();
})->middleware('auth:sanctum');Route::get('/users',[UserController::class,'index']); // 新添加

添加了UserController的index方法,获取所有用户。先生成一些用户。

DatabaseSeeder.php

User::factory(50)->create();

使用命令:

php artisan db:seed    

自动生成50个用户模拟数据了。

生成控制器:

php artisan make:seed UserSeeder

添加index方法:

<?phpnamespace App\Http\Controllers\Api;use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;class UserController extends Controller
{public function index(){return User::all();}
}

这个时候访问http://localhost:8000/api/users,就可以看到数据了:

Controllers/Api文件夹下的控制器,返回的数据实体对象,会自动的转换成json对象,传递出去。如果是在Controllers下面的控制器,就需要转换一下:

// Returning a collection of models
$users = User::all();
return response()->json($users);

如果是layui 的 table,还需要返回特定的参数:

class UserController extends Controller
{public function getTableData(Request $request){// 获取分页参数$page = $request->get('page', 1);$limit = $request->get('limit', 10);// 使用 Eloquent 模型的 paginate 方法,它会自动处理分页$data = User::paginate($limit, ['*'], 'page', $page);// 构造符合 layui 要求的 JSON 格式$response = ['code' => 0, // 成功状态码'msg' => '', // 提示信息'count' => $data->total(), // 总数据条数'data' => $data->items(), // 当前页数据];return response()->json($response);}
}

虽然api文件夹下的控制器返回的实体对象,会自动转换成json对象,但如果你返回本身就是json对象,那也可以啊,laravel会保持沉默。除了Eloquent对象会自动转换,其他的都不会。

添加一个给layui的table接收的方法:

     public function index2(Request $request){// 从layui table获取分页参数,如果没有则使用默认值$page = $request->get('page', 1);$limit = $request->get('limit', 10);// 使用Laravel的Eloquent模型进行分页查询$users = User::paginate($limit, ['*'], 'page', $page);// 构造符合layui table要求的JSON格式$response = ['code' => 0, // 状态码:0代表成功'msg' => '', // 提示信息'count' => $users->total(), // 总数据条数'data' => $users->items(), // 当前页数据];return response()->json($response);}

在/#/system/about页面里,添加引用代码:

<div class="layui-card-header">test</div>
<div class="layui-card-body layui-text layadmin-about"><blockquote class="layui-elem-quote" style="border: none;"><script type="text/html" template>当前 layuiAdmin 的版本是:{{= layui.admin.v }}路由地址:{{= layui.hash().href }}
</script><script type="text/html" template lay-url="/api/users2" >{{# layui.each(d.data, function(index, item){ }}<li>name:{{= item.name }} email:{{= item.email }}</li>{{# }); }}
</script></blockquote>
</div>

效果如下:

表格也是类似的套用。

http://www.dtcms.com/a/498914.html

相关文章:

  • IDEA在文件中查找快捷键失效
  • 整合知识图谱与大语言模型:下一代药物发现的革命性技术
  • 详解TCP(详细版)
  • TCMalloc原理解析(上)
  • OpenCV深度学习:目标检测、人脸识别与智能视频分
  • 电子商务网站有哪些内容wordpress漏洞2019
  • FileNotFoundError: [WinError 3] 系统找不到指定的路径。
  • qq音乐怎么做mp3下载网站安阳县教育局官网
  • 深度学习进阶(七)——智能体的进化:从 LLM 到 AutoGPT 与 OpenDevin
  • Redis面试八股
  • 做网站从设计到上线流程山西专业网站建设价目
  • 排序算法:详解插入排序
  • [MLflow] 部署OpenAI聊天网关 | 令牌桶算法限流 | 分布式追踪 | Trace Span
  • 【010】智能图书系统
  • LeetCode 刷题【124. 二叉树中的最大路径和】
  • linux 的文件结构
  • stack,queue,咕咕咕!
  • 做网站不实名认证可以吗佛山城市建设工程有限公司
  • 构建基于大语言模型的智能数据可视化分析工具的学习总结
  • Android 架构演进全解析:MVC、MVP、MVVM、MVI 图文详解
  • 网站后台免费模板下载艺术字体在线生成器转换器
  • HC32 操作GPIO点亮LED(HC库)
  • 如何用python来做小游戏
  • 捡到h3开发板,做了个视频小车(二),御游追风plus做遥控器
  • U盘安装群晖RR引导
  • 昆山市住房和城乡建设网站wordpress淘宝联盟
  • 数据库中表和视图的关系
  • 优先级队列的学习(二)
  • 内部排序——一文速通
  • 数据结构——东方财富掘金量化速成学习(python)