以下是一个简单的实现代码，仅供参考：
后端代码：
1. 创建新闻表
在
MySQL中创建名为news的表：
```sql
CREATE TABLE `news` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`author` varchar(255) NOT NULL,
`content` text NOT NULL,
`release_date` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
2. DAO层接口
定义NewsDao.
java接口：
```
java
public interface NewsDao {
List<News> findAll();
List<News> findByAuthor(
String author);
}
```
3. 新闻实体类
定义News.
java实体类：
```
java
public class News {
private Long id;
private
String title;
private
String author;
private
String content;
private Date releaseDate;
// 省略getter和setter方法
}
```
4. Controller层接口
定义NewsController.
java接口：
```
java
@RestController
@RequestMapping("/api/news")
public class NewsController {
@Autowired
private NewsDao newsDao;
@GetMapping("/
list")
public
List<News>
list() {
return newsDao.findAll();
}
@GetMapping("/search")
public
List<News> search(@RequestParam
String author) {
return newsDao.findByAuthor(author);
}
}
```
5. 分页功能实现
可以使用Mybatis分页插件
PageHelper实现分页功能。在pom.xml文件中引入
PageHelper依赖：
```xml
<dependency>
<groupId>com.github.
pagehelper</groupId>
<artifactId>
pagehelper-spring-boot-starter</artifactId>
<version>1.3.0</version>
</dependency>
```
在NewsDao.
java接口中添加分页查询方法：
```
java
public interface NewsDao {
List<News> findAll();
List<News> findByAuthor(
String author);
List<News> findAllBy
Page(int
pageNum, int
pageSize);
}
```
在NewsController.
java接口中实现分页查询：
```
java
@GetMapping("/
list")
public
PageInfo<News>
list(@RequestParam(defaultValue = "1") int
pageNum,
@RequestParam(defaultValue = "10") int
pageSize) {
PageHelper.start
Page(
pageNum,
pageSize);
List<News> news
List = newsDao.findAll();
return new
PageInfo<>(news
List);
}
```
前端代码：
1. 列表展示
使用ElementUI的Table组件展示新闻列表：
```html
<el-table :data="news
List" style="width: 100%" stripe>
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="author" label="作者"></el-table-column>
<el-table-column prop="content" label="内容"></el-table-column>
<el-table-column prop="releaseDate" label="发布日期"></el-table-column>
</el-table>
```
2. 分页功能实现
使用ElementUI的Pagination组件实现分页功能：
```html
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-
page="current
Page"
:
page-sizes="[10, 20, 50, 100]"
:
page-size="
pageSize"
layout="total, sizes, prev,
pager, next, jumper"
:total="total">
</el-pagination>
```
在Vue组件中实现相关方法：
```
javascript
export default {
data() {
return {
news
List: [],
current
Page: 1,
pageSize: 10,
total: 0
}
},
methods: {
handleSizeChange(val) {
this.
pageSize = val
this.fetchData()
},
handleCurrentChange(val) {
this.current
Page = val
this.fetchData()
},
fetchData() {
axios.get('/api/news/
list', {
params: {
pageNum: this.current
Page,
pageSize: this.
pageSize
}
}).then(res => {
this.news
List = res.data.
list
this.total = res.data.total
})
}
}
}
```
3. 按照新闻作者模糊查询新闻
使用ElementUI的
Input组件实现输入框，结合Button组件实现查询功能：
```html
<el-
input placeholder="请输入作者" v-model="searchAuthor" style="width: 200px"></el-
input>
<el-button type="primary" @click="handleSearch">搜索</el-button>
```
在Vue组件中实现相关方法：
```
javascript
export default {
data() {
return {
searchAuthor: ''
}
},
methods: {
handleSearch() {
axios.get('/api/news/search', {
params: {
author: this.searchAuthor
}
}).then(res => {
this.news
List = res.data
})
}
}
}
```
1万+
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
