某桥梁介绍网站程序|Vue3

项目结构与技术栈分析

1. 总体结构

• 根目录包含后端服务（Node.js/Express）、数据库（MongoDB）、以及前端工程（Vue 3）。

• 主要目录和文件：

  • ​index.js​：后端主入口，Express 服务。
  • ​frontend/​：前端 Vue 项目。
  • ​package.json​、frontend/package.json​：分别为后端和前端依赖管理。
  • 其他如配置、锁文件、node_modules 等。

2. 后端（Node.js + Express + MongoDB）

• 使用 express​ 搭建 RESTful API，mongoose​ 连接 MongoDB。

• 主要功能接口：

  • ​/api/home​：获取/保存首页内容（含桥梁介绍、统计、特色、联系方式、文章等）。
  • ​/api/users​：用户登录（仅有 admin 账号，密码明文存储，返回固定 token）。
  • ​/api/articles​：文章的增删改查（文章数据嵌套在首页内容中）。

• 启动时自动插入 admin 账号。

• 支持跨域（CORS）。

• 没有复杂的权限系统，仅用 token 简单校验。

3. 前端（Vue 3 + Vue Router + Axios）

• 采用 Vue 3，单页面应用（SPA）。

• 主要依赖：vue​、vue-router​、axios​。

• 目录结构：

  • ​src/views/​：页面组件，如首页、桥梁介绍、文章列表/详情、后台管理、登录等。
  • ​src/components/​：可复用组件（如 HelloWorld）。
  • ​src/router/​：路由配置，含路由守卫（后台页面需登录 token）。
  • ​src/assets/​、src/public/​：静态资源。

• 路由页面：

  • ​/​ 首页
  • ​/bridge​ 桥梁介绍
  • ​/article​ 文章列表
  • ​/article/:id​ 文章详情
  • ​/admin​ 后台管理
  • ​/admin/login​ 管理员登录
  • ​/search​ 搜索结果

4. 业务逻辑与功能

• 首页展示桥梁信息、统计、特色、联系方式、文章等。
• 文章管理（增删改查）在后台页面实现，需登录。
• 管理员登录后可编辑首页内容和文章。
• 数据全部存储于 MongoDB，结构简单，文章与首页信息同属一个集合。
• 前后端通过 RESTful API 通信，前端用 axios 请求数据。

5. 适用场景

• 适合桥梁、景区等宣传展示型网站，有简单的内容管理需求。
• 后台管理功能基础，适合小型项目或原型。

程序截图

首页

​​

后台登录页面

​​

后台页面

​​

文章列表页面

​​