前言

        每个企业都有开发一个官方网站的需求，用于展示企业的产品和服务，企业的文化宗旨和品牌形象等，并要求网站有比较强的自由定制的功能。为此，我开发了这款官方网站系统，自带轻便的管理后台，在后台简单修改下每个模块的信息，前端刷新即可展示，不用二次开发，非常方便快捷。目前版本1.0，后续会继续更新维护。

网站动图：

后台部分截图：

        此官网系统几乎涉及了所有前后端开发的各项知识，搞明白这套系统，您就可以成为一个非常合格的WEB全栈开发程序员了。

功能模块

        网站分页头，页脚和Body三部分。其中页头和页脚在每个页面都有，所以直接写在了app.vue中。剩余的Body部分由各个页面填充。

首页

•         首先第一部分是轮播图，单位使用了vh和vm,用于全屏展示一些大的广告图片。
•         然后是产品介绍模块。右上方加载的是所有的产品分类，点击每一个产品分类会自动加载当前分类最新的6项数据。

       点击任意一个产品，会跳转到产品详情页面。

 产品详情页面使用富文本字段，方便自定义内容，使产品介绍更丰富生动。

•  接着是品牌介绍模块。

 品牌介绍文本和右侧图片都是可以自定义的，后台可直接修改的。

•  数据展示模块。

 数字，单位，短文本都是后台可以直接修改的。

•  新闻动态模块。分左右两部分，左侧1条展示新闻图片，右侧3条不展示图片。

 同样的，新闻详情使用了富文本编辑器，方便编辑精美的新闻内容。

•  团队介绍模块。采用了小的轮播图方式展示。

 同样支持后台一键修改，方便快捷。

•  服务客户模块。

 同样支持客户信息的自定义。

•  页头模块。

 logo和公司名称支持后台自定义信息的修改。

 导航也支持自定义排序和自定义文本。

•  页脚模块。

 支持自定义的信息就更多了。左侧公司信息和联系方式，右侧痘印和威信公众号图片，下方的备案信息都支持自定义。

 导航栏

产品服务

        使用了elementui的分页器组件，结合后端的django接口，实现了自动分页的功能，每页最多展示6条信息，多余的信息放到下一页展示。

        BANNER图片可更换。

 品牌介绍

        BANNER可更换。

        下方品牌详情介绍同样支持富文本编辑器。

 团队介绍

         BANNER可更换。

        团队人员信息可在后台一键修改。

新闻动态

        BANNER可更换。

        同样采用了分页器，每页最多展示6条信息，多余的信息放到下一页展示。

 联系我们

        BANNER可更换。

        联系信息可后台自定义。

 地图跳动的红点支持前端打包前自定义经纬度，方便客户找寻公司地址。

 关于部署

        支持nginx+docker+mysql容器方式极速部署，后期运维方便。

结语

        看似简单的网站系统，对于全栈开发新手来说可以说是一步3个坑，因为各种难点解决起来可以说是九九八十一难，想精通全栈开发没有个几年坚持不懈的钻研很难搞定。譬如跨域问题,docker部署时的404问题，但是项目做多了也就轻车熟路了。

        想要这款系统的可留言给我，不免费哦，可帮您部署和后期运维，以及进一步开发完善。

        网站体验地址：福瑞斯丁网络科技工作室-专注PYTHON开发

        有任何问题可加我威信，注明来意。