python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发

一、概述

二、前端页面开发

2.1、在html文件的头中引入相关模块

Document

2.2、在html文件中body后面引入自定义的JS文件(即导入Vue代码)

备注:

备注1、关联关系

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第1张图片

备注2、布局相关

html,body,#app,.el-container{margin:0px;padding:0px;height:100%;

}

三、后端接口开发

3.1、在新建的应用APP中的views.py文件中新建接口

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第2张图片

3.2、路由配置

把新建的方法与路由进行关联(请求路由地址 就直接请求到新建的方法了)

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第3张图片

3.3、测试接口路由

运行后端服务:python manage.py runserver

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第4张图片

报错

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第5张图片

把地址添加到 settings文件中的 ALLOWED_HOSTS 中

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第6张图片

再次在浏览器中请求接口地址 已成功(显示接口返回的数据)

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第7张图片

四、前端通过Axios调用后端接口

五、首次创建Django超级管理员

5.1、创建默认库

命令:python manage.py migrate

5.2、创建超级管理员

命令:python manage.py createsuperuser

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第8张图片

5.3、启动Django

命令:python manage.py runserver

进入管理后台:http://127.0.0.1:8000/admin/login/?next=/admin/

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第9张图片

python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发_第10张图片

你可能感兴趣的:(python,django与vue开发)