怎么在Django中使用Vue.js实现前后端分离-创新互联

本篇文章为大家展示了怎么在Django中使用Vue.js实现前后端分离，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

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

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

上述内容就是怎么在Django中使用Vue.js实现前后端分离，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联成都网站建设公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。