千锋教育-做有情怀、有良心、有品质的职业教育机构

扫一扫进入千锋手机站

领取全套视频

关注千锋学习站小程序
随时随地免费学习课程

千锋项目站

400-811-9990

全国咨询热线

全球新闻发布系统

企业级全球新闻发布管理系统项目，实现从新闻创建，到新闻审核，
新闻发布，新闻下线完整业务链路。包含登录模块、权限管理、角色管理、
用户管理、新闻管理、分类管理、审核管理、发布管理、数据分析等模块。

功能数量10个
页面数量25个
接口数量30个
学习时长14天

立即体验开源源码开源文档在线咨询

业务流程核心功能 HOT 技术架构适学人群课程大纲 HOT 课研导师文档工具

业务流程

基于500强公司真实项目改造，实现完整新闻发布业务链路

核心功能

项目核心业务功能解读，真项目锻造真实战

登录模块
数据分析
权限管理
角色管理
用户管理
新闻管理
审核管理
发布管理

登录模块：不同用户登录后的界面和权限有所不同

数据分析模块分为几种类型：柱状图、饼状图、仪表盘等

权限管理：把一个个权限做成集合，每一个集合就是一个一个的角色。

角色管理：修改为某一个角色就会有对应的权限。不同的角色看到的界面和路由不同。

用户管理：可以对用户进行增、删、改、查，为用户分配相应的角色。

新闻管理：后台管理系统的主要业务，有新闻的标题、分类、主题内容，主题内容用的是富文本编辑器。

审核管理：编辑好的新闻，提交到审核模块，上级就可以审核批复。

发布管理：待发布、已发布

登录模块：不同用户登录后的界面和权限有所不同

技术架构

一站式应用React全家桶以及周边生态，完成核心业务内容，全力培养学员架构思维

基于 React, ReactRouter,Redux, React-Redux
全家桶实现功能组件以及业务模块开发
了解更多
基于 AntDesign 组件，react-tsparticles 模块
完成 UI 搭建，提升用户体验。
了解更多
基于react-draft-wysiwyg ，draft-js完成新闻
的富文本编辑器功能。
了解更多
基于echarts，实现热点新闻以及个人新闻发布的
数据分析图表展示功能。
了解更多

适学人群

哪些人群适合学习本项目？技能+实战一站式拔高测测你适合学吗>>

有HTML、CSS
相关技术基础学员

1对1辅导

有Javascript基础
相关技术基础学员

专属定制课

有React基础
相关技术基础学员

1对1辅导

熟悉React组件开发、组件通信
以及基础路由开发

领取试学名额

课程大纲

每个实战项目颗粒度拆分讲解，赋能React开发、企业级项目开发实战经验

第一章
项目启动
第二章
项目架构
第三章
权限管理模块
第四章
角色管理模块
第五章
用户管理模块
第六章
登录模块
第七章
路由权限模块
第八章
新闻管理模块
第九章
审核管理模块
第十章
发布管理模块
第十一章
数据可视化模块

能力目标

· 掌握React项目开发核心知识点

课程内容

· 项目创建与配置· 项目sass与反向代理

· 路由架构· 搭建路由· antd引入

知识点

· CRA配置与应用· 反向代理配置

· ReactRoute· antd组件库

能力目标

· 搭建前后端项目架构并完成基础布局渲染

课程内容

· layout布局· TopHeader组件

· SideMenu组件· 动态SideMenu

· JsonServer配置· 后端SideMenu

知识点

· antd顶层布局组件· JsonServer接口请求· 动态渲染组件

能力目标

· 完成权限管理功能

课程内容

· 权限列表-引入· 权限列表-树形表格

· 权限列表-删除· 权限列表-配置

知识点

· antd Table组件· axios 增删改查权限接口

能力目标

· 完成角色管理功能

课程内容

· 角色列表-引入· 角色列表-树形控件· 角色列表-权限分配

知识点

· antd Modal与树形组件· axios 增删改查角色接口

能力目标

· 完成用户管理功能

课程内容

· 用户列表-引入· 用户列表-表单组件

