Django+Vue.js学习记录（一）环境安装与配置

配置环境

一、虚拟环境

1. 安装虚拟环境包

pip installvirtualenv

2. 在指定路径下创建虚拟环境

• 查找python解释器路径;

  where python
  

• 然后进入自己创建的虚拟环境中，可以通过cd命令;
• 创建虚拟环境

  virtualenv -p D:\Anaconda3\python.exe env-py3.8.8
  

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
  

• 最后可进行查看django版本

  python -m django --version
  

二. VScode安装

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

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

创建项目

django-admin startproject myproject

便于区分，将目录文件名更改为myproject-test

创建app

创建命令

python manage.py startapp app1

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')

处理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),
]

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

<div>你好，Django！div>

这里有个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')]

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

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

若发生如下错误：

Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。
则表明，8000端口被占用；

最后在浏览器输入http://127.0.0.1:8000/index/即可；