一个网页的制作过程

前言

近期学校老师下达了一个任务，要求我们为新校区制作一个精美的网页，但是报酬相当的“可观“--1学分，不算绩点。这任务让人无语，但是恰逢我很闲，于是我打算认真对待这件事，做一个前后端连同数据库都齐全的部署在公网上的网站。

选型

既然是挑战我的软肋，那就应该做一些我不熟悉的技术栈练手，询问大模型后我选择了以下技术：
前端: Vue3+ElementPlus 后端: Flask 数据库: PostgreSQL
都是主流的久经考验的技术栈，相信在这次开发中能学到不少东西

开发

网页相关文件

环境搭建

首先要安装node.js ,然后终端运行

npm init vue@latest YOUR-FOLDER-NAME

随后安装

npm install element-plus

这样一个简单的脚手架就搭建好了，随后在刚才建好的文件夹下终端运行npm run dev即可在本地端口5173上看见自己创建好的网页。
1749702000472.png
一个简单的网页就有了，下一步就是选择自己喜欢的ide，我喜欢vscode，于是就去vscode安装插件Vue-Offical，还有一些其他的插件。

写.Vue文件

随后便可以对vue文件进行大刀阔斧的改版了，我在这里还被困住了，如上图所示，通过npm init创建的示例项目默认把网页分成了左右两个部分，我开发这里时不知道，傻傻改了半天，最后才发现main.css中#app块的最大内边距设置有误，有坑。
Snipaste_2025-06-13_17-07-32.png
先来介绍一下vue文件夹的目录结构，

  • .vscode文件夹下是vscode ide的配置文件，一般情况下不需要更改这里的内容
  • dist文件夹下是npm run build生成的网页部署文件，包含css js html，其实vue干的就是这个，把一堆其他文件翻译为html js css
  • public文件夹下是一些根目录的文件，我只放了网页图标进去
  • src文件夹是接下来重头戏，放网站的资源文件
    Snipaste_2025-06-13_17-16-06.png
    assets文件夹一般放一些静态资源文件，如图，全局css文件等。
    components文件夹放一些写好的全局都可以用到的vue组件，我这里写了滚动字条带（marquee），轮播图（banner），和地球（cesiumearth）。
    router文件夹下放路由文件index.js具体规定了哪个页面路由（如/intro）该去哪里获取它的显示文件。
    views文件夹下放不同的被路由的网页页面，访问对应路由部分时会来找他们，如Intro.vue访问yourdomain.com/intro时，就是访问该文件，名字可以任意取，在index.js里写好对应关系即可
    剩下app.vue和main.js两个文件，前者也是个页面，在main.js里挂载为了网页入口，而main.js则是包含了一些引入库和启动设置。
  • 根目录下.git开头的是git版本管理文件
  • index.html是传统网页的入口文件，但是看它内容也知道，它只规定了入口，和一些标题，图标。所有的网页呈现部分都是通过main.js呈现的
  • package.json顾名思义，管理包的
  • vite.config.js和jsconfig.json是Vite的配置文件，为上述示例页面提供一个好用的开发者工具，方便定位问题

一个vue文件由三部分组成，分别是html代码部分，js部分和css部分，对应编写相关内容就能管控网页上会出现的内容，具体内容我肯定讲的没有网上教程好，想了解就移步其他网站吧。

写.py文件

由于使用了flask，开发异常快捷，运行也非常容易，直接python app.py后端就启动了，现在功能较少，未来添加更多功能也容易，主要就是两个接请求的路由

@app.route("/api/visit/personal", methods=["POST"])
@app.route("/api/visit/company", methods=["POST"])

在对应路由收到对应请求后做某个操作。

数据库开发

本次用到的数据库功能比较简单，只有INSERT操作，在后端写好

    INSERT INTO company_visits
    (company_name, contact_name, contact_position, phone, purpose, cooperation_intention, visit_date, visit_time)
    VALUES (%s, %s, %s, %s, %s, %s, %s, %s)

