前端笔记7.数据接口实现

版权声明：本文为博主原创文章，转载请声明原创网址。 https://blog.csdn.net/lagoon_lala/article/details/83549874

实现流程分析：

后台数据处理接口MVC

Module层DAO接口、Bean

StringBuilder如果能保证单线程，比StringBuffer性能更高

Request.setCharacterEncoding处理用户请求数据乱码

Response处理后台相应乱码

后台Jason生成工具（第三方库）

 

建立数据库，导入数据

Servlet中serialVersionUID：Java的序列化机制是通过判断类的serialVersionUID来验证版本一致性的。默认1L

用JSP模拟显示

Servlet中："http://localhost:8080/BackDemo/MovieDataServlet?pageNo="+this.state.pageNo,{method: "GET"}

可直接用浏览器看：http://localhost:8080/BackDemo/MovieDataServlet?pageNo=1

DBC DataBaseConnection更改数据库密码、DBURL连接数据库名

Bean（vo）

IMovieDataDAO为DAO接口：findAll(int pageNo, int pageSize)、getAllCount()

MovieDataDAOImpl实现：findAll查找所需页数据，pst.setInt设置sql语句中占位符含义，存储在List all

getAllCount：获得数据表总记录数

后台DAO部分完成后，通过Servlet来生成JSON格式的数据

response.setCharacterEncoding("gb2312");用gb2312浏览器默认直接看不会乱码

 

数据库连接jar包在Web-INF的lib下

工程文件下载链接（含fastJason、jdbc-connection驱动jar包）：https://download.csdn.net/download/lagoon_lala/10754409

 

笔记

1. 上次课程回顾

FlatList实现数据列表，可以上拉加载更多，下拉刷新。

调用远程已经编写好的接口，完成数据展示。

 

2、本次课程内容

2.1、远程数据接口实现

编写远程数据接口，都需要有一个服务器在支持，可以允许远程访问到这个服务器，并能够接收到服务器返回的结果。

 

这里就直接使用Tomcat + JSP来完成一个远程的数据接口。

 

这里先完成一个写死的JSON文件。

在Web项目的WebRoot/WebContent 目录下，建立一个 result.json 文件，在里面编写一段json内容。

这样就可以在手机端开始编写调用后台的操作了。测试收集模拟器通过IP地址，应该可以访问到服务器的代码。

{        "value":"Hello World",        "arr":[{            "id":1,            "title":"北京"        },{            "id":2,            "title":"上海"        },{            "id":3,            "title":"深圳"        }] }

调用接口的操作

