Django支持https–利用runserver_plus实现+django by example第五章勘误。 - Django

文章目录

1.python环境准备
2.配置settings.py
3.开启服务，使用runserver_plus替换runserver

今天调试django by example教材第五章在你的网站中分享内容，建立一个能为图片打标签的网站，遇到，右上角采集图片功能出不来，查了一下新版，需要运行 runserver_plus，来支持https安全协议

python manage.py runserver_plus –cert-file cert.crt

但提示：

Unknown command: ‘runserver_plus’. Did you mean runserver?
Type ‘manage.py help’ for usage.

于是研究一下如何实现https来支持证书：

1.python环境准备

确认之前已经正确安装Python3，Django1.8及以上
还需要安装的python库有：

执行pip install命令安装
python3 -m pip install django-extensions
python3 -m pip install django-werkzeug-debugger-runserver
python3 -m pip install pyOpenSSL

2.配置settings.py

INSTALLED_APPS末尾加入下面几行，并保存

  'werkzeug_debugger_runserver',
  'django_extensions',

3.开启服务，使用runserver_plus替换runserver

  python manage.py runserver_plus --cert-file cert.crt

显示：
* Restarting with stat
Performing system checks…

System check identified no issues (0 silenced).

Django version 3.1.5, using settings ‘bookmarks.settings’
Development server is running at https://[127.0.0.1]:8000/
Using the Werkzeug debugger (http://werkzeug.pocoo.org/)
Quit the server with CTRL-BREAK.
* Debugger is active!
* Debugger PIN: 688-013-692
* Running on https://127.0.0.1:8000/ (Press CTRL+C to quit)

=====

本书中 create.html 改为：

{% extends 'base.html' %}

{% block title %}Bookmark an image{% endblock %}

{% block content %}
    <h1>Bookmark an image</h1>
    <img src="{{ request.GET.url }}" class="image-preview">
    <form action="." method="post">
        {{ form.as_p }}
        {% csrf_token %}
        <input type="submit" value="Bookmark it!">
    </form>
{% endblock %}

bookmarklet.js 内容改为：

(function(){
  var jquery_version = '3.4.1';
  var site_url = 'https://127.0.0.1:8000/';
  var static_url = site_url + 'static/';
  var min_width = 100;
  var min_height = 100;

  function bookmarklet(msg) {
    // load CSS
var css = jQuery('<link>');
    css.attr({
      rel: 'stylesheet',
      type: 'text/css',
      href: static_url + 'css/bookmarklet.css?r=' + Math.floor(Math.random()*99999999999999999999)
    });
    jQuery('head').append(css);

    // load HTML
box_html = '<div id="bookmarklet"><a href="#" id="close">&times;</a><h1>Select an image to bookmark:</h1><div class="images"></div></div>';
    jQuery('body').append(box_html);

    // close event
jQuery('#bookmarklet #close').click(function(){
       jQuery('#bookmarklet').remove();
    });
    // find images and display them
jQuery.each(jQuery('img[src$="jpg"]'), function(index, image) {
      if (jQuery(image).width() >= min_width && jQuery(image).height()
      >= min_height)
      {
        image_url = jQuery(image).attr('src');
        jQuery('#bookmarklet .images').append('<a href="#"><img src="'+
        image_url +'" /></a>');
      }
    });

    // when an image is selected open URL with it
jQuery('#bookmarklet .images a').click(function(e){
      selected_image = jQuery(this).children('img').attr('src');
      // hide bookmarklet
jQuery('#bookmarklet').hide();
      // open new window to submit the image
window.open(site_url +'images/create/?url='
+ encodeURIComponent(selected_image)
                  + '&title='
+ encodeURIComponent(jQuery('title').text()),
                  '_blank');
    });

  };

  // Check if jQuery is loaded
if(typeof window.jQuery != 'undefined') {
    bookmarklet();
  } else {
    // Check for conflicts
var conflict = typeof window.$ != 'undefined';
    // Create the script and point to Google API
var script = document.createElement('script');
    script.src = '//ajax.googleapis.com/ajax/libs/jquery/' +
      jquery_version + '/jquery.min.js';
    // Add the script to the 'head' for processing
document.head.appendChild(script);
    // Create a way to wait until script loading
var attempts = 15;
    (function(){
      // Check again if jQuery is undefined
if(typeof window.jQuery == 'undefined') {
        if(--attempts > 0) {
          // Calls himself in a few milliseconds
window.setTimeout(arguments.callee, 250)
        } else {
          // Too much attempts to load, send error
alert('An error occurred while loading jQuery')
        }
      } else {
          bookmarklet();
      }
    })();
  }
})()

360极速浏览器，点击小盾牌，同意脚本运行。

浏览器从极速模式切换到兼容模式，打开www.amazon.com,出现安全警报，选是

测试成功