用我给出的下列条件写出代码 技术要求: Springboot+vue+elementui+mysql+mybatis 完成以下功能: 1、创建新闻表。(自定义表结构) 2、列表展示(按照日期倒序排序)。 3、分页展示。 4、按照新闻作者模糊查询新闻。
时间: 2024-02-10 18:08:09 浏览: 71
以下是一个简单的实现代码,仅供参考:
后端代码:
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> findAllByPage(int pageNum, int pageSize);
}
```
在NewsController.java接口中实现分页查询:
```java
@GetMapping("/list")
public PageInfo<News> list(@RequestParam(defaultValue = "1") int pageNum,
@RequestParam(defaultValue = "10") int pageSize) {
PageHelper.startPage(pageNum, pageSize);
List<News> newsList = newsDao.findAll();
return new PageInfo<>(newsList);
}
```
前端代码:
1. 列表展示
使用ElementUI的Table组件展示新闻列表:
```html
<el-table :data="newsList" 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="currentPage"
: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 {
newsList: [],
currentPage: 1,
pageSize: 10,
total: 0
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val
this.fetchData()
},
handleCurrentChange(val) {
this.currentPage = val
this.fetchData()
},
fetchData() {
axios.get('/api/news/list', {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize
}
}).then(res => {
this.newsList = 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.newsList = res.data
})
}
}
}
```
阅读全文