首页 > 其他分享 >[原创精品]基于Springboot+Vue的新闻门户网站、新闻管理系统、新闻资讯网(仿央视网等)

[原创精品]基于Springboot+Vue的新闻门户网站、新闻管理系统、新闻资讯网(仿央视网等)

时间:2024-09-02 20:25:42浏览次数:12  
标签:1.4 Vue Springboot 新闻 点击 详情页 管理员 跳转

项目提供:完整源码 + 数据库sql文件 + 数据库表Excel文件

1、项目功能描述

本项目为双角色,用户和管理员,用户使用前台,管理员使用后台。

1.1 注册

注册功能:填写用户名、密码进行注册。(“我已阅读同意《隐私政策》和《服务条款》”没有做后续,只是单纯有这样一行文字做模拟)

1.2 登录

登录功能:填写你所注册过的账号和密码进行登录。(“我已阅读同意《隐私政策》和《服务条款》”没有做后续,只是单纯有这样一行文字做模拟)

1.3 前台界面

本系统在UI设计上对新华网、中国新闻网等多家耳熟能详的大型网站进行模仿。呈现出更贴近现实的新闻网站。

1.3.1 平台首页

登录进入新闻网站首页,分为三部分,最上面为[要闻轮播],通过管理员后台设置新闻状态来决定哪些新闻会在“要闻”处显示。

