我的Blog搭建之旅4 搭建例項

2021-09-11 03:39:50 字數 3376 閱讀 7855

跨域訪問

== 2019.2.15 ==

今天的目的是融合react和django,實現乙個簡單的前後端互動的小例子

ajax 是一種用於建立快速動態網頁的技術。

傳統的網頁(不使用 ajax)如果需要更新內容,必需過載整個網頁面。

主要參考的部落格是:

對django的處理主要是你要搞清楚建立乙個專案需要的步驟,這個可以看作對之前的東西的總結吧

< 操作步驟 >

建立專案:

source activate blog				#進入虛擬環境

django-admin startproject service

#建立專案

cdservice

python manage.py makemigrations

python manage.py migrate

python manage.py runserver #啟動伺服器

#訪問8000埠

增加目錄:因為建立完專案之後有些需要的目錄是沒有的所以需要手動建立

配置:對專案資料夾進行配置,修改service/setting.py

在templates中新增templates的路徑:『dirs』: [os.path.join(base_dir ,『templates』)]

按照之前的教程配置資料庫

必須要注意的是,在你修改[ ]的時候,記得加 「,」 !!!

url的配置:

path(

'server/'

, include(

'server.urls'))

,

​ 用於索引到剛剛建立的urls.py

from django.urls import path

from

.import views

urlpatterns =

[ path(

'',views.ajaxload2)

, path(

'ajaxload/'

,views.ajaxload)

]

新增views.py

"請您填寫有效資訊!"

"你好!"

+name+

","+age+

"歲的"

+***+

"寶寶!"

)訪問http://localhost:8000/server/即可

這樣子是可以顯示出來了

可是問題是不能提交,就是不能進行react與django的互動,利用chrome的檢查報錯如下:

此處參考部落格: 解決了跨域訪問問題

這樣子乙個react + ajax + django的例子就完成了

參見部落格:

參照部落格 ,寫了乙個自動化的指令碼用於聯合編寫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中

我的部落格搭建(4)

經過一波折騰,最終選擇了valine 部署雲引擎 參考 1 修改themes yilia config.yml 6 valine valine enable true verify false 驗證碼 2 修改themes yilia layout partial article.ejs我是在尾部位...

我的大資料之旅 Kafka環境搭建

3臺已安裝好jdk zookeeper的centos虛擬機器 2 解壓 feng hadoop129 software ls kafka 2.11 2.2.0.tgz feng hadoop129 software tar zxf kafka 2.11 2.2.0.tgz feng hadoop12...

Django 快速搭建簡單的Blog

一,建立專案 我這裡是基於python虛擬環境下做的開發,先進入虛擬環境 workon py3 django 1,為blog建立名為mysite的工程專案 django admin.py startproject mysite cd到專案資料夾 cd mysite 3.建立mysql資料庫 mysq...