今天学习过程中写了一个flask搜索引擎包括爬虫和搜索页面。功能有全文搜索,分页,爬虫等等。 只需安装flask和jieba即可: pip install flask jieba 搜索引擎后端:
搜索引擎前端: <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Python学霸搜索引擎</title> <link rel='icon' type='image/svg+xml' href='favicon.svg'> <script src='https://ajax./ajax/libs/jquery/3.6.0/jquery.min.js'></script> <style> body { font-family: Arial, sans-serif; margin: 50px; }
h1 { font-size: 24px; margin-bottom: 20px; text-align: center; }
.search-box { margin-bottom: 20px; text-align: center; }
.search-box input[type='text'] { padding: 6px 2px; font-size: 16px; border-radius: 4px; border: 1px solid #999; width: 40%; max-width: 100%; }
.search-box button[type='submit'] { padding: 6px 12px; font-size: 16px; border-radius: 4px; background-color: #006621; color: #fff; border: none; cursor: pointer; }
.search-box button[type='submit']:hover { background-color: #00511a; }
.result-item { margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; }
a { text-decoration: none; }
.result-title { font-size: 20px; font-weight: bold; text-align: left; /* 修改此行 */ }
.result-title a { color: #008000; }
.result-url { color: #000000; font-size: 14px; margin-bottom: 5px; }
.result-time { font-size: 14px; color: #999; }
.result-description { margin-top: 10px; }
.pagination { margin-top: 20px; text-align: center; }
.pagination-link { display: inline-block; padding: 6px 12px; margin-right: 5px; color: #333; border-radius: 4px; background-color: #f5f5f5; text-decoration: none; }
.pagination-link:hover { background-color: #ddd; }
.highlight { background-color: #FFD700; }
.footer { margin-top: 50px; text-align: center; color: #999; font-size: 12px; }
.visitor-count { margin-top: 10px; }
.visitor-count span { margin-left: 5px; }
.favicon { width: 16px; height: 16px; margin-right:3px; } </style> </head>
<body> <h1>python学霸全文搜索</h1>
<div class='search-box'> <form action='/' method='get'> <input type='text' name='q' id='search-input' list='suggestion-list' placeholder='你负责搜,我负责找···'> <datalist id='suggestion-list--------' class='suggestion-list------'></datalist> <button type='submit'>搜索</button> </form> </div>
{% if content_result %} <p>共找到 {{ total_results }} 条结果。</p> {% for result in content_result %} <div class='search-summary'> </div> <div class='result-item'> <h2 class='result-title'><img src='{{ result.favicon }}' alt='Favicon' class='favicon' style='border: 1px solid #ccc; border-radius: 5px;' /><a class='result-link' href='{{ result.url }}' target='_blank'>{{ result.title }}</a></h2> <p class='result-url'><span class='time'>{{ result.date }}</span> {{ result.description }}</p> </div> {% endfor %}
<div class='pagination'> {% if total_pages > 1 %} {% for page in range(1, total_pages + 1) %} {% if page == current_page %} <a class='pagination-link highlight' href='/?q={{ query }}&page={{ page }}'>{{ page }}</a> {% else %} <a class='pagination-link' href='/?q={{ query }}&page={{ page }}'>{{ page }}</a> {% endif %} {% endfor %} {% endif %} </div> {% endif %}
<div class='footer'> @2023 Python学霸. <div class='visitor-count'> <p>总访问: {{ online }}</p> </div> </div>
<script> // JavaScript 可选,用于给搜索关键词添加高亮样式 window.onload = function () { var query = '{{ query }}'; var titles = document.getElementsByClassName('result-title'); for (var i = 0; i < titles.length; i++) { var title = titles[i]; var highlighted = title.innerHTML.replace(new RegExp(query, 'gi'), '<span class='highlight'>$&</span>'); title.innerHTML = highlighted; } }; </script> <script type='text/javascript'> $(document).ready(function () { $('#search-input').on('input', function () { var query = $(this).val(); if (query.trim().length > 0) { // 确保输入不是空白字符 $.ajax({ url: '/get_suggestions', data: { q: query }, success: function (response) { var suggestions = response.suggestions; var suggestionList = $('#suggestion-list'); suggestionList.empty(); // 清空之前的建议列表 for (var i = 0; i < suggestions.length; i++) { var suggestionItem = $('<li>').text(suggestions[i]); suggestionList.append(suggestionItem); } suggestionList.show(); // 显示建议列表 } }); } else { $('#suggestion-list').empty().hide(); // 输入为空时隐藏建议列表 } });
// 当用户点击建议项时将其填充到搜索框中 $('#suggestion-list').on('click', 'li', function () { var selectedSuggestion = $(this).text(); $('#search-input').val(selectedSuggestion); $('#suggestion-list').empty().hide(); // 填充后隐藏建议列表 }); }); </script> </body> </html> 爬虫:
可能有一些bug,提示词功能已经加好了需要html前端中更改id。 |
|