bs+flask+redis實現社工庫網站

時間 2021-01-19

標籤 javascript css html 前端 html5 java python mysql jquery web 欄目 Python 简体版

原文原文鏈接

以前寫過一篇關於12306信息查詢頁面的文章，今天從新整理一下，我用的是flask+redis，因爲數據十幾萬都放在mysql裏，即便建立索引，個人vps仍是有點吃緊。javascript

redis能夠作storage和cache，因爲這些數據不是很重要，丟了大不了再導入一次，可是咱們更在意的是查詢效率，因此redis作storage是很好的選擇。css

首先把文件裏的數據導入redis，raw文件裏的數據是如下格式的，文件名爲result.txthtml

導入redis的代碼以下：前端

# -*- coding: utf-8 -*-
import redis
import time

start = time.clock()

redisClient = redis.StrictRedis(host='localhost',port=6379,db=0,password='redis@123')
f = open('result.txt','r')
while True:
    line = f.readline()
    if not line:
        break
    lines = line.replace("\n","").replace("\r\n","").split("----")
    redisClient.hset(lines[0],"id",lines[0])
    redisClient.hset(lines[0],"name",lines[1])
    redisClient.hset(lines[0],"password",lines[2])
    redisClient.hset(lines[0],"email",lines[3])
    redisClient.hset(lines[0],"phone",lines[4])
f.close()

end = time.clock()

print "used:", end -start

13w數據不到一分半鐘。。。html5

這裏個人key都是id也就是***好，其它都是hash的數據結構形式存儲的。redis的優勢之一就是能夠支持豐富的數據結構。登陸redis，執行keys *看一下java

ok，數據有了，那麼開始上flask了，代碼以下：
python

# -*- coding: utf-8 -*-
from flask import Flask, request, render_template, jsonify, json
import  redis

app = Flask(__name__)

@app.route('/api/<id>', methods=['GET'])
def scan(id):
     redis_client = redis.StrictRedis(host='127.0.0.1',port=6379,db=0,password='redis@123')
     get_key = redis_client.keys(id)
     if not get_key :
            json_result = {'id' : None}
            return json.dumps(json_result,ensure_ascii=False)
     else:
            get_key = redis_client.hmget(id,'name','password','email','phone')
            json_result = {'id'   : str(id),
                           'name' : get_key[0],
                           'pass' : get_key[1],
                           'email': get_key[2],
                           'phone': get_key[3]
                          }

            return json.dumps(json_result,ensure_ascii=False)


@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
  app.run(host='0.0.0.0', port = 8080, debug=True)

咱們要查詢哪一個用戶就把傳參數給flask封裝的api，這就是給接口傳參便可。mysql

什麼是接口？看下面的說明理解一下。jquery

在瀏覽器裏輸入api地址，隨便傳一個不存在的參數，也就是***號。web

接口返回值爲null

若是傳參是存在的，就會有正確的返回值。

最後就是前端頁面展現了，我用的是bootstrap和jquery的ajax插件。代碼以下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{{ url_for('static', filename='icon/favicon.ico') }}">

    <title>12306</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="{{ url_for('static', filename='css/jumbotron.css') }}" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

    <!-- Main jumbotron for a primary marketing message or call to action -->

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">12306</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">12306網站用戶信息泄漏查詢</a>
        </div>
</nav>


        <script src="{{ url_for('static', filename='js/template.js') }}"></script>



<div class="container" style="padding-top: 48px;">
    <div class="bs-callout bs-callout-info mt0">
        <div class="alert alert-danger">
            <p><h4>本系統程序僅爲用戶確認我的信息是否已經泄露，切勿用做非法目的,不然一切後果自負！</h4></p>
        </div>
    </div>


<div class="row" style="margin:0;min-height:600px">
            <div class="jumbotron search-box">
                <p>請輸入關鍵字：</p>
                <div class="input-group">
                    <input placeholder="***號"
                           type="text" name="id" id="keyword" class="form-control">
                    <span class="input-group-btn scan-but-span">
                        <button class="btn btn-success" onclick="scan()" type="button">查找一下</button>
                    </span>
                </div>
                <div class="input-group mt15">
                <script type="text/javascript" src="
                  </div>
                <div id="scan-result-box">
                </div>
              </div>
            <div id="container" class="row" style="hight:280px">
        </div>
    </div>

    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script>
var geetest_passed = false;
    var selectorObj;
    function gt_custom_ajax(result, selector) {
        selectorObj=selector;
        geetest_passed = result;
    }
    var keyword = "";
            function scan(){
             keyword = $.trim($("#keyword").val());
                 if(keyword==''){
                    alert('請輸入***');
                    $("#keyword").focus()
                    return false;
                 }
                if(!geetest_passed) { 
                                    alert("請滑動圖片進行驗證!")
                                        return false;
                    }

            $.ajax({
                        type:'get',
                        dataType:'json',
                        url:'  //本地的ip或域名 
                        success:function(data){

                        if(!data.id){
                                alert('恭喜!您的信息沒有被泄露!');
                                return false;
                            }
                var re="<ul>";
                    re+="<li>姓  名："+data.name+'</li>';
                    re+="<li>***："+data.id+'</li>';
                    re+="<li>E-mail："+data.email+'</li>';
                    re+="<li>手機號："+data.phone+'</li>';
                    re+="</ul>"
                    $('#container').html(re)
                        },
                        error:function(){
                            alert('您的信息不存在!')
                        }
                    })
                }
     </script>
  </body>
 </html

好了，啓動webserver，看看頁面查詢狀況：

輸入一個***號，若是存在，頁面就會返回

若是不存在，js就會alert一個彈框。

是否是還比較簡單，個人好友強子想了解一下如何構建，因此分享一下。。。