糗事百科简易版（网页提交段子通过服务器显示到手机）案例
效果图
目标
从浏览器端提交数据，通过服务器处理，给出url，手机端通过url获取数据，进行显示。
原理
1. 从浏览器端输入端子标题和段子内容，点击提交，数据会提交到SubmitInfoServlet进行处理
2. SubmitInfoServlet接收提交的数据，将数据封装成javabean，然后存入集合，再使用XStream对象将集合转换成xml格式的数据，存入本地的xml文件，如果xml文件已经存在并且有数据，则需要对数据进行追加
3. 手机读取数据需要访问url，获取数据。所以这个url应该能得到json格式的数据。所以需要写一个ToJsonServlet的类来读取本地的xml文件，并将xml格式数据转换成json格式数据
4. 手机读取数据，使用listview进行显示
实现步骤
1. 编写浏览器端代码，主要包括一个段子标题的输入框，一个段子内容输入框，和提交按钮。
示例图如下
submitinfo.html文件代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 屏幕适配器 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>糗事百科后台录入系统</title> <style> .all { width: 100%; height: 100%; } .main { width: 60%; height: 560px; background: #F0EFF4; margin-top: 20px; padding: 10px; border-style: ridge; } font { position: relative; float: left; } .title { width: 100%; font-size: 16px; } .commit { position: relative; float: right; background-color: #0279FF; text-align: center; color: #ffffff; padding: 5px; width: 80px; margin-top: 50px; } textarea { width: 100%; font-size: 16px; } </style> </head> <body style="margin: 0px; background: #D7D7D7;"> <form action="/QSBKweb/SubmitInfoServlet" method="get"> <div class="all" align="center"> <div class="main"> <div class="title" align="center"> <h1 style="margin: 5px;">糗事百科后台录入系统</h1> <hr size="5" color="#BCD68D" style="margin:5 ;" /> </div> <div class="content"> <font>标题：</font> <input type="text" name="title" class="title" /> <font style="margin-top: 10px;">内容：</font> <textarea name="content" rows="16" value="gg"></textarea> </div> <input type="submit" value="提交" class="commit" /> </div> </div> </form> </body> </html>
2. 浏览器提交数据后，SubmitInfoServlet接收到数据，存入JavaBean，再将javabean存入集合，然后使用XStream对象的toXml()方法将集合的数据转换成xml文件，最后用输出流写入本地xml文件。如果本地已经存在该xml文件，则需要先将该文件的数据读取出来存入集合，然后再将新添加的数据追加到集合，最后将集合存入本地xml文件。
生成的xml文件内容图如下
SubmitInfoServlet.java代码如下
/** * 获取浏览器提交过来的数据，将其存入到xml文件 * * @author Pinger * */ public class SubmitInfoServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置乱码问题 request.setCharacterEncoding("utf-8"); // 获取到段子标题和内容 String dtitle = request.getParameter("dtitle"); String dcontent = request.getParameter("dcontent"); if (dtitle != null && dcontent != null) { File file = new File("D:\\duanzi.xml"); // 要先判断本地该文件是否存在 if (file.exists() && file.length() > 0) { // 如果存在则将文件中的数据读取出来存到集合，然后将新数据写入集合，再写入文件 XStream xs = new XStream(new DomDriver()); xs.alias("duanzis", List.class); xs.alias("duanzi", Duanzi.class); // 将文件中的数据读取出来存到集合 List<Duanzi> list = (List<Duanzi>) xs.fromXML(file); Duanzi duanzi = new Duanzi(dtitle, dcontent); // 将新数据写入集合 list.add(duanzi); // 将集合数据存入到Xml文件中 dataToXml(xs, list, file); } else { // 如果不存在就直接将数据写入文件 // 将数据封装到javabean Duanzi duanzi = new Duanzi(dtitle, dcontent); // 存入集合 List<Duanzi> list = new ArrayList<Duanzi>(); list.add(duanzi); // 将集合里的数据存入xml文件 XStream xs = new XStream(new DomDriver()); xs.alias("duanzis", List.class); xs.alias("duanzi", Duanzi.class); // 将集合数据存入到Xml文件中 dataToXml(xs, list, file); } } // 解决乱码问题 response.setContentType("text/html;charset=utf-8"); response.getWriter().print("提交成功，审核通过。"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } private void dataToXml(XStream xs, List<Duanzi> list, File file) { String value = xs.toXML(list); StringBuffer sb = new StringBuffer(); sb.append("<?xml version='1.0' encoding='UTF-8'?>" + "\n"); sb.append(value); try { // 文件输出流 OutputStream os = new FileOutputStream(file); // 指定编码写入文件 os.write(sb.toString().getBytes("utf-8")); } catch (IOException e) { e.printStackTrace(); } } }
3. 手机端要通过url读取数据，所以需要先有一个url，可以为手机建立一个Servlet，用来读取xml文件数据，并将xml格式数据转换成json的数据，将数据打印出来。
生成的json格式数据图如下
ToJsonServlet.java代码如下
/** * 这里解析xml文件，生成json数据，打印到浏览器，当访问到这个servlet时，就会把数据返回给访问者 * * @author Pinger * */ public class ToJsonServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { // 解析xml文件，转换成json格式数据，打印到浏览器 File file = new File("D:\\duanzi.xml"); XStream xs = new XStream(new DomDriver()); xs.alias("duanzis", List.class); xs.alias("duanzi", Duanzi.class); List<XStream> list = (List<XStream>) xs.fromXML(file); // 将集合里的数据转换成json数据 // 使用谷歌的gson.jar包, Gson json = new Gson(); // 转换数据格式 String value = json.toJson(list); // 解决乱码问题 response.setContentType("application/json;charset=utf-8"); // 将数据打印到浏览器 response.getWriter().print(value); } public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { doGet(request, response); } }
4. 手机访问url得到输入流，将输入流转换成json字符串，再将json字符串用Json对象解析，就得到了段子的标题和内容，将每个段子对象都存入集合，再使用listview从集合里取出数据显示到界面上。
- 最后效果图如下
MainActivity.java代码如下
public class MainActivity extends Activity { /** * 初始化图片数组 */ private static int[] image = { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e, R.drawable.f}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ListView lv = (ListView) findViewById(R.id.lv); final List<Duanzi> list = new ArrayList<Duanzi>(); final String path = "http://192.168.163.1/QSBKweb/ToJsonServlet"; // 在子线程中联网 new Thread(new Runnable() { @Override public void run() { try { URL url = new URL(path); HttpURLConnection conn = (HttpURLConnection) url .openConnection(); conn.setReadTimeout(8000); conn.setConnectTimeout(8000); conn.setRequestMethod("GET"); if (conn.getResponseCode() == 200) { // 连接成功 InputStream is = conn.getInputStream(); String value = StreamUtils.streamToString(is); // 使用json解析数据 JSONArray jsonArray = new JSONArray(value); for (int i = 0; i < jsonArray.length(); i++) { JSONObject jsonObject = jsonArray.getJSONObject(i); String dtitle = jsonObject.getString("dtitle"); String dcontent = jsonObject.getString("dcontent"); Duanzi duanzi = new Duanzi(dtitle, dcontent); list.add(duanzi); } } } catch (Exception e) { e.printStackTrace(); } } }).start(); System.out.println("---联网完成---"); lv.setAdapter(new BaseAdapter() { @Override public View getView(int position, View convertView, ViewGroup parent) { View view = View.inflate(MainActivity.this, R.layout.activity_item, null); TextView tv_title = (TextView) view.findViewById(R.id.tv_title); TextView tv_content = (TextView) view .findViewById(R.id.tv_content); ImageView iv = (ImageView) view.findViewById(R.id.iv); Duanzi duanzi = list.get(position); tv_title.setText(duanzi.getDtitle()); tv_content.setText(duanzi.getDcontent()); iv.setImageResource(image[position]); return view; } @Override public long getItemId(int position) { // TODO Auto-generated method stub return position; } @Override public Object getItem(int position) { // TODO Auto-generated method stub return position; } @Override public int getCount() { // TODO Auto-generated method stub return list.size(); } }); } }大家有什么问题欢迎指出，一起讨论！
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
