Vue3入门笔记五----后端框架解释

这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动，不会介绍Vue的基础特性，关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue，我是看这个入门的，觉得还不错。

代码地址： https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

配置后端运行环境

“Vue3入门笔记”到目前为止，都还只是纯粹的前端，没有跟后端的任何交互，后面的内容就涉及到后端了，所以先写一篇笔记介绍一下后端的部分。

我用Django+Django Rest Framework 写了一个后端，主要包含数据库模型和API两部分，不熟悉Django和DRF的人也不用担心，只要了解每个API的作用就行了。

后端是用Python写的，所以在运行之前需要先配置一下Python.

1. 安装Python
   这一步贴一个我觉得还不错的博客，大家可以参考，不再赘述。

   windows上安装python3教程以及环境变量配置

2. 配置Python的虚拟环境
   想要深入Python虚拟环境的可以移步venv — 创建虚拟环境, 如果只是想把后端运行起来以便学习Vue3，可以按照下面的步骤实施。
   a. 在代码根目录（不是Vue3项目根目录，是整个代码的根目录）下找到第一层backend目录，并进入
   b. 执行 python -m venv venv， 会在backend目录下生成一个venv目录，这就是当前后端项目的虚拟环境。
   c. 在上述第一层backend目录中执行source ./venv/bin/Activate.ps1 或者source ./venv/bin/activate.bat 又或者 source ./venv/bin/activate , 取决于你的./venv/bin目录有哪一个文件，这样就在当前命令行中激活的虚拟环境了, 激活之后命令的开头会出现“(venv)”字样，如下第二行，

   zhixiang_pan@pzx:~/learningspace/vue_study$ source ./venv/bin/activate
   
   (venv) zhixiang_pan@pzx:~/learningspace/vue_study$ 

   d. 在上面带有激活虚拟环境的命令行界面中，进入到第一层backend目录下，执行以下命令安装后端所依赖的第三方包。

   pip install requirements.txt

   做完上面四步，python虚拟环境就配置好了。

3. 运行项目
   在上面带有激活虚拟环境的命令中，进入到第一层backend目录下，执行以下命令运行后端项目，

   python manage.py runserver

   如果运行之后没有报错的话，可以在浏览器中打开 http://127.0.0.1:8000/api/vue/ ，会出现如下图所示的页面。
   

4. 登录后端并获取API
   在上面一步中我们已经可以打开后端API页面，但是提示没有登录，我们可以点击右上角的“Login”按钮进行登录，账号是admin，密码是Pass1234，登录以后可以看到有courses、orders和menus三个API，
   

每一个API点进去都能看到我事先存储的模拟数据。