某公司门户网站设计开发

这个文档作为一个历史demo模板，可以为开发常见的公司企业官网静态主页提供思路。

当前官网的问题

• 和大多数企业的官网一样，年久失修。
• 整体使用了bootstrap上的网页生成器通过sketch模板生成，非自己开发。
• 网站是纯静态内容，没有后台管理界面和数据库，无法让运维人员来定制化。
• xxxxx.com响应缓慢，由于模板体积臃肿，且某境外CDN导致整体堵塞。
• 网页存在诸多bug和UI问题，例如图标缺失，搜索框无用，地图报错，滚动效果卡顿等。
• 新闻板块跳转微信公众号，无人维护，有些文章已被删除；产品服务板块链接无效。
• 许多强制使用前端脚手架，对于恶心框架的开发者来说，可以一直用vanilla来写，最后想办法临时转换成vue项目交给老板，这里我使用vue多页面MPA项目结构来设计的。

新版整体设计思路

• 根据要求，网站整体架构选型对齐常用的技术栈：前端基于Vite+Vue3，后端基于NodeJS和Mysql8。前端原型图（蓝湖）地址：https://lanhuapp.com/link/#/invite?sid=xxxxxxxxxx。
• 数据库和文件系统混合存储：mysql存储访问量等数据，文件存放图片、菜单列表（JSON）等。
• 对于图文并茂的文章（如产品详情、新闻）可以考虑后台上传超文本（如 pptx、pdf）存储，后端（或前端）解析成HTML，避免整体一张大图占用流量，也避免了文章格式设计的复杂度。
• 代码部署运行在腾讯云服务器上，可选择腾讯云CDN服务加速。后台日志系统可以考虑调用腾讯云官方API。
• 公司的域名建议申请购买SSL证书，让网站上HTTPS，有助于后台管理员密码安全。
• 考虑到此官网比较简单，后续可以考虑采用原生前端开发，逐渐移除前端框架。（推荐）
• 新闻板块应该从公众号API读取并渲染，不需要后台存储，维护公众号内容即可。
• 合作厂商、荣誉证书等图片展览属于只读（read only）板块且更新频率较低，有多种宽高比的图片需要排版，主要需求包括排列、自适应、超链接、图片压缩等。有多种设计模式可研究。

门户网站子页面

• 首页：广告栏（跳转产品或服务）、关于我们、产品列表、合作中心、新闻资讯。
• 服务案例：服务范围、服务特点、服务案例（跳转产品详情）。
• 关于我们：企业介绍、企业文化、荣誉资质。
• 新闻资讯：新闻列表（跳转各个新闻详情）。
• 新闻详情：某个新闻的详情页。
• 产品详情（多个）：产品概述、产品特点、主要功能、应用领域。
• 顶部栏、底部栏：所有页面共享的顶部菜单（各种跳转）、底部栏（联系我们）。

后台管理平台

• 登录页：管理员登录界面。
• 首页：访问量、访问趋势、浏览量排名、快捷操作、运营状态。
• 资讯管理：新闻列表的增删改查。
• 产品管理：产品和服务（服务包括产品）列表的增删改查。
• 广告管理：门户首页轮播大图列表的增删改查。
• 荣誉资质管理：门户“关于我们”详情页下的“荣誉资质”列表的增删改查。
• 系统设置：管理员角色和用户的管理。

用户数据表

资质数据表

广告数据表

新闻数据表（类似产品列表）