VUE+SPRINGBOOT从0-1打造前后端-前后台系统-文章列表
在当今信息爆炸的时代，新闻管理系统成为了各类网站和应用的标配功能。本文将详细介绍一个基于Vue.js前端框架和Spring Boot后端框架的新闻管理系统的设计与实现过程。该系统不仅实现了基本的新闻增删改查功能，还包含了点赞、分页、搜索等实用特性。
系统架构
前端架构
Vue.js：作为前端主框架，提供响应式数据绑定和组件化开发
Element UI：提供丰富的UI组件，如表格、分页、输入框等
Axios：处理HTTP请求，与后端API交互
Vue Router：管理前端路由
后端架构
Spring Boot：快速构建RESTful API
MyBatis Plus：简化数据库操作
Hutool：提供Excel导出等实用工具类
核心功能实现
1. 新闻列表展示与分页
前端通过IndexNews.vue组件展示新闻列表，关键代码如下：
// 分页查询方法
selectListPage() {this.$http.post("/news/list_page", this.send).then(res => {if (res.data.code === "200") {this.send.total = res.data.object.totalthis.list = res.data.object.data} else {this.$message.error('查询失败，' + res.data.code)router.push("/login")}})
}后端对应的分页查询接口：
@PostMapping("/list_page")
public Res list_page(@RequestBody News news) {// 构建查询条件QueryWrapper<News> queryWrapper = new QueryWrapper<>();if (!MyUtils.blankFlag(news.getTitle())) {queryWrapper.like("title", news.getTitle());}if (!MyUtils.blankFlag(news.getContent())) {queryWrapper.like("content", news.getContent());}queryWrapper.orderByDesc("time");// 分页处理Integer total = Math.toIntExact(newsMapper.selectCount(queryWrapper));MyUtils.selectByPageManage(total, news);queryWrapper.last("limit " + news.getStart() + "," + news.getEnd());// 执行查询List<News> dataList = newsMapper.selectList(queryWrapper);// 返回结果HashMap<Object, Object> hashMap = new HashMap<>();hashMap.put("total", total);hashMap.put("data", dataList);return Res.success(hashMap);
}2. 新闻搜索功能
系统支持按标题和内容进行搜索：
运行
<el-input v-model="send.title" placeholder="标题"></el-input> <el-input v-model="send.content" placeholder="正文"></el-input> <el-button @click="selectListPage">搜索</el-button>
3. 点赞功能实现
用户可以为喜欢的新闻点赞：
add_praise(id) {this.send.id = idthis.$http.post("/news/add_praise", this.send).then(res => {if (res.data.code === "200") {this.$message.success("点赞成功");this.selectListPage();}})
}后端点赞接口：
@PostMapping("/add_praise")
public Res add_praise(@RequestBody News news) {News existNews = newsMapper.selectById(news.getId());existNews.setPraise(existNews.getPraise() + 1);newsMapper.updateById(existNews);return Res.success(null);
}4. 新闻管理功能（管理员权限）
管理员可以删除新闻：
<span v-if="user.role === '管理员'"><a @click="confirmDelete(item.id)"><i class="el-icon-delete"></i> 删除</a> </span>
对应的删除方法：
confirmDelete(id) {this.sendForm.id = idthis.$http.post("/news/delete", this.sendForm).then(res => {if (res.data.code === "200") {this.$message.success('删除成功')}this.selectListPage()})
}后端删除接口：
@PostMapping("/delete")
public Res delete(@RequestBody News news) {newsMapper.deleteById(news);return Res.success(null);
}技术亮点
1. 自定义滚动条样式
通过CSS实现了美观的滚动条：
.outer-scroll-container {&::-webkit-scrollbar {width: 2px;}&::-webkit-scrollbar-track {background: #f1f1f1;}&::-webkit-scrollbar-thumb {background: #888;border-radius: 4px;}
}2. SEO优化
通过Vue的head配置实现了SEO优化：
head() {return {title: '新闻列表 - 人工智能系统',meta: [{hid: 'description', name: 'description', content: '人工智能最新新闻动态和资讯'},{hid: 'keywords', name: 'keywords', content: '人工智能新闻,人工智能资讯,人工智能动态'},]}
}3. Excel导出功能
使用Hutool工具实现了Excel导出：
@GetMapping("/list_export")
public Res list_export(HttpServletResponse response) throws Exception {List<News> newsList = newsMapper.selectList(null);ExcelWriter excelWriter = ExcelUtil.getWriter(true);// 设置表头别名excelWriter.addHeaderAlias("id", "id");excelWriter.addHeaderAlias("title", "title");// ...其他字段excelWriter.write(newsList, true);// 设置响应头response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");String fileName = URLEncoder.encode("小说记录", "UTF-8");response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");// 输出流处理ServletOutputStream out = response.getOutputStream();excelWriter.flush(out, true);out.close();excelWriter.close();return Res.success(null);
}总结
本文详细介绍了一个完整的新闻管理系统的设计与实现过程。系统前端采用Vue.js+Element UI构建用户界面，后端使用Spring Boot提供RESTful API，数据库操作通过MyBatis Plus简化。系统实现了新闻的增删改查、分页展示、搜索过滤、点赞统计等功能，并针对管理员提供了新闻管理功能。
该系统架构清晰，代码规范，具有良好的扩展性和维护性。开发者可以根据实际需求进一步扩展功能，如增加新闻分类、评论系统、用户收藏等特性，使其成为一个更加完善的新闻平台。