Vue3 Introduction Notes Five - Explanation of the Back - end Framework

This series of notes will focus on how to set up a project using Vue3 and interact with the backend API. It won’t introduce the basic features of Vue. For the basic features of Vue, you can refer to this video [Get a Quick Start with Vue in Four Hours](https://www.bilibili.com/video/BV12J411m7MG/?spm_id_from=333.337.search - card.all.click&vd_source=55550879a421ab9d1e89e4ff47481a4d). I got started with Vue by watching this video and thought it was pretty good.

Code address: [https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue - router/vue3 - notes](https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue - router/vue3 - notes)

Configure the Back - end Running Environment

So far, the “Vue3 Introduction Notes” have only been about the pure front - end, without any interaction with the backend. The following content will involve the backend, so I’ll first write a note to introduce the backend part.

I wrote a backend using Django + Django Rest Framework, which mainly consists of two parts: the database model and the API. People who are not familiar with Django and DRF don’t need to worry. Just understand the function of each API.

The backend is written in Python, so we need to configure Python before running it.

1. Install Python
   For this step, I’ll post a blog that I think is good. You can refer to it, and I won’t go into details.

   Tutorial on Installing Python3 on Windows and Configuring Environment Variables

2. Configure the Python Virtual Environment
   Those who want to delve deeper into the Python virtual environment can go to [venv — Create Virtual Environments](https://docs.python.org/zh - cn/3.9/library/venv.html). If you just want to run the backend to learn Vue3, you can follow the steps below.
   a. Find the first - level backend directory in the root directory of the code (not the root directory of the Vue3 project, but the root directory of the entire code) and enter it.
   b. Execute python -m venv venv. A venv directory will be generated in the backend directory, which is the virtual environment for the current backend project.
   c. In the above first - level backend directory, execute source ./venv/bin/Activate.ps1 or source ./venv/bin/activate.bat or source ./venv/bin/activate, depending on which file is in your ./venv/bin directory. This activates the virtual environment in the current command line. After activation, the word “(venv)” will appear at the beginning of the command, as shown in the second line below.

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

   d. In the command - line interface with the activated virtual environment above, enter the first - level backend directory and execute the following command to install the third - party packages that the backend depends on.

   pip install requirements.txt

   After completing the above four steps, the Python virtual environment is configured.

3. Run the Project
   In the command with the activated virtual environment above, enter the first - level backend directory and execute the following command to run the backend project.

   python manage.py runserver

   If there is no error after running, you can open http://127.0.0.1:8000/api/vue/ in your browser, and a page like the following will appear.
   

4. Log in to the Back - end and Obtain the API
   In the previous step, we could already open the backend API page, but it prompts that we are not logged in. We can click the “Login” button in the upper - right corner to log in. The account is admin and the password is Pass1234. After logging in, you can see three APIs: courses, orders, and menus.
   

Clicking into each API, you can see the mock data I stored in advance.