vue.js 和django模板_django的jinja2模板和vue.js模板 - CSDN
  • 我用的django是1.11.0 vue是最新的,这是前提,之前因django版本不对导致一系列问题。另外要讲项目部署在Linux上运行,windows下运行也会出现很多坑。 接下来是我参考网上的一片文章开始搭建环境,其中有问题的地方...

    我用的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_manager
    python 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
    
    此处记得要在setting.py文件中添加上你的app

    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 frontend
    npm install
    npm 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 vuejs
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, "frontend/dist/static"),
    ]
    

    这样Django不仅可以将/ulb 映射到index.html,而且还可以顺利找到静态文件

    此时访问 /ulb 我们可以看到使用Django作为后端的VueJS helloworld


    然后运行项目就可以看到所谓的vue界面了。


    展开全文
  • django模板vue.js的变量都是使用“{{”“}}”包裹起来的,在渲染django模板时会先替代掉所有的“{{”“}}”及被包裹在其中的内容,使得vue.js没有使用”{{“、”}}”来绑定变量。 处理方法: 方法1:...

    问题:

    django模板与vue.js的变量都是使用“{{”和“}}”包裹起来的,在渲染django模板时会先替代掉所有的“{{”和“}}”及被包裹在其中的内容,使得vue.js没有使用”{{“、”}}”来绑定变量。

    处理方法:

    方法1:修改vue.js的默认的绑定符号

    Vue.config.delimiters = ["[[", "]]"];

    执行这个之后,你就可以使用“[[”、“]]”来绑定变量的数据了

    方法2:使用模板的标签来输出“{{”、“ }}”

    django模板的templatetag可以渲染模板时输出模板标签,标签参数及输出如下:

    参数 输出
    openblock {%
    closeblock %}
    openvariable {{
    closevariable }}
    openbrace {
    closebrace }
    opencomment {#
    closecomment #}

    我们可以在模板中用

    {% templatetag openvariable %} 
    {% templatetag closevariable %}

    来替代”{{“、”}}”

    方法3:禁用django模板渲染

    django标签 verbatim可以使包裹其中的代码不进行渲染保持原样输出

    {% verbatim %}
        {{ vue }}
    {% endverbatim %}

    我们可以在需要用于vue.js的地方使用{% verbatim %} {% endverbatim %}包裹。

    展开全文
  • 参考: ... 方法1:修改vue.js的默认的绑定符号 Vue.config.delimiters = ["[[", "]]"]; 执行这个之后,你就可以使用“[[”、“]]”来绑定变量的数据了 方法2:使用模板的标签来...django模板的templatetag可...

    参考:

    • https://my.oschina.net/soarwilldo/blog/755984

    方法1:修改vue.js的默认的绑定符号

    Vue.config.delimiters = ["[[", "]]"];

    执行这个之后,你就可以使用“[[”、“]]”来绑定变量的数据了

    方法2:使用模板的标签来输出“{{”、“ }}”

    django模板的templatetag 可以渲染模板时输出模板标签,标签参数及输出如下:

    参数输出
    openblock {%
    closeblock %}
    openvariable {{
    closevariable }}
    openbrace {
    closebrace }
    opencomment {#
    closecomment #}

    我们可以在模板中用

    {% templatetag openvariable %} 
    {% templatetag closevariable %}

    来替代"{{"、"}}"

    方法3:禁用django模板渲染

    django标签 verbatim可以使包裹其中的代码不进行渲染保持原样输出

    {% verbatim %}
        {{ vue }}
    {% endverbatim %}

    我们可以在需要用于vue.js的地方使用{% verbatim %} {% endverbatim %}包裹。

    转载于:https://www.cnblogs.com/flowjacky/p/6235341.html

    展开全文
  • 整合 Django + Vue.js 框架快速搭建web项目 一、 背景 在工作中我们经常须要构件一些基于web的项目,例如内部测试平台、运维系统等。本篇主要介绍如何使用后端Django + 前端Vue.js的技术栈快速地搭建起一套web...

    一、 背景

    在工作中我们经常须要构件一些基于web的项目,例如内部测试平台、运维系统等。本篇主要介绍如何使用后端Django + 前端Vue.js的技术栈快速地搭建起一套web项目的框架。

    为什么使用Django和Vue.js?

    Django是Python体系下最成熟的web框架之一,由于Python语言的易用性和受众面广,Django框架也因其能够快速开发网站应用的特性成为了中小型网站开发框架首选。且Django具备的数据分析( Pandas )、任务队列( Celery )、Restful API( Django REST framework )、ORM(类似java的hibernate)等一众功能都使得用户在面对任何建站需求时都能够得心应手。

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js同样支持双向绑定、mustache标签语法等特性,并提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

    本篇使用Vue.js作为前端框架,代替Django本身较为孱弱的模板引擎,Django则作为服务端提供api接口,使得前后端实现完全分离,更适合单页应用的开发构建。

    二、 环境准备

    安装环境:

    Django系:

    Python 2.7 +

    Django 1.11

    Mysql 5.7

    Python的MySQLdb模块等

    推荐python相关的模块(包括Django)都使用python自带的pip安装器安装。命令:pip install django即可安装最新版本的django

    Vue.js系:

    Node.js 6.1

    有关Vue的模块(包括vue)我们都使用node自带的npm包管理器安装

    三、 构建Django项目

    我们首先使用Django来搭建web后端api框架。

    1、 先在终端敲入命令:

    django-admin startproject myproject

    目录结构:

    uploading.4e448015.gif转存失败重新上传取消

    2、 进入项目根目录,创建一个app:

    python manage.py startapp myapp

    目录结构:

    uploading.4e448015.gif转存失败重新上传取消

    3、 在myproject下的settings.py配置文件中,把默认的sqllite3数据库换成我们的mysql数据库:

    # Database

    # https://docs.djangoproject.com/en/1.11/ref/settings/#databases

     

    DATABASES = {

    'default': {

    'ENGINE': 'django.db.backends.mysql',

    'NAME': 'myproject',

    'USER': 'root',

    'PASSWORD': 'root',

    'HOST': '127.0.0.1',

    }}

    并把app加入到installed_apps列表里:

    INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'myapp',]

    4、 在app目录下的models.py里我们简单写一个model如下:

    # -*- coding: utf-8 -*-from __future__ import unicode_literals

     

    from django.db import models

     

    # Create your models here.class Book(models.Model):

    book_name = models.CharField(max_length=64)

    add_time = models.DateTimeField(auto_now_add=True)

     

    def __unicode__(self):

    return self.book_name

    只有两个字段,书名book_name和添加时间add_time。如果没有指定主键的话django会自动新增一个自增id作为主键

    5、 在app目录下的views里我们新增两个接口,一个是show_books返回所有的书籍列表(通过JsonResponse返回能被前端识别的json格式数据),二是add_book接受一个get请求,往数据库里添加一条book数据:

    # Create your views here.

    @require_http_methods(["GET"])

    def add_book(request):

    response = {}

    try:

    book = Book(book_name=request.GET.get('book_name'))

    book.save()

    response['msg'] = 'success'

    response['error_num'] = 0

    except Exception,e:

    response['msg'] = str(e)

    response['error_num'] = 1

     

    return JsonResponse(response)

     

    @require_http_methods(["GET"])

    def show_books(request):

    response = {}

    try:

    books = Book.objects.filter()

    response['list'] = json.loads(serializers.serialize("json", books))

    response['msg'] = 'success'

    response['error_num'] = 0

    except Exception,e:

    response['msg'] = str(e)

    response['error_num'] = 1

     

    return JsonResponse(response)

    可以看出,在ORM的帮忙下,我们的接口实际上不需要自己去组织SQL代码

    6、 在app目录下,新增一个urls.py文件,把我们新增的两个接口添加到路由里:

    from django.conf.urls import url, include import views

    urlpatterns = [ url(r'add_book$', views.add_book, ), url(r'show_books$', views.show_books, ), ]

    1. 我们还要把app下的urls添加到project下的urls中,才能完成路由:

    from django.conf.urls import url, include

    from django.contrib import admin

    from django.views.generic import TemplateView

    import myapp.urls

     

    urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^api/', include(myapp.urls)),

    url(r'^$', TemplateView.as_view(template_name="index.html")),]

    1. 在项目的根目录,输入命令:

    python manage.py makemigrations myapp

    python manage.py migrate

    查询数据库,看到book表已经自动创建了:

    uploading.4e448015.gif转存失败重新上传取消

    1. 在项目的根目录,输入命令:

    python manage.py runserver

    启动服务,通过postman测试一下我们刚才写的两个接口:

    add_book

    uploading.4e448015.gif转存失败重新上传取消

    show_books

    uploading.4e448015.gif转存失败重新上传取消

    四、 构建Vue.js前端项目

    1、 先用npm安装vue-cli脚手架工具(vue-cli是官方脚手架工具,能迅速帮你搭建起vue项目的框架):

    `npm install -g vue-cli`

    安装好后,在project项目根目录下,新建一个前端工程目录:

    vue-init webpack appfront //安装中把vue-router选上,我们须要它来做前端路由

    进入appfront目录,运行命令:

    npm install //安装vue所须要的node依赖

    现在我们可以看到整个文件目录结构是这样的:

    uploading.4e448015.gif转存失败重新上传取消

    2、 在目录src下包含入口文件main.js,入口组件App.vue等。后缀为vue的文件是Vue.js框架定义的单文件组件,其中标签中的内容可以理解为是类html的页面结构内容,标签中的是js的方法、数据方面的内容,而则是css样式方面的内容:

    uploading.4e448015.gif转存失败重新上传取消

    3、 我们在src/component文件夹下新建一个名为Library.vue的组件,通过调用之前在Django上写好的api,实现添加书籍和展示书籍信息的功能。在样式组件上我们使用了饿了么团队推出的element-ui,这是一套专门匹配Vue.js框架的功能样式组件。由于组件的 编码涉及到了很多js、html、css的知识,并不是本文的重点,因此在此只贴出部分代码:

    uploading.4e448015.gif转存失败重新上传取消

    4、 在src/router目录的index.js中,我们把新建的Home组件,配置到vue-router路由中:

    uploading.4e448015.gif转存失败重新上传取消

    5、 如果发现列表抓取不到数据,可能是出现了跨域问题,打开浏览器console确认:

    uploading.4e448015.gif转存失败重新上传取消

    这时候我们须要在Django层注入header,用Django的第三方包django-cors-headers来解决跨域问题:

    pip install django-cors-headers

    settings.py 修改:

    MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',

    'django.contrib.sessions.middleware.SessionMiddleware',

    'corsheaders.middleware.CorsMiddleware',

    'django.middleware.common.CommonMiddleware',

    'django.middleware.csrf.CsrfViewMiddleware',

    'django.contrib.auth.middleware.AuthenticationMiddleware',

    'django.contrib.messages.middleware.MessageMiddleware',

    'django.middleware.clickjacking.XFrameOptionsMiddleware',]

     

    CORS_ORIGIN_ALLOW_ALL = True

    注意中间件的添加顺序

    6、 在前端工程目录下,输入npm run dev启动node自带的服务器,浏览器会自动打开, 我们能看到页面:

    uploading.4e448015.gif转存失败重新上传取消

    尝试新增书籍,新增的书籍信息会实时反映到页面的列表中,这得益于Vue.js的数据双向绑定特性。

    1. 在前端工程目录下,输入npm run build,如果项目没有错误的话,就能够看到所有的组件、css、图片等都被webpack自动打包到dist目录下了:

    uploading.4e448015.gif转存失败重新上传取消

    五、 整合Django和Vue.js

    目前我们已经分别完成了Django后端和Vue.js前端工程的创建和编写,但实际上它们是运行在各自的服务器上,和我们的要求是不一致的。因此我们须要把Django的TemplateView指向我们刚才生成的前端dist文件即可。

    1、 找到project目录的urls.py,使用通用视图创建最简单的模板控制器,访问 『/』时直接返回 index.html:

    urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^api/', include(myapp.urls)),

    url(r'^$', TemplateView.as_view(template_name="index.html")),]

    2、 上一步使用了Django的模板系统,所以需要配置一下模板使Django知道从哪里找到index.html。在project目录的settings.py下:

    TEMPLATES = [

    {

    'BACKEND': 'django.template.backends.django.DjangoTemplates',

    'DIRS': ['appfront/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',

    ],

    },

    },]

    3、 我们还需要配置一下静态文件的搜索路径。同样是project目录的settings.py下:

    # Add for vuejs

    STATICFILES_DIRS = [

    os.path.join(BASE_DIR, "appfront/dist/static"),]

    4、 配置完成,我们在project目录下输入命令python manage.py runserver,就能够看到我们的前端页面在浏览器上展现:

    uploading.4e448015.gif正在上传…重新上传取消

    注意服务的端口已经是Django服务的8000而不是node服务的8080了

    六、 部署

    由于python的跨平台特性,因此理论上只要在服务器上安装好所有的依赖,直接把项目目录拷贝到服务器上即可运行。这里只提一点:如果为项目配置了nginx作为反向代理,那么要在nginx中配置所有的静态文件path都指向Django项目中配置的静态文件url,在settings.py中可配置url路径:

    # Static files (CSS, JavaScript, Images)

    # https://docs.djangoproject.com/en/1.11/howto/static-files/

     

    STATIC_URL = '/static/'

    七、 其他

    实例项目的原码都可以在该git路径下载:

    https://github.com/rogerlh/django_with_vue.git

     

    展开全文
  • 本篇使用Vue.js作为前端框架,代替Django本身较为孱弱的模板引擎,Django则作为服务端提供api接口,使得前后端实现完全分离,更适合单页应用的开发构建。一、 环境准备安装环境:Django系:Python 3.6 +Django ...

    参考网上一篇文章做了点细节补充。


    本篇使用Vue.js作为前端框架,代替Django本身较为孱弱的模板引擎,Django则作为服务端提供api接口,使得前后端实现完全分离,更适合单页应用的开发构建。


    一、 环境准备

    安装环境:

    Django系:

    Python 3.6 +

    Django 1.11.13

    Mysql 5.7

    Python的MySQL相关模块等

    推荐python相关的模块(包括Django)都使用python自带的pip安装器安装。命令:pip install django即可安装最新版本的django,或者pip install django==1.11.13安装指定版本

    Vue.js系:

    Node.js 8.11.2

    有关Vue的模块(包括vue)可以使用node自带的npm包管理器安装。推荐使用淘宝的 cnpm  命令行工具代替默认的 npm

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    二、 构建Django项目

    我们首先使用Django来搭建web后端api框架。

    1、 先在终端敲入命令:

    django-admin startproject myproject

    目录结构:

    2、 进入项目根目录,创建一个app:

    python manage.py startapp myapp

    目录结构:

    3、 在myproject下的settings.py配置文件中,把默认的sqllite3数据库换成我们的mysql数据库:

    # Database
    # https://docs.djangoproject.com/en/1.11/ref/settings/#databases
    
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'NAME': 'testcon',
            'USER': 'root',
            'PASSWORD': '123456',
            'HOST': '127.0.0.1',
        }
    }
    

    并把app加入到installed_apps列表里:

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
         'myapp',
    ]
    

    4、 在app目录下的models.py里我们简单写一个model如下:

    # -*- coding: utf-8 -*-
    from __future__ import unicode_literals
    
    from django.db import models
    
    # Create your models here.
    class Book(models.Model):
        book_name = models.CharField(max_length=64)
        add_time = models.DateTimeField(auto_now_add=True)
    
        def __unicode__(self):
            return self.book_name
    

    只有两个字段,书名book_name和添加时间add_time。如果没有指定主键的话django会自动新增一个自增id作为主键

    5、 在app目录下的views里我们新增两个接口,一个是show_books返回所有的书籍列表(通过JsonResponse返回能被前端识别的json格式数据),二是add_book接受一个get请求,往数据库里添加一条book数据:

    from django.shortcuts import render
    from django.views.decorators.http import require_http_methods
    from django.core import serializers
    from django.http import JsonResponse
    import json
    
    from .models import Book
    # Create your views here.
    
    
    @require_http_methods(["GET"])
    def add_book(request):
        response = {}
        try:
            book = Book(book_name=request.GET.get('book_name'))
            book.save()
            response['msg'] = 'success'
            response['error_num'] = 0
        except  Exception as e:
            response['msg'] = str(e)
            response['error_num'] = 1
    
        return JsonResponse(response)
    
    
    @require_http_methods(["GET"])
    def show_books(request):
        response = {}
        try:
            books = Book.objects.filter()
            response['list'] = json.loads(serializers.serialize("json", books))
            response['msg'] = 'success'
            response['error_num'] = 0
        except  Exception as e:
            response['msg'] = str(e)
            response['error_num'] = 1
    
        return JsonResponse(response)

    可以看出,在ORM的帮忙下,我们的接口实际上不需要自己去组织SQL代码

    6、 在app目录下,新增一个urls.py文件,把我们新增的两个接口添加到路由里:

    from django.conf.urls import url, includeimport views

    urlpatterns = [url(r'add_book$', views.add_book, ),url(r'show_books$', views.show_books, ),]

    1. 我们还要把app下的urls添加到project下的urls中,才能完成路由:
    from django.conf.urls import url, include
    from django.contrib import admin
    from django.views.generic import TemplateView
    import myapp.urls
    
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^api/', include(myapp.urls)),
        url(r'^$', TemplateView.as_view(template_name="index.html")),
    ]
    
    1. 在项目的根目录,输入命令:

    python manage.py makemigrations myapp

    python manage.py migrate

    查询数据库,看到book表已经自动创建了:

    1. 在项目的根目录,输入命令:

    python manage.py runserver

    启动服务,通过postman测试一下我们刚才写的两个接口:

    add_book

    show_books

    三、 构建Vue.js前端项目

    1、 先用npm安装vue-cli脚手架工具(vue-cli是官方脚手架工具,能迅速帮你搭建起vue项目的框架):

        `npm install -g vue-cli`
    

    安装好后,在project项目根目录下,新建一个前端工程目录:

        vue-init webpack appfront  //安装中把vue-router选上,我们须要它来做前端路由
    

    进入appfront目录,运行命令:

        npm install //安装vue所须要的node依赖
    
     npm install  vue-resource 
     npm install element-ui


    现在我们可以看到整个文件目录结构是这样的:

    2、 在目录src下包含入口文件main.js,入口组件App.vue等。后缀为vue的文件是Vue.js框架定义的单文件组件,其中标签中的内容可以理解为是类html的页面结构内容,标签中的是js的方法、数据方面的内容,而则是css样式方面的内容:

    3、 我们在src/component文件夹下新建一个名为Home.vue的组件,通过调用之前在Django上写好的api,实现添加书籍和展示书籍信息的功能。在样式组件上我们使用了饿了么团队推出的element-ui,这是一套专门匹配Vue.js框架的功能样式组件。由于组件的 编码涉及到了很多js、html、css的知识,并不是本文的重点,因此在此只贴出部分代码:

    4、 在src/router目录的index.js中,我们把新建的Home组件,配置到vue-router路由中:

    5、 如果发现列表抓取不到数据,可能是出现了跨域问题,打开浏览器console确认:

    这时候我们须要在Django层注入header,用Django的第三方包django-cors-headers来解决跨域问题:

           pip install django-cors-headers
    

    settings.py 修改:

    MIDDLEWARE = [
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'corsheaders.middleware.CorsMiddleware',
        'django.middleware.common.CommonMiddleware',
        'django.middleware.csrf.CsrfViewMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ]
    
    CORS_ORIGIN_ALLOW_ALL = True
    
      注意中间件的添加顺序
    

    6、 在前端工程目录下,输入npm run dev启动node自带的服务器,浏览器会自动打开, 我们能看到页面:

    尝试新增书籍,新增的书籍信息会实时反映到页面的列表中,这得益于Vue.js的数据双向绑定特性。

    1. 在前端工程目录下,输入npm run build,如果项目没有错误的话,就能够看到所有的组件、css、图片等都被webpack自动打包到dist目录下了:

    五、 整合Django和Vue.js

    目前我们已经分别完成了Django后端和Vue.js前端工程的创建和编写,但实际上它们是运行在各自的服务器上,和我们的要求是不一致的。因此我们须要把Django的TemplateView指向我们刚才生成的前端dist文件即可。

    1、 找到project目录的urls.py,使用通用视图创建最简单的模板控制器,访问 『/』时直接返回 index.html:

    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^api/', include(myapp.urls)),
        url(r'^$', TemplateView.as_view(template_name="index.html")),
    ]
    

    2、 上一步使用了Django的模板系统,所以需要配置一下模板使Django知道从哪里找到index.html。在project目录的settings.py下:

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

    3、 我们还需要配置一下静态文件的搜索路径。同样是project目录的settings.py下:

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

    4、 配置完成,我们在project目录下输入命令python manage.py runserver,就能够看到我们的前端页面在浏览器上展现:

    注意服务的端口已经是Django服务的8000而不是node服务的8080了



    项目源码:

    https://github.com/HubDou/vue-django.git



    展开全文
  • 关于DjangoVUE.js

    2017-12-23 11:28:59
    djangoVUE.js,Element UI
  • 整合Django和Vue.js

    2019-05-06 15:05:33
    一、 整合Django和Vue.js    我们已经分别完成了Django后端和Vue.js前端工程的创建编写,但实际上它们是运行在各自的服务器上,我们的要求是不一致的。因此我们须要把Django的TemplateView指向我们刚才生成的...
  • 1. Vue.js地址 Staticfile CDN(国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js unpkg:会保持npm发布的最新的版本一致 https://unpkg.com/vue/dist/vue.js cdnjs: ...
  • 作者|高远 我为什么要选择DjangoVue.js? 首先介绍一下我看重的点: Django (MVC框架) Python ORM 简单、清晰的配置 Admin app Django 仅因为 Python 的血统,就已经站在了巨人的肩...
  • 我如何使用 Django + Vue.js 快速构建项目.pdf ,我如何使用 Django + Vue.js 快速构建项目.pdf
  • 点击上方“编程派”,选择设为“设为星标”优质文章,第一时间送达!学习全文大概需要 12分钟,内容实战性较强。1. 前言本篇将基于Python 3.7+Django 3.0结合Vue.js...
  • 学习全文大概需要 12分钟,内容实战性较强。1. 前言本篇将基于Python 3.7+Django 3.0结合Vue.js前端框架,为大家介绍如何基于这三者的技术栈来实现一个前端后离的W...
  • 策划列表相关的vue.js可畏的事 资源 官方资源外部资源工作门户社区会议播客官方的例子教程实例书 项目采用vue.js 开源商业产品应用/网站互动体验企业使用 组件&图书馆 用户界面组件 表通知...
  • django vuejs整合web开发

    2018-11-06 17:06:44
    一、 背景 本篇主要介绍如何使用后端Django + 前端Vue.js的技术栈快速地...为什么使用Django和Vue.js? Django是Python体系下最成熟的web框架之一,由于Python语言的易用性受众面广,Django框架也因其能够快速开...
  • 参考链接... 着重提一下VUE单文件组件: <template> </template> <script> </script> <style> </style> 特别清晰,一个文件包含且仅包含三块: ...
  • 一·、Node.js(Windows下安装) 1]:下载地址:https://nodejs.org/en/ 2]: 当然是下载最新版咯, 3】获取cnpm 查看网上个教程都说淘宝的npm速度快 所以使用如下命令:npm install -g cnpm --registry=...
  • Vue是什么? Vue.js(读音/vjuː/,类似于view) 是一套构建用户界面的 渐进式框架。...另一方面,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js的目标是通过尽可能简单的API...
1 2 3 4 5 ... 20
收藏数 1,713
精华内容 685
关键字:

vue.js 和django模板