/**  * Sample React Native App  * https://github.com/facebook/react-native  *  * @format  * @flow  */   import React, {Component} from 'react'; import {ImageEditor,FlatList,TouchableOpacity,Alert,Button,Dimensions,StyleSheet,Text, TextInput,View,Image} from 'react-native'; import {StackNavigator,DrawerNavigator,TabNavigator} from 'react-navigation' import First from './First' ; import Second from './Second' ; import HelloWorld from './HelloWorld' ; import logo from './images/logo.png';       var {height, width} = Dimensions.get('window');     export default class App extends Component<Props> {   constructor(props) {     super(props);     this.state = {       data:"正在加载数据..."     } ;     // 调用远程接口，接收返回结果     fetch("http://10.2.201.5:8080/BackDemo/result.json",{       method:"GET"     }).then((response) => response.json())     .then((jsonObj) => {       this.setState({         data:jsonObj.value       });     }).done();   }     render() {     return (       <Text>         {this.state.data}       </Text>     );   } }

 

2.2、动态生成数据接口列表

根据猫眼电影的数据列表页，分析其数据库结构，主要应该包含以下字段：

1. id
2. 电影名称
3. 封面文件名
4. 评分
5. 上映日期

建立数据表

CREATE TABLE movie_data (  id   int    primary key auto_increment ,  title  varchar(100)  not null ,  score  double   not null,  pub_date  date    not null,  cover  varchar(50)  );

 

先添加一些测试的数据：

INSERT INTO movie_data(title,score,pub_date,cover) VALUES ('无双',8.9,now(),null), ('悲伤逆流成河',9.1,now(),'e27ff51791134dc9cfd72417af9049af197718.jpg'), ('西虹市首富',9.2,now(),'9cf86d0cbd3861c9dbc3f1e3189b32251042527.jpg'), ('找到你',9,now(),'4d9bedd239f41eaf08cd1c4297e4ec7d858156.jpg'), ('昨日青空',8.7,now(),'a05a03a1b1b6c678eb7ef73a8347f4682641527.jpg'), ('名侦探柯南：零的执行人',-1,now(),null), ('李茶的姑妈',7.9,now(),null), ('影',8.2,now(),null), ('宝贝儿',5.4,now(),null), ('嗝嗝老师',9.4,now(),null), ('雪怪大冒险',9.3,now(),null), ('胖子行动队',8.5,now(),null);

 

之后就需要开始编写后台的数据处理接口了。

这里需要用MVC设计模式来完成。

Model层这里通过DAO设计模式来实现。

后台DAO部分完成后，通过Servlet来生成JSON格式的数据，这里先使用字符串拼接的方式完成。

package org.liky.servlet;   import java.io.IOException; import java.io.PrintWriter; import java.util.Iterator; import java.util.List;   import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;   import org.liky.dbc.DataBaseConnection; import org.liky.factory.DAOFactory; import org.liky.vo.MovieData;   @WebServlet("/MovieDataServlet") public class MovieDataServlet extends HttpServlet {        private static final long serialVersionUID = 1L;          public MovieDataServlet() {               super();        }          protected void doGet(HttpServletRequest request,                      HttpServletResponse response) throws ServletException, IOException {               this.doPost(request, response);        }          protected void doPost(HttpServletRequest request,                      HttpServletResponse response) throws ServletException, IOException {               // 查询数据库，并根据查询结果生成JSON数据               // 接收参数               int pageNo = Integer.parseInt(request.getParameter("pageNo"));               int pageSize = 5;               try {                      pageSize = Integer.parseInt(request.getParameter("pageSize"));               } catch (NumberFormatException e) {                      // e.printStackTrace();               }                 // 调用数据库查询               DataBaseConnection dbc = new DataBaseConnection();               try {                      List<MovieData> allData = DAOFactory.getIMovieDataDAOInstance(dbc)                                    .findAll(pageNo, pageSize);                      int count = DAOFactory.getIMovieDataDAOInstance(dbc).getAllCount();                        StringBuffer buffer = new StringBuffer();                      buffer.append("{");                      buffer.append("\"count\":" + count + ",");                      buffer.append("\"results\":[");                      Iterator<MovieData> iter = allData.iterator();                      int i = 0;                      while (iter.hasNext()) {                             MovieData vo = iter.next();                             buffer.append("{");                             buffer.append("\"id\":" + vo.getId() + ",");                             buffer.append("\"score\":" + vo.getScore() + ",");                             buffer.append("\"title\":\"" + vo.getTitle() + "\",");                             buffer.append("\"cover\":\"" + vo.getCover() + "\",");                             buffer.append("\"pubDate\":\"" + vo.getPubDate() + "\"");                             i++;                             if (i < allData.size()) {                                    buffer.append("},");                             } else {                                    buffer.append("}");                             }                      }                        buffer.append("]");                      buffer.append("}");                        // request.setCharacterEncoding("");                      response.setCharacterEncoding("UTF-8");                        // 把生成的字符串结果返回                      PrintWriter out = response.getWriter();                      out.print(buffer);                      out.close();               } catch (Exception e) {                      e.printStackTrace();               }          }   }

再在手机端，通过之前的fetch方法配合FlatList来显示结果。

/**  * Sample React Native App  * https://github.com/facebook/react-native  *  * @format  * @flow  */   import React, {Component} from 'react'; import {ImageEditor,FlatList,TouchableOpacity,Alert,Button,Dimensions,StyleSheet,Text, TextInput,View,Image} from 'react-native'; import {StackNavigator,DrawerNavigator,TabNavigator} from 'react-navigation' import First from './First' ; import Second from './Second' ; import HelloWorld from './HelloWorld' ; import logo from './images/logo.png';       var {height, width} = Dimensions.get('window');     export default class App extends Component<Props> {   constructor(props) {     super(props);     this.state = {       pageNo:1,       data:[]     } ;     this.fetchData();   }     fetchData = () => {     // 调用远程接口，接收返回结果     fetch("http://10.2.201.5:8080/BackDemo/MovieDataServlet?pageNo="+this.state.pageNo,{       method:"GET"     }).then((response) => response.json())     .then((jsonObj) => {       let newArr = this.state.data.concat(jsonObj.results);       this.setState({         pageNo:this.state.pageNo,         data:newArr       });     }).done();   }     _renderItem = ({item}) => {     if (item.pubDate == "2018-10-24") {       return (         <View>            <Image source={"uri:"+item.cover}/>            <View>               <Text>{item.title}</Text>               <Text>{"观众评分：" + item.score}</Text>            </View>            <Button title="购票">            </Button>         </View>       );     } else {       return (         <View>            <Image source={"uri:"+item.cover}/>            <View>               <Text>{item.title}</Text>               <Text>{"观众评分：" + item.score}</Text>            </View>            <Button title="预售">            </Button>         </View>       );     }   }     render() {     return (       <FlatList         data={this.state.data}         renderItem={this._renderItem}         >       </FlatList>     );   } }

 

 

2.3、后台JSON生成工具

除了使用字符串的方式以外，企业开发中，一般都是通过第三方的支持库来生成JSON的结果。

第三方支持库：

Json-lib：Java官方提供的，但是版本比较老，性能很低。

Org.json：第三方免费开源的json创建和解析库，也是之前比较流行的库

Fastjson：阿里提供的开源的JSON库，速度最快。

 

这里可以使用fastjson完成后台JSON数据生成。

 

如果以上内容都掌握了，可以尝试通过react-navigation完成页面的跳转。

 

3、作业与练习

阶段考核作业：

根据京东商城的业务，完成后台接口设计，要求实现三个接口功能：

1. 根据商品分类查询商品列表，并返回结果
2. 根据商品ID返回商品的详细信息
3. 根据商品ID返回商品的评论信息

第十周结束前交