• Django+Vue.js学习记录(一)环境安装与配置


    配置环境

    一、虚拟环境

    1. 安装虚拟环境包

    pip installvirtualenv
    
    • 1

    在这里插入图片描述
    2. 在指定路径下创建虚拟环境

    • 查找python解释器路径;
      where python
      
      • 1
    • 然后进入自己创建的虚拟环境中,可以通过cd命令;
    • 创建虚拟环境
      virtualenv -p D:\Anaconda3\python.exe env-py3.8.8
      
      • 1

    在这里插入图片描述
    3. 进入虚拟环境所在路径,并激活虚拟环境,接着安装django3.1.5

    • 进入自己创建的虚拟环境路径中,可以通过cd命令;
    • 激活虚拟环境activate,退出虚拟环境deactivate.bat,显示为框3所示,代表进入虚拟环境;
    • 安装Django3.1.5,显示Successfully;
      virtualenv -p D:\Anaconda3\python.exe env-py3.8.8
      # 或者
      virtualenv -p D:\Anaconda3\python.exe env-py3.8.8 -i https://pypi.tuna.tsinghua.edu.cn/simple
      
      • 1
      • 2
      • 3
    • 最后可进行查看django版本
      python -m django --version
      
      • 1

    在这里插入图片描述

    二. VScode安装

    打开Vscode软件,点击扩展或者(Ctrl+Shift+X),搜索对应的名称进行安装

    • 输入chinse可安装中文版界面
    • 输入python,选择第一个安装
    • 输入django,安装前两个

    创建项目

    django-admin startproject myproject
    
    • 1

    在这里插入图片描述
    便于区分,将目录文件名更改为myproject-test
    在这里插入图片描述

    创建app

    创建命令

    python manage.py startapp app1
    
    • 1

    在这里插入图片描述
    app注册
    在这里插入图片描述

    处理视图的动态逻辑,在app1/views.py中输入

    from django.shortcuts import render
    from django.http import HttpResponse
    
    # Create your views here.
    
    
    def index(request):
        return render(request,'1/index.html')
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    处理URL请求路径,在myproject/urls.py中输入

    from django.contrib import admin
    from django.urls import path
    
    from app1 import views
    
    urlpatterns = [
        # path('admin/', admin.site.urls),
        path('index/',views.index),
    ]
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    处理模板,在manage.py同级目录下创建一个名为templates的文件夹,再在templates目录下创建个1的 文件夹,1文件夹下创建一个index.html的文件在index.html文件件输入

    <div>你好,Django!div>
    
    • 1

    这里有个HTML自动补全的设置

    1. 在VScode窗口下按住ctrl + shift + P,调出搜索框,在搜索框中输入settings.json
    2. 在settings.json界面中添加代码如下:(注意这里将代码放在原有代码的下面,并且放在原有大括号的中间)
      3.保存关闭,输入div,按两次Tab键就会自动补全
      “files.associations”: {
      “*.vue”:“html”
      },
      “emmet.triggerExpansionOnTab”: true,
      “emmet.includeLanguages”: {
      “vue-html”:“html”,
      “vue”:“html”
      }
      在这里插入图片描述

    配置settings.py文件,找到TEMPLATES选项,修改如下代码:

    import os
    'DIRS':[os.path.join(BASE_DIR,'templates')]
    
    • 1
    • 2

    运行python manage.py runserver,启动项目

    (env-py3.8.8) D:\django_projects\0814\myproject-test>python manage.py runserver
    
    • 1

    若发生如下错误:

    Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。
    则表明,8000端口被占用;
    在这里插入图片描述

    最后在浏览器输入http://127.0.0.1:8000/index/即可;
    在这里插入图片描述

  • 相关阅读:
    X METAVERSE PRO Launches Cloud Mining, Creating a “New Era of Mining Trend”
    让物体移动到点击的位置
    一本通1083;计算星期几
    【轮询负载均衡规则算法设计题】
    maven配置jib-maven-plugin插件构建java应用docker镜像
    python GUI(五)预设弹窗介绍
    Java面经丨后端3年经验社招面试题目分享(参考答案)
    ES查询数据的时报错:circuit_breaking_exception[[parent] Data too large
    多重视窗管理程序 screen
    自动化测试需知的4项测试工具!
  • 原文地址:https://blog.csdn.net/qq_43779011/article/details/126329125