知新_RL

这个屌丝很懒，什么也没留下！

热门标签

前端笔记7.数据接口实现_数据展示接口技术实现方案

作者：知新_RL | 2024-07-17 10:03:08

踩

数据展示接口技术实现方案

实现流程分析：

后台数据处理接口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

笔记

上次课程回顾

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、动态生成数据接口列表

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

id
电影名称
封面文件名
评分
上映日期

建立数据表

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>

<View>

<Text>{item.title}</Text>

<Text>{"观众评分：" + item.score}</Text>

</View>

</Button>

</View>

);

} else {

return (

<View>

<View>

<Text>{item.title}</Text>

<Text>{"观众评分：" + item.score}</Text>

</View>

</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、作业与练习

阶段考核作业：

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

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

第十周结束前交

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/839336

前端笔记7.数据接口实现_数据展示接口 技术实现方案

实现流程分析：

笔记

2、本次课程内容

2.1、远程数据接口实现

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

2.3、后台JSON生成工具

3、作业与练习

前端笔记7.数据接口实现_数据展示接口技术实现方案