Django+Vue项目创建 跑通

参考链接:

【精选】Django+Vue项目构建_django vue-CSDN博客

一、背景

 主要介绍如何使用后端Django + 前端Vue 的技术栈快速地搭建起一套web项目的框架。       

 为什么使用Django和Vue?

     Django是Python体系下最成熟的web框架之一,由于Python语言的易用性和受众面广,Django框架也因其能够快速开发网站应用的特性成为了中小型网站开发框架首选。

     Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

    使用Vue作为前端框架,代替Django本身较为孱弱的模板引擎,Django则作为服务端提供api接口,使得前后端实现完全分离,更适合单页应用的开发构建。

二、环境准备

三、构建Django项目

1、首先使用Django来搭建web后端api框架。

pip install Django

2、查看安装是否OK:

python -m django --version

3、创建工程(工程名为ATS_Web):

配置了环境变量的话:

django-admin startproject ATS_Web

 如果命令不存在,寻找到django-admin,用下面的命令:

D:\Softwares\Anaconda3\envs\pytorch\Scripts\django-admin.exe startproject ATS_Web

4、创建应用(一个工程有多个应用)

cd/ATS_Web
python manage.py startapp myApp

5、在ATS_Web下的settings.py配置文件中,把默认的sqllite3数据库换成我们的mysql数据库, 并把app加入到installed_apps列表里:

# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databasesDATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'ats_test','USER': 'root','PASSWORD': 'root','HOST': '127.0.0.1',}
}
INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','myApp.apps.MyappConfig'
]

        在 python3 中,连接MySQL的库为pymysql 库,使用pip3 install pymysql 进行安装,直接导入即可使用, 但是在 Django 中,连接数据库时使用的是 MySQLdb 库,需要在setting.py中导入:

import pymysqlpymysql.install_as_MySQLdb()

  6 、在 app 目录下的 models.py 里我们简单写一个 model 如下 :

from django.db import models# Create your models here.class Book(models.Model):book_name = models.CharField(max_length=64)add_time = models.DateTimeField(auto_now_add=True)

  7、 在app目录下的views里我们新增两个接口,一个是show_books返回所有的书籍列表(通过JsonResponse返回能被前端识别的json格式数据),另一个是add_book接受一个get请求,往数据库里添加一条book数据:

原来:

from django.shortcuts import render
from django.http import JsonResponse
from django.core import serializersfrom myApp.models import Book
import json
# Create your views here.
def add_book(request):response = {}try:book = Book(book_name=request.GET.get('book_name'))book.save()response['msg'] = 'success'response['error_num'] = 0except Exception as e:response['msg'] = str(e)response['error_num'] = 1return JsonResponse(response)def show_books(request):response = {}try:books = Book.objects.filter()response['list'] = json.loads(serializers.serialize("json", books))response['msg'] = 'success'response['error_num'] = 0except Exception as e:response['msg'] = str(e)response['error_num'] = 1return JsonResponse(response)

8、在project下的urls.py中,添加两个url

from django.contrib import admin
from django.urls import pathfrom myApp import views as BookViewurlpatterns = [path('admin/', admin.site.urls),path('add_book/',BookView.add_book),path('show_books/',BookView.show_books),
]

 9、创建mysql数据库ats_test,迁移表,在项目的根目录,输入命令:   

            python manage.py makemigrations

            python manage.py migrate

            python manage.py makemigrations myApp

            python manage.py migrate

    启动项目 python manage.py runserver

在浏览器中测试接口:

没问题能打开之后,恭喜你,Django后端这部分构建完成。

四、构建Vue前端项目

 1、安装node.js,查看是否安装成功:

node –v

 2、使用淘宝NPM 镜像,使用npm 命令来安装模块:

npm  install  -g  npm  --registry=https://registry.npm.taobao.org

3、用npm安装vue-cli脚手架工具(vue-cli是官方脚手架工具,能迅速帮你搭建起vue项目的框架):

vue create vuedemo

4、运行命令来安装vue所须要的node依赖

npm install  
npm run serve

打开浏览器http://localhost:8080/  能打开就配好了

5、我们在src/component文件夹下新建一个名为BookTest.vue的组件,通过调用之前在Django上写好的api,实现添加书籍和展示书籍信息的功能。在样式组件上我们使用了饿了么团队推出的element-ui,这是一套专门匹配Vue.js框架的功能样式组件。

(1). npm 安装element-ui命令:$npm i element-ui –S

(2).在main.js中引入 整个Element,就可以使用了,详细的用法可以去官网查看。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)

(3)创建BookTest.vue,下面的是自己随便写的,刚学vue不久,可以参考一下:

