最近根据项目需要，使用django+vue来做个项目，当前第一次使用这种模式进行开发，故用本文档记录使用，让后续想使用的小伙伴可以进行参考，少走弯路
环境准备
创建django项目
建议参考相关文章创建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 -
在环境准备中的对应的js下载至对应的目录，得到如图所示的文档结构
image.png
页面引用
- 创建一个django app，并在其app下创建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">立即创建</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>
- 编写服务端代码，在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中的打印从前台获取的参数，实际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/进行访问，可以得到如图所示的画面
image.png -
输入测试信息后点击立即创建，得到如图提示
image.png -
打开启动项目的Terminal，可以看到前台输入的信息打印在Terminal上
image.png 至此，一个简单的Dome搭建成功，可以根据业务逻辑嗨起来了
