需求分析
项目提出背景及原因
在当今的互联网时代,网民覆盖率增加,一个企业拥有一个属于自己的正式的网站意味着拥有更多的用户线索,有利于提升企业业务。
就像现在去买一个产品或者去了解一家公司,最先想到的多是去上网查一查,而不说先去公司、工厂实地去考察。所以一个企业拥有属于自己的网站,不仅可以增加企业曝光,树立品牌形象;还能更好地呈现企业产品或服务,它有着举足轻重的作用。
项目优势
- 该网站具有单页、文章、图文等类型,可任意创建多个频道栏目; 不同栏目可设置使用不同的模版,网站建设界面更丰富多彩。
- 除了静态HTML网页,我们实现了企业内部人员可自主管理网站的管理系统,企业人员可通过登录自己的账号对用户访问也=页内容进行增删改查,减少企业外聘相关开发人员的成本,而管理页设计也简单明了,易于企业内部人员上手管理。
主要功能
展现企业文化与企业特色,向用户详细介绍企业产品与实现企业可自主管理企业网站内容的增删改查
概要设计
顶部设置了导航栏,其中包含产品与服务、新闻中心、登录三个部分
-
产品与服务
以轮播图为网站主页介绍企业产品 -
新闻中心
内部包含模糊查询搜索框与最新动态、典型案例、通知公告三种分类的文章分块,主要发布企业的相关资讯与企业精神,企业文化等有助于用户了解企业动态 -
登录——管理系统
该项目的重点在于便在于登录界面后面的管理系统,管理员可以登录自己的专属账号后对产品内部的各部分内容进行增删改查,实现可扩展性
其中,管理系统内部还分为了首页,用户管理与新闻管理三部分
首页:
首页中介绍了该管理员的id信息与他发布内容的相关状况
用户管理:
用户管理还细分了用户列表与添加用户的功能,新添加的用户可以在用户列表中更新出现;
用户列表中还设置了删除用户的功能按钮,被删除的用户无法再登录管理系统。
新闻管理:
新闻管理设计了与用户管理同样的管理模式,其下细分了创建新闻与新闻列表,特别地新闻列表中,除了删除功能,增加了预览与更新功能,可以借此预览未来发布的新的新闻,检查是否满意,不满意的话也可以通过更新功能修改新闻详情。
详情设计与技术实现
模糊搜索功能
为搜索框添加input事件,判断新闻列表中有无输入关键字内容调整display,如果是空字符就隐藏列表,回到原始状态
从登录页面通过账号进入后台管理系统
主要运用动态加载和共用代码片段fetch方法
编辑数据,列表会响应更新
主要运用事件委托添加点击事件,添加后用put更新再重新渲染列表