vue.js 和django模板

2019-05-06 15:05:33 l2535460824 阅读数 941

一、 整合Django和Vue.js

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

1. 使用Django的通用视图 TemplateView

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

    from django.contrib import admin
    from django.urls import path
    from django.conf.urls import url, include
    from django.views.generic import TemplateView
    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': ['vueproject/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, "vueproject/dist/static"),
    ]

4、运行

    python manage.py runserver 127.0.0.1:8000

二、 解决跨域问题

用VueJS的开发环境脱离了Django环境,访问Django写的API,出现了跨域问题,有两种方法解决,(1)在VueJS层上做转发(proxyTable),(2)在Django层注入header,这里我使用后者,用Django的第三方包 django-cors-headers 来解决跨域问题

  1. 安装第三方包django-cors-headers
    pip install django-cors-headers
  1. 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',
    ]
  1. settings.py 添加
CORS_ORIGIN_ALLOW_ALL = True

Django+Vuejs的环境搭建成功,前端部分依然可以选择执行npm run dev命令进行开发

三、 部署

   由于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/'
2016-12-29 23:43:00 weixin_30407099 阅读数 91

参考:

  • 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

2017-04-22 13:07:57 leizi191110211 阅读数 20507

我用的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界面了。


2017-12-23 10:27:51 godqiao 阅读数 7474

最近在使用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. 3.
2018-01-14 20:16:06 jyfu2_12 阅读数 3384

问题:

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 %}包裹。