微信小程序基于MySQL数据库的新闻列表页和详情页

### 微信小程序中使用MySQL数据库构建新闻列表页面和详细信息页面 #### 使用的技术栈 为了实现这一目标，通常会采用前后端分离的方式。前端部分由微信小程序负责展示逻辑，而后端则提供API服务来处理业务逻辑并访问数据库。根据提供的资料[^1]，后端可以选用Spring Boot框架配合MyBatis进行开发。 #### 后端搭建 - **项目初始化** 需要先创建一个新的Spring Boot工程，在`pom.xml`文件里加入必要的依赖项，比如spring-boot-starter-web, mybatis-spring-boot-starter 和 mysql-connector-java等。 ```xml <dependencies> <!-- Spring Boot Starter Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- MyBatis-Spring Boot Starter --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.0</version> </dependency> <!-- MySQL Connector Java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> </dependencies> ``` - **配置数据源** 修改application.properties或application.yml文件以适配本地环境下的MySQL服务器设置： ```yaml spring.datasource.url=jdbc:mysql://localhost:3306/newsdb?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC spring.datasource.username=root spring.datasource.password=password spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver ``` - **定义实体类与Mapper接口** 假设有一个名为News的文章表结构，则对应的Java Bean如下所示: ```java public class News { private Integer id; private String title; private Date publishDate; private String content; // getter and setter methods... } ``` 接着编写相应的Mapper接口用于执行SQL语句： ```java @Mapper public interface NewsMapper { @Select("SELECT * FROM news ORDER BY publish_date DESC LIMIT #{offset},#{limit}") List<News> selectAll(@Param("offset") int offset,@Param("limit")int limit); @Select("SELECT * FROM news WHERE id=#{id}") News findById(@Param("id")Integer id); // other CRUD operations... } ``` #### API设计 通过控制器暴露RESTful风格的服务给客户端调用： ```java @RestController @RequestMapping("/api/v1/news") public class NewsController { @Autowired private NewsService newsService; @GetMapping("") public ResponseEntity<List<News>> getAll(int page,int size){ Pageable pageable = PageRequest.of(page,size); return new ResponseEntity<>(newsService.findAll(pageable),HttpStatus.OK); } @GetMapping("/{id}") public ResponseEntity<News> getOne(@PathVariable(value="id") Long id){ Optional<News> optionalNews=newsService.findById(id); if(!optionalNews.isPresent()){ throw new ResourceNotFoundException("Not found the news with id "+id); } return new ResponseEntity<>(optionalNews.get(), HttpStatus.OK); } } ``` #### 小程序端集成 在小程序侧利用wx.request()发起HTTP请求获取JSON格式的数据，并将其渲染到界面上显示出来。 ##### 新闻列表页 (index.js) ```javascript Page({ data:{ list:[] }, onLoad:function(){ wx.request({ url:'https://yourdomain.com/api/v1/news?page=0&size=10', method:"GET", success:(res)=>{ this.setData({list:res.data}); } }) } }) ``` ##### 单条新闻详情页(detail.js) ```javascript Page({ data:{}, onLoad(options){ const {id}=options; wx.request({ url:`https://yourdomain.com/api/v1/news/${id}`, method:"GET", success:(res)=>{ this.setData(res.data); } }); } }) ```