某桥梁介绍网站程序|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. 适用场景
- 适合桥梁、景区等宣传展示型网站,有简单的内容管理需求。
- 后台管理功能基础,适合小型项目或原型。
程序截图
首页
后台登录页面
后台页面
文章列表页面
阅读剩余
THE END