后基本就不用管数据库。postgresql安装如下，下载地址,windows下安装一路下一步即可，确保pgAdmin4安装即可（这是postgresql数据的gui管理工具），配置好端口使其在工作就能干活。
随后打开pgAdmin4链接数据库，创建一个新数据库，两张新表

-- 个人预约表
CREATE TABLE personal_visits (
  id SERIAL PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  phone VARCHAR(20) NOT NULL,
  purpose TEXT NOT NULL,
  visit_date DATE NOT NULL,
  visit_time VARCHAR(50) NOT NULL,
  created_at TIMESTAMP DEFAULT NOW(),
  status VARCHAR(20) DEFAULT 'pending'
);

-- 企业预约表
CREATE TABLE company_visits (
  id SERIAL PRIMARY KEY,
  company_name VARCHAR(200) NOT NULL,
  contact_name VARCHAR(100) NOT NULL,
  contact_position VARCHAR(100) NOT NULL,
  phone VARCHAR(20) NOT NULL,
  purpose TEXT NOT NULL,
  cooperation_intention TEXT,
  visit_date DATE NOT NULL,
  visit_time VARCHAR(50) NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

就完成了

测试和打包

写网站过程中在终端运行npm run dev即可实时运行网页，做出修改也会及时同步到网页上，非常方便。
打包更是简单，直接npm run build就会生成网站文件到dist文件夹下，把这个复制到服务器上写个nginx配置即可运行，简单快捷。

部署

笔者使用的是debian amd64服务器，所做部署也全部以我的机器为准。

前端

首先安装nginx，一个强大的托管网页的软件。

sudo apt update
sudo apt install nginx -y
sudo systemctl enable nginx  # 开机自启
sudo systemctl start nginx   # 立即启动

由于运行网站的html css js文件以及相关文件已由npm run build生成，我们仅需配置一个nginx网页服务器，将请求反向代理到网页在的文件夹即可。
我使用/etc/nginx/conf.d/anyname.conf配置

root /home/cloud/aitianhua;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }

最重要的部分，让外界请求知道这里有个网页即可。
随后把dist目录下的网页文件放在指定目录，上文nginx配置有提到，将CA机构颁发的SSL证书（.pem 和 .key）也放在安全的地方，为了避免可能的安全问题，坏人可能会访问到不该访问的东西，需要缩紧权限

sudo chown -R www-data:www-data /home/cloud/aitianhua  # 赋权给 Nginx 用户

随后测试nginx语法，重载后运行即可启动网页服务器，配有基本的安全防护。

# 检查配置语法
sudo nginx -t
# 重载配置
sudo systemctl reload nginx
# 查看错误日志（实时监控）
sudo tail -f /var/log/nginx/error.log

后端

.py直接复制到需要的地方使用pip install -r requirement.txt安装依赖，建议使用venv以避免和系统环境冲突，然后后即可python app.py运行后端，但是官方不推荐这种用法，因为没有并发，默认单线程等。推荐gunicorn运行gunicorn -w 4 -b 0.0.0.0:8000 app:app。为了避免后端使用http被人窃取信息，也需要过一遍nginx反代。

数据库

数据库安装较为容易，apt install即可apt install postgresql，觉得不安全可以相应更改数据库默认的端口(5432)。
更改默认用户密码（觉得不安全也可以自行创建用户，我这里偷懒了）

sudo -u postgres psql
ALTER USER postgres WITH PASSWORD 'YOUR_PASSWD';
\q

安装webui管理界面pgadmin4 ，参阅官方教程
简单，但是也有坑，比如apt不支持除amd64以外的架构，还有pgadmin4-web默认使用apache服务代理请求，apache默认端口是80和我们上述nginx的服务冲突了（80是http服务的默认端口），需要把这个端口改成别的，随后便可以访问pgadmin4-webui查看数据库中的数据。