【转】django 与 vue 的完美结合 实现前后端的分离开发之后在整合

https://blog.csdn.net/guan__ye/article/details/80451318

最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue.

看了vue的一些文档,还有一些项目,先说一下django与vue的完美结合吧!

首先是创建一个django项目

 django-admin startproject mysite   # 创建mysite项目
 django-admin startapp blog   # 创建blog应用

一、接下来就是安装关于vue 的东西了

1、首先安装node.js,官网地址:https://nodejs.org/zh-cn/download/

2、使用npm淘宝镜像,避免npm下载速度过慢的问题   npm install -g cnpm --registry=https://registry.npm.taobao.org

3、使用cnpm 下载vue-cli       cnmp install -g cue-cli

二、在django项目中创建vue项目

首先,进去django项目的项目目录中,执行:

vue-init webpack firstvue## firstvue为前端项目的名称,可自定义。创建的项目会跟django中的app一样的目录登记。类似一个前端app一样。

mysite 文件夹  blog 文件夹   和 firstvue文件夹  要在同一目录级别

在创建时,会弹出很多选择项,根据自己需求自定义修改。也可以全部回车,使用默认的。这里我就直接全部回车。

三、编写vue前端项目,直接编写就是,调试则可以执行。也可先不编写,跳过这一步

  1. cd firstvue## 进入到上一部创建的firstvue项目中
  2. cnpm install        ## 安装需要的依赖模块
  3. cnpm run dev        ## 运行调式的服务,会启动一个web服务,访问localhost:8080 即可调式

四、vue项目写完后,打包vue项目,然后修改django配置,将vue集成到django中

  1. cnpm run build        ## 打包vue项目,会将所有东西打包成一个dist文件夹

五、接下来就是配置django中的setting文件了:

六、修改django的主目录的urls文件:

七、启动django服务,访问localhost:8000 则可以出现vue的首页。

python manage.py runserver

原文地址:https://www.cnblogs.com/yoyo008/p/10736366.html

时间: 2024-10-07 14:55:06

【转】django 与 vue 的完美结合 实现前后端的分离开发之后在整合的相关文章

nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程

好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的 ----致  西安工程大学a-114舍友们 转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185453.html 没图片的教程都是耍流氓 准备工作: 安装nodejs ---还用我教了? 安装依赖包express4.x  点这里>>>nodeJS搭建本地服务器 安装vue-cli脚手架 点这里>>>vue-cli构建vue项目 这里强调一下,express是后端服务器

打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demoback.lalalaweb.com  前台:demo.lalalaweb.com 演示过程中可能会发现bug,希望即时留言反馈,谢谢 源码下载:https://github.com/sutianbinde/classweb               //不是全部的代码,每次更新博客才更新代码 学

Django 前后端不分离 代码结构详解

Demo:  hello_pycharm 根目录文件:hello_pycharm [__init__.py  __pycache__  settings.py  urls.py  wsgi.py] App:hello [admin.py  apps.py  __init__.py  migrations  models.py  tests.py  urls.py  views.py  __pycache__ ] 模板文件:templates 根路由urls中: from django.conf.

前后端为分离 半分离 使用vue组件

1.     html中引入 http-vue-loader.js 下载地址等详情访问: https://www.npmjs.com/package/http-vue-loader html中写法和vue中一样 <multisearch ref="multiSearchRef" ></multisearch> 2.   js中使用方法 Vue.use(httpVueLoader) var vm = new Vue({ el: '#app', components

django开发:前后端不分离,开发个人博客

这里举例用的是一个搭建好的html框架. 结构如下图 一.把这个模板下的所有.html文件放到templats下,只放html的文件 这时只打开这些Html是没有样式的,因为css  js 都没有调用.后边说css.js调用 二.写逻辑 在views.py中,默认引入了    from django.shortcuts import render 写方法: def index(requset): #requset默认参数,必须写 return render(requset,'index.html

vue发布中的前后端分离和前后端不分离

前后端分离 思路:前端和后台完全分离.前端提供静态的css和js,在运行时将css和js给后端,后端进行数据的请求(ajax) 前后端分离就是前端和后台在不同的服务器上.基本是前端一个nginx加css和js 后端nginx加index.html 当用户访问的时候,访问后端nginx的网址,执行后端的index.html,在运行到资源时,访问前端的nginx返回的css,js等 前后端不分离 思路:前端和后台不分离.前端是源代码build后的代码 后端进行数据的请求(ajax) 前后端不分离就是

Django单表增删改查-前后端不分离

获取到models中创建表的类,直接使用python语句可以实现增删改查,不需要使用sql语句 1,增 1 from user.models import Category 2 # 导入表 注意这里导入的是 user.models,如果dj_test不是最外层目录,就要用 dj_test.user.models 3 # 新增 4 c_obj=Category.objects.create(name='oracle1') 5 # 新增出来的就是一个对象,相当于类实例化 6 print(c_obj)

前后端分离,解决跨域问题及django的csrf跨站请求保护

1. 前后端分离解决跨域问题 解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现: 关于跨域,前端会先发送OPTIONS请求,进行预检,检查后端是否允许前端设置的相应的请求头,请求内容 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie

django 前后端分离,后端接口实现

博客篇我们使用的是前后端不分离的方式进行实现,前后端不分离实现方式,主要用于小型的项目,且一个人就可以搞定所有,但是中大型的应用还是用的前后端分离的方式进行的 前后端分离方式后台主要给前端提供接口,前端JS调用后台的接口,根据接口定义的传参进行传参,得到返回值,然后展现在页面上,或者对数据进行了操作,把操作后的数据传给后端,后端进行数据的更新等 下面的例子我们主要从基本的增删改查进行设计后台接口部分 一.准备工作 1.modles.py文件中,创建student表,用于进行增删改查 class