django3.1+vue,前后端分离步骤快速示例
1. 创建一个目录,进入目录(还没有用django创建项目,所以这个目录还不是项目目录,会在里面率先创建一些虚拟环境相关文件).
2.创建并激活虚拟隔离环境
D:\'Program Files'\Python\Python3.9\Scripts\pipenv --python3.9.2 E:\MyPythonProjects\vue-django>"d:\Program Files\Python\Python3.9\Scripts\pipenv.exe" shell
3.pip或者pipenv install django
(vue-django-X2kn2ljj) E:\MyPythonProjects\vue-django>pipenv install django Installing django... Adding django to Pipfile's [packages]... Installation Succeeded Pipfile.lock not found, creating... Locking [dev-packages] dependencies... Locking [packages] dependencies... Locking...Building requirements... Resolving dependencies... Success! Updated Pipfile.lock (06f36b)! Installing dependencies from Pipfile.lock (06f36b)... ================================ 0/0 - 00:00:00
4.创建一个django项目: django-admin startproject vue_django(项目名)
(vue-django-X2kn2ljj) E:\MyPythonProjects\vue-django>django-admin startproject vue_django (vue-django-X2kn2ljj) E:\MyPythonProjects\vue-django>dir 驱动器 E 中的卷是 新加卷 卷的序列号是 3AC3-28BB E:\MyPythonProjects\vue-django 的目录 2021/03/29 02:28 <DIR> . 2021/03/29 02:28 <DIR> .. 2021/03/29 02:26 151 Pipfile 2021/03/29 02:26 1,724 Pipfile.lock 2021/03/29 02:28 <DIR> vue_django 2 个文件 1,875 字节
5. 用pycharm或vscode打开当前项目, 在项目根目录下创建templates目录,也就是有manage.py的那个目录,然后修改settings文件.
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': ["templates"], # 项目根目录下创建一个目录,把目录名写在这里 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]
LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai'
6. manage.py server, 应该可以运行django项目了.ctrl+c, 退出服务. 接下来创建一个app
7. manage.py startapp book(APP名字)
8. 在book文件夹下创建一个空的urls.py 用来以后补充填写路由信息.
9. 编写book文件夹下的views.py
from django.shortcuts import render
# Create your views here.
def home(request): # 定义一个视图函数,用来相应web请求
return render(request,"index.html") # 返回一个静态页面,这个index.html模板还没创建.
10. 创建index.html, 在templates下,随便写个页面
11. 视图函数和模板都有了,再规划一个路由地址,在刚才的那个空urls.py下写入
from django.urls import path from . import views urlpatterns=[ path("",view=views.home,name="home"), # 访问这个APP的""地址的时候会调用views中定义的home函数处理. ]
12. 编写项目下的urls.py, 不是app下的urls.py.这个urls.py是个路由总管
from django.contrib import admin from django.urls import path, include # 新增include urlpatterns = [ path('admin/', admin.site.urls), path('book/',include('book.urls')), # 新增,本行把book APP下的urls.py路由信息导入 ]
13. 在settings里添加app名称
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'book', # 新增 ]
14 . 到此第一个APP的html页面完成, 可以runserver下.
15. 增加复杂度,让某个路径请求返回一串Json数据, 在book APP的urls.py下增加
from django.shortcuts import render # Create your views here. def home(request): # 定义一个函数,用来相应web请求 return render(request,"index.html") # 返回一个静态页面,这个index.html还没创建. # 以下新增, from的书写位置并不规范,方便示例而已 from django.http.response import JsonResponse #导入能处理Json响应的模块 def books(request): books_list = [ {"id":1, "title":"VUE详解","price":100}, {"id":2, "title": "K8s详解", "price": 200}, {"id":3, "title": "Echarts详解", "price": 300} ] return JsonResponse(books_list,safe=False) # 实际项目中一般json数据来自数据库
16. 在book APP的urls下添加一个url路由
path("api/books/",view=views.books, name="api-books"),
17. 重新runserver, 访问http://127.0.0.1:8000/book/api/books/, 应该可以看到页面.
18. 好了,前后端分离就是django负责对不同的web访问地址启动不同的视图,返回一串数据,这串数据由vue等前端框架截获,经处理在浏览器上展示给客户.下面开始制作能用vue处理的web页面. 重新编写刚才的那个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django-vue</title>
<!-- 开发环境的vue2版本，包含了有帮助的命令行警告, vue3是合成型API,另有不同 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- axios负责处理json数据 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<h1> Django vue</h1>
<div id="app">
<table>
<tr>
<th>#</th>
<th>标题</th>
<th>单价</th>
</tr>
<!-- 这里使用了双方括号 ,代替双花括号,因为django模板会使用双花括号,造成与vue的冲突.-->
<tr v-for="book in books">
<td>[[book.id]]</td>
<td>[[book.title]]</td>
<td>[[book.price]]</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:"#app",
delimiters: ["[[","]]"], // 这里声明一个叫分隔符的成员,使得双方括号 ,代替双花括号
data: {
books: []
},
//加载完毕,挂载绑定的时候,执行fetchData这个函数
mounted: function(){
this.fecthData();
},
methods: {
fecthData(){
axios.get("/book/api/books/").then(response=>{
this.books = response.data;
}), err=>{
console.log(err);
};
}
}
});
</script>
</body>
</html>
19. 重新runserver, 访问http://127.0.0.1:8000/book/ ,就能看见下面的页面
这就是django+Vue的一个简单快速的示例, 从这个示例中可以看出来前后端分离后,如果是一个人全栈开发写个小项目,工作量其实是提升了,
