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的指令,还是蛮有意思的,虽然还没摸清楚,到底能调用多少、哪些指令……

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-08-06

详解vue.js+UEditor集成 [前后端分离项目]

首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

详解VueJs前后端分离跨域问题

使用vue-cli搭建的vue项目 可以使用在项目内设置代理(proxyTable)的方式来解决跨域问题 设置配置项的目录在config下的index.js,主要通过配置proxyTable项,设置代理指向你的后台地址 dev: { env: require('./dev.env'), port: 8085, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/ag

vue2 前后端分离项目ajax跨域session问题解决方法

最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. vuejs ajax跨域请求 最开始使用的是vue-resource,结果发现vue2推荐的是axios,于是改成axios:安装axios npm install axios -S 安装完成后在main.js中增加一下配置: import axios from 'axios'; axios.defa

详解前后端分离之VueJS前端

前言 前端用什么框架都可以,这里选择小巧的vuejs. 要实现的功能很简单: 1.登录功能,成功将服务器返回的token存在本地 2.使用带token的header访问服务器的一个资源 本次实验环境: "dependencies": { "vue": "^2.2.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

准备工作: 1.安装nodejs ---还用我教了? 2.安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 3.安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器,它是一个独立的服务器,vue启动的是前端服务器,vue-cli中已经集成了一个小型的express,这两个服务器是分开放的,但是它们都是基于nodejs的. nodeJS部分:这里我已经认为你搭建好了express服务器,并且能

Springboot前后端分离项目配置跨域实现过程解析

项目登录流程如下 用户进入前端登录界面,输入账号密码等,输入完成之后前端发送请求到后端(拦截器不会拦截登录请求),后端验证账号密码等成功之后生成Token并存储到数据库,数据库中包含该Token过期时间,然后返回生成的Token到前端. 前端收到Token,表示登录成功,把这个Token存储本地.然后跳转到用户中心页面,用户中心页面在ajax的请求头中带上Token,跟随请求用户数据接口一起带到后端. 后端通过拦截器拦截到这个请求,去判断这个Token是否有效,有效就放过去做他该做的事情,无效就

vue+mock.js实现前后端分离

之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范,仅供参考. 然后案例讲完后我们讲具体的规范使用 那么一起来看看这个案例吧: <script> import Mock from "mockjs" export default { name: "FunctionsDbSource", methods:{ /

详解Vue微信授权登录前后端分离较为优雅的解决方案

微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份. 微信授权登录的机制这里不做详述,微信官方文档已有详述,简述就是通过跳转微信授权的页面,用户点击确认后,微信会跳到回调页面,此时回调页面url上会携带code参数,通过code参数,后端可以拿code换取拥护openid,或者用户信息 在vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通常现在开发也是前后端彻底分离的,vue打包后

shiro整合springboot前后端分离

本文实例为大家分享了shiro整合springboot前后端分离的具体代码,供大家参考,具体内容如下 1.shiro整合springboot的配置 package com.hisi.config; import java.util.LinkedHashMap; import java.util.Map; import javax.servlet.Filter; import org.apache.shiro.session.mgt.eis.MemorySessionDAO; import org

nginx+vue.js实现前后端分离的示例代码

1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

SpringBoot+Vue前后端分离实现请求api跨域问题

前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前