· 用户列表-添加用户· 用户列表-删除用户

· 用户列表-更新用户· 用户列表-筛选用户

知识点

· antd form表单组件· axios 增删改查用户接口

能力目标

· 完成登录功能

课程内容

· 登录页面-登录表单· 登录页面-粒子效果· 登录页面-权限校验

知识点

· react particle 粒子库· token校验

能力目标

· 完成动态路由权限功能

课程内容

· 路由权限-本地映射表· 路由权限-动态创建

· 路由权限-权限控制· 路由权限-进度条

知识点

· 动态路由组件渲染· nprogress进度条模块使用

能力目标

· 完成新闻管理功能

课程内容

· 撰写新闻-步骤条· 撰写新闻-表单

· 撰写新闻-富文本编辑器· 撰写新闻-提交

· 草稿箱-列表· 草稿箱-预览路由

· 草稿箱-预览新闻· 草稿箱-提交审核

知识点

· antd步骤条组· draft-js组件应用· 草稿箱业务

能力目标

· 完成审核管理功能

课程内容

· 审核管理-列表展示· 审核管理-列表功能· 审核管理-审核新闻

知识点

· antd 列表组件· 审核新闻业务· axios 增删改查审核接口

能力目标

· 完成发布管理功能

课程内容

· 发布管理-组件封装· 发布管理-自定义hook· 发布管理-功能实现

知识点

· 自定义hooks· axios 增删改查发布接口

能力目标

· 完成数据可视化功能

课程内容

· 首页数据展示-排版· 首页数据展示-数据

· 首页数据展示-柱状图· 首页数据展示-优化· 首页数据展示-饼状图

知识点

· echarts 柱状图以及饼状图使用· 新闻数据清洗以及处理

获取完整版课程大纲

课研导师

10年+前端造诣倾囊相授，原大厂架构精英，原大厂架构精英，为学员量身打造适合职业发展的全周期实战项目

陆荣涛

千锋数字智慧大前端教研总监

原去哪儿网前端高级架构师

20年IT从业经验。前去哪儿网前端架师，曾主导去哪儿网在线服务频道Hybrid App开发，负责架构组产品应用与推广。曾任海淀园电子政务高级产品经理及前端技术架构师，主导海淀区网站群建设、在线办公、海淀园OA系统交互设计与前端开发。Adobe最早一批ACCI认证讲师。擅长Node.js，React，Vue，Angular，Hybrid，RN，Flutter，Electron，数据可视化，微信小程序，鸿蒙APP开发等大前端技术，丰富的前端架构经验。曾发布《Webpack5学习指南》，《Vite学习指南》，《TS学习指南》，《DOM探索之旅》，《Node.js基础与实战》，《Angular基础与实战》，《M站开发实战》，《大数据可视化基础》，《Electron基础与实战》，《鸿蒙应用基础与实战》，《Avalon探索之旅》等视频教程，深受学生好评。

预约大咖指导获取免费教程

视频介绍

Kerwin

千锋数字智慧大前端教研员

前IBM大前端技术顾问

前IBM大前端技术顾问，获得IBM WORKLIGHT 跨平台移动应用高级开发者认证，致力于HTML5，Android，iOS移动应用开发以及多种基础平台整合的企业级解决方案。曾负责全球报销系统以及全球新闻发布系统等项目的研发，并行负责企业跨平台应用培训，帮助员工快速实现技术积累与储备。

预约大咖指导获取免费教程

视频介绍

千锋爱佛僧

千锋数字智慧大前端讲师

10年前端从业经验

北京千锋互联科技有限公司，HTML5前端金牌讲师。10年前端从业经验，多年互联网前端开发经验，曾参与开发多个大型互联网项目。精通全栈式开发，长期参与课程体系的设计制定与研究。全面拥抱全栈式开发，擅长Nodejs、MongoDB、React、Vue、Typescript等前后端开发技术。对多平台的跨端开发方案深有研究，采用uniapp、RN、Taro等跨端技术开发过成熟的商业应用。热衷于CocosCreator引擎进行跨端小游戏的开发。

预约大咖指导获取免费教程