Django + vue + mysql 搭建网站（步骤三：创建数据库，数据查询）

LANMIO

已于 2023-04-17 16:25:55 修改

阅读量603

点赞数 1

文章标签： vue django python vscode

于 2023-04-14 17:19:43 首次发布

本文链接：https://blog.csdn.net/LANMIO/article/details/130158353

版权

该文指导如何安装MySQL并创建数据库，接着介绍如何使用Navicat作为可视化工具。在Django项目中，详细说明了配置settings.py以连接数据库，生成和导入模型，以及进行数据库迁移的过程。同时，文中展示了在views.py和urls.py中设置查询数据库的方法，并提供了前端使用axios获取数据的示例。

摘要由CSDN通过智能技术生成

一、安装MySQL

此处使用到的数据库为MySQL，创建本地数据的前提是必须先安装好MySQL，现在运行指令创建数据库。

前提：安装好MySQL的步骤

二、安装Navicat-premium可视化工具

使用可视化工具链接django数据库：链接

三、Django项目连接数据库

目录(first_django_project\first_django_project)修改setting.py 文件，注意需要启动一个本地的数据库，修改如下

DATABASES = {
    'default': {
        ......
        # 如下参数没有，就直接新增，如果存在可以修改
        "ENGINE": "django.db.backends.mysql",
        'NAME': 'demo', # 斜杠后的是数据库名，可修改
        'USER': 'root', # 默认为root
        'PASSWORD': 'root', # 密码为安装mysql是输入的密码
        'HOST': 'localhost',
        'PORT': '3306'
    }
}

在这里插入图片描述

目录(first_django_project/backend)，修改_init_.py文件：

import pymysql
pymysql.version_info = (1, 4, 13, "final", 0)
pymysql.install_as_MySQLdb();

终端中cd切换到(first_django_project)目录，执行命令，为了生成模型：

> python manage.py inspectdb

继续执行以下命令，将模型文件导入你app的models.py里面：

> python manage.py inspectdb > backend/models.py

新生成的models.py 文件顶部加入以下代码，解决Unicode解码错误

# -*- coding: utf-8 -*-

执行命令，迁移到数据库

python manage.py makemigrations   创建脚本
python manage.py migrate   迁移

四、查询表数据

目录(first_django_project\backend)，view.py中操作：查询数据库数据的方法

from django.shortcuts import render
from django.http import JsonResponse,HttpResponse
from backend.models import User // 这里的user是根据backend/models.py中的class所定义的（看下图）

def test(request):
    ret = User.objects.all()
    data = list(ret.values('name'))
    print(data)
    return JsonResponse({'item':data})

在这里插入图片描述
2. 目录(first_django_project\backend)，urls.py中操作：调用查询数据的方法

from django.urls import re_path as url

from . import views
urlpatterns = [
    url('all/', views.get),#'all/'是前端请求是对应url地址， views.get是views.py中对应函数
    url('sql/', views.test) #'sql/'是前端请求是对应url地址， views.test是views.py中对应函数
]

前端页面-新增请求数据方法-请求地址为：‘sql/’:

export default {
	......
	mounted(){
	  this.getData()
    	this.getSql()
	},
	methods:{
		// 获取数据的方法
	    getData () {  
	      this.$axios
	        .get('all/')
	        .then(response=> { 
	          console.log(response.data)
	        })
	    },
	    // 获取数据库中的数据
	    getSql(){
		    this.$axios
		      .get('sql/')
		      .then(response=> { 
		        console.log(response.data)
		      })
	    }
	}
}