3个坑教你避开建站公司的拖拉，怎样用代码做网站的最佳实践

改个需求建站公司拖一周，这事我见得太多了。前年我帮朋友建个外贸站，本来预计三天就能上线，结果对方说“这个功能得从头开始做”，一拖就拖了七天。结果上线后才发现，人家只是换个配色和几个文字。别看这事儿小，可对中小老板来说，时间就是钱，拖一天可能就损失一笔订单。今天我就用自己亲手做的一个案例，讲讲怎样用代码做网站的最佳实践，从零开始，不靠建站公司，自己搞定整个流程。

项目背景与需求

我接手的这个项目是一个本地培训机构的官网，他们之前用的是某个建站平台，虽然上线快，但后期修改起来特别麻烦，尤其是想加个课程报名表，折腾了三天才搞定。他们希望这次做个更灵活的站，可以自己添加课程、更新内容，不需要每次都找人改。

预算方面，他们给的不多，主要是想控制成本。所以不能用太贵的 CMS 系统，也不能用那些动辄几千块的建站公司。目标很明确：独立开发，自己掌控，快速上线，后期维护方便。

技术选型

选对技术是整个项目成功的前提。建站不等于开发一个复杂的系统，但也不能随便选个东西就上。我们得考虑几点：

开发成本：不能用太复杂的框架，否则开发时间太长，维护也麻烦。
部署成本：不能选择需要太多服务器配置的系统，否则部署起来太费劲。
后期维护：必须是开源、文档齐全的系统，否则出问题找不到人问。

综合考虑后，我们选择了 PHP + MySQL + HTML/CSS/JS 这套组合，配合 Laravel 作为后端框架，前端用 Vue.js，数据库用 MySQL，部署用 阿里云，域名和备案也用阿里云搞定。

为什么选 Laravel

Laravel 是目前 PHP 开发中最流行的框架之一，有完善的文档和社区支持，而且自带很多现成的功能，比如用户认证、数据表管理、API 接口等。如果你是个新手，直接用 Laravel 做项目，省时省力，还能学很多东西。

为什么用 Vue.js

前端部分，用 Vue.js 来做组件化开发，可以让你的页面更灵活，比如课程展示、报名表这些模块，都可以用 Vue 来实现，页面加载快，交互也好。

为什么用 MySQL

数据库这块，用 MySQL 是最稳妥的选择。阿里云官方文档里也推荐 MySQL 作为中小型项目的首选数据库，部署简单，性能也不错。

核心实现（配代码片段）

我们整个项目的大致结构是：

project/
├── public/           # 静态资源文件（CSS、JS、图片等）
├── resources/        # 前端资源（Vue、SCSS）
├── app/              # 应用逻辑
│   ├── Http/         # 路由和控制器
│   └── Models/       # 数据库模型
├── config/           # 配置文件
├── database/         # 数据库迁移文件
├── routes/           # 路由定义
└── vendor/           # 依赖库（通过 Composer 安装）

1. 创建 Laravel 项目

首先，我们需要通过 Composer 创建一个 Laravel 项目。在终端执行：

composer create-project laravel/laravel training-site

这个命令会下载并初始化一个新的 Laravel 项目，目录结构如上面所示。

2. 数据库配置

在 .env 文件中配置数据库信息：

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=training_site
DB_USERNAME=root
DB_PASSWORD=

如果你用的是阿里云服务器，这里需要改成阿里云数据库的 IP、用户名和密码。

3. 数据库迁移

我们创建一张课程表，结构如下：

Schema::create('courses', function (Blueprint $table) {$table->id();$table->string('title');$table->text('description');$table->string('cover_image');$table->timestamps();
});

执行迁移命令：

php artisan migrate

4. 创建课程模型

在 app/Models 目录下创建 Course.php：

namespace App\Models;use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;class Course extends Model
{use HasFactory;protected $fillable = ['title', 'description', 'cover_image'];
}

5. 创建课程控制器

在 app/Http/Controllers 目录下创建 CourseController.php：

namespace App\Http\Controllers;use App\Models\Course;
use Illuminate\Http\Request;class CourseController extends Controller
{public function index(){$courses = Course::all();return view('courses.index', compact('courses'));}public function create(){return view('courses.create');}public function store(Request $request){$request->validate(['title' => 'required|string|max:255','description' => 'required|string','cover_image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',]);$imagePath = $request->file('cover_image')->store('courses', 'public');Course::create(['title' => $request->title,'description' => $request->description,'cover_image' => $imagePath,]);return redirect()->route('courses.index')->with('success', '课程添加成功');}
}

6. 创建路由

在 routes/web.php 中定义路由：

use App\Http\Controllers\CourseController;Route::get('/courses', [CourseController::class, 'index'])->name('courses.index');
Route::get('/courses/create', [CourseController::class, 'create'])->name('courses.create');
Route::post('/courses', [CourseController::class, 'store'])->name('courses.store');

7. 创建前端页面

在 resources/views/courses 目录下创建 index.blade.php 和 create.blade.php。

index.blade.php 示例：

@extends('layouts.app')@section('content')<h1>课程列表</h1><a href="{{ route('courses.create') }}">添加新课程</a><ul>@foreach($courses as $course)<li><h2>{{ $course->title }}</h2><p>{{ $course->description }}</p><img src="{{ asset('storage/' . $course->cover_image) }}" alt="{{ $course->title }}"></li>@endforeach</ul>
@endsection

create.blade.php 示例：

@extends('layouts.app')@section('content')<h1>添加新课程</h1><form action="{{ route('courses.store') }}" method="POST" enctype="multipart/form-data">@csrf<div><label>标题</label><input type="text" name="title" required></div><div><label>描述</label><textarea name="description" required></textarea></div><div><label>封面图片</label><input type="file" name="cover_image" required></div><button type="submit">提交</button></form>
@endsection

上线与优化

项目开发完成后，下一步就是部署上线，这一步非常重要，稍有不慎可能会导致网站无法访问，或者数据丢失。

1. 部署到阿里云服务器

我们使用阿里云的 ECS 服务器，系统选择 Ubuntu 20.04，部署流程如下：

登录阿里云控制台，创建一台 ECS 实例，选择合适的配置（如 1 核 2G 内存）。
绑定域名，备案完成，确保域名解析正确。
在 ECS 实例上安装 Apache 或 Nginx，这里我们使用 Nginx。

安装 Nginx 的命令：

sudo apt update
sudo apt install nginx

配置 Nginx 的站点配置文件（如 /etc/nginx/sites-available/training-site）：

server {listen 80;server_name yourdomain.com;root /var/www/training-site/public;index index.php index.html index.htm;location / {try_files $uri $uri/ /index.php?$query_string;}location ~ \.php$ {include snippets/fastcgi-php.conf;fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;}
}

启用站点：

sudo ln -s /etc/nginx/sites-available/training-site /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

2. 安装 PHP 和依赖

在 ECS 上安装 PHP 8.1 和 Composer：

sudo apt install php php-mysql php-curl php-xml php-mbstring php-zip php-fpm
sudo curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

然后上传项目到服务器，并执行 composer install 安装依赖。