简介一套基于PHP、HTML、JavaScript、CSS构建的租车网站设计源码面向具备一定网页开发基础的学习者与开发者可用于快速搭建功能完整的租车业务平台。整个资源包共含2000个文件以1277个PHP文件为核心负责用户管理、订单处理等后端逻辑辅以46个JavaScript、34个CSS、64个HTML文件提升前端交互与视觉呈现另含less、txt、md、json、sql等类型文件涉及样式预处理、项目文档、数据交换及数据库脚本压缩包大小约26.56MB。项目采用模块化与组件化设计应用目录、公共资源目录、第三方依赖库层次分明覆盖用户注册、车辆展示、在线预订、支付处理等关键业务流程并带有composer、bower等依赖管理配置及说明文档便于快速部署与二次开发。已有74人学习/下载适合作为毕业设计、课程项目或商业租车系统开发前的技术参考。1. 基于PHP、HTML、JavaScript、CSS的租车网站设计源码这套四件套组合到底能做出什么很多人在毕设选题或接小外包时都下载过“租车网站源码”这类压缩包。打开之后里面就是PHP文件、HTML页面、CSS样式表和JS脚本没有框架、没有复杂的构建工具。这套基于PHP、HTML、JavaScript、CSS的租车网站设计源码本质上是一个用原生四件套搭建的传统Web应用正好覆盖了HTMLCSSJS基础语法到后端交互的完整链路。它解决的是租车业务最常见的线上化需求车辆展示、注册登录、按条件筛选、在线下单、后台管理订单。对开发者来说它能让你在一台装有PHP和MySQL的服务器上用几百行代码跑通完整业务闭环对学习者来说它比任何MVC框架教程都更能说明“网页怎么跟数据库对话”这一基础问题。无论你是想快速交付课设还是想找一套能二次改造的PHP源码这个方向都值得拆开看一遍。2. 租车网站技术栈拆分PHP、HTML、CSS、JavaScript的职责边界2.1 四件套在租车业务里各自负责什么先别急着写代码把职责划清楚后面看源码才不会迷路。PHP运行在服务器端负责接收请求、操作数据库、处理登录状态、输出动态内容HTML负责页面骨架告诉浏览器哪里是车名、哪里是价格按钮CSS负责视觉包括布局、颜色、卡片悬停阴影很多人嘴里说的“CSS鼠标移入事件”准确讲是:hover伪类加transition过渡并不是真正的“事件”这个后面会演示JavaScript则运行在浏览器端负责DOM操作、表单校验、发起AJAX请求、接收并渲染数据。在租车网站里典型的协作流程是这样的用户刷新车辆列表页PHP从数据库查出车辆记录并拼成HTML输出用户点击“筛选”按钮JavaScript函数收集表单值通过fetch请求后端接口PHP处理完返回JSONJavaScript再把数据动态渲染到页面上。整条链路里PHP和JavaScript不直接打交道它们通过HTTP请求和JSON字符串互相通信HTML是中间容器CSS负责把最终结果打扮得能看。下面这张表总结了它们在源码里的分工技术在租车网站中的职责典型文件PHP用户认证、车辆/订单增删改查、数据库访问、文件上传login.php、order.phpHTML页面结构、表单、车辆列表骨架index.html、car.htmlCSS布局、响应式、卡片动画、表单居中style.cssJavaScript表单校验、AJAX请求、动态渲染、返回顶部car-list.js、common.js2.2 源码目录怎么规划一份能直接跑的PHP租车网站骨架下载下来的源码如果目录结构合理一眼就能看出后端和前端的分界。我一般会按下面的方式组织这也是PHP原生项目最常见的做法rental-car/ ├── public/ # Web根目录对外暴露的唯一目录 │ ├── index.php # 入口车辆列表 │ ├── car.php # 车辆详情 │ ├── login.php # 登录接口 │ ├── register.php # 注册接口 │ └── order.php # 下单接口 │ ├── admin/ # 后台管理 │ │ └── index.php │ ├── assets/ │ │ ├── css/ │ │ │ └── style.css │ │ ├── js/ │ │ │ ├── common.js │ │ │ └── car-list.js │ │ └── uploads/ # 车辆图片上传后存放 ├── includes/ │ ├── db.php # PDO数据库连接 │ ├── functions.php # 公共函数判断登录、格式化价格 │ └── auth.php # 登录态检查 ├── sql/ │ └── schema.sql # 建库建表脚本 └── config.php # 数据库账号密码配置把public作为唯一对外目录是为了防止用户直接访问includes里的配置文件和数据库连接代码。如果Web根目录指向项目根目录别人就能通过http://your-site/includes/db.php看到你的数据库连接参数这是很多源码最常见的低级漏洞。Nginx或Apache里把站点根目录指向public安全性和可维护性都会好很多。2.3 本地怎么跑PHP内置服务器与公共目录设置很多新手一上来就去配Apache虚拟主机其实PHP自带开发服务器一条命令就能把源码跑起来cd rental-car php -S localhost:8000 -t public-t public指定public作为Web根目录浏览器访问http://localhost:8000就能看到首页。这个内置服务器适合开发阶段不支持.htaccess如果源码用了GET传参方式比如car.php?id3完全够用。如果想放到真实环境常见做法是使用XAMPP或phpStudy把public目录映射为站点根目录。要注意检查PHP扩展是否开启尤其是PDO MySQL扩展。如果运行时报Class PDO not found去php.ini里把extensionpdo_mysql前面的分号去掉再重启服务即可。很多PHP免费网站空间也是同样的逻辑上传时把本地public内的文件放到htdocs或wwwroot下就能访问。3. 租车网站核心实现用PHPMySQL建表再用JavaScript渲染车辆列表3.1 租车业务的数据模型用户、车辆、订单三张表该怎么设计租车网站再简单也离不开三张核心表用户表、车辆表、订单表。下面这份schema.sql是能直接执行的建表脚本-- sql/schema.sql CREATE DATABASE rental_car DEFAULT CHARACTER SET utf8mb4; USE rental_car; CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, phone VARCHAR(20), created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE cars ( id INT AUTO_INCREMENT PRIMARY KEY, brand VARCHAR(30) NOT NULL, model VARCHAR(50) NOT NULL, price_per_day DECIMAL(10,2) NOT NULL, stock INT DEFAULT 1, image_url VARCHAR(255), is_available TINYINT(1) DEFAULT 1 ); CREATE TABLE orders ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, car_id INT NOT NULL, start_date DATE NOT NULL, end_date DATE NOT NULL, total_price DECIMAL(10,2), status TINYINT DEFAULT 0, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id), FOREIGN KEY (car_id) REFERENCES cars(id) );注意三个细节第一字符集用utf8mb4不要用utf8否则存生僻字或表情符号会乱码前端JavaScript读取JSON时也会因为编码不一致出现显示问题第二价格字段用DECIMAL(10,2)避免浮点误差不要用FLOAT第三users.password长度设成255因为后面要用password_hash()生成一个60字符长的bcrypt哈希255留够了余量。3.2 PHP后端接口用PDO预处理语句输出车辆JSON数据库连接和接口是原生PHP源码里最需要仔细看的部分。先写一个统一的数据库连接文件?php // includes/db.php $host 127.0.0.1; $dbname rental_car; $user root; $pass ; $dsn mysql:host$host;dbname$dbname;charsetutf8mb4; $options [ PDO::ATTR_ERRMODE PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE PDO::FETCH_ASSOC, ]; $pdo new PDO($dsn, $user, $pass, $options); ?然后是车辆列表接口public/api/cars.php?php // public/api/cars.php require __DIR__ . /../../includes/db.php; $brand isset($_GET[brand]) ? trim($_GET[brand]) : ; $minPrice isset($_GET[min_price]) ? (float)$_GET[min_price] : 0; $sql SELECT id, brand, model, price_per_day, image_url FROM cars WHERE is_available 1; $params []; if ($brand ! ) { $sql . AND brand ?; $params[] $brand; } if ($minPrice 0) { $sql . AND price_per_day ?; $params[] $minPrice; } $stmt $pdo-prepare($sql); $stmt-execute($params); $cars $stmt-fetchAll(); header(Content-Type: application/json; charsetutf-8); echo json_encode($cars, JSON_UNESCAPED_UNICODE); ?这里最重要的一行是isset($_GET[brand]) ? trim($_GET[brand]) : 它是PHP三元运算符的典型应用作用是“有这个参数就取并去掉首尾空格没有就给空串”。所有外部输入都通过?占位符交给PDO预处理而不是拼进SQL字符串这样才能防住SQL注入。输出JSON时加上JSON_UNESCAPED_UNICODE汉字会直接显示而不是变成\uXXXX方便调试。3.3 前端渲染HTMLJavaScript的fetch与模板字符串车辆列表页可以用一个简单的HTML结构承载JavaScript负责异步取数并生成卡片!-- public/index.html -- !DOCTYPE html html langzh-cn head meta charsetutf-8 title租车网站 - 车辆列表/title link relstylesheet hrefassets/css/style.css /head body div idcar-list classcar-grid/div script srcassets/js/car-list.js/script /body /html// public/assets/js/car-list.js async function loadCars() { const res await fetch(api/cars.php); const cars await res.json(); const container document.getElementById(car-list); container.innerHTML cars.map(car div classcar-card img srcassets/uploads/${car.image_url} alt${car.brand} ${car.model} h3${car.brand} ${car.model}/h3 p classprice¥${car.price_per_day}/天/p button onclickbookCar(${car.id})立即预订/button /div ).join(); } loadCars();fetch返回值是一个Response对象必须调用res.json()才能拿到数组。map是JavaScript函数里处理列表最常用的方法配合模板字符串直接生成HTML字符串再一次性赋给innerHTML比反复createElement性能好且代码更简短。注意alt属性里的内容必须来自受信任的数据或经过转义否则用户上传恶意字符串会造成XSS。3.4 CSS样式卡片布局、hover过渡和input居中车辆卡片用Grid可以轻松做到自适配三列、两列或一列在HTML网页制作里非常实用/* public/assets/css/style.css */ .car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; padding: 20px; } .car-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .car-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .input-wrap { text-align: center; } .input-wrap input { width: 240px; margin: 0 auto; display: block; padding: 8px 12px; }repeat(auto-fill, minmax(240px, 1fr))的意思是每一列最小240px只要容器有空位就自动排下一列这样不用写媒体查询也能适配手机和桌面。.car-card:hover配合transition实现了“鼠标移入时上浮”的视觉效果这就是前面说到的所谓“CSS鼠标移入事件”本质上只是伪类加过渡。.input-wrap input展示了CSS中把input居中的方法给外层容器text-align:centerinput本身用display:block加margin:0 auto这比单纯用text-align更可靠。4. 把租车流程做全PHP登录、JavaScript筛选、事务下单与CSS交互4.1 PHP实现用户注册登录password_hash与Session用户注册时密码绝不能明文保存。用PHP自带的password_hash生成哈希验证时用password_verify?php // public/register.php require __DIR__ . /../includes/db.php; if ($_SERVER[REQUEST_METHOD] POST) { $username trim($_POST[username] ?? ); $password $_POST[password] ?? ; $phone trim($_POST[phone] ?? ); if (strlen($username) 3 || strlen($password) 6) { exit(用户名至少3位密码至少6位); } $hash password_hash($password, PASSWORD_DEFAULT); $stmt $pdo-prepare( INSERT INTO users (username, password, phone) VALUES (?, ?, ?) ); try { $stmt-execute([$username, $hash, $phone]); header(Location: login.php); } catch (PDOException $e) { if ($e-getCode() 23000) { exit(用户名已存在); } throw $e; } } ?这里$_POST[username] ?? 是PHP的空合并运算符如果该键不存在就返回空字符串避免未定义索引警告。password_hash默认生成bcrypt哈希优点是哈希中自带盐值哪怕两个用户密码相同存库结果也不同。登录成功后用$_SESSION[user_id]记录用户身份后续订单接口通过session_start()检查这个值判断是否已登录。4.2 车辆筛选JavaScript合并两个对象构造查询参数车辆列表页面通常有品牌、价格区间、排序等筛选条件。如果用一堆if去拼接URL会很难维护更好的做法是用JavaScript合并两个对象来统一处理// public/assets/js/car-list.js async function searchCars(filters) { const defaultParams { brand: , min_price: 0, sort: price }; // 用Object.assign合并默认值和用户输入 const params Object.assign({}, defaultParams, filters); const query new URLSearchParams(params).toString(); const res await fetch(api/cars.php? query); const cars await res.json(); renderCars(cars); }Object.assign({}, defaultParams, filters)的含义是先把默认参数复制到一个新对象再把filters里的属性覆盖上去。filters里没传入的字段保持默认值传了就用新的。如果想用更现代的写法可以用展开运算符{...defaultParams, ...filters}效果完全一样。URLSearchParams会自动给参数编码避免品牌名里的中文和空格破坏请求地址。4.3 在线下单PHP事务和行锁避免重复扣库存下单是整个租车网站里对数据一致性要求最高的操作。如果两把请求同时命中同一辆车必须保证库存只扣一次。下面这段代码是典型的“事务行锁”方案?php // public/order.php require __DIR__ . /../includes/db.php; session_start(); if (!isset($_SESSION[user_id])) { exit(请先登录); } $carId (int)$_POST[car_id]; $rentDays (int)$_POST[rent_days]; if ($rentDays 1 || $rentDays 30) { exit(租期必须在1到30天之间); } try { $pdo-beginTransaction(); $stmt $pdo-prepare( SELECT price_per_day, stock FROM cars WHERE id ? FOR UPDATE ); $stmt-execute([$carId]); $car $stmt-fetch(); if (!$car || $car[stock] 1) { throw new Exception(车辆不存在或已被租完); } $total $car[price_per_day] * $rentDays; $stmt $pdo-prepare( INSERT INTO orders (user_id, car_id, start_date, end_date, total_price) VALUES (?, ?, CURDATE(), DATE_ADD(CURDATE(), INTERVAL ? DAY), ?) ); $stmt-execute([$_SESSION[user_id], $carId, $rentDays, $total]); $pdo-prepare( UPDATE cars SET stock stock - 1 WHERE id ? )-execute([$carId]); $pdo-commit(); echo json_encode([code 0, message 下单成功, total $total]); } catch (Exception $e) { $pdo-rollBack(); echo json_encode([code 1, message $e-getMessage()]); } ?SELECT ... FOR UPDATE会在事务期间锁住这一行其他会话修改这行时必须等待当前事务结束。这里把“查价格、查库存、插入订单、扣库存”放进同一个事务确保不会出现“订单生成了但库存没扣”的问题。当业务量变大以后可以把“下单成功”的消息写入一张队列表再通过PHP队列消费发送短信通知但小型租车网站用事务已经足够。注意start_date用CURDATE()实际项目应从表单接收日期并做格式校验防止用户传非法日期。4.4 后台图片处理PHP文件上传与GD库生成缩略图后台录入车辆时需要上传图片。原生PHP处理上传要检查类型、大小、扩展名。更稳妥的是用GD库重新生成一张缩略图这样即使原图带恶意代码经过GD重新编码也会被去掉?php // public/admin/upload_car.php require __DIR__ . /../../includes/db.php; $file $_FILES[image] ?? null; if (!$file) exit(未收到文件); // 1. 检查类型和后缀 $allowedTypes [image/jpeg, image/png, image/webp]; $ext strtolower(pathinfo($file[name], PATHINFO_EXTENSION)); if (!in_array($file[type], $allowedTypes) || !in_array($ext, [jpg, jpeg, png, webp])) { exit(仅支持jpg/png/webp格式); } // 2. 检查文件大小 if ($file[size] 2 * 1024 * 1024) { exit(图片不能超过2MB); } // 3. 用GD库生成规范化图片并保存 $newName uniqid() . .jpg; $source imagecreatefromstring(file_get_contents($file[tmp_name])); $width imagesx($source); $height imagesy($source); $thumbWidth 600; $thumbHeight intval($height * $thumbWidth / $width); $thumb imagecreatetruecolor($thumbWidth, $thumbHeight); imagecopyresampled($thumb, $source, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $width, $height); imagejpeg($thumb, __DIR__ . /../assets/uploads/ . $newName, 85); echo 上传成功文件名 . $newName; ?这段代码把“PHP图片生产”这个操作落到实了imagecreatefromstring从原始字节流创建图片imagecopyresampled做缩放重采样imagejpeg输出压缩后的JPEG质量参数85在体积和清晰度之间取了个平衡。重新生成的图片不保留原图Exif信息和潜在可执行内容比move_uploaded_file直接移动文件更安全。文件名用uniqid()生成避免用户文件名覆盖已有文件。5. 租车网站源码部署排错与优化Nginx配置、原生JS和CSS小技巧5.1 跑不起来的三个典型原因与检查顺序下载的源码在本地跑不起来先别怀疑代码按这个顺序排查现象检查项页面 404Web根目录是否指向public白屏无输出打开PHP错误显示error_reporting(E_ALL); ini_set(display_errors, 1);数据库连接失败检查config.php里的主机名、账号、密码、库名样式完全不加载开发者工具Network看CSS请求路径确认assets路径是否正确Nginx部署PHP站点时常见配置是root /path/to/rental-car/public;并让location /指向index.php。如果直接访问index.php能打开但访问/404就是缺少index index.php;或try_files规则。Apache环境则要注意确认mod_rewrite和.htaccess的AllowOverride已开启。很多PHP免费网站空间把根目录设在htdocs这时把public内的文件平铺上传即可但要注意includes目录不要放在可被访问的根目录下。5.2 去掉jQuery依赖降低JS框架库漏洞扫描告警不少从网上下载的PHP源码喜欢引入jQuery和一大堆插件导致安全扫描报告“检测到目标站点存在JavaScript框架库漏洞”。租车网站里的页面交互并不复杂完全可以用原生JavaScript替代jQuery用document.querySelector代替$()用fetch代替$.ajax用classList.toggle代替toggleClass。去掉这些外部依赖后部署时不需要维护CDN或离线包也少了一个被构造攻击的入口。5.3 一键返回顶部和CSS优惠券圆切效果车辆列表页滚动很长加一个一键返回顶部按钮能明显提升操作体验。最简实现只需要一段滚动监听和一个点击回调// public/assets/js/common.js window.addEventListener(scroll, function () { const btn document.getElementById(back-top); if (btn) { btn.style.display window.scrollY 300 ? block : none; } }); document.getElementById(back-top).addEventListener(click, function () { window.scrollTo({top: 0, behavior: smooth}); });window.scrollY获取当前垂直滚动距离超过300像素显示按钮scrollTo的behavior: smooth让页面平滑回到顶部这就是HTML一键返回顶部算法的最短实现。如果想在车辆优惠券上做“圆切”造型即左右两侧各有一个半圆凹陷用CSS mask比裁剪图片更轻量.coupon { border-radius: 8px; -webkit-mask: radial-gradient(circle at 10px 50%, transparent 8px, #fff 9px); }radial-gradient在指定位置画一个透明圆点mask把它作为蒙版挖掉对应区域兼容性覆盖现代浏览器是CSS从入门到精通阶段很实用的一个技巧。把这段样式和JS一起合入源码既不影响原有程序结构又能让租车网站在演示时多几个值得说的亮点。本文还有配套的精品资源点击获取 基于PHP与原生前端四件套的租车网站源码设计与实战解析
简介一套基于PHP、HTML、JavaScript、CSS构建的租车网站设计源码面向具备一定网页开发基础的学习者与开发者可用于快速搭建功能完整的租车业务平台。整个资源包共含2000个文件以1277个PHP文件为核心负责用户管理、订单处理等后端逻辑辅以46个JavaScript、34个CSS、64个HTML文件提升前端交互与视觉呈现另含less、txt、md、json、sql等类型文件涉及样式预处理、项目文档、数据交换及数据库脚本压缩包大小约26.56MB。项目采用模块化与组件化设计应用目录、公共资源目录、第三方依赖库层次分明覆盖用户注册、车辆展示、在线预订、支付处理等关键业务流程并带有composer、bower等依赖管理配置及说明文档便于快速部署与二次开发。已有74人学习/下载适合作为毕业设计、课程项目或商业租车系统开发前的技术参考。1. 基于PHP、HTML、JavaScript、CSS的租车网站设计源码这套四件套组合到底能做出什么很多人在毕设选题或接小外包时都下载过“租车网站源码”这类压缩包。打开之后里面就是PHP文件、HTML页面、CSS样式表和JS脚本没有框架、没有复杂的构建工具。这套基于PHP、HTML、JavaScript、CSS的租车网站设计源码本质上是一个用原生四件套搭建的传统Web应用正好覆盖了HTMLCSSJS基础语法到后端交互的完整链路。它解决的是租车业务最常见的线上化需求车辆展示、注册登录、按条件筛选、在线下单、后台管理订单。对开发者来说它能让你在一台装有PHP和MySQL的服务器上用几百行代码跑通完整业务闭环对学习者来说它比任何MVC框架教程都更能说明“网页怎么跟数据库对话”这一基础问题。无论你是想快速交付课设还是想找一套能二次改造的PHP源码这个方向都值得拆开看一遍。2. 租车网站技术栈拆分PHP、HTML、CSS、JavaScript的职责边界2.1 四件套在租车业务里各自负责什么先别急着写代码把职责划清楚后面看源码才不会迷路。PHP运行在服务器端负责接收请求、操作数据库、处理登录状态、输出动态内容HTML负责页面骨架告诉浏览器哪里是车名、哪里是价格按钮CSS负责视觉包括布局、颜色、卡片悬停阴影很多人嘴里说的“CSS鼠标移入事件”准确讲是:hover伪类加transition过渡并不是真正的“事件”这个后面会演示JavaScript则运行在浏览器端负责DOM操作、表单校验、发起AJAX请求、接收并渲染数据。在租车网站里典型的协作流程是这样的用户刷新车辆列表页PHP从数据库查出车辆记录并拼成HTML输出用户点击“筛选”按钮JavaScript函数收集表单值通过fetch请求后端接口PHP处理完返回JSONJavaScript再把数据动态渲染到页面上。整条链路里PHP和JavaScript不直接打交道它们通过HTTP请求和JSON字符串互相通信HTML是中间容器CSS负责把最终结果打扮得能看。下面这张表总结了它们在源码里的分工技术在租车网站中的职责典型文件PHP用户认证、车辆/订单增删改查、数据库访问、文件上传login.php、order.phpHTML页面结构、表单、车辆列表骨架index.html、car.htmlCSS布局、响应式、卡片动画、表单居中style.cssJavaScript表单校验、AJAX请求、动态渲染、返回顶部car-list.js、common.js2.2 源码目录怎么规划一份能直接跑的PHP租车网站骨架下载下来的源码如果目录结构合理一眼就能看出后端和前端的分界。我一般会按下面的方式组织这也是PHP原生项目最常见的做法rental-car/ ├── public/ # Web根目录对外暴露的唯一目录 │ ├── index.php # 入口车辆列表 │ ├── car.php # 车辆详情 │ ├── login.php # 登录接口 │ ├── register.php # 注册接口 │ └── order.php # 下单接口 │ ├── admin/ # 后台管理 │ │ └── index.php │ ├── assets/ │ │ ├── css/ │ │ │ └── style.css │ │ ├── js/ │ │ │ ├── common.js │ │ │ └── car-list.js │ │ └── uploads/ # 车辆图片上传后存放 ├── includes/ │ ├── db.php # PDO数据库连接 │ ├── functions.php # 公共函数判断登录、格式化价格 │ └── auth.php # 登录态检查 ├── sql/ │ └── schema.sql # 建库建表脚本 └── config.php # 数据库账号密码配置把public作为唯一对外目录是为了防止用户直接访问includes里的配置文件和数据库连接代码。如果Web根目录指向项目根目录别人就能通过http://your-site/includes/db.php看到你的数据库连接参数这是很多源码最常见的低级漏洞。Nginx或Apache里把站点根目录指向public安全性和可维护性都会好很多。2.3 本地怎么跑PHP内置服务器与公共目录设置很多新手一上来就去配Apache虚拟主机其实PHP自带开发服务器一条命令就能把源码跑起来cd rental-car php -S localhost:8000 -t public-t public指定public作为Web根目录浏览器访问http://localhost:8000就能看到首页。这个内置服务器适合开发阶段不支持.htaccess如果源码用了GET传参方式比如car.php?id3完全够用。如果想放到真实环境常见做法是使用XAMPP或phpStudy把public目录映射为站点根目录。要注意检查PHP扩展是否开启尤其是PDO MySQL扩展。如果运行时报Class PDO not found去php.ini里把extensionpdo_mysql前面的分号去掉再重启服务即可。很多PHP免费网站空间也是同样的逻辑上传时把本地public内的文件放到htdocs或wwwroot下就能访问。3. 租车网站核心实现用PHPMySQL建表再用JavaScript渲染车辆列表3.1 租车业务的数据模型用户、车辆、订单三张表该怎么设计租车网站再简单也离不开三张核心表用户表、车辆表、订单表。下面这份schema.sql是能直接执行的建表脚本-- sql/schema.sql CREATE DATABASE rental_car DEFAULT CHARACTER SET utf8mb4; USE rental_car; CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, phone VARCHAR(20), created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE cars ( id INT AUTO_INCREMENT PRIMARY KEY, brand VARCHAR(30) NOT NULL, model VARCHAR(50) NOT NULL, price_per_day DECIMAL(10,2) NOT NULL, stock INT DEFAULT 1, image_url VARCHAR(255), is_available TINYINT(1) DEFAULT 1 ); CREATE TABLE orders ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, car_id INT NOT NULL, start_date DATE NOT NULL, end_date DATE NOT NULL, total_price DECIMAL(10,2), status TINYINT DEFAULT 0, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id), FOREIGN KEY (car_id) REFERENCES cars(id) );注意三个细节第一字符集用utf8mb4不要用utf8否则存生僻字或表情符号会乱码前端JavaScript读取JSON时也会因为编码不一致出现显示问题第二价格字段用DECIMAL(10,2)避免浮点误差不要用FLOAT第三users.password长度设成255因为后面要用password_hash()生成一个60字符长的bcrypt哈希255留够了余量。3.2 PHP后端接口用PDO预处理语句输出车辆JSON数据库连接和接口是原生PHP源码里最需要仔细看的部分。先写一个统一的数据库连接文件?php // includes/db.php $host 127.0.0.1; $dbname rental_car; $user root; $pass ; $dsn mysql:host$host;dbname$dbname;charsetutf8mb4; $options [ PDO::ATTR_ERRMODE PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE PDO::FETCH_ASSOC, ]; $pdo new PDO($dsn, $user, $pass, $options); ?然后是车辆列表接口public/api/cars.php?php // public/api/cars.php require __DIR__ . /../../includes/db.php; $brand isset($_GET[brand]) ? trim($_GET[brand]) : ; $minPrice isset($_GET[min_price]) ? (float)$_GET[min_price] : 0; $sql SELECT id, brand, model, price_per_day, image_url FROM cars WHERE is_available 1; $params []; if ($brand ! ) { $sql . AND brand ?; $params[] $brand; } if ($minPrice 0) { $sql . AND price_per_day ?; $params[] $minPrice; } $stmt $pdo-prepare($sql); $stmt-execute($params); $cars $stmt-fetchAll(); header(Content-Type: application/json; charsetutf-8); echo json_encode($cars, JSON_UNESCAPED_UNICODE); ?这里最重要的一行是isset($_GET[brand]) ? trim($_GET[brand]) : 它是PHP三元运算符的典型应用作用是“有这个参数就取并去掉首尾空格没有就给空串”。所有外部输入都通过?占位符交给PDO预处理而不是拼进SQL字符串这样才能防住SQL注入。输出JSON时加上JSON_UNESCAPED_UNICODE汉字会直接显示而不是变成\uXXXX方便调试。3.3 前端渲染HTMLJavaScript的fetch与模板字符串车辆列表页可以用一个简单的HTML结构承载JavaScript负责异步取数并生成卡片!-- public/index.html -- !DOCTYPE html html langzh-cn head meta charsetutf-8 title租车网站 - 车辆列表/title link relstylesheet hrefassets/css/style.css /head body div idcar-list classcar-grid/div script srcassets/js/car-list.js/script /body /html// public/assets/js/car-list.js async function loadCars() { const res await fetch(api/cars.php); const cars await res.json(); const container document.getElementById(car-list); container.innerHTML cars.map(car div classcar-card img srcassets/uploads/${car.image_url} alt${car.brand} ${car.model} h3${car.brand} ${car.model}/h3 p classprice¥${car.price_per_day}/天/p button onclickbookCar(${car.id})立即预订/button /div ).join(); } loadCars();fetch返回值是一个Response对象必须调用res.json()才能拿到数组。map是JavaScript函数里处理列表最常用的方法配合模板字符串直接生成HTML字符串再一次性赋给innerHTML比反复createElement性能好且代码更简短。注意alt属性里的内容必须来自受信任的数据或经过转义否则用户上传恶意字符串会造成XSS。3.4 CSS样式卡片布局、hover过渡和input居中车辆卡片用Grid可以轻松做到自适配三列、两列或一列在HTML网页制作里非常实用/* public/assets/css/style.css */ .car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; padding: 20px; } .car-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .car-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .input-wrap { text-align: center; } .input-wrap input { width: 240px; margin: 0 auto; display: block; padding: 8px 12px; }repeat(auto-fill, minmax(240px, 1fr))的意思是每一列最小240px只要容器有空位就自动排下一列这样不用写媒体查询也能适配手机和桌面。.car-card:hover配合transition实现了“鼠标移入时上浮”的视觉效果这就是前面说到的所谓“CSS鼠标移入事件”本质上只是伪类加过渡。.input-wrap input展示了CSS中把input居中的方法给外层容器text-align:centerinput本身用display:block加margin:0 auto这比单纯用text-align更可靠。4. 把租车流程做全PHP登录、JavaScript筛选、事务下单与CSS交互4.1 PHP实现用户注册登录password_hash与Session用户注册时密码绝不能明文保存。用PHP自带的password_hash生成哈希验证时用password_verify?php // public/register.php require __DIR__ . /../includes/db.php; if ($_SERVER[REQUEST_METHOD] POST) { $username trim($_POST[username] ?? ); $password $_POST[password] ?? ; $phone trim($_POST[phone] ?? ); if (strlen($username) 3 || strlen($password) 6) { exit(用户名至少3位密码至少6位); } $hash password_hash($password, PASSWORD_DEFAULT); $stmt $pdo-prepare( INSERT INTO users (username, password, phone) VALUES (?, ?, ?) ); try { $stmt-execute([$username, $hash, $phone]); header(Location: login.php); } catch (PDOException $e) { if ($e-getCode() 23000) { exit(用户名已存在); } throw $e; } } ?这里$_POST[username] ?? 是PHP的空合并运算符如果该键不存在就返回空字符串避免未定义索引警告。password_hash默认生成bcrypt哈希优点是哈希中自带盐值哪怕两个用户密码相同存库结果也不同。登录成功后用$_SESSION[user_id]记录用户身份后续订单接口通过session_start()检查这个值判断是否已登录。4.2 车辆筛选JavaScript合并两个对象构造查询参数车辆列表页面通常有品牌、价格区间、排序等筛选条件。如果用一堆if去拼接URL会很难维护更好的做法是用JavaScript合并两个对象来统一处理// public/assets/js/car-list.js async function searchCars(filters) { const defaultParams { brand: , min_price: 0, sort: price }; // 用Object.assign合并默认值和用户输入 const params Object.assign({}, defaultParams, filters); const query new URLSearchParams(params).toString(); const res await fetch(api/cars.php? query); const cars await res.json(); renderCars(cars); }Object.assign({}, defaultParams, filters)的含义是先把默认参数复制到一个新对象再把filters里的属性覆盖上去。filters里没传入的字段保持默认值传了就用新的。如果想用更现代的写法可以用展开运算符{...defaultParams, ...filters}效果完全一样。URLSearchParams会自动给参数编码避免品牌名里的中文和空格破坏请求地址。4.3 在线下单PHP事务和行锁避免重复扣库存下单是整个租车网站里对数据一致性要求最高的操作。如果两把请求同时命中同一辆车必须保证库存只扣一次。下面这段代码是典型的“事务行锁”方案?php // public/order.php require __DIR__ . /../includes/db.php; session_start(); if (!isset($_SESSION[user_id])) { exit(请先登录); } $carId (int)$_POST[car_id]; $rentDays (int)$_POST[rent_days]; if ($rentDays 1 || $rentDays 30) { exit(租期必须在1到30天之间); } try { $pdo-beginTransaction(); $stmt $pdo-prepare( SELECT price_per_day, stock FROM cars WHERE id ? FOR UPDATE ); $stmt-execute([$carId]); $car $stmt-fetch(); if (!$car || $car[stock] 1) { throw new Exception(车辆不存在或已被租完); } $total $car[price_per_day] * $rentDays; $stmt $pdo-prepare( INSERT INTO orders (user_id, car_id, start_date, end_date, total_price) VALUES (?, ?, CURDATE(), DATE_ADD(CURDATE(), INTERVAL ? DAY), ?) ); $stmt-execute([$_SESSION[user_id], $carId, $rentDays, $total]); $pdo-prepare( UPDATE cars SET stock stock - 1 WHERE id ? )-execute([$carId]); $pdo-commit(); echo json_encode([code 0, message 下单成功, total $total]); } catch (Exception $e) { $pdo-rollBack(); echo json_encode([code 1, message $e-getMessage()]); } ?SELECT ... FOR UPDATE会在事务期间锁住这一行其他会话修改这行时必须等待当前事务结束。这里把“查价格、查库存、插入订单、扣库存”放进同一个事务确保不会出现“订单生成了但库存没扣”的问题。当业务量变大以后可以把“下单成功”的消息写入一张队列表再通过PHP队列消费发送短信通知但小型租车网站用事务已经足够。注意start_date用CURDATE()实际项目应从表单接收日期并做格式校验防止用户传非法日期。4.4 后台图片处理PHP文件上传与GD库生成缩略图后台录入车辆时需要上传图片。原生PHP处理上传要检查类型、大小、扩展名。更稳妥的是用GD库重新生成一张缩略图这样即使原图带恶意代码经过GD重新编码也会被去掉?php // public/admin/upload_car.php require __DIR__ . /../../includes/db.php; $file $_FILES[image] ?? null; if (!$file) exit(未收到文件); // 1. 检查类型和后缀 $allowedTypes [image/jpeg, image/png, image/webp]; $ext strtolower(pathinfo($file[name], PATHINFO_EXTENSION)); if (!in_array($file[type], $allowedTypes) || !in_array($ext, [jpg, jpeg, png, webp])) { exit(仅支持jpg/png/webp格式); } // 2. 检查文件大小 if ($file[size] 2 * 1024 * 1024) { exit(图片不能超过2MB); } // 3. 用GD库生成规范化图片并保存 $newName uniqid() . .jpg; $source imagecreatefromstring(file_get_contents($file[tmp_name])); $width imagesx($source); $height imagesy($source); $thumbWidth 600; $thumbHeight intval($height * $thumbWidth / $width); $thumb imagecreatetruecolor($thumbWidth, $thumbHeight); imagecopyresampled($thumb, $source, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $width, $height); imagejpeg($thumb, __DIR__ . /../assets/uploads/ . $newName, 85); echo 上传成功文件名 . $newName; ?这段代码把“PHP图片生产”这个操作落到实了imagecreatefromstring从原始字节流创建图片imagecopyresampled做缩放重采样imagejpeg输出压缩后的JPEG质量参数85在体积和清晰度之间取了个平衡。重新生成的图片不保留原图Exif信息和潜在可执行内容比move_uploaded_file直接移动文件更安全。文件名用uniqid()生成避免用户文件名覆盖已有文件。5. 租车网站源码部署排错与优化Nginx配置、原生JS和CSS小技巧5.1 跑不起来的三个典型原因与检查顺序下载的源码在本地跑不起来先别怀疑代码按这个顺序排查现象检查项页面 404Web根目录是否指向public白屏无输出打开PHP错误显示error_reporting(E_ALL); ini_set(display_errors, 1);数据库连接失败检查config.php里的主机名、账号、密码、库名样式完全不加载开发者工具Network看CSS请求路径确认assets路径是否正确Nginx部署PHP站点时常见配置是root /path/to/rental-car/public;并让location /指向index.php。如果直接访问index.php能打开但访问/404就是缺少index index.php;或try_files规则。Apache环境则要注意确认mod_rewrite和.htaccess的AllowOverride已开启。很多PHP免费网站空间把根目录设在htdocs这时把public内的文件平铺上传即可但要注意includes目录不要放在可被访问的根目录下。5.2 去掉jQuery依赖降低JS框架库漏洞扫描告警不少从网上下载的PHP源码喜欢引入jQuery和一大堆插件导致安全扫描报告“检测到目标站点存在JavaScript框架库漏洞”。租车网站里的页面交互并不复杂完全可以用原生JavaScript替代jQuery用document.querySelector代替$()用fetch代替$.ajax用classList.toggle代替toggleClass。去掉这些外部依赖后部署时不需要维护CDN或离线包也少了一个被构造攻击的入口。5.3 一键返回顶部和CSS优惠券圆切效果车辆列表页滚动很长加一个一键返回顶部按钮能明显提升操作体验。最简实现只需要一段滚动监听和一个点击回调// public/assets/js/common.js window.addEventListener(scroll, function () { const btn document.getElementById(back-top); if (btn) { btn.style.display window.scrollY 300 ? block : none; } }); document.getElementById(back-top).addEventListener(click, function () { window.scrollTo({top: 0, behavior: smooth}); });window.scrollY获取当前垂直滚动距离超过300像素显示按钮scrollTo的behavior: smooth让页面平滑回到顶部这就是HTML一键返回顶部算法的最短实现。如果想在车辆优惠券上做“圆切”造型即左右两侧各有一个半圆凹陷用CSS mask比裁剪图片更轻量.coupon { border-radius: 8px; -webkit-mask: radial-gradient(circle at 10px 50%, transparent 8px, #fff 9px); }radial-gradient在指定位置画一个透明圆点mask把它作为蒙版挖掉对应区域兼容性覆盖现代浏览器是CSS从入门到精通阶段很实用的一个技巧。把这段样式和JS一起合入源码既不影响原有程序结构又能让租车网站在演示时多几个值得说的亮点。本文还有配套的精品资源点击获取