python框架django中结合vue进行前后端分离

目录
  • 一:创建django项目
  • 二:安装vue
  • 三:设置vue项目
  • 四:vue项目写完后,打包vue项目,然后修改django配置,将vue集成到django中
  • 五:修改django的主目录的urls文件
  • 六:启动django服务,访问localhost:8000 则可以出现vue的首页
  • 七:有时候并不能直接访问出首页,原因是路径不对
  • 八:vue打包之后经常会出现fontawesome图标库不能使用的情况

一:创建django项目

django-admin startproject mysite   # 创建mysite项目

django-admin startapp app01# 创建app01应用

二:安装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

如果之前安装的有node,nmp和cnpm就可以不用安装,

三:设置vue项目

1.将vue项目,放在django文件夹下,跟app01文件夹同级

2.运行vue项目

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

如果可以运行成功,证明当前vue项目是没有问题

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

cnpmrunbuild##打包vue项目,会将所有东西打包成一个dist文件夹

在python下的项目文件夹下的-settings.py中配置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['vue-admin-master/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',
            ],
        },
    },
]

把vue的静态文件夹的目录配置到项目中【添加静态文件夹路径】

STATIC_URL = '/static/'

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'vue-admin-master/dist/static/'), # 添加内容
]

五:修改django的主目录的urls文件

from django.contrib import admin
from django.urls import path
from blog import views
from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'', TemplateView.as_view(template_name='index.html')),
]

添加对应的路由

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

启动django

python manage.py runserver
http://127.0.0.1:8000/#/login

访问出现vue项目的界面,就已经成功了!

七:有时候并不能直接访问出首页,原因是路径不对

有的会设置的有前缀,需要把前缀去掉,重新打包才能使用

打包的时候不需要把之前的打包内容删除,直接重新打包,会有对应的打包记录

八:vue打包之后经常会出现fontawesome图标库不能使用的情况

打包之后,需要手动吧fontawesome引入的css文件路径更改

把原来的

url(/static/fonts/fontawesome-webfont.b06871f.ttf),
换成
url(../fonts/fontawesome-webfont.b06871f.ttf),

fontawesome小图标就可以显示出来了

到此这篇关于python框架django中结合vue进行前后端分离的文章就介绍到这了,更多相关django vue前后端分离内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Django vue前后端分离整合过程解析

    最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue. 看了vue的一些文档,还有一些项目,先说一下django与vue的完美结合吧! 首先是创建一个django项目 django-admin startproject mysite # 创建mysite项目 django-admin startapp blog # 创建blog应用 一.接下来就是安装关于vue 的东西了 1.首先安装node.js,官网地

  • Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • python框架django中结合vue进行前后端分离

    目录 一:创建django项目 二:安装vue 三:设置vue项目 四:vue项目写完后,打包vue项目,然后修改django配置,将vue集成到django中 五:修改django的主目录的urls文件 六:启动django服务,访问localhost:8000 则可以出现vue的首页 七:有时候并不能直接访问出首页,原因是路径不对 八:vue打包之后经常会出现fontawesome图标库不能使用的情况 一:创建django项目 django-admin startproject mysite

  • Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不便. 封装api请求 import axios from 'axios' //axios.create创建一个axios实例,并对该实例编写配置,后续所有通过实例发送的请求都受当前配置约束 const $http = axios.create({ baseURL: '', timeout: 1000

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • spring boot+vue 的前后端分离与合并方案实例详解

    springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

  • SpringBoot+VUE实现前后端分离的实战记录

    一,前端VUE项目 这里使用VUE UI创建一个VUE项目 命令行输入vue ui进入 手动配置项目 选中这三个 点击下一步->点击创建项目 用IDEA打开刚才创建的项目 IDEA中的安装vue插件并重启 IDEA控制台中输入vue add axios安装axios 新建一个Show.vue 在index,js的routes中配置它的路由 编写Show,vue向后端请求数据并展示 <template> <div> <table> <tr> <td

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • 部署vue+Springboot前后端分离项目的步骤实现

    单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

  • vue+springboot前后端分离工程跨域问题解决方案解析

    假如是在同一台机器上开发,前后端分离的工程中出现跨域问题的原因是,前端工程和后端工程运行在不同的端口上.只要协议.域名.端口有一个不同就会产生跨域问题,所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题. 一.解决跨域的原理 假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题.其中需要保证的是A访问B和B访问C都不能存在跨域. 二.使用vue自带的proxyTable: proxyTable

  • 如何利用Python+Vue实现简单的前后端分离

    目录 准备工作 前端 后端 数据库 总结 准备工作 安装Node环境 安装Python环境 注意:项目整个过程需要从后往前,即先数据库->后端->前端:启动流程也是先启动后端项目,再启动前端项目 前端 开发工具:Visual Studio Code(推荐).WebStorm 打开cmd,安装Vue脚手架,命令如下: npm install -g @vue/cli 创建Vue2项目,名为vue-axios vue create vue-axios 选择Manually select featur

  • Vue结合Springboot实现用户列表单页面(前后端分离)

    目录 用户列表页面开发 项目介绍 1.前端html页面编写 2.springboot框架搭建 2.1.项目创建 2.2.连接数据库 2.3.项目完整依赖 3.编写entity层 4.查询用户信息 4.1.后端代码编写 4.2.前端代码编写 5.添加用户信息 5.1.后端代码编写 5.2.前端代码编写 6.修改用户信息 6.1.后端代码 6.2.前端代码 7.删除用户信息 7.1.后端代码 7.2.前端代码 用户列表页面开发 项目介绍 用户列表页面开发,可以实现简单的查询,删除,修改,和添加用户信

随机推荐