Skip to content

开发环境建立

1 实验类型

验证型，2学时，必选实验

2 实验目的

  • 建立前端开发环境

  • 建立后端开发环境

  • 熟悉前代码调试基本过程

3 实验要求

  • 安装前端开发所需软件；创建Hello World!页面作为系统入口；实现后端入口；

  • 实验完成后，将HTML代码整理成实验报告

报告以Word格式编写，以学号作为文件名

实验报告至少应用包含：关键步骤截图、源代码

4 实验环境

Windows 7+，浏览器（推荐Microsoft Edge/Chrome/Firefox等），Visual Studio Code(Vscode)，REST Client扩展，Python 3+，Uvicorn，FastAPI

5 约定

正文中会使用{变量名}语法（类似Python格式化字符串），如张三同学的学号为007，引用变量{学号}实际替换为007。

6 实验步骤

创建工作目录：盘符:/{学号}，如：C:/007，后续文件均存放在工作目录

安装Visual Studio Code

  1. 下载Vscode

    在官网下载https://code.visualstudio.com/

    或在课程群文件中下载

  2. 启动安装向导；安装过程中选中将vscode加入文件夹右键

  3. 在资源管理器中打开工作目录

  4. 并在目录内空白处右键打开快捷菜单，选择通过Code打开，界面布局如下：

    vscode

  5. 修改终端默认类型为cmd，在菜单View/Command Pallete...中输入Terminal:Select Default Profile回车后在弹出菜单中选择Command Prompt

  6. 在浏览器(文件)视图中创建static文件夹

  7. 创建Hello World!入口页面static/greeting.html，参考代码如下：

    static/greeting.html
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
    <!-- 声明了文档的类型 -->
<!DOCTYPE html>

<!-- HTML 页面的根元素，该标签的结束标志为</html> -->
<html>

<!-- 包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为utf-8 -->
<head>
  <meta charset="UTF-8"><!-- 编码 -->
  <title>My First Web Page!</title><!-- 定义文档的标题 -->
</head>

<!-- 定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body> -->
<body>
  <!-- 作为一个标题使用，该标签的结束标志为</h1> -->
  <h1>First Tiltle!</h1>
  <!-- 作为一个段落显示，该标签的结束标志为</p> -->
  <p>Hello World!</p>
</body>

</html>

  8. 在浏览器(文件)视图中右键static/greeting.html，选中快捷菜单Open in default browser并在浏览器中观察页面显示情况

安装Python

  1. 下载Python

    在官网下载https://www.python.org/downloads/

    或在课程群文件中下载

  2. 启动安装向导，勾选Add python.exe to PATH，Use admin privileges when installing py.exe

  3. 安装成功后在Vscode的终端(Terminal)菜单中新建终端

    注意终端类型为cmd

  4. 在终端中查看Python版本及依赖情况，确认Python与pip工具已正确安装

    1
2
    python -V
pip list

  5. 修改pip仓库为阿里镜像服务器

    1
2
3
    pip config set global.index-url http://mirrors.aliyun.com/pypi/simple/
pip config set install.trusted-host mirrors.aliyun.com
pip config get global.index-url

  6. 使用pip安装服务端依赖

    1
    pip install fastapi uvicorn

  7. 在工作目录创建后端入口文件index.py，参考代码如下：

    index.py
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
import os

app = FastAPI()

# 指定静态文件目录的路径
static_dir = os.path.join(os.path.dirname(__file__), "static")

# 将StaticFiles中间件添加到应用
app.mount("/static", StaticFiles(directory=static_dir), name="static")

@app.get("/")
def get_index():
    return FileResponse("static/greeting.html")

    注意：与static目录相关的代码

  8. 在终端(Terminal)启动服务器，留意终端输出

    启动服务
    1
    uvicorn index:app --host 127.0.0.1 --port 8000

REST Client测试

  1. 在Vscode侧边栏中打开扩展视图

  2. 在搜索框输入REST Client

  3. 在搜索结果中选中REST Client并安装

  4. 创建REST Client测试文件：static/greeting_test.http，代码如下：

    greeting_test.http
    1
2
    ### Request local html page
GET http://localhost:8000/static/greeting.html HTTP/1.1

  5. 在Vscode浏览视图中选中static/greeting_test.http

  6. 在代码编辑器中点击第2行代码上方的Send Request链接

    如果没有出现该链接，请检查前述步骤

  7. 观察返回代码中与Http相关的各选项

浏览器测试

  1. 启动浏览器并地址栏输入http://localhost:8000/static/greeting.html

    hello world

  2. 在浏览器中打开(快捷键F12)开发者工具，熟悉各选项卡中的界面，留意与greeting.html页面相关内容

    注：最常用的几个选项卡有：Element，Source，Network等

  3. 在Netwrok选项卡中选中greeting.html观察标头等选项卡中与Http相关的各选项

调试

  1. 将输出字符串Hello World!改为Hello Web！

  2. 分别在浏览器和REST Client测试