vscode 搭建 django 显示hello world

前言:

做个记录,之后时间长了,还可以看看,顺便备份几个做项目的地址

参考:

使用 Visual Studio Code(VSCode)搭建简单的 Python + Django 开发环境
官方的民意调查(项目没有涉及到自带的user,但是django版本是新的)
做个简单的论坛(对网页开发一些有帮助,比官方的好,但是django是1.1版本,对django有一定了解后做比较好,有些改进的操作,对url的管理,官方的比较好)
The django book2(目前感觉最好的入门书,就是太贵,正版200多,也没盗版,还有就是英文,但是看它免费章节也能了解个大概)
MDN 本地图书馆网站

安装插件:

1. python,其它插件可以慢慢一个一个试过来,满意的留下,不行的就卸载了
vscode 搭建 django 显示hello world_第1张图片
2. django
vscode 搭建 django 显示hello world_第2张图片
然后在setting中配置
vscode 搭建 django 显示hello world_第3张图片
后面是我自己用的插件,可以试着下一下看顺不顺手
在这里插入图片描述
在这里插入图片描述
vscode 搭建 django 显示hello world_第4张图片
vscode 搭建 django 显示hello world_第5张图片

搭建

1. 新建存储工程的文件夹

2. 用venv创建python虚拟环境

python -m venv {虚拟环境名称}

vscode 搭建 django 显示hello world_第6张图片

3. 运行虚拟环境

{虚拟环境名称}\Scripts\activate

在这里插入图片描述
不能运行虚拟环境看一下这个python 在 vscode 中运行虚拟环境
退出虚拟环境:

deactivate

在这里插入图片描述
4. 安装django

pip install django

vscode 搭建 django 显示hello world_第7张图片

5. 创建django工程

django-admin startproject {工程名称}

vscode 搭建 django 显示hello world_第8张图片
这里会发现创建了两个相同的文件夹,第一层DrawBox的可以把名字修改下,只是存放自己项目的容器,可以改成任何名字,习惯加个root
在这里插入图片描述
6. 验证项目是否有效
如果不在虚拟环境,进入虚拟环境
进入项目容器DrawBoxRoot

cd ./DrawBoxRoot
python manage.py runserver

vscode 搭建 django 显示hello world_第9张图片
用ctrl + click 点击http://127.0.0.1:8080/
vscode 搭建 django 显示hello world_第10张图片
退出服务器运行,这里提示是CTRL-BREAK
在windows下是 Ctrl + C

7. 创建App

python manage.py startapp {app名称}

vscode 搭建 django 显示hello world_第11张图片
8. 在 全局 DrawBox 的setting中增加app
vscode 搭建 django 显示hello world_第12张图片
9. 在index的app下新建urls.py,让index下的urls.py管理此app下的所有路径,再让DrawBox中的urls.py管理所有app的路径
vscode 搭建 django 显示hello world_第13张图片
在DrawBox下的urls.py添加index下的urls
vscode 搭建 django 显示hello world_第14张图片
10 在index/views.py 下写下helloworld视图
vscode 搭建 django 显示hello world_第15张图片
11. 在index/urls.py 下配置访问视图的路径
vscode 搭建 django 显示hello world_第16张图片
这里的name提一下,可以相当于别名,以后方便通过这个别名来获取这个视图的路径,如果路径改变,如果是用这个别名来获取路径的话,代码也不需要修改

12. 重新运行服务器, 打开http://127.0.0.1:8000/drawboxes/
vscode 搭建 django 显示hello world_第17张图片

补充:

直接F5调试debug

1. 先了解下怎么当前程序是用python环境
在vscode下按F1,选择python:Select Interpreter
vscode 搭建 django 显示hello world_第18张图片
或者按底部左下角
vscode 搭建 django 显示hello world_第19张图片
会弹出当前vscode检测到的python环境,选择自己创建的虚拟环境

2. 打开Debug,然后点击设置图标
vscode 搭建 django 显示hello world_第20张图片
3. 选择python
vscode 搭建 django 显示hello world_第21张图片
4. 选择Django
vscode 搭建 django 显示hello world_第22张图片
5. 输入mange.py的路径
workspaceFolder 是从文件web4开始的
vscode 搭建 django 显示hello world_第23张图片
6. 点击F5, debug模式开始
vscode 搭建 django 显示hello world_第24张图片

总结:

基础运行,深入的话见我参考

你可能感兴趣的:(vscode配置,django,web,django,vscode)