使用MUI框架构建App请求http接口实例

最新推荐文章于 2024-10-10 08:10:01 发布

irokay

最新推荐文章于 2024-10-10 08:10:01 发布

阅读量4.6w

点赞数 9

分类专栏： MUI http接口文章标签： MUI app ios android servlet

本文链接：https://blog.csdn.net/irokay/article/details/50534426

版权

本文介绍了如何使用MUI框架结合HBuilder创建App，并通过调用Java Servlet实现HTTP接口请求。详细步骤包括创建Servlet接口、使用HBuilder搭建MUI App框架，以及在App中编写页面调用接口。示例展示了验证登录的接口调用过程。

摘要由CSDN通过智能技术生成

简介

最近在看Dcloud的MUI框架，MUI封装了android、ios等多个平台的原生接口，达到开发一个项目，采取不同打包方式，生产多种平台的app。

无可厚非，对于从事java web开发的工程师，带来了极大的福音，再也不用去花太多时间去学习原生的android、ios语言，大大缩短了app开发的学习周期和成本。

当然，既然是做了封装处理，肯定性能上面不如原生。但是Dcloud官方声称MUI是最接近原生App体验的前端框架，并且在一些低端机上的表现也比较理想，想必也做了不少优化处理，另一方面，随着手机市场的激烈竞争，手机配置及价格都越来越让人满意，性能问题就愈发的可以忽略不计，毕竟项目周期和成本也相当的重要！之前也了解过PhoneGap框架（仅仅是了解），据说，MUI的性能要比PhoneGap好。当然，仅仅是代表鄙人的观点，暂时也没有在重型或者大数据量项目上做过验证，只好大家各自体验了。

看得出来Dcloud还是做了不少事情的，再加上国产，这个还是要支持的！
MUI官方地址：http://www.dcloud.io/mui.html

好了，废话不多说，下面进入正题。

要用app请求http接口当然要分别有http接口和app应用。

1.创建http接口

我这里是做了一个很简单的java servlet的项目。
新建java web项目，项目名myhttp。web.xml中配置一个名为login的servlet请求：

<servlet>
  <servlet-name>login</servlet-name>
  <servlet-class>demo.webservice.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>login</servlet-name>
  <url-pattern>/login.do</url-pattern>
</servlet-mapping>

demo.webservice目录下的LoginServlet.java代码：

package demo.webservice;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class LoginServlet extends HttpServlet{
   

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
        System.out.println("进入post方法！");
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();

        String name = req.getParameter("name");
        String pwd = req.getParameter("password");
        if("admin".equals(name) && "123".equals(pwd)){
        //验证通过
        out.write("Login Success!");
        }else{
        out.write("Login Fail!");
        }

        out.flush();
        out.close();
    }

}

这里做了一个很简单的验证示例，若输入用户名和密码分别为“admin”、“123”，即验证通过，返回“Login Success”，否则返回“Login Fail”。因为仅仅是个示例，就不去连数据库啦！

OK，web端的http接口就开发完成了，通过地址“http://[ip地址]:[端口]/myhttp/login?name=admin&password=123“即可访问该servlet请求，得到返回结果。

我这里装逼格了一下，把web应用发布到了自己的服务器上，模拟实际场景嘛！当然大家在本地也是可以的，可以通过浏览器访问本地项目地址访问。HBuilder工具是支持本地浏览器调试的。

2.使用HBuilder创建基于MUI框架的App

既然是基于MUI框架的App，当然要用Dcloud推出的HBuilder这款IDE开发啦，另外说明下，这款IDE开发前台确实超级棒，可以大幅度提升开发效率，HBuilder是基于Eclipse改造的，同时添加了很多便利的提示和快捷键功能，同时还支持EMMET规则。用官方的话就是：飞速编码的极客工具，手指爽，眼睛爽——让手爽，飞一般的编码（这里不是打广告哈，自己亲身体验过，确实很方便）。

在HBuilder中新建项目——移动App，输入应用名称（我这里应用名为MUIDemo1），选择“mui项目”。