引言
最近打算做一个项目,建一个前后端分离的网页开发框架。琢磨来琢磨去,最后选了Django+Vue.js 为什么这么选呢?
Django嘛,可以快速开发安全和可维护的网站,并且免费且开源。三分钟就可以运行起来一个默认网页,对新手不要太友好。
Vue.js是一套用于构建用户界面的渐进式框架。对前端开发者来说易于上手,且功能强大,代码清晰,另外结合支持类库可以为复杂的单页应用提供驱动。
操作步骤:
[1]配置Django,运行起来
[2]配置Vue.js,运行起来
[3]整合!!(对Djnago 和Vue都已经跑起来的同学们可以直接看整合)
3.1是在development mode下的整合,3.2是在production mode下的整合(至于两个mode下有什么区别,推荐查阅官网哦)不想看教程的同学直接拉到底部可以下载代码哦~
环境
操作系统:Windows 10
后端:Python3,Django==3.0.5 django-webpack-loader==0.7.0 djangorestframework asgiref==3.2.7 pytz==2019.3 sqlparse==0.3.1
前端:Vue.js webpack-bundle-tracker vue/cli
「1」.Django环境配置
构建介绍不要太多,这里附一个官方教程。
Djangodocs.djangoproject.com简单来说就是,先下载:
python -m django --version
然后创建一个项目:
django-admin startproject backend
你就会拥有一个名叫backend的Django APP,
结构大约如下所示:
backend/
|
|____ backend/ # root backend
| |____ __init__.py
| |____ settings.py
| |____ urls.py
| |____ views.py
|____ templates
|____ manage.py
|____......
在你的IDE运行一下或命令行输入:
python manage.py runserver
项目运行成功后,会提示你访问URL查看结果。一般是http://127.0.0.1:8000
,现在打开这个地址,你就能看见Django的默认网页:
![3cb6457018bfb293134792f5eda2539b.png](https://i-blog.csdnimg.cn/blog_migrate/b518dee61b3bde97ff1f69039dd741c9.jpeg)
「2」. Vue.js环境配置
Vue.js的文档也很多,这里贴一个比较官方的
Vue Installationvuejs.org![2eb466054306c280b8d466c31898a0e3.png](https://i-blog.csdnimg.cn/blog_migrate/af0e7b570359c41007ac90784c2e558d.jpeg)
如果你有npm环境那么直接:
npm install vue
然后创建一个App
vue create frontend
然后进入到前端文件路径下:/frontend
cd frontend
在这个路径下你需要下载node dependencies:
npm install
其他包:
npm install -g @vue/cli @vue/cli-service-global
npm install webpack-bundle-tracker@0.4.3
这里:webpack-bundle-tracker最好标明0.4.3版本。因为这个 版本是最新释放的稳定版本,如果不标注那么下载到webpack-bundle-tracker@1.0.0-alpha.1 的话,可能会造成一些无法查明原因的错误。这里可以在frontend里试一下运行:
npm run serve
就可以得到Vue.js的默认网页咯
![2356e01457669fff21e824b127a96c2d.png](https://i-blog.csdnimg.cn/blog_migrate/a36860ceaea21449ad3db17486e53366.jpeg)
这里的工程结构如下
my_project/
|
|____ backend/ # root backend
| |____ __init__.py
| |____ settings.py
| |____ urls.py
| |____ views.py
|____ templates
|
|____ frontend/ # root frontend
| |____ src/ # vue components, router, store, etc.
| |____ node_modules/
| |____......
|
|____ manage.py
|____......
「3」. 整合
整合方法有很多。(这篇文章我说了太多很多......这资料真的很多)
我选了两种方式来整合。
3.1是在development mode下的整合,3.2是在production mode下的整合(至于两个mode下有什么区别,推荐查阅官网哦)
「3.1」. 整合(development mode)
首先在Vue.js的development mode下(也就是你运行npm run serve)后的状态。
打开frontend/vue.config.js文件(如果没有的话创建一个),粘贴下面内容:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
// 如果不在windows环境请试下: "http://0.0.0.0:8080/"
publicPath: "http://127.0.0.1:8080",
outputDir: "./dist/",
chainWebpack: (config) => {
config
.plugin("BundleTracker")
.use(BundleTracker, [{ filename: "./webpack-stats.json" }]);
config.output.filename("bundle.js");
config.optimization.splitChunks(false);
config.resolve.alias.set("__STATIC__", "static");
config.devServer
// the first 3 lines of the following code have been added to the configuration
.public("http://127.0.0.1:8080")
.host("127.0.0.1")
.port(8080)
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.disableHostCheck(true)
.headers({ "Access-Control-Allow-Origin": ["*"] });
}
};
然后跑一下:
npm run serve
这样你就会在当前目录下得到一个配置文件webpack-stats.json。
配置backend/settings.py:
INSTALLED_APPS = [
...
'rest_framework',
'webpack_loader',
]
.
.
.
TEMPLATES = [
{ ...
'DIRS': [os.path.join(BASE_DIR, 'templates')],
...
},
]
.
.
.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend/src/assets"),
os.path.join(BASE_DIR, "frontend/dist"),
]
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json')
}
}
在templates下创建一个index.html file
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- This part is in the screenshot at the bottom! -->
<h1>Vue JS</h1>
<div id="app"></div>
{% render_bundle 'app' %}
</body>
</html>
在backend/views.py下配置页面:
from django.conf import settings
from django.views.generic.base import TemplateView
class IndexTemplateView(TemplateView):
def get_template_names(self):
template_name = "index.html"
return template_name
最后配置backend/url.py
from django.urls import re_path
from core.views import IndexTemplateView
urlpatterns = [
...
re_path(r"^.*$", IndexTemplateView.as_view(), name="entry-point"),
]
大功告成!!现在分别运行vue和Django项目。Django可以打开Vue的默认界面了!
npm run serve
python manage.py runserver
![5ca6a89ca820bc87efe1d8060ef00261.png](https://i-blog.csdnimg.cn/blog_migrate/50fbec1c4896b2d9c36ab307b3a685a3.png)
附GitHub链接:
Lyiyian/Django-vue-servegithub.com![f49cc9a8d11e212f7e739ce50bda08eb.png](https://i-blog.csdnimg.cn/blog_migrate/26562c8f9fa373d8be4a3f0a053389be.png)
「3.2」. 整合(production mode)
在Vue的production mode下(就是运行npm run build的状态),我们同样可以整合。
不过有大神已经写得挺好了。按照 @UCloud云计算 的文章来配置就可以很好得进行了
UCloud云计算:我如何使用 Django + Vue.js 快速构建项目zhuanlan.zhihu.com![b5d35109dc53cdb6f8d1989ec3eeb35a.png](https://i-blog.csdnimg.cn/blog_migrate/fb593bd8432d24077fac9bfe5acb2ff2.jpeg)
附GitHub链接:
Lyiyian/vue_Djangogithub.com![f49cc9a8d11e212f7e739ce50bda08eb.png](https://i-blog.csdnimg.cn/blog_migrate/26562c8f9fa373d8be4a3f0a053389be.png)
另外跨域问题也有解决 @Normal WLS
Normal WLS:手把手Django+Vue前后端分离开发入门(附demo)zhuanlan.zhihu.com![75982b7ffb12d5c3c026e5627404cd29.png](https://i-blog.csdnimg.cn/blog_migrate/a4a21f4c23552c72d6576d9416ccc806.jpeg)
「4」. 总结
开发资料多如牛毛,只有你想不到,没有你找不到。
那么,奔涌吧,程序员。
Development mode下整合:
Lyiyian/Django-vue-servegithub.com![f49cc9a8d11e212f7e739ce50bda08eb.png](https://i-blog.csdnimg.cn/blog_migrate/26562c8f9fa373d8be4a3f0a053389be.png)
Production mode下整合:
Lyiyian/vue_Djangogithub.com![f49cc9a8d11e212f7e739ce50bda08eb.png](https://i-blog.csdnimg.cn/blog_migrate/26562c8f9fa373d8be4a3f0a053389be.png)