前端项目实战玖-pad端mui使用网络请求利用原生开发

简介: 前端项目实战玖-pad端mui使用网络请求利用原生开发
<!DOCTYPE html>
<html class="ui-page-login">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <style>
      .area {
        margin: 20px auto 0px auto;
      }
      .mui-input-group {
        margin-top: 10px;
      }
      .mui-input-group:first-child {
        margin-top: 20px;
      }
      .mui-input-group label {
        width: 22%;
      }
      .mui-input-row label~input,
      .mui-input-row label~select,
      .mui-input-row label~textarea {
        width: 78%;
      }
      .mui-checkbox input[type=checkbox],
      .mui-radio input[type=radio] {
        top: 6px;
      }
      .mui-content-padded {
        margin-top: 25px;
      }
      .mui-btn {
        padding: 10px;
      }
      .link-area {
        display: block;
        margin-top: 25px;
        text-align: center;
      }
      .spliter {
        color: #bbb;
        padding: 0px 8px;
      }
      .oauth-area {
        position: absolute;
        bottom: 20px;
        left: 0px;
        text-align: center;
        width: 100%;
        padding: 0px;
        margin: 0px;
      }
      .oauth-area .oauth-btn {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: 30px 30px;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0px 20px;
        /*-webkit-filter: grayscale(100%); */
        border: solid 1px #ddd;
        border-radius: 25px;
      }
      .oauth-area .oauth-btn:active {
        border: solid 1px #aaa;
      }
      .oauth-area .oauth-btn.disabled {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <header class="mui-bar mui-bar-nav">
      <h1 class="mui-title">登录</h1>
    </header>
    <div class="mui-content">
      <form id='login-form' class="mui-input-group">
        <div class="mui-input-row">
          <label>账号</label>
          <input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
        </div>
        <div class="mui-input-row">
          <label>密码</label>
          <input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
        </div>
      </form>
      <div class="mui-content-padded">
        <button  id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
      <!--  <div class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
        </div> -->
      </div>
    </div>
    <script src="js/mui.min.js"></script>
    <script src="js/mui.enterfocus.js"></script>
    <script src="js/app.js"></script>
    <script>
      var login=document.getElementById("login");
      var account=document.getElementById("account")
      var password=document.getElementById("password")
      var test=document.getElementById("test")
      //监听点击事件
      login.addEventListener("tap",function () {
        mui.ajax('http://xxxxxx/pda/login',{
          data:{
            account:document.getElementById("account").value,
            password:document.getElementById("password").value
          },
          dataType:'json',//服务器返回json格式数据
          type:'post',//HTTP请求类型
          timeout:10000,//超时时间设置为10秒;
          headers:{'Content-Type':'application/json'},                
          success:function(response){
            // test.innerHTML=JSON.stringify(response)
            if(response.code==200){
              window.location.href="./home.html"
              mui.toast('登陆成功',{ duration:'long', type:'div' })
            }else{
              mui.toast('登陆失败',{ duration:'long', type:'div' })
            }
            //服务器返回响应,根据响应结果,分析是否登录成功;
          },
          error:function(xhr,type,errorThrown){
            // test.innerHTML=JSON.stringify(xhr)
            //异常处理;
            console.log(type);
          }
        });
      });
      //触发submit按钮的点击事件
      mui.trigger(login,'tap')
    </script>
  </body>
</html>
相关文章
|
9天前
|
Linux 开发工具 Android开发
FFmpeg开发笔记(六十)使用国产的ijkplayer播放器观看网络视频
ijkplayer是由Bilibili基于FFmpeg3.4研发并开源的播放器,适用于Android和iOS,支持本地视频及网络流媒体播放。本文详细介绍如何在新版Android Studio中导入并使用ijkplayer库,包括Gradle版本及配置更新、导入编译好的so文件以及添加直播链接播放代码等步骤,帮助开发者顺利进行App调试与开发。更多FFmpeg开发知识可参考《FFmpeg开发实战:从零基础到短视频上线》。
56 2
FFmpeg开发笔记(六十)使用国产的ijkplayer播放器观看网络视频
|
22天前
|
XML 开发工具 Android开发
FFmpeg开发笔记(五十六)使用Media3的Exoplayer播放网络视频
ExoPlayer最初是为了解决Android早期MediaPlayer控件对网络视频兼容性差的问题而推出的。现在,Android官方已将其升级并纳入Jetpack的Media3库,使其成为音视频操作的统一引擎。新版ExoPlayer支持多种协议,解决了设备和系统碎片化问题,可在整个Android生态中一致运行。通过修改`build.gradle`文件、布局文件及Activity代码,并添加必要的权限,即可集成并使用ExoPlayer进行网络视频播放。具体步骤包括引入依赖库、配置播放界面、编写播放逻辑以及添加互联网访问权限。
101 1
FFmpeg开发笔记(五十六)使用Media3的Exoplayer播放网络视频
|
5天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
9 1
|
6天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
17天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
25天前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
14天前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
26 0
|
14天前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
83 0
|
14天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
14天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
30 0