糗事百科简易版（网页提交数据通过服务器处理显示到手机上）

Posted 2022-12-06 万合天宜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了糗事百科简易版（网页提交数据通过服务器处理显示到手机上）相关的知识，希望对你有一定的参考价值。

糗事百科简易版（网页提交段子通过服务器显示到手机）案例

效果图

目标

从浏览器端提交数据，通过服务器处理，给出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();
            
        );

大家有什么问题欢迎指出，一起讨论！

以上是关于糗事百科简易版（网页提交数据通过服务器处理显示到手机上）的主要内容，如果未能解决你的问题，请参考以下文章