环境准备

Pycharm
Python37
Django==2.2.1
Vue
Element
Jquery
Axios

创建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搭建成功，可以根据业务逻辑嗨起来了

最后编辑于：2019.06.12 17:34:30