tmpbook/django-with-vuejs

Fast and clear in DevOps.

django-with-vuejs

Fast and clear in DevOps. 中文 README.md

Simple is better.

Why Django Project dir and Frontend dir are the same level in example/django-auth-with-react dir，but it's not in project dir?

That is because the django-auth-with-react project is completely a front-end separation project.

Step 1: Install frontend dependencies

In the directory where the package.json file is located

cd django-with-vuejs/project/vue2_frontend
npm install

Step 2: Build the front end

In the frontend directory

npm run build

Step 3: Start the project with Django's own server

In the directory where manage.py is located

pip install -r requirements.txt
python manage.py runserver

All done.

---

but if you want to know the principle, keep reading

Principle

• index.html
• static/*

First. index.html

Handle the index.html file with django template engines

In settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        'DIRS': ['vue2_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',
            ],
        },
    },
]

We change the TEMPLATES.DIRS so that django template engines know where to find the index.html.

Second. static/*

In settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "vue2_frontend/dist/static"),
]

We add STATICFILES_DIRS setting in settings.py, this can make django find the resource

<script type=text/javascript src=/static/js/vendor.677ef0c9485c32b4f6a9.js></script>

in vue2_frontend/dist/static directory, but it worked only in debug mode.

---

Production

We use Nginx to handle the frontend:

• index.html
• static/*

Django only handle the API which Content-Type is application/json.

---

Any questions?

New issues

django-with-vuejs's Issues

项目完整版源码

你好，目前在代码库中的代码只是框架，不知道能否提供项目完整版源码？

跨域问题

参考您的教程, 出现跨域问题, 麻烦看看问题出在哪里.

django setting:

CORS_ORIGIN_ALLOW_ALL = True

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders',
'rest_framework', # DRF
'stock',
]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

vue用axios发送的请求, console报错:

createError.js?f777:15 Uncaught (in promise) Error: Request failed with status code 403 at createError (eval at <anonymous> (app.js:1260), <anonymous>:15:15) at settle (eval at <anonymous> (app.js:1842), <anonymous>:18:12) at XMLHttpRequest.handleLoad (eval at <anonymous> (app.js:1242), <anonymous>:77:7)

how to handle django login page from vuejs ?

hi,
I followed your project structure. I would like to know how we can use allauth templates from vuejs components ?

<div id="app">不会自动注入

在运行了python manage.py runserver后，vue组件并不会注入到

tag中，在localhost:8080/demo中页面显示为空白，同时/admin中能够正常显示

请问用这种方式搭建的环境如何创建上传文件表单与django交互。

因为页面内容全部是通过vue来写的，但是在vue中是没法写{{form}}的。所以没法使用django的forms模块。那该怎么办呢。

啥反应也没有.. 浏览器也没报错

按照教程设置了，但是提示找不到静态文件怎么办。

[21/Feb/2017 13:00:25] "GET / HTTP/1.1" 200 542
Not Found: /frontend/static/css/app.d9e5482d15c87b1dd6cd71e0a046b9e0.css
[21/Feb/2017 13:00:25] "GET /frontend/static/css/app.d9e5482d15c87b1dd6cd71e0a046b9e0.css HTTP/1.1" 404 2189
Not Found: /frontend/static/js/manifest.246483826c627e391808.js
[21/Feb/2017 13:00:25] "GET /frontend/static/js/manifest.246483826c627e391808.js HTTP/1.1" 404 2162
Not Found: /frontend/static/js/vendor.7b7201ae295aa30bf628.js
[21/Feb/2017 13:00:25] "GET /frontend/static/js/vendor.7b7201ae295aa30bf628.js HTTP/1.1" 404 2156
Not Found: /frontend/static/js/app.209f0c52a5de8eec60f5.js
[21/Feb/2017 13:00:25] "GET /frontend/static/js/app.209f0c52a5de8eec60f5.js HTTP/1.1" 404 2147
Not Found: /frontend/static/js/manifest.246483826c627e391808.js
[21/Feb/2017 13:00:25] "GET /frontend/static/js/manifest.246483826c627e391808.js HTTP/1.1" 404 2162
Not Found: /frontend/static/js/vendor.7b7201ae295aa30bf628.js
[21/Feb/2017 13:00:25] "GET /frontend/static/js/vendor.7b7201ae295aa30bf628.js HTTP/1.1" 404 2156
Not Found: /frontend/static/js/app.209f0c52a5de8eec60f5.js
[21/Feb/2017 13:00:25] "GET /frontend/static/js/app.209f0c52a5de8eec60f5.js HTTP/1.1" 404 2147

已经加了这句了

# Add for vuejs
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

有没有更加复一点的项目代码？

这个代码比较的简单，有没有更加复杂的项目代码可以供参考

python: can't open file 'manage': [Errno 2] No such file or directory

Hi,

After install the third-lib in requirements.txt and run the the server In the directory where
The message "python: can't open file 'manage': [Errno 2] No such file or directory" will be shown in cmd.

Could you please tell me how could i resolve this problem?

Thanks,
Peng

django的model如何应用？

django model 层在此是如何应用的？之前我完成过一个使用 django rest framework 做的app后端，按照兄弟的方法部署，可以正常运行，但是我在考虑一个问题，django model 层的数据怎么传输应用到vuejs?

請教下下目錄問題

請教下為什麼example里的 backend 和 frontend 目錄是平級的（backend作為單獨的一個django project）？
而project 里的frontend在 django的目錄里

设置 STATICFILED_DIRS 仍然找不到静态文件

我webpack之后的文件在 app/dist/static/build.js
index.html 里面引入是用的 </script>
在django的settings里面设置了
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'app/dist/static') ]
INSTALLED_APP里面也加了 app

但是运行的时候，仍然找不到build.js
是不是需要再index.html引入build.js的时候仍然需要使用{% static '' %}?

npm run build 出错

错误

(env) D:\MU\Projects\django-with-vuejs\my_project\frontend>npm run build

[email protected] build D:\MU\Projects\django-with-vuejs\my_project\frontend
node build/build.js

module.js:471
throw err;
^

Error: Cannot find module 'D:\MU\Projects\django-with-vuejs\my_project\frontend\build\build.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: node build/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'node build/build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the frontend package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node build/build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs frontend
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls frontend
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\MU\Projects\django-with-vuejs\my_project\frontend\npm-debug.log

(env) D:\MU\Projects\django-with-vuejs\my_project\frontend>

Cannot find module 'D:\code\vue\django-with-vuejs\my_project\frontend\build\build.js'

执行 npm run build的一直报错
Error: Cannot find module 'D:\code\vue\django-with-vuejs\my_project\frontend\build\build.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:393:7)
at startup (bootstrap_node.js:150:9)
at bootstrap_node.js:508:3

backend

提示：No module named urls
查看堆栈 url(r'^api/', include('backend.urls', namespace='api'))
请问这个怎么处理

where is the vuejs part

代码和知乎专栏里的代码不一样，以哪个为准？

-settings.py 代码和知乎专栏里的代码不一样，以哪个为准？

我按照知乎专栏的步骤一步一步来的，运行 vue 和 django 后提示：

我前端项目里，static 目录是空的，不知道为什么，是不是因为这个原因？

麻烦了 :)