<template><div class="box"><div><el-input v-model="input" placeholder="请输入书名" style="width:300px"></el-input><el-button type="success" @click="addBook">添加</el-button></div><el-table:data="tableData"style="width: 600px;"><el-table-columnprop="fields.book_name"label="书名"width="180"></el-table-column><el-table-columnprop="fields.add_time"label="添加时间"></el-table-column></el-table></div>
</template><script>
export default {name: 'BookTest',data () {return {input: '',tableData: []}},created () {this.showBook()},methods: {showBook () {this.axios.get('show_books/').then((response) => {console.log(response.data.list);this.tableData = response.data.list}).catch(function (error) {console.log(error);});},addBook () {this.axios.get('add_book/',{params:{book_name: this.input}}).then((response) => {console.log(response.data.msg);this.showBook()}).catch(function (error) {console.log(error);});}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box{display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
</style>

8、在src/router目录的index.js中,我们把新建的BookTest组件,配置到vue-router路由中:

import BookTest from '@/components/BookTest'export default new Router({routes: [{path: '/',name: 'BookTest',component: BookTest}]
})

9、使用axios来进行http请求。

安装: $npm install axios

安装依赖: $npm install --save axios vue-axios

配置模板:在main.js中引入axios

import axios from 'axios'
import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)

10.如果发现列表抓取不到数据,可能是出现了跨域问题,打开浏览器console确认:

五、解决跨域问题(前后端分离的跨域):

问题:

解决:

参考链接:

(本文属于前端代理解决跨域)

1、在config文件里,在原来基础上添加proxy部分:

2、在组件文件里,在每个请求头前面加/api:

 遗留问题

为什么后端运行了这两条命令后:

          python manage.py makemigrations

          python manage.py migrate

数据库就自然有数据了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/148743.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

01. Linux kernel 编译,qemu仿真

01. Linux kernel 编译&#xff0c;qemu仿真 主要步骤回顾参考文章链接 主要步骤回顾 下载编译linux内核5.10 wget https://mirror.bjtu.edu.cn/kernel/linux/kernel/v5.x/linux-5.10.tar.xz下载交叉编译工具链 http://releases.linaro.org/components/toolchain/binaries/7…

【心得】PHP的文件上传个人笔记

目录 1 php的文件上传绕过 黑名单绕过 2 php文件上传的00截断 3 iconv字符转换异常后造成了字符截断 4 文件后缀是白名单的时候的绕过 web服务器的解析漏洞绕过 5.高级文件上传绕过 1 .htaccess nginx.htaccess 2 服务端内容检测 3 配合伪协议来绕过 4.配合日志包含绕…

Word2Vec浅谈

论文地址&#xff1a;Efficient Estimation of Word Representations in Vector Space 个人认为&#xff0c;word2vec主要解决的问题是one-hot中维度过高并且稀疏的问题。word2vec是Google团队在2013年发表的一篇paper&#xff0c;当时一经问世直接将NLP领域带到了一个新的高度…

安装MongoDB

查看MongoDB版本可以执行如下命令 mongod --version 如果是Ubuntu&#xff0c;则直接安装 sudo apt-get install -y mongodb如果是其他&#xff0c;比如Amazon Linux2。 查看Linux系统发行版类型 grep ^NAME /etc/*release 如果是 Amazon Linux 2&#xff0c;则创建一个r…

asp.net core mvc 控制器使用配置

一、在根目录 添加 mysettings.json 文件 mysettings.json 文件代码如下&#xff1a; {"MySettings": {"Name": "独立配置文件","Site": "lt"} }appsettings.json 文件代码如下&#xff1a; {"Logging": {&quo…

038、语义分割

之——介绍与数据集 杂谈 语义分割&#xff0c;语义分割(Semantic Segmentation)方法-CSDN博客&#xff1a; 语义分割是计算机视觉领域的一项重要任务&#xff0c;旨在将图像中的每个像素分配到其对应的语义类别中。与物体检测或图像分类不同&#xff0c;语义分割不仅要识别图像…

力扣labuladong——一刷day41

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣236. 二叉树的最近公共祖先二、力扣1676. 二叉树的最近公共祖先 IV三、力扣1644. 二叉树的最近公共祖先 II四、力扣235. 二叉搜索树的最近公共祖先五、…

Spring Boot接口设计规范

接口参数处理及统一结果响应 1、接口参数处理 1、普通参数接收 这种参数接收方式是比较常见的&#xff0c;由于是GET请求方式&#xff0c;所以在传参时直接在路径后拼接参数和参数值即可。 例如&#xff1a;localhost:8080/api/product/list?key1value1&key2value2 /…

Golang起步篇(Windows、Linux、mac三种系统安装配置go环境以及IDE推荐以及入门语法详细释义)

Golang起步篇 Golang起步篇一. 安装Go语言开发环境1. Wondows下搭建Go开发环境(1). 下载SDK工具包(2). 解压下载的压缩包&#xff0c;放到特定的目录下&#xff0c;我一般放在d:/programs下(路径不能有中文或者特殊符号如空格等)(3). 配置环境变量步骤1&#xff1a;先打开环境变…

事关Django的静态资源目录设置(Django的setting.py中的三句静态资源(static)目录设置语句分别是什么作用?)

在Django的setting.py中常见的三句静态资源(static)目录设置语句如下&#xff1a; STATICFILES_DIRS [os.path.join(BASE_DIR, static)] STATIC_ROOT os.path.join(BASE_DIR, static) STATIC_URL /static/下面介绍这三句话的作用。 首先说第1句和第2句&#xff1a; STATI…

数据结构【DS】特殊二叉树

完全二叉树 叶子结点只能出现在最下层和次下层, 最下层的叶子结点集中在树的左部完全二叉树中, 度为1的节点数 0个或者1个【计算时可以用这个快速计算, 配合&#x1d45b;0&#x1d45b;21】若n为奇数&#xff0c;则分支节点每个都有左右孩子&#xff1b;若n为偶数&#xff0…

【STM32】ADC(模拟/数字转换)

一、ADC的简介 1.什么是ADC 1&#xff09;将【电信号】-->【电压】-->【数字量】 2&#xff09;ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字量&#xff0c;建立模拟电路到数字电路的桥梁。 3&#xff09;12位逐次逼近型ADC&#xff0c;1us转换时间&#xf…

六大排序(插入排序、希尔排序、冒泡排序、选择排序、堆排序、快速排序)未完

文章目录 排序一、 排序的概念1.排序&#xff1a;2.稳定性&#xff1a;3.内部排序&#xff1a;4.外部排序&#xff1a; 二、插入排序1.直接插入排序2.希尔排序 三、选择排序1.直接选择排序方法一方法二直接插入排序和直接排序的区别 2.堆排序 四、交换排序1.冒泡排序2.快速排序…

“新KG”视点 | 知识图谱与大语言模型协同模式探究

OpenKG 大模型专辑 导读 知识图谱和大型语言模型都是用来表示和处理知识的手段。大模型补足了理解语言的能力&#xff0c;知识图谱则丰富了表示知识的方式&#xff0c;两者的深度结合必将为人工智能提供更为全面、可靠、可控的知识处理方法。在这一背景下&#xff0c;OpenKG组织…

【python基础】类详解:如何编写类、__init__()、修改实例属性、类存储到模块并导入、py标准库、编写类的约定

文章目录 一. 创建和使用类1. 创建Dog类1.1. 构造方法&#xff1a;1.2. 形参self&#xff08;类比java的this&#xff09;&#xff1a;1.3. 属性&#xff08;类比java的成员变量&#xff09;&#xff1a; 2. 根据类创建实例2.1. 创建实例2.2. 访问属性2.3. 调用方法2.4. 创建多…

栈和队列概念

栈stack 栈只能在一端插入/删除元素先入后出只能从栈顶插入&#xff0c;栈顶删除栈底不允许插入和删除push&#xff1a;进栈pop&#xff1a;出栈应用场景&#xff1a; 队列 Queue 队列的插入操作称为 “入队”&#xff08;Enqueue&#xff09;&#xff0c;是在队尾进行的&am…

数字IC前端学习笔记:异步复位,同步释放

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 异步复位 异步复位是一种常见的复位方式&#xff0c;可以使电路进入一个可知的状态。但是不正确地使用异步复位会导致出现意想不到的错误&#xff0c;复位释放便是…

读像火箭科学家一样思考笔记03_第一性原理(上)

1. 思维的两种障碍 1.1. 为什么知识会成为一种缺陷而非一种美德 1.1.1. 知识是一种美德 1.1.2. 知识同样的特质也会把它变成一种缺点 1.1.3. 知识确实是个好东西&#xff0c;但知识的作用应该是给人们提供信息&#xff0c;而不是起约束作用 1.1.4. 知识应该启发智慧&#…

UOS统信操作系统QIcon::fromTheme详解

内置图标引擎 前言 一般Qt应用开发中设置图标只需要知道icon name就可以使用, 图标引擎会自动去存放图标主题的目录下查找。一般主题目录下存放的够用,如果还是无法满足需求,可以使用内嵌资源,使用qt的资源系统。 内嵌资源也可以像使用主题中的图标一样,它是由插件buildi…

新版JetBrains ToolBox【Windows】修改应用安装位置

WIndows下新版的JetBrainse ToolBox 无法修改应用安装路径 关闭 ToolBox 应用修改配置文件.settings.json 路径&#xff1a;C:\Users\用户名\AppData\Local\JetBrains\Toolbox "install_location": "xxx",