手机自助建网站全流程实战：不找公司也能搞定，附源码下载

找建站公司怕被坑高价？别傻了，现在手机自助建网站已经能搞定，关键还能自己掌控成本，不用被外包公司“坑”走大把预算。本文就是我亲自操作的一个手机自助建网站案例，从零开始，带你一步步看懂怎么用开源工具和免费资源完成整个建站流程，还能顺便搞到源码下载，不怕以后要改功能。

项目背景与需求

去年，我帮一个朋友做了一个小型的教育培训网站，定位是在线继续教育课程销售。他们之前用过建站公司，结果被多收了几万块，而且功能根本不全，连课程分类都不支持。这次他们明确说：“不要找公司了，自己搞定。”

项目需求其实挺清晰的，但对非技术人员来说还是有点挑战：

需要支持手机端浏览，响应式设计是必须的；
要能上传课程视频和资料，支持会员购买功能；
前台需要有课程分类、搜索、用户注册登录；
后台要有管理课程、用户、订单等功能；
安全性要求中等，但必须支持SSL证书；
服务器部署要简单，不希望被“坑”钱。

当时我们考虑过几个开源系统，比如WordPress和DedeCMS，但因为需要会员系统，最终选择了Laravel+Vue的架构，前后端分离，部署起来灵活，而且有GitHub的开源仓库支持，源码下载方便，不怕后期被“卡脖子”。

技术选型：开源是关键

后端选型：Laravel + MySQL

我们选择了Laravel作为后端框架，主要原因有几个：

社区活跃：Laravel的生态很成熟，文档和教程非常多，遇到问题基本能直接搜到答案；
自带ORM：数据库操作简单，特别是对MySQL支持很好；
可扩展性强：比如会员系统、支付接口、邮件通知等功能，Laravel都有现成的包可以集成；
GitHub开源仓库多：比如Laravel的官方仓库、Laravel Passport（OAuth2认证）等，源码下载后可以直接使用或修改。

数据库方面，选择了MySQL，主要是因为成本低，而且兼容性好，支持云服务器和本地部署。

前端选型：Vue.js + Vuetify

前端我们用的是Vue.js，理由也很简单：

轻量且易上手：对非前端开发者来说，Vue的学习曲线比React更平缓；
组件化设计：适合做模块化页面，比如课程列表、搜索框、登录框等；
Vuetify组件库：这个组件库是基于Material Design的，样式统一，而且文档清晰，适合快速搭建页面；
响应式设计：Vue + Vuetify天然支持移动端和PC端适配，省去了很多自定义代码。

服务器与部署：宝塔面板 + Nginx

部署方面，我们选择了宝塔面板，主要原因：

图形化操作：对非技术用户非常友好，可以一键部署网站、安装SSL证书、配置伪静态等；
支持多种语言：PHP、Python、Node.js等都支持，方便后期扩展；
自带防火墙和安全防护：比一般的VPS系统更安全；
免费资源：对于中小网站来说，用宝塔面板成本低，而且社区支持好。

另外，我们用到了Nginx作为反向代理，用于负载均衡和静态资源分离，提升网站访问速度。

核心实现：代码片段与功能模块

用户注册与登录模块

在Laravel中，我们使用了Laravel Passport来进行OAuth2认证。下面是创建用户模型和认证接口的代码片段：

// User.php 模型
namespace App\Models;use Illuminate\Foundation\Auth\User as Authenticatable;class User extends Authenticatable
{protected $fillable = ['name', 'email', 'password'];
}

// AuthController.php
namespace App\Http\Controllers;use Illuminate\Http\Request;
use App\Models\User;
use Laravel\Passport\Client as OAuthClient;class AuthController extends Controller
{public function register(Request $request){$user = User::create(['name' => $request->name,'email' => $request->email,'password' => bcrypt($request->password)]);return response()->json(['token' => $user->createToken('MyApp')->accessToken], 201);}
}

这段代码实现了注册功能，用户注册后会自动生成一个OAuth2 token，用于后续接口调用。

课程管理模块

课程管理模块主要是后端处理数据，比如创建课程、上传资料、设置价格等。下面是课程模型和后台接口的代码：

// Course.php 模型
namespace App\Models;use Illuminate\Database\Eloquent\Model;class Course extends Model
{protected $fillable = ['title', 'description', 'price', 'video_url', 'pdf_url'];
}

// CourseController.php
namespace App\Http\Controllers;use Illuminate\Http\Request;
use App\Models\Course;class CourseController extends Controller
{public function index(){return Course::all();}public function store(Request $request){$course = Course::create(['title' => $request->title,'description' => $request->description,'price' => $request->price,'video_url' => $request->video_url,'pdf_url' => $request->pdf_url]);return response()->json($course, 201);}
}

这些接口可以被Vue前端调用，用来展示课程列表和上传新课程。

前端页面：课程列表与搜索

前端页面用Vue.js实现，下面是课程列表与搜索功能的代码片段：

<template><div><input v-model="searchQuery" placeholder="搜索课程" /><div v-for="course in filteredCourses" :key="course.id"><h3>{{ course.title }}</h3><p>{{ course.description }}</p><p>价格: {{ course.price }}</p></div></div>
</template><script>
export default {data() {return {searchQuery: '',courses: []};},mounted() {this.fetchCourses();},methods: {async fetchCourses() {const response = await fetch('/api/courses');this.courses = await response.json();}},computed: {filteredCourses() {return this.courses.filter(course =>course.title.toLowerCase().includes(this.searchQuery.toLowerCase()));}}
};
</script>

这段代码实现了课程列表展示和搜索功能，用户输入关键词后，会自动过滤显示匹配的课程。