文章目录

配置后端运行环境

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

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

同步发表于个人站点：http://panzhixiang.cn/article/2022/11/10/59.html

配置后端运行环境

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

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

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

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

windows上安装python3教程以及环境变量配置
配置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虚拟环境就配置好了。
运行项目
在上面带有激活虚拟环境的命令中，进入到第一层backend目录下，执行以下命令运行后端项目，
```
 python manage.py runserver
```

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

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

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

Vue3入门笔记----后端框架解释相关推荐

Vue3入门笔记----实现首页的展示内容
文章目录修改API 修改首页展示文件总结这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动,不会介绍Vue的基础特性,关于Vue的基础特性可以参考这个视频四个小时带你快 ...
Vue3入门笔记—2022年1月9日
1. 响应式值(ref和reactive) 一般: 1.ref用于单个值, 2.reactive用于对象类型的数据. 例如: const name = ref("zhangsan" ...
go web框架_golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web
micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go- ...
深度学习入门笔记（十五）：深度学习框架（TensorFlow和Pytorch之争）
欢迎关注WX公众号:[程序员管小亮] 专栏--深度学习入门笔记声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献. 2)本文仅供学术交流,非商用.所以每一部分具 ...
Ktor: Kotlin Web后端框架快速开始入门
Ktor: Kotlin Web后端框架 Web backend framework for Kotlin 快速开始入门 Ktor 简介 Ktor 是一个用于在 Kotlin 中快速创建 web 应用 ...
【大数据入门笔记系列】第六节分布式计算框架MapReduce的工作流程
[大数据入门笔记系列]第六节分布式计算框架MapReduce的工作流程前言 MapReduce分布式运算 MapReduceApplication MapTask ReduceTask split ...
后端框架 Nest 入门教程: 开发学生信息管理系统
作为一个前端,是否有想过学习下后端,做一个完整的应用? 如果你只是想体验下服务器端,可以选择 Express[1].它更容易上手.如果你想做一个企业级应用,推荐使用 Nest. Nest[2] (Ne ...
ts入门笔记——ts类型声明和类型断言
最近玩csdn比较少,欢迎关注我的掘金:杨灿就是杨火山简单快速上手ts的学习路径: 一.熟悉掌握熟悉的强类型定义,初步学习编写强类型代码. 学习ts的声明变量类型,能够初步编写强类型代码: 学习ts ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

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

文章目录

配置后端运行环境

Vue3入门笔记----后端框架解释相关推荐

最新文章

热门文章