最近根據(jù)項目需要，使用django+vue來做個項目，當(dāng)前第一次使用這種模式進(jìn)行開發(fā)，故用本文檔記錄使用，讓后續(xù)想使用的小伙伴可以進(jìn)行參考，少走彎路
環(huán)境準(zhǔn)備
創(chuàng)建django項目
建議參考相關(guān)文章創(chuàng)建Django項目
修改項目配置
- 在Django項目settings.py 中添加如下配置
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "statics")
)
-
在項目根目錄下添加文件夾statics→js→（axios，element，jquery，vue）如圖所示
image.png -
在環(huán)境準(zhǔn)備中的對應(yīng)的js下載至對應(yīng)的目錄，得到如圖所示的文檔結(jié)構(gòu)
image.png
頁面引用
- 創(chuàng)建一個django app，并在其app下創(chuàng)建templates
- 新增一個模板文件
- 在模板文件夾中增加一個test.html，并將一下代碼copy至test.html
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- -->
<link href="{% static 'css/element/index.css' %}" rel="stylesheet">
<script src="{% static 'js/vue/vue_dev.js' %}"></script>
<script src="{% static 'js/element/index.js' %}"></script>
<script src="{% static 'js/axios/axios.min.js' %}"></script>
</head>
<body>
<div id="app" style="width: 300px">
<el-input placeholder="請輸入Ip" v-model="device.ip" clearable></el-input>
<el-input placeholder="請輸入username" v-model="device.username" clearable></el-input>
<el-input placeholder="請輸入password" v-model="device.password" clearable></el-input>
<el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
device: {
ip: '',
username: '',
password: '',
}
}
},
methods: {
getCookie(name) {
var value = '; ' + document.cookie;
var parts = value.split('; ' + name + '=');
if (parts.length === 2) return parts.pop().split(';').shift()
},
onSubmit() {
var that = this;
//添加headers 用于解決CSRF Failed: CSRF token missing or incorrect問題
axios.post('/test/', that.device, {headers: {'X-CSRFToken': that.getCookie('csrftoken')}})
.then(function (response) {
alert(JSON.stringify(response.data))
})
.catch(function (error) {
console.log(error)
})
}
}
})
</script>
</html>
- 編寫服務(wù)端代碼，在Appname.views文件中添加一下代碼
class Test(TemplateView):
template_name = 'test.html'
def get_context_data(self, **kwargs):
context = super(Test, self).get_context_data(**kwargs)
return context
def post(self, request, *args, **kwargs):
body = json.loads(request.body)
ip = body["ip"]
username = body["username"]
password = body["password"]
print(ip, username, password) #用于在Terminal中的打印從前臺獲取的參數(shù)，實際coding中不需要
return HttpResponse('succeed')
- 添加url配置
1.在項目所屬的App下添加以下配置
from Appname.views import Test
urlpatterns = [path("/Test/", Test.as_view(), name='Test'),]
2.在項目所urls中添加以下配置
from django.urls import path, include
urlpatterns =[path("Test",include("Appname.urls")),]
驗證
通過Terminal輸入 python manage.py runserver 啟動django項目
-
在瀏覽器中輸入http://127.0.0.1:8000/Test/Test/進(jìn)行訪問，可以得到如圖所示的畫面
image.png -
輸入測試信息后點擊立即創(chuàng)建，得到如圖提示
image.png -
打開啟動項目的Terminal，可以看到前臺輸入的信息打印在Terminal上
image.png 至此，一個簡單的Dome搭建成功，可以根據(jù)業(yè)務(wù)邏輯嗨起來了
