基于VUE+DJANGO开发的前后端分离的官方网站系统带管理后台

发布于:2022-12-20 ⋅ 阅读:(241) ⋅ 点赞:(0)

前言

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

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

        


网站公告

今日签到

点亮在社区的每一天
去签到