Django+vue搭建一个前后端分离的web 一

项目用到的技术：

Vue、bootstrap、Django、python；
前后端分离项目的搭建和目录结构介绍：
创建Django项目；
jango-admin startproject 项目名称

目录结构：

进入项目根目录，创建一个 App 作为项目后端：

cd 项目名称
python manage.py startapp App名称
目录结构：

使用vue-cli在根目录创建一个名称叫【sangfor_ui】的Vue.js项目作为项目前端：

vue-init webpack sangfor_ui
项目目录：

使用 webpack 打包vue项目

cd sangfor_ui
npm install
npm run build
此时直接运行npm run dev也可以直接查看前端 vue界面
构建完成会生成一个文件夹，名字叫dist，里面有一个 index.html 和一个文件夹static。

使用Django的通用视图 TemplateView修改静态指向路径（就是让Django访问目录指向我们刚才打包的dist/index.html）

**
找到项目，跟目录下的urls.py文件作出如下修改

from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView //注意加上这句urlpatterns = [path('admin/', admin.site.urls),path(r'', TemplateView.as_view(template_name="index.html")),
]

配置Django项目的模板搜索路径和静态文件搜索路径找到根目录下 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',],},},
]# Add for vue.js
STATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/dist/static"),
]

到此基本就配置完成了，运行命令就可以直接查看效果
python manage.py runserver

Django+vue搭建一个前后端分离的web 一相关推荐

flask 接口让别人能访问_flask搭建一个前后端分离的系统
我们通常说三端,pc端,android端和ios端.如果前后端不分离,相当是要做三套系统.如果前后端分离的话,可以共用一个后端,前端各自做自己的,不用管后端. 前后端不分离在前后端不分离的应用模式中 ...
Django+vue+ElementUi 实现前后端分离项目
目录一. 环境搭建二. Django 2.1 创建项目 2.2 数据库配置 2.3 创建模型并且设计数据库表 Django app :myApp 2.4 创建新增和查询的接口三.Vue 3.1. ...
超实用，Spring Security+JWT+Vue实现一个前后端分离无状态认证Demo
作者: 陕西颜值扛把子 https://zhuanlan.zhihu.com/p/95560389 精彩推荐一百期Java面试题汇总 SpringBoot内容聚合 IntelliJ IDEA内容聚合 ...
分享一个前后端分离的web项目（vue+spring boot）
Github地址:https://github.com/smallsnail-wh 前端项目名为wh-web 后端项目名为wh-server 项目展示地址为我的github pages(https:/ ...
记录使用springboot+vue框架搭建一个前后端分离的demo（后端项目）
我用的工具版本:idea2019.1.3 vue2.9.6 jdk1.8 数据库用的是mysql 数据库名字叫mydatabase,表名字叫t_b_member 一.最终项目结构 member是项目名 ...
用uwsgi和nginx 部署 django和vue打造的前后端分离项目
用uwsgi和nginx 部署 django和vue打造的前后端分离项目前言由于现在没有彻底掌握nginx的使用,部署起来有点磕磕绊绊,为了防止以后再次需要部署的时候无法快速找到适合的资料,以此文 ...
前后端分离跨服务器文件上传,SpringBoot+Vue.js实现前后端分离的文件上传功能
这篇文章需要一定vue和springboot的知识,分为两个项目,一个是前端vue项目,一个是后端springboot项目. 后端项目搭建我使用的是springboot1.5.10+jdk8+ide ...
视频教程-VUE前端开发/前后端分离-Java
VUE前端开发/前后端分离 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate.ib ...
基于springboot 快速搭建简单前后端分离项目-后台框架
目录 1.新建project 2.选择依赖 3.简单配置 4.数据库准备 5.完成后台逻辑代码 5.1创建java实体对象 5.2创建repository 5.3单元测试 5.4编写controlle ...

Django+vue搭建一个前后端分离的web 一

项目用到的技术：

目录结构：

进入项目根目录，创建一个 App 作为项目后端：

使用vue-cli在根目录创建一个名称叫【sangfor_ui】的Vue.js项目作为项目前端：

使用 webpack 打包vue项目

使用Django的通用视图 TemplateView修改静态指向路径（就是让Django访问目录指向我们刚才打包的dist/index.html）

配置Django项目的模板搜索路径和静态文件搜索路径找到根目录下 settings.py文件并打开，找到TEMPLATES配置项，修改如下:

Django+vue搭建一个前后端分离的web 一相关推荐

最新文章

热门文章

Django+vue搭建一个前后端分离的web 一

项目用到的技术：

目录结构：

进入项目根目录，创建一个 App 作为项目后端：

使用vue-cli在根目录创建一个名称叫【sangfor_ui】的Vue.js项目作为项目前端：

使用 webpack 打包vue项目

使用Django的通用视图 TemplateView修改静态指向路径（就是让Django访问目录指向我们刚才打包的dist/index.html）

配置Django项目的模板搜索路径和静态文件搜索路径 找到根目录下 settings.py文件并打开，找到TEMPLATES配置项，修改如下:

Django+vue搭建一个前后端分离的web 一相关推荐

最新文章

热门文章

配置Django项目的模板搜索路径和静态文件搜索路径找到根目录下 settings.py文件并打开，找到TEMPLATES配置项，修改如下: