电子机箱网站建设报告：免费工具帮你省下建站公司一周时间

改个需求建站公司拖一周，你是不是也遇到过这种情况？客户改个按钮颜色，结果整个项目进度都被耽误，建站公司三天不回消息，你只能干着急。这不，我们最近刚做完一个电子机箱行业的网站建设，客户也是被拖得够呛。还好我们手里有免费工具，全程自己搞定，不仅节省了时间，还省下了一大笔预算。

这次我们围绕【电子机箱网站建设报告】，从零开始还原整个流程，带你看看怎么用免费工具搞定网站，不被建站公司坑。

项目背景与需求

我们客户是一家做电子机箱定制的公司，主营军工级机箱、工业控制机箱和服务器机箱。他们之前用的是一个很老的网站，页面打不开，图片加载慢，搜索引擎完全没收录。他们想要一个全新的官网，用于展示产品、获取客户咨询、提升SEO排名。

需求清单

客户的需求非常明确，我们整理了一下，主要是以下几点：

官网需要展示产品目录，包含图片、参数、应用场景；
支持在线留言与咨询表单，方便客户直接联系；
移动端适配，响应式设计，适配手机、平板；
SEO优化，提升百度、谷歌搜索排名；
使用免费工具，尽量不依赖付费建站平台；
部署到阿里云服务器，保证网站安全和稳定性。

这个项目从需求整理到上线，我们总共用了不到一周，而如果交给第三方建站公司，至少需要一周以上时间，成本也至少要上万。那我们是怎么做到的？下面一步步来。

技术选型

选对技术栈，是建站效率的核心。我们这次选的是前后端分离架构，前端用 Vue.js + Vite，后端用 Node.js + Express，数据库使用 MySQL，部署用 阿里云服务器，并配合 Nginx 做反向代理和负载均衡。

为什么选择这些技术？

Vue.js：学习成本低，生态成熟，适合中小型项目；
Vite：构建速度快，开箱即用，比 Webpack 更轻量；
Node.js + Express：Node.js 是一个轻量级的后端框架，适合快速开发，Express 是 Node.js 的 MVC 框架；
MySQL：适合存储结构化数据，适合产品、用户、留言等数据；
阿里云：国内最可靠的云平台之一，支持 ICP 备案，提供免费 SSL 证书；
Nginx：做反向代理、静态资源缓存和负载均衡，提升网站性能和稳定性。

免费工具推荐

我们整个项目几乎都是用免费工具完成的，以下是我们用到的免费资源：

工具名称	用途	备注
Figma	UI 设计	免费基础功能足够使用
GitHub	代码托管	免费仓库和协作功能
Vite	前端构建	替代 Webpack，速度快
MySQL Workbench	数据库设计	免费版功能足够
Node.js	后端开发	完全免费
Nginx	服务器部署	免费开源
Cloudflare	CDN 加速	免费版已够用
阿里云官方文档	云服务器部署	提供详细操作指南

小贴士：阿里云官方文档里有详细的部署流程，非常适合新手入门。我们这次项目中，阿里云官方文档提供了从服务器购买、SSL 证书申请、ICP 备案到 Nginx 配置的全流程指导，非常值得参考。

核心实现（配代码片段）

这部分我们重点展示网站的核心模块：产品展示页、留言表单、响应式设计。

1. 产品展示页

我们用 Vue.js 实现了产品展示模块，数据从后端接口获取，支持分页、搜索、筛选。

Vue.js 代码示例：

<template><div class="product-list"><div v-for="product in filteredProducts" :key="product.id" class="product-item"><img :src="product.imageUrl" :alt="product.name"><h3>{{ product.name }}</h3><p>{{ product.description }}</p><button @click="contactSales(product)">联系销售</button></div></div>
</template><script>
export default {data() {return {products: [],searchQuery: ''}},mounted() {this.fetchProducts();},methods: {fetchProducts() {fetch('/api/products').then(res => res.json()).then(data => this.products = data);},contactSales(product) {// 调用后端 API，发送留言fetch('/api/contact', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ name: '客户', email: 'customer@example.com', message: `对产品 ${product.name} 感兴趣` })});}},computed: {filteredProducts() {return this.products.filter(product =>product.name.toLowerCase().includes(this.searchQuery.toLowerCase()));}}
}
</script>

2. 留言表单

表单模块是网站的核心功能之一，我们用 Node.js + Express 做后端接口，实现留言提交和展示。

Node.js 代码示例：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');app.use(bodyParser.json());let messages = [];app.post('/api/contact', (req, res) => {const message = req.body;messages.push(message);res.status(200).send('提交成功');
});app.get('/api/messages', (req, res) => {res.json(messages);
});app.listen(3000, () => {console.log('Server is running on port 3000');
});

3. 响应式设计

我们用 CSS Flexbox + 媒体查询 实现响应式布局，确保网站在不同设备上都能正常显示。

CSS 代码片段：

.product-list {display: flex;flex-wrap: wrap;gap: 20px;
}.product-item {flex: 1 1 250px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);padding: 15px;border-radius: 8px;
}@media (max-width: 768px) {.product-item {flex: 1 1 100%;}
}

这部分的实现，我们用到了 Vue Router 做页面跳转，Axios 做 API 调用，Vuex 做状态管理。整个前端项目结构清晰，模块化程度高，便于后期维护。

上线与优化

建站完成只是第一步，上线和优化才是关键。我们整个项目部署在阿里云服务器，使用 Nginx 作为反向代理，配合 Cloudflare 做 CDN 加速。

1. 服务器部署

我们在阿里云上购买了 1核2G 的 ECS 服务器，系统选择 Ubuntu 20.04，搭配 Nginx + Node.js + MySQL。

Nginx 配置示例（/etc/nginx/sites-available/default）：

server {listen 80;server_name yourdomain.com;location / {proxy_pass http://localhost:3000;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_cache_bypass $http_upgrade;}location /static/ {alias /home/ubuntu/project/static/;}
}