精华内容
下载资源
问答
  • MUI前端框架Android源代码

    千次下载 热门讨论 2014-11-14 13:40:26
    小米MUI前端框架,包括html5和Android源代码,其h5文件位于assert目录下。MUI官方提供的的Github上的源代码,没有Android的,所以哥分享了这份代码,html不完整,是因为MUI官方提供的h5源码不完整。
  • MUI框架-11-MUI前端 +php后台接入百度文字识别API 这里后台不止一种,Python,Java,PHP,Node,C++,C# 都可以 这里使用的是 php 来介绍,已经解决所有问题,因为处理很多错误,可能会比较复杂,请大家坚持按...

    MUI框架-11-MUI前端+php后台接入百度文字识别API

    • 这里后台不止一种,Python,Java,PHP,Node,C++,C# 都可以
    • 这里使用的是 php 来介绍,已经解决所有问题,因为处理很多错误,可能会比较复杂,请大家坚持按步骤来,
    • 大概流程就是:前端发送 Ajax 请求,php 后台实现文字识别,并将识别后的文字返回到前端页面
    • 先放上效果图:
      在这里插入图片描述

    (一)准备阶段

    • 1.到百度云官网注册,几秒就可以,这个不需要审核,不像腾讯开发者认证好几天,注册然后登陆
    • 百度云官网:https://cloud.baidu.com/?from=console
    • 2.按照下面截图,产品>人工智能>文字识别,我们找到文字识别:
    • 3.点击【立即使用】:
    • 4.然后点击【创建应用】,填写名称,描述,非常快,不需要审核
    • 5.这里我们主要是为了得到 API Key 和 Secret Key

    (二)生成签名

    • 这里不必按照官方文档写的用服务器去发请求,设置一堆请求头
    • 直接将下面地址替换自己刚才的API Key 和 Secret Key,然后打开浏览器访问:
    https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【官网获取的AK】&client_secret=【官网获取的SK】
    
    • 然后会返回 json 格式的数据,access_token: 要获取的Access Token;
    • 【注意】:第二行可能还有,这个要拷贝下来,存起来备用
      在这里插入图片描述
    • 温馨提示:Access Token的有效期为30天(以秒为单位),请您集成时注意在程序中定期请求新的token

    在 HBuilder 搭建 mui 项目

    • 如果你还没有在 HBuilder 配置 php 服务器,请参考:HBuilder+wampserver配置PHP外置web服务器
    • 在 HBuilder 【新建】>【移动app】>【模板选择含MUI的模板】
    • 打开 index.html 文件
    • 新建目录命名PHP,新建 test.php 文件,在目录下再新建 img 目录
    • 【特别注意】:新手的话你要知道请求 php 服务器,是绝对不允许通过什么 …/ 返回上级目录,下级目录访问的,因为php 服务器的端口和你 HTML web 服务器是不一样的,我就别这个坑过,要是想在感觉上实现前后端分离,也可以创建一个新的项目,这里没必要因为只有一个 php 文件
      • 现在我们有了下面目录了
        在这里插入图片描述
    • 打开 test.php 粘贴下面代码
    • 1.替换自己从浏览器获取的access_token,2.替换自己图片路径
    • test.php 文件代码:
    <?php
    /**
     * 发起http post请求(REST API), 并获取REST请求的结果
     * @param string $url
     * @param string $param
     * @return - http response body if succeeds, else false.
     * 
     */
    
     function request_post($url = '', $param = '')
    {
        if (empty($url) || empty($param)) {
            return false;
        }
    
        $postUrl = $url;
        $curlPost = $param;
        // 初始化curl
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $postUrl);
        curl_setopt($curl, CURLOPT_HEADER, 0);
        // 要求结果为字符串且输出到屏幕上
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        // post提交方式
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $curlPost);
        // 运行curl
        $data = curl_exec($curl);
        curl_close($curl);
    
        return $data;
    }
    
    //替换自己从浏览器获取的access_token 
    $url = 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic?access_token=【自己的access_token】';
    
    //图片只能是本题图片,替换自己的图片
    $img = file_get_contents('img/chi1.jpg');
    $img = base64_encode($img);
    $bodys = array(
        "image" => $img
    );
    $res = request_post($url, $bodys);
    
    echo $res;
    //var_dump($res);
    
    ?>
    
    • 然后我们就可以写前端页面了,打开 index.html,粘贴下面代码:
    • 替换自己 test.php 文件在 web 浏览器的路径,然后把本机127.0.0.1替换成 ipv4地址,cmd 输入ipv4查看 截图:
      在这里插入图片描述
    • index.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" />
    		<title></title>
    		<script src="js/mui.min.js"></script>
    		<link href="css/mui.min.css" rel="stylesheet" />
    		<script type="text/javascript" charset="utf-8">
    			mui.init();
    		</script>
    	</head>
    
    	<body>
    		<header class="mui-bar mui-bar-nav">
    		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    		    <h1 class="mui-title">百度文字识别</h1>
    		</header>
    		<div class="mui-content">
    			<br>
    			<button id="queren" type="button" style="background-color: brown;color: #eeeeee;">发送请求</button>
    			<!--空的h2 用来存放返回的数据-->
    			<hr>
    		    <p id="res" style="font-size: larger;"> </p>
    		</div>
    		
    		
    
    		<!--处理请求-->
    		<script type="text/javascript">
    			var upload = function(c, d) {
    				"use strict";
    				var $c = document.querySelector(c),
    					$d = document.querySelector(d),
    					file = $c.files[0],
    					//预览框
    					reader = new FileReader();
    				reader.readAsDataURL(file);
    				reader.onload = function(e) {
    					$d.setAttribute("src", e.target.result);
    				};
    			};
    
    			var btn = document.getElementById("queren");
    			//监听点击事件
    			btn.addEventListener("tap", function() {
    				//ajax
    				
    				//替换自己 test.php 文件在 web 浏览器的路径
    				//用自己的 ipv4 地址,cmd 获取ipconfig 获取 
    				mui.ajax('http://10.160.62.75/myphp/mui/php/test.php', {
    
    					dataType: 'json', //服务器返回json格式数据
    					type: 'get', //HTTP请求类型
    					timeout: 10000, //超时时间设置为10秒;
    					headers: {
    						'Content-Type': 'application/json'
    					},
    					success: function(data) {
    						//服务器返回响应,根据响应结果,分析是否登录成功;
    						
    						//这里要对自己的数据进行处理
    						var html = " ";
    						for(var i = 0; i < data.words_result_num; i++){
     
    						  html = html + data.words_result[i].words;
    						 
    						};
    						 
    						console.log(html)
    						document.getElementById("res").innerHTML = html;
    
    					},
    					error: function(xhr, type, errorThrown) {
    						//异常处理;
    						console.log(type);
    					}
    				});
    			});
    			//触发submit按钮的点击事件
    
    			mui.trigger(btn, 'tap');
    		</script>
    
    	</body>
    
    </html>
    

    运行

    更多文章链接:MUI 框架


    - 本笔记不允许任何个人和组织转载
    展开全文
  • MUI 前端框架

    2016-03-06 10:18:24
    最接近原生APP体验的高性能前端框架,帮助开发人员快速设计美观界面
  • mui 前端框架

    2015-06-30 14:59:04
    google 的material design的css实现 可用于手机和电脑的网站开发用 不限于app
  • MUI框架-11-MUI前端 +php后台接入百度文字识别API 这里后台不止一种,Python,Java,PHP,Node,C++,C# 都可以 这里使用的是 php 来介绍,已经解决所有问题,因为处理很多错误,可能会比较复杂,请大家坚持按步骤...

    MUI框架-11-MUI前端 +php后台接入百度文字识别API

    • 这里后台不止一种,Python,Java,PHP,Node,C++,C# 都可以
    • 这里使用的是 php 来介绍,已经解决所有问题,因为处理很多错误,可能会比较复杂,请大家坚持按步骤来,
    • 大概流程就是:前端发送 Ajax 请求,php 后台实现文字识别,并将识别后的文字返回到前端页面
    • 先放上效果图:
      在这里插入图片描述

    (一)准备阶段

    • 1.到百度云官网注册,几秒就可以,这个不需要审核,不像腾讯开发者认证好几天,注册然后登陆
    • 百度云官网:https://cloud.baidu.com/?from=console
    • 2.按照下面截图,产品>人工智能>文字识别,我们找到文字识别:
      70
    • 3.点击【立即使用】:
      70
    • 4.然后点击【创建应用】,填写名称,描述,非常快,不需要审核
    • 5.这里我们主要是为了得到 API Key 和 Secret Key
      70

    (二)生成签名

    • 这里不必按照官方文档写的用服务器去发请求,设置一堆请求头
    • 直接将下面地址替换自己刚才的API Key 和 Secret Key,然后打开浏览器访问:
    https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【官网获取的AK】&client_secret=【官网获取的SK】
    • 然后会返回 json 格式的数据,access_token: 要获取的Access Token;
    • 【注意】:第二行可能还有,这个要拷贝下来,存起来备用
      在这里插入图片描述
    • 温馨提示:Access Token的有效期为30天(以秒为单位),请您集成时注意在程序中定期请求新的token

    在 HBuilder 搭建 mui 项目

    • 如果你还没有在 HBuilder 配置 php 服务器,请参考:HBuilder+wampserver配置PHP外置web服务器
    • 在 HBuilder 【新建】>【移动app】>【模板选择含MUI的模板】
    • 打开 index.html 文件
    • 新建目录命名PHP,新建 test.php 文件,在目录下再新建 img 目录
    • 【特别注意】:新手的话你要知道请求 php 服务器,是绝对不允许通过什么 ../ 返回上级目录,下级目录访问的,因为php 服务器的端口和你 HTML web 服务器是不一样的,我就别这个坑过,要是想在感觉上实现前后端分离,也可以创建一个新的项目,这里没必要因为只有一个 php 文件
      • 现在我们有了下面目录了
        在这里插入图片描述
    • 打开 test.php 粘贴下面代码
    • 1.替换自己从浏览器获取的access_token,2.替换自己图片路径
    • test.php 文件代码:
    <?php
    /**
     * 发起http post请求(REST API), 并获取REST请求的结果
     * @param string $url
     * @param string $param
     * @return - http response body if succeeds, else false.
     * 
     */
    
     function request_post($url = '', $param = '')
    {
        if (empty($url) || empty($param)) {
            return false;
        }
    
        $postUrl = $url;
        $curlPost = $param;
        // 初始化curl
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $postUrl);
        curl_setopt($curl, CURLOPT_HEADER, 0);
        // 要求结果为字符串且输出到屏幕上
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        // post提交方式
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $curlPost);
        // 运行curl
        $data = curl_exec($curl);
        curl_close($curl);
    
        return $data;
    }
    
    //替换自己从浏览器获取的access_token 
    $url = 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic?access_token=【自己的access_token】';
    
    //图片只能是本题图片,替换自己的图片
    $img = file_get_contents('img/chi1.jpg');
    $img = base64_encode($img);
    $bodys = array(
        "image" => $img
    );
    $res = request_post($url, $bodys);
    
    echo $res;
    //var_dump($res);
    
    ?>
    • 然后我们就可以写前端页面了,打开 index.html,粘贴下面代码:
    • 替换自己 test.php 文件在 web 浏览器的路径,然后把本机127.0.0.1替换成 ipv4地址,cmd 输入ipv4查看 截图:
      在这里插入图片描述
    • index.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" />
            <title></title>
            <script src="js/mui.min.js"></script>
            <link href="css/mui.min.css" rel="stylesheet" />
            <script type="text/javascript" charset="utf-8">
                mui.init();
            </script>
        </head>
    
        <body>
            <header class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">百度文字识别</h1>
            </header>
            <div class="mui-content">
                <br>
                <button id="queren" type="button" style="background-color: brown;color: #eeeeee;">发送请求</button>
                <!--空的h2 用来存放返回的数据-->
                <hr>
                <p id="res" style="font-size: larger;"> </p>
            </div>
            
            
    
            <!--处理请求-->
            <script type="text/javascript">
                var upload = function(c, d) {
                    "use strict";
                    var $c = document.querySelector(c),
                        $d = document.querySelector(d),
                        file = $c.files[0],
                        //预览框
                        reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e) {
                        $d.setAttribute("src", e.target.result);
                    };
                };
    
                var btn = document.getElementById("queren");
                //监听点击事件
                btn.addEventListener("tap", function() {
                    //ajax
                    
                    //替换自己 test.php 文件在 web 浏览器的路径
                    //用自己的 ipv4 地址,cmd 获取ipconfig 获取 
                    mui.ajax('http://10.160.62.75/myphp/mui/php/test.php', {
    
                        dataType: 'json', //服务器返回json格式数据
                        type: 'get', //HTTP请求类型
                        timeout: 10000, //超时时间设置为10秒;
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        success: function(data) {
                            //服务器返回响应,根据响应结果,分析是否登录成功;
                            
                            //这里要对自己的数据进行处理
                            var html = " ";
                            for(var i = 0; i < data.words_result_num; i++){
     
                              html = html + data.words_result[i].words;
                             
                            };
                             
                            console.log(html)
                            document.getElementById("res").innerHTML = html;
    
                        },
                        error: function(xhr, type, errorThrown) {
                            //异常处理;
                            console.log(type);
                        }
                    });
                });
                //触发submit按钮的点击事件
    
                mui.trigger(btn, 'tap');
            </script>
    
        </body>
    
    </html>

    运行

    更多文章链接:MUI 框架


    • 本笔记不允许任何个人和组织转载

    转载于:https://www.cnblogs.com/xpwi/p/9726363.html

    展开全文
  • MUI 前端框架体验

    2020-09-16 19:00:59
    前端框架有很多,在做混合开发APP 时,MUI 的UI 看起来更像原生APP,所以就选择MUI 来体验一下。 1 首先下载 安装HBuilder X 2 创建并选择5+app 项目 3.比较关键的index页面 Markup <!DOCTYPE html>...

       前端框架有很多,在做混合开发APP 时,MUI 的UI 看起来更像原生APP,所以就选择MUI 来体验一下。

            1 首先下载 安装 HBuilder X

            2  创建并选择5+app 项目

               image.png

            3.比较关键的index页面 

    Markup

    <!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" />
        <title></title>
        <script src="js/mui.min.js"></script>
    	<script src="js/jquery.min.js"></script>	
        <link href="css/mui.min.css" rel="stylesheet"/>
    </head>
    <body>	
      <!-- 主页面标题 -->  
    	<!-- 主页面内容容器 -->
    	
    	<div class="mui-content" >
    
    	</div>
    	  <!-- 底部导航 -->
    	  <nav  class="mui-bar mui-bar-tab">
    			  <a href="home.html" class="mui-tab-item mui-active" id="defaultTab">
    				  <span class="mui-icon mui-icon-home"></span>
    				  <span class="mui-tab-label">首页</span>
    			  </a>
    			  <a href="subscribe.html" class="mui-tab-item">
    			  	<span class="mui-icon mui-icon-star"></span>
    			  	<span class="mui-tab-label">订阅</span>
    			  </a>
    			  <a href="search.html" class="mui-tab-item">
    				  <span class="mui-icon mui-icon-search"></span>
    				  <span class="mui-tab-label">搜索</span>
    			  </a>
    			  <a href="calendar.html" class="mui-tab-item">
    			  	<span class="mui-icon mui-icon mui-icon mui-icon-pengyouquan"></span>
    			  	<span class="mui-tab-label">币历</span>
    			  </a>
    			  <a href="my.html" class="mui-tab-item">
    				  <span class="mui-icon mui-icon-contact"><span style="display: none;" class="mui-badge">0</span></span>
    				  <span class="mui-tab-label">我的</span>
    			  </a>
    		  </nav>
    			
    	
    	<script type="text/javascript">
    	
    	 mui.init({
    	            gestureConfig:{
    	                doubletap:true
    	            },
    	            subpages:[{
    	                url:'home.html',
    	                id:'MainViwe',
    	                styles:{
    	                    top: '30px',
    	                    bottom: '51px'
    	                }
    	            }]
    	        });
    	    
    	    mui('.mui-scroll-wrapper').scroll({
    	        deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    	    });
    	
    	//底部选项卡切换跳转
    	(function jumpPage(){
    	        //跳转页面
    	        var subpages = ['index.html','subscribe.html','search.html','calendar.html', 'my.html'];
    	        var subpage_style = {
    	            top: '44px',
    	            bottom: '51px'
    	        };
    	        var Index=0;
    	        var actTab=subpages[Index],
    	            tittle=document.querySelector('.mui-title');
    	            
    	        var aniShow = {};//动画显示
    	        
    	        //首次启动切滑效果
    	             //当前激活选项
    	            var activeTab = subpages[0];         
    	             //选项卡点击事件
    	            mui('.mui-bar-tab').on('tap', 'a', function(e) {
    	                //修改对应分页
    	                var targetTab = this.getAttribute('href');
    	                $('#MainViwe').attr('src',targetTab);
    	                
    	                //修改标题              
    	                //tittle.innerHTML=this.querySelector('.mui-tab-label').innerHTML;
    	            });
    	             //自定义事件,模拟点击“首页选项卡”
    	            document.addEventListener('gohome', function() {
    	                var defaultTab = document.getElementById("defaultTab");
    	                //模拟首页点击
    	                mui.trigger(defaultTab, 'tap');
    	                //切换选项卡高亮
    	                var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
    	                if (defaultTab !== current) {
    	                    current.classList.remove('mui-active');
    	                    defaultTab.classList.add('mui-active');
    	                }
    	
    	        });
    	    })()
    	</script>
    	
    </body>
    </html>

            4 其它子页面就大多小异了,做一个例子

    Markup

    <!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<link href="css/mui.css" rel="stylesheet" />
    		<script src="js/mui.js"></script>
    	</head>
    
    	<body>
    		<div class="mui-input-row mui-search">
    			<input type="search"  id="searchInput" onkeyup="enterSearch(event)" class="mui-input-clear" placeholder="">
    		</div>
    		<center><b>热门搜索</b></center>
    		<ul>
    			<li id="htop1" onclick="htop('htop1')" ><a >比特币</a></li>
    			<li id="htop2" onclick="htop('htop2')" ><a >莱特币</a></li>
    			<li id="htop3" onclick="htop('htop3')"><a >区块链</a></li>		
    		</ul>
    		<ul id='infolist' class="mui-table-view">
    			
    		</ul>
    		<script type="text/javascript">
    			mui.init()
    			
    			 // 搜索事件,获取搜索关键词
    			function enterSearch(event){
    				if(event.keyCode == 13) {//用户点击回车的事件号为13
    					var keyword = document.getElementById('searchInput').value;
    					//alert(keyword);
    					getnews(keyword);
    				}
    			}
    			function htop(index){
    				var keyword=document.getElementById(index).innerText;
    				getnews(keyword);
    			}
    					
    			function newwindow(detailsid){
    				mui.openWindow({
    					url:'details.html?newsid='+detailsid,
    					id:'newsid',
    					})
    			}
    			
    			function getnews(key){
    				mui.toast(key);
    				var url="server/getnews.php?type=101&key="+key;			
    				//console.log(url);
    				mui.ajax(url,{
    				    dataType:'json',
    				    type:'get',
    				    timeout:10000,
    				    success:function(data){				      
    				        if(data.result==1){
    				            //成功
    							var list_innerhtml="";
    							//mui.toast(data.data.length);
    							for (let i = 0; i < data.data.length; i++) {
    								let logo=data.data[i].source;
    								let title=data.data[i].title;
    								let describe=data.data[i].details;
    								let newsid=data.data[i].id;
    								list_innerhtml=list_innerhtml+"\
    								<li class='mui-table-view-cell mui-media'>\
    									<a href=javascript:newwindow("+newsid+")>\
    										<img class='mui-media-object mui-pull-left' src=images/"+logo+".png>\
    										<div class='mui-media-body'>\
    										    "+title.substring(0,6)+"\
    											<p class='mui-ellipsis'>"+title+"</p>\
    										</div>\
    									</a>\
    								</li>\
    								";										
    							}
    							document.getElementById("infolist").innerHTML=list_innerhtml;
    							// mui.toast(data.data[0].logo);
    						    //var js_obj=JSON.parse(data.data);																	 
    							//mui.toast(js_obj);				   
    				        }else{
    				            //失败			         
    							mui.toast("错误,请稍候重试");
    				        }
    				    },
    				    error:function(){
    						mui.toast("未知错误,请重试");
    				    }
    				});
    				
    			}
    		</script>
    		
    	</body>
    
    </html>

            5 前端UI有 了,后端数据也得跟上,我采用无框架PHP 做相关请求的服务程序

    PHP

    <?
    $db_username="xxx";
    $db_password="xxx";
    $db_host="127.0.0.1";
    $db_name="xxx";
    $conn = new mysqli($db_host, $db_username, $db_password, $db_name);
    if ($conn->connect_error) {die("连接失败: " . $conn->connect_error);}
    
    function db_select($sql){
        //$sql = "SELECT id, firstname, lastname FROM MyGuests";
        $result = $conn->query($sql); 
        if ($result->num_rows > 0) {      
            while($row = $result->fetch_assoc()) {
                $rt[]=$row;
            }
        } else {
            $rt=[];
        }
        return $rt;
    }
    function db_update($sql){
        $result = $conn->query($sql); 
        if($result){
            $rt=true;
        }else{
            $rt=false;
        }
        return $rt;
    }   
    function db_insert($sql){
        $result = $conn->query($sql); 
        if($result){
            $rt=true;
        }else{
            $rt=false;
        }
        return $rt;
    }
    
    ?>

            6 做为一个新闻采集的,基本的爬虫样例也来一个

    Python

    #coding=utf-8
    import requests,pymysql,re,os,json,datetime,configparser,time,sys
    from bs4 import BeautifulSoup
    
    #pip3 install pymysql
    #pip3 install Beautifulsoup4 
    class C_myspider:
        cur_count=0
        max_count=10
        ip="127.0.0.1"
        user="xxx"
        passwd="xxx"
        database="xxx"   
        conn=None
        def __init__(self):     
            pass  
            self.conn = pymysql.connect(host=self.ip,database=self.database, charset='utf8',user=self.user, password=self.passwd)  
        def __del__(self):   
            pass
            self.conn.close()
        def checkisexist(self,in_title):
            rt=0
            #self.conn = pymysql.connect(self.ip,self.user,self.passwd)
            self.conn.select_db('vtop_91hu_top')
            cur=self.conn.cursor()#获取游标
            sqlStr="SELECT id from vtop_news WHERE title='"+in_title +"'LIMIT 1;"      
            cur.execute(sqlStr)
            while 1:
                res=cur.fetchone()
                if res is None:
                    #表示已经取完结果集
                    break
                rt=res
            cur.close()
            self.conn.commit()
            #self.conn.close()
            return rt 
        def insertnews(self,source,title,createtime,details):  
            if self.checkisexist(title):
                print(title+"is exist!")
                return False   
            #con = pymysql.connect(host=self.ip,database=self.database, charset='utf8',user=self.user, password=self.passwd)
            try:
                # 2. 通过连接对象获取游标
                with self.conn.cursor() as cursor:
                    # 3. 通过游标执行SQL并获得执行结果
                    result = cursor.execute(
                        'INSERT INTO vtop_news (source,title,details,collectionsum,likesum,createtime,visitorsum) VALUES (%s, %s, %s, %s, %s, %s, %s)',
                        (source,title,details,"0","0",createtime,"0")
                    )                
                if result == 1:
                    print('Details添加成功!')
                    self.cur_count+=1
                # 4. 操作成功提交事务
                self.conn.commit()
            finally:
                # 5. 关闭连接释放资源
                #conn.close()
                pass
           
        def bitcoin86(self):          
            url="https://www.bitcoin86.com/news/"
            r=requests.get(url)
            soup=BeautifulSoup(r.text,"html.parser")
            hreflist=soup.find_all("div",class_="m-news-item")
            for item in hreflist:
                href=item.find("a",target="_blank").get("href")
                newsurl="https://www.bitcoin86.com"+href
                #print(newsurl)
                r2=requests.get(newsurl)
                soup2=BeautifulSoup(r2.text,"html.parser")
                source='bitcoin86'
                title=soup2.find("h1").get_text()
                createtime=soup2.find("span",class_="date").get_text()
                details=str(soup2.find("article",class_="article-content"))
                #print(source,title,createtime,details)
                self.insertnews(source,title,createtime,details)
        def jinse(self):
            url="https://www.jinse.com/news/"
            r=requests.get(url)
            soup=BeautifulSoup(r.text,"html.parser")
            hreflist=soup.find_all("div",class_="list clearfix")
            for item in hreflist:
                newsurl=item.find("a",target="_blank").get("href")  
                createtime=soup.find("span",class_="left margin-l16").get_text()      
                #print(newsurl)
                r2=requests.get(newsurl)
                soup2=BeautifulSoup(r2.text,"html.parser")
                source='jinse'
                title=soup2.find("h1").get_text()            
                details=str(soup2.find("div",class_="js-article"))
                #print(source,title,createtime,details)
                self.insertnews(source,title,createtime,details)
    if __name__ == "__main__":
        msp=C_myspider()     
        msp.bitcoin86()  
        msp.jinse()

        7.将定时任务加入到自动任务

    Bash

    0 */1 * * * python /www/wwwroot/xxx/spider/spidertask.py

        

    源码资源包:    

    vtop.rar

    原文链接:http://91hu.top/post/13.html

    展开全文
  • MUI前端框架轮播图片+九宫格(左右滑动) 测试 content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    MUI前端框架轮播图片+九宫格(左右滑动)
    1、需要文件mui.min.js、mui.min.css、fonts/mui.ttf
    2、创建index.html,代码如下
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>测试</title>
    <meta name="viewport"
    	content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui/mui.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/mui/mui.min.js"></script>
    <script src="js/index.js"></script>
    </head>
    <body>
    	<div class="mui-content">
    		<ul class="mui-table-view mui-table-view-chevron">
    		</ul>
    		<div id="slider" class="mui-slider">
    			<div class="mui-slider-group mui-slider-loop">
    				<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
    				<div class="mui-slider-item mui-slider-item-duplicate">
    					<a href="#"> <img src="images/common3.png">
    					</a>
    				</div>
    				<div class="mui-slider-item">
    					<a href="#"> <img src="images/common1.png">
    					</a>
    				</div>
    				<div class="mui-slider-item">
    					<a href="#"> <img src="images/common2.png">
    					</a>
    				</div>
    				<div class="mui-slider-item">
    					<a href="#"> <img src="images/common3.png">
    					</a>
    				</div>
    				<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
    				<div class="mui-slider-item mui-slider-item-duplicate">
    					<a href="#"> <img src="images/common1.png">
    					</a>
    				</div>
    			</div>
    			<div class="mui-slider-indicator mui-text-right">
    				<div class="mui-indicator mui-active"></div>
    				<div class="mui-indicator"></div>
    				<div class="mui-indicator"></div>
    			</div>
    		</div>
    		<div id="Gallery" class="mui-slider" style="margin-top: 15px;">
    			<div class="mui-slider-group">
    				<div class="mui-slider-item">
    					<ul class="mui-table-view mui-grid-view mui-grid-9">
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-person"></span>
    								<div class="mui-media-body">个人中心</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-chatbubble"><span
    									class="mui-badge">5</span></span>
    								<div class="mui-media-body">通知</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-search"></span>
    								<div class="mui-media-body">查询</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-gear"></span>
    								<div class="mui-media-body">设置</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-info"></span>
    								<div class="mui-media-body">关于</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    					</ul>
    				</div>
    				<div class="mui-slider-item">
    					<ul class="mui-table-view mui-grid-view mui-grid-9">
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-person"></span>
    								<div class="mui-media-body">个人中心</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-chatbubble"><span
    									class="mui-badge">5</span></span>
    								<div class="mui-media-body">通知</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-search"></span>
    								<div class="mui-media-body">查询</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-gear"></span>
    								<div class="mui-media-body">设置</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-info"></span>
    								<div class="mui-media-body">关于</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    					</ul>
    				</div>
    				<div class="mui-slider-item">
    					<ul class="mui-table-view mui-grid-view mui-grid-9">
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-person"></span>
    								<div class="mui-media-body">个人中心</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-chatbubble"><span
    									class="mui-badge">5</span></span>
    								<div class="mui-media-body">通知</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-search"></span>
    								<div class="mui-media-body">查询</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-gear"></span>
    								<div class="mui-media-body">设置</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-info"></span>
    								<div class="mui-media-body">关于</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    						<li
    							class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
    							<a href="#"> <span class="mui-icon mui-icon-more"></span>
    								<div class="mui-media-body">更多</div>
    						</a>
    						</li>
    					</ul>
    				</div>
    			</div>
    			<div class="mui-slider-indicator">
    				<div class="mui-indicator mui-active"></div>
    				<div class="mui-indicator"></div>
    				<div class="mui-indicator"></div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    3、所用到的文件有index.js、style.css

    style.css代码如下:
    .mui-plus.mui-android header.mui-bar {
    	display: none;
    }
    
    .mui-plus.mui-android .mui-bar-nav ~ .mui-content {
    	padding: 0;
    }
    
    .mui-slider-indicator {
    	bottom: 0;
    }
    
    .mui-slider {
    	background-color: #f2f2f2;
    }
    index.js代码如下
    mui.init();
    mui.ready(function() {
    	var slider = document.getElementById('Gallery');
    	var group = slider.querySelector('.mui-slider-group');
    	var items = mui('.mui-slider-item', group);
    	// 克隆第一个节点
    	var first = items[0].cloneNode(true);
    	first.classList.add('mui-slider-item-duplicate');
    	// 克隆最后一个节点
    	var last = items[items.length - 1].cloneNode(true);
    	last.classList.add('mui-slider-item-duplicate');
    	// 轮播图片定时
    	var slider = mui("#slider");
    	slider.slider({
    		interval : 4000
    	});
    });
    
    4、效果图







    展开全文
  • html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽等
  • mDoctype(mui-dom结构) mdo   ctype mBody(主体) mbo   dy mScroll(区域滚动容器) msc   roll mrefreshContainer(刷新容器) mre   ...
  • MUI前端代码的快捷键

    2018-11-29 20:48:00
    mDoctype(mui-dom结构) mdo ctype mBody(主体) mbo dy mScroll(区域滚动容器) msc roll mrefreshContainer(刷新容器) mre fresh mHeader(标题栏) mhe ...
  • Mui前端常用标签

    千次阅读 2016-08-01 00:23:08
    --mui-bar 导航基本类 头部导航 底部导航--> <!--mui-bar-nav 头部导航 --> <!--mui-action-back 关闭当前页面--> <!--mui-icon 图标--> <!--mui-pull-left 左浮动 --> ...
  • 1、plus.nativeUI.showWaiting(“数据加载中…”); //进入方法则会出现我们加载选择图标 2、setTimeout(function(){ plus.nativeUI.closeWaiting(); },5000) //防止加载过久可以设定定时器关闭。...
  • 最近做app,使用mui的ajax给后台传参,后台一直接收不到值,表示很蛋疼。这里通过网上搜索加上个人实践,总结归纳了三种前端传值和后台接收的方式。 第一种:  前端:  data: JSON.stringify({username: 'username'...
  • 前台 mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrapper').scroll({ ...
  • 1、出现数字键盘  要加这个 pattern="\d*" 2、软键盘的打开关闭 http://ask.dcloud.net.cn/question/3204 软键盘的详细介绍 ...mui( "#popover" ).popover("hide")
  • 基于mui前端框架开发APP问题总结

    千次阅读 2016-12-30 10:46:06
    实现页面滚动效果: 首先html代码:   --> 红色部分为滚动的基本框架,...mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0006 //flick 减速系数,系数越大,滚
  • Mui文档,地址:http://dev.dcloud.net.cn/mui/ui/。 2.打开“HBuilder X”,选择“文件”,选择“新建”-“项目” 3.css,js等文件都帮我们生成好了,直接引用即可 ...4.右侧有前端常用的功...
  • MUI前端框架学习(一)

    千次阅读 2016-08-07 09:24:31
    .mui-backdrop { position : fixed ; top : 0 ; right : 0 ; bottom : 0 ; left : 0 ; z-index : 998 ; background-color : rgba ( 0 , 0 , 0 ,. 3 ); } 引用:...
  • 1.下拉菜单绑定数据,选择后回传值 1)html: 1 <div class="mui-input-row"> 2 <label>...input id='zxyy' type="text" class="mui-input-clear mui-input" placeholder="请选择xxx"&...
  • 在PHP中设置文件头 header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET, POST"); header("Access-Control-Allow-Headers: Origin, No-Cache, X-Requested-With, I
  • 1.Mui 请求Webapi接口,返回所需要的数据(get,post) mui.ajax({ url: getAddress() + '/api/Qiliu/get?jsoncallback=?', data: {}, async: false, dataType: 'json', cr...
  • 1.Html界面: 1 <div id="container"> 2 <label>凭证:</label>...div id="uploadImage" class="mui-btn" style="float: left; margin-top: 5px;text-align: center;padding:...
  • //解决a标签不能跳转的问题(在js中加入如下代码) mui('body').on('tap','a',function(){ window.top.location.href=this.href; });
  • 继上篇微信公众号开发的SAE平台搭建及自定义菜单的实现之后,现在继续关于自定义菜单的链接网页的制作(用的MUI框架)以及上传到新浪云服务器上。
  • 支付MUI前端部分 var wxChannel = null; // 微信支付 var aliChannel = null; // 支付宝支付 //1. 获取支付通道 mui.plusReady(function() { plus.payment.getChannels(function(channels) { for (var i in cha....
  • MUI框架前端开发知识点

    千次阅读 2016-10-11 14:16:36
    1、mui-table-view列表 列表拉动反弹动画效果,只需将列表放置在mui-scroll-wrapper、mui-scroll容器内 //列表具体内容 列表需要用javaScript进行初始化才能滚动,如果列表的内容没有超出屏幕范围,也是不...
  • MUI手机app前端页面开发框架模板下载 MUI手机app前端页面开发框架模板下载
  • MUI 万年历的前端实现

    2020-07-09 21:17:49
    MUI 万年历的前端实现前言实现的UI效果关键JavaScript代码前端源码包参考文献 前言 根据业务需要,开发一个万年历。注(本项目只有前端,后端需自己编写,遇到问题可以私信我。) 功能描述: 初始化时高亮显示当前...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 764
精华内容 305
关键字:

mui前端