我的Blog搭建之旅4——搭建实例

我的Blog搭建之旅4——搭建实例

== 2019.2.14 ===

今天的目的是融合react和Django，实现一个简单的前后端交互的小例子

Ajax

• 什么是ajax：异步的JS和XML？？？

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

• Ajax实例：

  function loadXMLDoc()
  {
      //创建对象
  	var xmlhttp;
  	xmlhttp=new XMLHttpRequest();
      
  	xmlhttp.onreadystatechange=function()
  	{
          //如果获取到了响应
  		if (xmlhttp.readyState==4 && xmlhttp.status==200)
  		{
        //获取响应信息
              document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  		}
  	}
      //具体的发送请求操作，先打开后发送
  	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
  	xmlhttp.send();
  }
  

• 发送请求

• 方法	描述
  open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
  send(string)	将请求发送到服务器。 string：仅用于 POST 请求
  setRequestHeader(header,value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

• 获得响应：

• 属性	描述
  responseText	获得字符串形式的响应数据。
  responseXML	获得 XML 形式的响应数据。

• readyState状态：

  属性	描述
  onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
  readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
  status	200: “OK” 404: 未找到页面

• 什么是异步？

  • XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true
  • 通过 AJAX，JavaScript 无需等待服务器的响应，而是：
    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理

React的处理

主要参考的博客是：https://www.jianshu.com/p/f59f7a7bf07d

• 首先还是照常编辑一个简单的JS页面，将上面的Ajax编辑进去，利用Json传递POST请求

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  class Login extends React.Component {
    render() {
      return (
         <div>
              <h2>请输入宝宝的信息</h2>
               <form id="myDiv">
                   姓名：<input type="text" name="name" id="name1"/><br />
                   性别：<input type="radio"  name="sex" value="男" defaultChecked="checked" />男士
                   <input type="radio"  name="sex" value="女"/>女士<br />
                   年龄：<input type="text" name="age" id="age"/><br />
                   <button type="button" onClick={this.loadXMLDoc}>提交数据</button>
               </form>
            </div>
      );
    }
    loadXMLDoc(){
      let xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState ===4 && xmlhttp.status ===200){
          document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
      };
    //获取用户填写的信息
      let name = document.getElementById("name1").value;
      //利用querySelectorAll找到所有radionuclide，遍历其boolean从而筛选除有效的值。
      function findsex(){
        for (let i of document.querySelectorAll("input[type='radio']")) {
            if (i.checked === true) {
                return i.value
            }
        }
      };
    let sex =findsex()
    console.log("sex:",sex);
    let age = document.getElementById("age").value;
  
    //这里是封装发送
    let jsoned = JSON.stringify({"name":name,"sex":sex,"age":age});
    console.log("============",jsoned);
    xmlhttp.open("POST","http://127.0.0.1:8000/server/AjaxLoad/",true);
    xmlhttp.setRequestHeader("Content-type","application/json");
    xmlhttp.send(jsoned);
  }
  }
  
  //=========================================================
  ReactDOM.render(
    <Login />,
    document.getElementById('root')
  );
  

• 我们接下来需要运行的命令是

  npm run build
  

  这个命令的作用是将你写的React打包起来可以应用，最后的目录如下：

  zhangyunzhedeMacBook-Air:build listener$ tree .
  .
  ├── asset-manifest.json
  ├── favicon.ico
  ├── index.html
  ├── manifest.json
  ├── precache-manifest.48b4d8527db511ced977333fd66c9b7a.js
  ├── service-worker.js
  └── static
      └── js
          ├── 2.c086a725.chunk.js
          ├── 2.c086a725.chunk.js.map
          ├── main.05eae418.chunk.js
          ├── main.05eae418.chunk.js.map
          ├── runtime~main.fdfcfda2.js
          └── runtime~main.fdfcfda2.js.map
  

  其中这些我暂时还不知道是做什么的，但是我的React的src文件夹中其实只有一个index.js，就会build出这么多东西来，而且这个index.html是打不开的，暂时存疑。

  后面我们需要使用到build文件

Django的处理

对Django的处理主要是你要搞清楚创建一个项目需要的步骤，这个可以看作对之前的东西的总结吧

< 操作步骤 >

1. 创建项目：

   source activate Blog				#进入虚拟环境
   django-admin startproject service	#建立项目
   cd service
   python3 manage.py startapp blogpost	#建立应用
   python manage.py makemigrations	
   python manage.py migrate
   python manage.py runserver			#启动服务器
   #访问8000端口
   

