Django+Vue.js 初学入手的一些坑,已填坑
来源:互联网 发布:js保存cookie到本地 编辑:程序博客网 时间:2024/05/02 04:42
我用的django是1.11.0 vue是最新的,这是前提,之前因django版本不对导致一系列问题。另外要讲项目部署在Linux上运行,windows下运行也会出现很多坑。
接下来是我参考网上的一片文章开始搭建环境,其中有问题的地方会用红色加粗说明。
1. 创建Django项目
命令:
django-admin startproject ulb_manager
结构:
.├── manage.py└── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
2. 进入项目根目录,创建一个 app 作为项目后端
命令:
cd ulb_managerpython manage.py startapp backend
即:app 名叫做 backend
结构:
.├── backend│ ├── __init__.py│ ├── admin.py│ ├── migrations│ │ └── __init__.py│ ├── models.py│ ├── tests.py│ └── views.py├── manage.py└── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
3. 使用vue-cli创建一个vuejs项目作为项目前端
命令:
vue-init webpack frontend
即:项目名叫 frontend
结构:
.├── backend│ ├── __init__.py│ ├── admin.py│ ├── migrations│ │ └── __init__.py│ ├── models.py│ ├── tests.py│ └── views.py├── frontend│ ├── README.md│ ├── build│ │ └── ....│ ├── config│ │ ├── dev.env.js│ │ ├── index.js│ │ ├── prod.env.js│ │ └── test.env.js│ ├── index.html│ ├── package.json│ ├── src│ │ ├── App.vue│ │ ├── assets│ │ │ └── logo.png│ │ ├── components│ │ │ └── Hello.vue│ │ └── main.js│ ├── static│ └── test│ └── ...├── manage.py└── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
结构总结:
可以看到项目根目录有两个新文件夹,一个叫 backend ,一个叫 frontend,分别是:- backend Django的一个app
- frontend Vuejs项目
4. 接下来我们使用 webpack 打包Vusjs项目
命令:
cd frontendnpm installnpm run build
结构:
我引入了一些包,比如element-ui等,你的static里面的内容会不同,没关系 index.html 和 static 文件夹相同就够了dist├── index.html└── static ├── css │ ├── app.42b821a6fd065652cb86e2af5bf3b5d2.css │ └── app.42b821a6fd065652cb86e2af5bf3b5d2.css.map ├── fonts │ ├── element-icons.a61be9c.eot │ └── element-icons.b02bdc1.ttf ├── img │ └── element-icons.09162bc.svg └── js ├── 0.8750b01fa7ffd70f7ba6.js ├── vendor.804853a3a7c622c4cb5b.js └── vendor.804853a3a7c622c4cb5b.js.map
构建完成会生成一个 文件夹名字叫dist,里面有一个 index.html 和一个 文件夹static ,
5. 使用Django的通用视图 TemplateView
找到项目根 urls.py (即ulb_manager/urls.py),使用通用视图创建最简单的模板控制器,访问 『/』时直接返回 index.html
此处注意要引入TemplateView否则运行时会报错,说不知道TemplateView网上是这样的(无法使用):
urlpatterns = [ url(r'^admin/', admin.site.urls), **url(r'^$', TemplateView.as_view(template_name="index.html")),** url(r'^api/', include('backend.urls', namespace='api'))]
6. 配置Django项目的模板搜索路径
上一步使用了Django的模板系统,所以需要配置一下模板使Django知道从哪里找到index.html
打开 settings.py (ulb_manager/settings.py),找到TEMPLATES配置项,修改如下:
这块也要注意下:网上原文(去掉*号):
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', # 'DIRS': [], **'DIRS': ['frontend/dist']**, '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', ], }, },]
注意这里的 frontend 是VueJS项目目录,dist则是运行 npm run build 构建出的index.html与静态文件夹 static 的父级目录
这时启动Django项目,访问 / 则可以访问index.html,但是还有问题,静态文件都是404错误,下一步我们解决这个问题7. 配置静态文件搜索路径
打开 settings.py (ulb_manager/settings.py),找到 STATICFILES_DIRS 配置项,配置如下:
# Add for vuejsSTATICFILES_DIRS = [ os.path.join(BASE_DIR, "frontend/dist/static"),]
这样Django不仅可以将/ulb 映射到index.html,而且还可以顺利找到静态文件
此时访问 /ulb 我们可以看到使用Django作为后端的VueJS helloworld
然后运行项目就可以看到所谓的vue界面了。
- Django+Vue.js 初学入手的一些坑,已填坑
- vue.js踩过的一些坑
- 解决 Django + Vue 的一些问题
- 初学vue.js
- vue.js初学记录
- vue.js初学1
- Vue.js初学
- Vue初学时一些该注意的细节
- django的一些坑
- 初学vue遇到的坑(一)
- 关于Django与VUE.js
- 关于Vue.js的一些总结(1)
- 关于Vue.js的一些总结(2)
- Django项目中创建前端Vue.js项目的步骤
- Django 遇到的一些坑
- vue.js初学2之vue指令①
- vue.js初学3之vue指令②
- vue.js+django开发租车系统
- 交通流
- 为何要在GLSL中使用UBO
- NIO学习整理
- Codeforces Round #408 (Div. 2)-D. Police Stations
- Java泛型
- Django+Vue.js 初学入手的一些坑,已填坑
- oracle11g adg从库开启闪回
- ln: target ‘libcublas’ is not a directory
- Error:Jack is required to support java 8 language features.
- 使用popwindow制作弹出框与获得焦点弹出软键盘
- 【IMWeb训练营作业】自定义Select
- 【NGUI】当打包一个特别大的图集时候该怎么减小图集大小?
- (转)深入理解LayoutInflater.inflate()
- MySql字符转义