精华内容
参与话题
问答
  • 后端Django + 前端Vue.js快速搭建web项目

    万次阅读 多人点赞 2018-06-14 15:03:11
    本篇使用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



    展开全文
  • django模板vue.js冲突问题

    千次阅读 2018-01-14 20:16:06
    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 %}包裹。

    展开全文
  • 关于DjangoVUE.js

    千次阅读 2017-12-23 10:27:51
    djangoVUE.js,Element UI

    最近在使用django作为后台提供数据接口,VUE.js与Element UI作为前端框架,发现不少坑,看了很多人写的帖子,觉得不错,现搬运到这里,以备后来查看。
    先回顾一下Django,在我们进入Django的话题之前,先了解一下WSGI和MTV模式。

    Django介绍

    什么是WSGI?

    在用Python进行Web开发中,我们将其分为两部分,一是服务器程序,二是应用程序,前者负责把客户端请求接收、整理,后者负责具体的逻辑处理。那么对于服务器来说,就需要支持不同的框架,比如Django、Flask等,对于框架来说,也只有支持它的服务器才能被开发出的应用使用,这个时候就需要定一个标准,来使得服务器程序和应用程序都支持这个标准,这个标准就是WSGI,全称是Web Server Gateway Interface,它规定了双方各自的接口,以及提供什么功能,这样一来,二者就能配合使用了。
    具体可以参考http://blog.csdn.net/on_1y/article/details/18803563

    什么是MTV模式?

    就是把Web应用分为:模型(Model),模板(Template),视图(View)这三层,这样一来,各组件之间就保持了松耦合关系;M主要是用来负责业务对象和数据库对象,T负责把页面如何展示给用户,V负责业务逻辑,并在适当的时候调用M和T。对于Django来说,还有一个url分发器,它的作用就是将一个个url的页面请求分发给不同的V处理,V再调用相应的M和T。
    Django MTV模式

    Django项目搭建以及环境配置

    # 创建项目
    django-admin startproject 项目的名称
    # 进入项目文件夹,创建app
    python mannage.py startapp  app名称
    # 项目文件夹下setting.py,settings配置
    # 将自己的app添加到INSTALLED_APPS
    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'app名称',  
    ]
    /*说着上面也可以写成'app名称.apps.app名称Config',其实
    就是在我们定义app文件夹下,apps.py文件中,对应用名有配置
    信息,我们在这里引用配置信息就行。
    */
    # 在这里我们修改mysql数据库
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'NAME': 'DjRecord',    #你的数据库名称
            'USER': 'root',   #你的数据库用户名
            'PASSWORD': '', #你的数据库密码
            'HOST': '', #你的数据库主机,留空默认为localhost
            'PORT': '3306', #你的数据库端口
        }
    }
    # 我们用的是pymysql,所以需要在项目名这个目录下的__init__.py文件添加:
    import pymysql
    pymysql.install_as_MySQLdb()
    
    # 配置templates路径
    /*主要是修改'DIRS'这一项,后面跟着的属性是html文件的文件夹地址,
    我觉得就是一旦你在url.py中引入templates中某个html文件,程序能够知道去哪里
    找,在后期django与VUE.js连接时候也要配置这里,以便django能够找到VUE.js编译后
    (cnpm run build)生成的index.html文件。(在dist文件夹下)
    */
    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [os.path.join(BASE_DIR, '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',
                ],
            },
        },
    ]
    # 配置static路径
    /*这里好像涉及到django对static文件的处理,静态文件(static files),诸如 HTML、CSS、图片和 JavaScript 之类的资源会被 ASP.NET Core应用直接提供给客户端,django是不能够处理静态文件的,这里要注意,在配置django与VUE.js的时候,也要将VUE.js编译后(cnpm run build)生成的静态文件夹目录引入到django中,这里主要添加STATICFILES_DIRS。(在dist文件夹下)。*/
    STATIC_URL = '/static/'
    STATICFILES_DIRS=(
        # 告诉django static的路径
        os.path.join(BASE_DIR,"static"),
    )
    
    # 运行项目
    python manage.py runserver  127.0.0.1:8080
    # 同步数据库
    python manage.py makemigrations
    python manage.py migrate

    Django目录结构说明:

    manage.py:Django项目里面的工具,通过它可以调用django shell和数据库等
    settings.py:包含了项目的默认配置,包括数据库信息,调试标志以及一些工作的变量
    urls.py:负责把URL模式映射到应用程序
    model.py:负责数据库处理
    view.py:处理一些业务逻辑
    admin.py:Django自带的一个后台数据管理系统

    关于URL路由系统

    from django.conf.urls import url,include
    from django.contrib import admin
    from app import views
    
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        # 静态路由
        url(r'^login/',views.login), # 如 http://127.0.0.1:8080/login
        # 为路由取别名,这样,在地址修改的时候,前端不需要修改地址
        url(r'^register/',views.register,name='reg'),
        # 动态路由,可以用来做分页
        # 无名分组,views里面的函数名参数可任意
        url(r'^article/(\d{4})$',views.article),    # 如 http://127.0.0.1:8080/article/2017
        # 有名分组,view里面的函数名必须是year和month
        url(r'^arcticle/(?P<year>\d{4})/(?P<month>\d{2})',views.arcticle),
        # 路由分发
        url(r'^app/',include('app.urls')),
    ]

    视图函数views

    在http请求中产生两个核心对象,所在位置是,django.http:
    http请求:HttpRequest对象
    http响应:HttpResponse对象

    def register(request):
        '''
        request就是HttpRequest对象
        HttpResponse常用的扩展对象
            render:页面渲染,可将参数以字典的形式传递给页面 也可以通过locals()将参数传递过去,没有进行页面跳转,url没有改变
            redirect:页面跳转,url发生改变
        :param request:
        :return:
        '''
        # 获取请求方法
        if request.method == "GET":
            '''
            对注册来分析,当我们进入注册页面的时候,一般都是GET请求
            '''
            # 获取GET里面的信息
            ret = request.GET
            print("GET信息",ret)  # 输出 GET信息 <QueryDict: {}> 是一个字典对象
            return render(request,"register.html")
        elif request.method == "POST":
            '''
            通过表单提交之后,变成了POST请求
            '''
            # 获取POST里面的信息
            ret = request.POST
            print("POST信息",ret)
            '''
            输出  POST信息 <QueryDict: {'csrfmiddlewaretoken': ['oeKNHGKKm9Ip6B4Y2bfZM16lD2ECoTylPzX7rKzEUO5baf5Dfw4uB2zz5zz61fL9'], 'username': ['Jason'], 'pwd': ['123'], 'gender': ['1']}>
            也是一个字典对象,可以通过句点获取表单提交过来的数据
            '''
            return redirect("/login/")
    def login(request):
        return render(request,"login.html")

    模板系统Template

    1. 变量,使用双大括号来引用变量:{{ var_name }}
    # 视图函数
    def index(request):
        people={
            "username":"Jason",
            "age":18,
            "gender":"男"
        }
        username="Jason"
        return render(request,"index.html",{"username":username,"people":people})
    
    <!--模板文件-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--通过双大括号来获取变量-->
        <h1>欢迎{{ username }}</h1>
        <!--通过句点符号来实现深度查询-->
        <h2>用户名:{{ people.username }}</h2>
        <h2>年龄:{{ people.age }}</h2>
        <h2>性别:{{ people.gender }}</h2>
    </body>
    </html>
    1. 标签,语法格式:{% tags %}
    # views函数
    def index(request):
        temp_list=["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
        return render(request,"index.html",{"temp_list":temp_list})
    
    <!--HTML模板-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--标签的使用-->
        <!--对于for来说,不支持中断循环,也不支持continue语句,内置一个forloop模板变量
            forloop.counter表示循环的次数
            forloop.first当第一次循环的时候,为True
        -->
        {% for temp in temp_list %}
            <!--对于if来说,不允许同一标签里同时出现and和or,这样容易产生歧义-->
            {% if temp == "星期一" or temp == "星期三" or temp == "星期五" or temp == "星期日"%}
                <h2>不上班</h2>
                {% elif temp == "星期二" or temp == "星期四"%}
                <h3>上班</h3>
                {% else %}
                <h1>吃大餐</h1>
            {% endif %}  
      {% empty %}
        <!--当temp_list为空,会走这里,和for循环并列-->
          <h1>放假时间太多了</h1>
      {% endfor %}
       <!-- 其他标签: 
            {% csrf_token %}:用于生成csrf_token标签,用于防止跨站攻击验证,如果在views中用的是render_to_response方法 则不会生效,一般会和表单一起提交给后台 
            {% url "reg" %}:引用路由配置的地址,也就是路由中的name值,如: <form method="post" action="{% url "reg" %}"> ... </form> url(r"^register",views.register,name='reg') 
            {% with total=fhjsaldfhjsdfhlasdfhljsdal %} {{ total }} {% endwith %}:使用更简单的变量名代替复杂的变量名
            {% verbatim %} {% endverbatim %}:禁止render
            {% load tz %}:加载标签库 --> 
    </body> 
    </html>

    使用 Django+Vue.js 快速构建项目

    具体流程目录

    1. 创建 Django 项目
    2. 创建 Django App 做为后端
    3. 创建 VueJS 项目作为前端
    4. 使用 Webpack 处理前端代码
    5. 配置 Django 模板的搜索路径
    6. 配置 Django 静态文件搜索路径
      数据交互:(还不知道干啥的)
      https://www.cnblogs.com/jieru/p/7145800.html
      具体参考以下文章:
    7. https://zhuanlan.zhihu.com/p/25080236
    8. https://cloud.tencent.com/community/article/774449
      上面介绍的非常详细。

    Django与VUE.js项目中一些方法

    1. JSON.parse(text, reviver)
      This method parses a JSON text to produce an object or array. It can throw a SyntaxError
      exception.
      The optional reviver parameter is a function that can filter and
      transform the results. It receives each of the keys and values,
      and its return value is used instead of the original value.
      If it returns what it received, then the structure is not modified.
      参数
      text
      必需。 一个有效的 JSON 字符串。

    reviver
    可选。 一个转换结果的函数。 将为对象的每个成员调用此函数。 如果成员包含嵌套对象,则先于父对象转换嵌套对象。 对于每个成员,会发生以下情况:
    如果 reviver 返回一个有效值,则成员值将替换为转换后的值。
    如果 reviver 返回它接收的相同值,则不修改成员值。
    如果 reviver 返回 null 或 undefined,则删除成员。

    返回值
    一个对象或数组。

    1. vue-chartjs

    参考文档:

    1. https://www.cnblogs.com/jasonhy/articles/6680519.html
    2. https://zhuanlan.zhihu.com/p/25080236 3.
    展开全文
  • django vuejs整合web开发

    千次阅读 2018-11-06 17:06:44
    一、 背景 本篇主要介绍如何使用后端Django + 前端Vue.js的技术栈快速地...为什么使用Django和Vue.js? Django是Python体系下最成熟的web框架之一,由于Python语言的易用性受众面广,Django框架也因其能够快速开...

    转载自https://cloud.tencent.com/developer/article/1005607

    一、 背景

    本篇主要介绍如何使用后端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项目

     

    四、 构建Vue.js前端项目

    1、安装nodejs

    1,前往nodejs官网下载安装软件,地址:https://nodejs.org/en/    
    2,点击下一步继续安装,安装完成,在命令输入:node -v,npm -v,查看版本,即是安装成功 
    3,随便在计算机哪个盘建一个全局目录,比如我的在D盘:D:\nodejs\node_global 
    4,设置nodejs全局目录,所有以全局安装的包都被安装在这,打开nodejs命令行窗口

    使用命令行设置:

        npm config set cache "D:\nodejs\node_cache"

        npm config set prefix "D:\nodejs\node_global"

    设置环境变量

    1.用户变量 path 中把 
    C:\Users\Administrator\AppData\Roaming\npm; 改为D:\nodejs\node_global

    2.在系统变量中 新增变量 
    NODE_PATH              D:\nodejs\node_global\node_modules

    3.系统变量中 path:C:\Program Files\nodejs\; 
    D:\nodejs\node_global\node_modules;

    5,前往淘宝镜像官网 http://npm.taobao.org/,可查看安装cnpm包的命令

    在命令行输入:

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

    2、安装vue-cli脚手架工具

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

    在命令行输入:
      npm install -g vue-cli
    

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

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

    进入appfront目录,运行命令:

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

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

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

    3、 我们在src/component文件夹下新建一个名为Library.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': [os.path.join(BASE_DIR, '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了

    六、 部署

    由于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/'
    展开全文
  • Django+Vue.js 初学入手的一些坑,已填坑

    万次阅读 多人点赞 2017-04-22 13:07:57
    我用的django是1.11.0 vue是最新的,这是前提,之前因django版本不对导致一系列问题。另外要讲项目部署在Linux上运行,windows下运行也会出现很多坑。 接下来是我参考网上的一片文章开始搭建环境,其中有问题的地方...
  • 参考: ... 方法1:修改vue.js的默认的绑定符号 Vue.config.delimiters = ["[[", "]]"]; 执行这个之后,你就可以使用“[[”、“]]”来绑定变量的数据了 方法2:使用模板的标签来...django模板的templatetag可...
  • 整合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: ...
  • Django + Vue.js构建前后端分离项目

    千次阅读 2019-04-17 19:14:19
    参考链接... 着重提一下VUE单文件组件: <template> </template> <script> </script> <style> </style> 特别清晰,一个文件包含且仅包含三块: ...
  • 使用Django + Vue.js快速而优雅地构建前后端分离项目

    万次阅读 多人点赞 2017-04-22 21:03:10
    作者|高远 我为什么要选择DjangoVue.js? 首先介绍一下我看重的点: Django (MVC框架) Python ORM 简单、清晰的配置 Admin app Django 仅因为 Python 的血统,就已经站在了巨人的肩...
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...Vue 测试实例 - 菜鸟教程(runoob.com)&...https://cdn.bootcss.com/vue/2.2.2/vue.min
  • 本文主要讲解 Python 后端部分,由于仅仅用到了 vue 作为 js 框架并非前后端分离项目,故前端不单独介绍。 一、项目内容(做什么) 本项目实现了一个网页端的 博客系统 ,该博客系统允许多人注册登录,用户可以在...
  • python+django+vue 准备工作:IDE,【JetBrains PyCharm2018.3.5】【webpack 3.3.0】【python3.7.5】【npm5.8.0】【vue-cli2.9.6】 1、Pycharm创建第一个项目 django-admin startproject pc_admin 创建后如下所示:...
  • 策划列表相关的vue.js可畏的事 资源 官方资源外部资源工作门户社区会议播客官方的例子教程实例书 项目采用vue.js 开源商业产品应用/网站互动体验企业使用 组件&图书馆 用户界面组件 表通知...
  • 学习全文大概需要 12分钟,内容实战性较强。1. 前言本篇将基于Python 3.7+Django 3.0结合Vue.js前端框架,为大家介绍如何基于这三者的技术栈来实现一个前端后离的W...
  • vue.js djangoWouldn’t it be cool if you could prototype a custom web application that’s responsive (mobile-ready), reactive (light-speed fast), with a full-featuredadmin interfaceto manage the conte...
  • Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户...另一方面,Vue 完全有能力驱动采用单文件组件 Vue 生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实...
  • Django+Vue 环境搭建及项目整合构建 一、环境搭建 python: 2.7.5 django: 1.11.7 node: 8.5.0 mysql: 5.7 1. 安装python centos下默认已经安装了python 2. 安装 node.js 下载安装包 版本...
  • nuxt.js使用教程 介绍 ( ...The advent of modern JavaScript libraries such as React.js and Vue.js has transmogrified Front-end web development for the better. These libraries ship with wonderful f...
  • 点击上方“编程派”,选择设为“设为星标”优质文章,第一时间送达!学习全文大概需要 12分钟,内容实战性较强。1. 前言本篇将基于Python 3.7+Django 3.0结合Vue.js...
  • 在本文里小编给各位整理了关于django模板vue.js冲突问题以及实例代码,需要的朋友们参考下。
  • 4.渐进式框架Vue 5.Vue环境搭建 二、项目代码结构 1.商品分类数据与Vue 2.跨域问题解决 3.商品列表页数据 4.用户登录接口 5.用户收藏 6.Vue基本组件 7.综合应用范例: 购物车计数器 三.axios网络请求库 1....
  • 一些前端框架诸如layui,vue之类的模版标记与django冲突。 解决办法如下: {% verbatim %} <script id="title"> <a href="/detail/{{d.id}}" class="layui-table-link" target="_blank">{{d.title}}&...
  • Django +vue.js实现前后端分离(十三)

    千次阅读 2018-09-13 14:15:22
    1.安装vue环境 下载安装node.js,配置环境变量 下载npm , nodejs下的包管理器 webpack:它主要的用途是通过 CommonJS 的语法... 安装vue脚手架 npm install --global vue-cli 用于生成vue工程模板   2.创建项...
  • https://github.com/michaelbukachi/django-vuejs-tutorial/wiki/Django-Vue.js-Integration-Tutorial这个教程做环境的搭建 最后创建webpack.config.js确定webpack的最终配置 如何运行webpack来构建(build)项目 ...
  • 整合 Django + Vue.js 框架快速搭建web项目 一、 背景 在工作中我们经常须要构件一些基于web的项目...为什么使用Django和Vue.js? Django是Python体系下最成熟的web框架之一,由于Python语言的易用性受众面广...
  • 所谓的无限极分类是啥?其实简单点说就是一个人类可以繁衍出多个后代,然后一个后代又可以分另外多个后代这样无限繁衍下去(可以想象神奇动物在哪里2里面莱斯特兰奇的家族族谱),就好象linux系统你可以新建一个...

空空如也

1 2 3 4 5 ... 20
收藏数 1,896
精华内容 758
热门标签
关键字:

vue.js 和django模板

vue 订阅