2. 增加目录：因为创建完项目之后有些需要的目录是没有的所以需要手动创建

   • 在应用目录server下创建template和static分别用于储存模板文件和静态文件，将build/static中的所有文件放入static中，将build中的index.html放入templates/server/下。可是这里有几个很奇怪的点

     • 在放置templates的文件的时候，我们需要建立一个server文件夹，然后将index.html放进去，这是我门在Blog1中所说的，如果不这样做的话会报错
     • 可是在放置static的时候，不能在里面建立server文件夹用来存放js和css，必须直接存放，否则接受不到

3. 配置：对项目文件夹进行配置，修改service/setting.py

   • 在INSTALLED_APP中添加项目名‘server’
   • 在TEMPLATES中添加templates的路径：‘DIRS’: [os.path.join(BASE_DIR ,‘templates’)]
   • 按照之前的教程配置数据库
   • 必须要注意的是，在你修改[ ]的时候，记得加 “,” ！！！

4. url的配置：

   • 修改service/setting.py：因为本来就会有一个admin，这是用来管理的。所以需要你添加你自己应用的url，加入：

   path('server/', include('server.urls')),
   

   ​ 用于索引到刚刚创建的urls.py

   • 修改server/urls.py：这个本来就什么也没有，所以全都自己写

   from django.urls import path
   from . import  views
   
   urlpatterns = [
       path('',views.AjaxLoad2),
       path('AjaxLoad/',views.AjaxLoad)
   ]
   

   • ！！！需要注意的是：一定注意到这个/，你自己添加的一定要有这个/，否则会404

   • 这里的AjaxLoad是需要对应上面的index.js中的发送的路径：

       xmlhttp.open("POST","http://127.0.0.1:8000/server/AjaxLoad/",true);
     

5. 添加views.py

   from django.shortcuts import render
   import json
   from django.http import HttpResponse
   
   # Create your views here.
   
   
   def AjaxLoad2(request):
       if request.method == "GET":
           return render(request, "server/index.html")
   
   def AjaxLoad(request):
       if request.method == "POST":
           if request.body == "":
               return HttpResponse("请您填写有效信息！")
           else:
               receive_bytes = request.body
               receive_str = bytes.decode(receive_bytes)
               receive_obj = json.loads(receive_str)
               print("~~~~~~>", type(receive_obj),receive_obj)
               name = receive_obj["name"]
               sex = receive_obj["sex"]
               age = receive_obj["age"]
               print("#####name",name)
               return HttpResponse("你好！"+name+","+age+"岁的"+sex+"宝宝！")
   

6. 访问http://localhost:8000/server/即可

跨域访问

这样子是可以显示出来了

可是问题是不能提交，就是不能进行React与Django的交互，利用Chrome的检查报错如下：

index.js:45 OPTIONS http://127.0.0.1:8000/server/AjaxLoad/ 404 (Not Found)
(index):1 Access to XMLHttpRequest at 'http://127.0.0.1:8000/server/AjaxLoad/' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

此处参考博客：https://www.jianshu.com/p/8f43ad5482f4 解决了跨域访问问题

• 当 Web 资源请求由其它域名或端口提供的资源时，会发起跨域 HTTP 请求（cross-origin HTTP request）。
  比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。网络上，很多页面从其他站点加载各类资源（包括 CSS、图片、JavaScript 脚本）。
  出于安全考虑，浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest 和 Fetch 发起的 HTTP 请求必须遵循同源策略。因此，Web 应用通过 XMLHttpRequest 对象或 Fetch 仅能向同域资源发起 HTTP 请求。

这样子一个React + Ajax + Django的例子就完成了

== 2019.2.15 ==

Ngnix

参见博客：https://www.cnblogs.com/wcwnina/p/8728391.html

React + Django + Pycharm

参照博客 https://www.jianshu.com/p/aeb02c8e56d5 ，写了一个自动化的脚本用于联合编写React和Django的程序

BASE_DIR=$HOME/Desktop/MyBlog
  
react_kit_dir=$BASE_DIR/React/src		#存放react源码用于编译的目录
django_pro_dir=$BASE_DIR/service/server	#django的工作目录
pro_name=server							

dist_dir=$BASE_DIR/React/build			#build完之后的react编译结果目录

cp -rf $django_pro_dir/React/* $react_kit_dir/	#首先拷贝编写的源码到React源码中等待编译

cd $react_kit_dir/
npm run build

cp -f $dist_dir/*html  $django_pro_dir/templates/$pro_name	#将编译完成的html放到templates中
cp -rf $dist_dir/static/*  $django_pro_dir/static/$pro_name	#将静态文件放入static中