首页 > js教程 > 正文

Vue.js和Django搭建前后端分离项目示例详解

原创 2018-05-18 16:17:42 0 185
赞助会员专享特权
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下

在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法。

笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系、系统学习。在这里主要是为了实现把项目前后端分离开。

这里假设你的电脑上所需的django、vue.js已经有了,如果没有,往下拉就是vue.js的安装流程。django前面写过了,就不赘述了。

一,正常搭建前后端分离项目流程

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

结构比上面最基本的,多了一块backend

3.使用vue-cli创建一个vue.js项目作为项目前端

命令:

vue-init webpack frontend

界面:

Project name:(默认回车键)

Project description:(默认回车键)

Auther:(输入自己的名字,随意)

...:(默认yes和回车键,暂时不太懂,刚开始接触,网上也没查到这一块东西,就全部选择默认或者Yes了)

结构多了一块frontend

结构总结:

项目根目录有两个新文件夹,一个叫backend,一个叫frontend,分别是:backend Django的一个app、frontend Vue.js项目

4.使用webpack打包Vue.js项目

命令:

cd frontend
npm install
npm run build

5.使用Django的通用视图TemplateView

在项目根目录下urls.py(即ulb_manager/urls.py)使用通用视图创建最简单的模板控制器。

代码:

urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^$',TemplateView.as_view(template_name="index.html")),
  #url(r'^api/',include('backend.urls', namespace='api'))
  #最后一行代码我注释掉,因为运行报错:Error:No module named 'backend.urls',暂时解决不掉,但是我运行的时候,注释掉这行代码,是能正常运行的。
]

6.配置Django项目的模板搜索路径

打开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',
      ],
    },
  },
]

PS:之前学习django,是要在settings.py下的INSTALLED_APPS配置项下添加app的,所以我自己添加了'backend'。

7.配置静态文件搜索路径

打开settings.py(ulb_manager/settings.py),找到STATICFILES_DIRS配置项,配置如下:

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

如果没有,自己添加。

到这里,运行django项目已经可以正常运行了。正常运行的界面如下:

运行界面

二,安装vue.js

如果电脑上,没有vue.js,以下是安装vue.js的过程:

1.node.js

vue.js的推荐安装环境是node.js,因此,我是先安装的node.js。

登陆node.js官网,下载最新的v6.11.1版本。

2.npm

集成于Node.js中,不需要装。

3.cnpm

在命令行中输入命令:

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

等待安装完成。

4.安装vue-cli脚手架构建工具

在命令行中输入命令:

npm install -g vue-cli

等待安装结束。

到此,vue-cli已经安装完成。

PS:暂时摸不清楚如何把文件的目录树结构在Markdown里写出来。

有所修改,因为完全按照原版搬上来根本无法运行。写了一个最基本的框架。像个无头苍蝇一样……(而且也买不起云主机……新手也没必要买)

Markdown用起来觉得很自由,而且还能调用一些html的指令,还是蛮有意思的,虽然还没摸清楚,到底能调用多少、哪些指令……

以上就是Vue.js和Django搭建前后端分离项目示例详解的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:javascript Vue.js Django
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    黄舟

    人生最曼妙的风景,竟是内心的淡定与从容!

    最近文章
    jQuery中关于bind()函数详解 51
    php实现字符串匹配算法之sunday算法的示例 84
    css中关于hideFocus的使用详解 71

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节