该轮播展示图片、标题和简介,可通过显示的切换箭头来手动控制要闻的切换,也可以等待自动更换。(间隔时间可自行修改,当前为 :interval="5000"

点击标题或简介部分,可以跳转至新闻的详情页。

中间部分是广告专区,该部分为不可切换的轮播状态,同时也通过管理员手动设置哪些启用。

点击该广告,可以跳转到后台设置的广告链接处,例如点击新华网美好人居,跳转为如图所示:

底部为 专题·活动 部分,该部分将后台设置的所有专题活动进行从左到右的播放状态,每次递增一个,每组4个,当专题活动少于等于4个时,不进行轮换。轮换每三秒进行一次。

点击封面或标题,可以进入专题活动详情页。

底部为评论区,可以进行级联评论、多级嵌套。

1.3.2 新闻中心

新闻中心,首先对新闻进行分类处理,点击不同分类显示不同分类下的新闻,设置分类以及设置新闻所属分类都是后台管理员进行操作。该页面左侧为新闻列表,右侧为新闻热榜,都可以进行点击跳转详情页事件。

新闻列表和热榜的样式分别参考了央视网新闻频道的列表浏览和中国新闻网的中新热榜。

点击进入新闻详情页

点击左上角分类处,可以直接退回到新闻中心的对应分类下。

新闻内容结束后,下方提供三个选项,分别为返回平台首页、返回新闻中心、平台热线。两个返回选项不多做赘述,即立即跳转对应页面。

点击平台热线,进入该页面,该页面仿照央视网的 望海热线征集(文案也取自这里)。

点击留言反馈,可填写留言内容,标题和内容都要填写。

输入内容后,点击确定则留言成功,下方点击查看过往留言,显示从右往左开的留言抽屉表。

再次回到详情页,最下放为 按照发布时间选取的,刨除当前新闻的4条最新的新闻内容。

实现了详情页内跳转详情页。

1.3.5 个人中心

支持基础个人信息修改和密码修改的同时,将平台热线留言反馈也隐藏在这。

个人信息

修改密码:

留言反馈:

1.4 后台界面

登录管理员账号 admin 密码 admin

进入主页(主页非功能页,但不可删除,购买源码后可自行增删主页中的内容!)

1.4.1 新闻管理

新闻管理,新闻的增删改查,需要管理员控制“是否推荐”开关,进行要闻的推荐。

添加的分类是通过分类的id多表关联查询。

1.4.2 分类管理

为新闻的筛选提供分类选项,所有分类都可以由管理员自行规定,满足基础的增删改查。

1.4.3 广告管理

管理员设置首页广告的信息,并可以选择该广告是否启用。

在新增时候,需要上传图片,填写该广告名称便于查询,以及跳转链接用于前台首页的点击跳转事件。

1.4.4 评论管理

可以查看平台内评论内容,允许删除评论,考虑一般现实场景中评论都是用户自发发出,故不设置编辑和新增。

1.4.5 专题管理

管理员添加新闻专题活动,用户可在首页查看

1.4.6 留言反馈管理

管理员查看用户提交的留言观点等信息,可以进行删查。

1.4.8 系统管理

用户管理:可以由管理员对用户进行增删改,可以通过上方四种搜索条件进行查询,即角色、昵称、地址、邮箱查找


角色管理:菜单分配(主页不可分配给用户,且管理员必须分配主页)

菜单管理:后台菜单

文件管理:系统中被上传的文件都会在此记录

1.4.9 修改个人信息

管理员也可以进行个人信息的修改,以及密码的修改

2、项目技术栈

操作系统: Windows10/11

开发工具:IDEA

系统架构: 前后端分离B/S架构

后端: SpringBoot+Mybatis-Plus

前端: Vue+ElementUI+Axios

数据库: Mysql5.7/8.0

3、项目创新点

(1)精美的前台页面布局设计,仿照现实中的新闻网站设计

(2)巧妙的数据库动态关联数据,多表数据关联查询

(3)点击当前页面左上角后台管理系统左边的 LOGO 在右边的弹窗当中可以选择系统后台的主题色和界面布局

其他:所有原创项目均支持二次开发,如添加功能、添加创新点,支持一对一腾讯会议讲解,另可定制项目(定制项目包含源码➕部署),所有细节扫码联系本人沟通。

项目:

标签:1.4,Vue,Springboot,新闻,点击,详情页,管理员,跳转
From: https://blog.csdn.net/jmynb/article/details/141829006

相关文章

  • vue3+TS+vite实现瀑布流列表
    安装依赖npminstallvue-waterfall-plugin-nextvue文件中引入使用<scriptsetuplang="ts">import{RouterLink}from'vue-router'import{Waterfall}from'vue-waterfall-plugin-next'import'vue-waterfall-plugin-next/dist......
  • Vue 2 与 Vue 3 中 keep-alive 组件的深入解析
    更多内容前往个人网站:孔乙己大叔        在Vue.js的开发中,keep-alive 是一个非常重要的内置组件,它允许我们将组件状态或实例保持在内存中,避免重新渲染和重新创建组件,这对于需要频繁切换但内容较为复杂的组件场景非常有用,如标签页、列表项的详细视图等。Vue2和V......
  • vue2项目中使用webworker(二):导出Excel
    需求有的时候我们导出的数据量很大,如果在主进程中操作的话可能会导致页面卡顿的问题代码App.vue<template><divclass="app"><button@click="exportExcel">导出Excel</button></div></template><script>importExcelWorkerfrom......
  • 多媒体信息共享|基于SprinBoot+vue的多媒体信息共享平台(源码+数据库+文档)
    多媒体信息共享平台目录基于SprinBoot+vue的多媒体信息共享平台一、前言二、系统设计三、系统功能设计  系统前台功能模块后台模块实现四、数据库设计 五、核心代码 六、论文参考七、最新计算机毕设选题推荐八、源码获取:博主介绍:✌️大厂码农|毕设布道师,阿......
  • 档案|基于SprinBoot+vue的档案管理系统(源码+数据库+文档)
    档案管理系统基于SprinBoot+vue的档案管理系统一、前言二、系统设计三、系统功能设计 管理员功能模块实现学生功能模块实现四、数据库设计 五、核心代码 六、论文参考七、最新计算机毕设选题推荐八、源码获取:博主介绍:✌️大厂码农|毕设布道师,阿里云开发社区乘......
  • 使用Redis调用Lua脚本的方式对SpringBoot接口进行限流
    使用Redis调用Lua脚本的方式对SpringBoot接口进行限流使用Redis调用Lua脚本的方式对SpringBoot接口进行限流前言一、步骤1、自定义限流注解Limit.java,用于标注在需要限流的接口上2、编写限流类型枚举类LimitType.java3、编写限流具体实现类LimitAspect.java,通过AOP方式......
  • vue 遇到的问题 以后看一下
    <template>  <div>   <el-button@click="openMessageBox">打开MessageBox</el-button>   <el-button@click="updateMessageBoxContent">打开MessageBox</el-button>   </div> </template>......
  • yarn运行vue项目命令
    yarn运行vue项目命令1、安装yarnnpminstallyarn-g2、安装项目依赖:yarninstall3、运行开发服务器:yarnserve4、构建生产环境代码:yarnbuild5、运行单元测试:yarntest:unit6、运行端到端测试:yarntest:e2e7、检查代码质量和格式:yarnlint8、修复代......
  • Vue3的学习---12
    12.AJAX与Axios框架12.1AJAX基础12.1.1AJAX简介AJAX(AsynchronousJavaScriptandXML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过AJAX,网页应用程序能够快速地与服务器进行异步通信,从而提高用户体验。AJAX的工作原理:创建XMLHttpRequest对象:这是AJA......
  • 谈谈springboot中@Conditional相关注解
    @Conditional是一个元注解 @ConditionalOnClass(xx.class)这是用于修饰一个类的注解。它主要是让你的代码具有兼容性,如在多模块下common模块中有一些仅仅是部分其他模块依赖、需要配置的类(例如rabbitMQ配置类,我相信他不应该被全模块需要,但是他放在常用模块中依旧是最合适的)只......