• 0-搭建nodejs环境

    1) 安装 nvm

    nvm 即 (node version manager)，好处是方便切换 node.js 版本

    安装注意事项

    1. 要卸载掉现有的 nodejs
    2. 提示选择 nvm 和 nodejs 目录时，一定要避免目录中出现空格
    3. 选用【以管理员身份运行】cmd 程序来执行 nvm 命令
    4. 首次运行前设置好国内镜像地址
    nvm node_mirror http://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

    • 1
    • 2

    首先查看有哪些可用版本

    nvm list available

    • 1

    输出

    |   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    18.7.0    |   16.16.0    |   0.12.18    |   0.11.16    |
|    18.6.0    |   16.15.1    |   0.12.17    |   0.11.15    |
|    18.5.0    |   16.15.0    |   0.12.16    |   0.11.14    |
|    18.4.0    |   16.14.2    |   0.12.15    |   0.11.13    |
|    18.3.0    |   16.14.1    |   0.12.14    |   0.11.12    |
|    18.2.0    |   16.14.0    |   0.12.13    |   0.11.11    |
|    18.1.0    |   16.13.2    |   0.12.12    |   0.11.10    |
|    18.0.0    |   16.13.1    |   0.12.11    |    0.11.9    |
|    17.9.1    |   16.13.0    |   0.12.10    |    0.11.8    |
|    17.9.0    |   14.20.0    |    0.12.9    |    0.11.7    |
|    17.8.0    |   14.19.3    |    0.12.8    |    0.11.6    |
|    17.7.2    |   14.19.2    |    0.12.7    |    0.11.5    |
|    17.7.1    |   14.19.1    |    0.12.6    |    0.11.4    |
|    17.7.0    |   14.19.0    |    0.12.5    |    0.11.3    |
|    17.6.0    |   14.18.3    |    0.12.4    |    0.11.2    |
|    17.5.0    |   14.18.2    |    0.12.3    |    0.11.1    |
|    17.4.0    |   14.18.1    |    0.12.2    |    0.11.0    |
|    17.3.1    |   14.18.0    |    0.12.1    |    0.9.12    |
|    17.3.0    |   14.17.6    |    0.12.0    |    0.9.11    |
|    17.2.0    |   14.17.5    |   0.10.48    |    0.9.10    |

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    建议安装 LTS（长期支持版）

    nvm install 16.16.0
nvm install 14.20.0

    • 1
    • 2

    执行 nvm list 会列出已安装版本

    切换到 16.16.0

    nvm use 16.16.0

    • 1

    切换到 14.20.0

    nvm use 14.20.0

    • 1

    安装后 nvm 自己的环境变量会自动添加，但可能需要手工添加 nodejs 的 PATH 环境变量

    2) 检查 npm

    npm 是 js 的包管理器，就类似于 java 界的 maven，要确保它使用的是国内镜像

    检查镜像

    npm get registry

    • 1

    如果返回的不是 https://registry.npm.taobao.org/，需要做如下设置

    npm config set registry https://registry.npm.taobao.org/

    • 1
    3) 搭建前端服务器

    新建一个保存项目的 client 文件夹，进入文件夹执行

    npm install express --save-dev

    • 1

    修改 package.json 文件

    {
  "type": "module",
  "devDependencies": {
    "express": "^4.18.1"
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 其中 devDependencies 是 npm install --save-dev 添加的,为了使后续代码支持import语法加上·“type”: “module”,·

    编写 main.js 代码

    import express from 'express'
const app = express()

app.use(express.static('./'))
app.listen(7070)

    • 1
    • 2
    • 3
    • 4
    • 5

    执行 js 代码（运行前端服务器）

    node main.js

    • 1

    ####4)在根目录下编写如下student.html代码

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style scoped>
        div {
            font-family: 华文行楷;
            font-size: 20px;
        }
    
        .title {
            margin-bottom: 10px;
            font-size: 30px;
            color: #333;
            text-align: center;
        }
    
        .row {
            background-color: #fff;
            display: flex;
            justify-content: center;
        }
    
        .col {
            border: 1px solid #f0f0f0;
            width: 15%;
            height: 35px;
            text-align: center;
            line-height: 35px;
        }
    
        .bold .col {
            background-color: #f1f1f1;
        }
    style>
head>
<body>
    <div>
        <div class="title">学生列表div>
        <div class="thead">
            <div class="row bold">
                <div class="col">编号div>
                <div class="col">姓名div>
                <div class="col">性别div>
                <div class="col">年龄div>
            div>
        div>
        <div class="tbody">
            <div class="row">
                <div class="col">1div>
                <div class="col">刘备div>
                <div class="col">男div>
                <div class="col">18div>
            div>
            <div class="row">
                <div class="col">2div>
                <div class="col">关羽div>
                <div class="col">女div>
                <div class="col">18div>
            div>
            <div class="row">
                <div class="col">3div>
                <div class="col">张飞div>
                <div class="col">男div>
                <div class="col">17div>
            div>
            <div class="row">
                <div class="col">4div>
                <div class="col">小乔div>
                <div class="col">女div>
                <div class="col">16div>
            div>
            <div class="row">
                <div class="col">5div>
                <div class="col">大乔div>
                <div class="col">女div>
                <div class="col">18div>
            div>
            <div class="row">
                <div class="col">6div>
                <div class="col">曹操div>
                <div class="col">男div>
                <div class="col">20div>
            div>
        div>
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91

    ####5）浏览器访问http://localhost:7070/student.html
    在这里插入图片描述

  • 相关阅读:
    导入自己的jacoco exec文件到IDEA并进行展示
    pytorch模型保存、加载与续训练
    Kubeadm部署K8s
    NAT、SNAT与DNAT详解
    美团校招机试 - 小美的MT（20240309-T3）
    基于FPGA的运动补偿模块设计与实现（Matlab源代码）
    Redis篇
    09_spring注解方式管理bean
    【java学习】 面向对象编程+java购物车系统
    Ubuntu20.04搭建web服务器
  • 原文地址：https://blog.csdn.net/qwy715229258163/article/details/127948478