欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Node.js之express框架(一)

程序员文章站 2022-06-15 18:41:56
...

通过axios插件，简单模拟网络请求数据
一.首先安装express和axios

 npm install express --save
 npm install axios --save

二.建立一个js文件

   const express=require("express");

//调用express函数返回一个app，代表一个服务器端的应用程序
const app = express();

//express.static方法告诉express框架，静态文件在哪里
app.use(express.static(__dirname+'/public'));

//对外提供了一个get请求服务,路径是 /get_username
app.get('/get_username',function(request,response){
  //response,表示服务器对浏览器的响应
  // send，把数据发送给客户端或者浏览器
  response.send({
    name:'张三'
  })
})

app.get('/get_students',function(request,response){
  let students = [
    {name:'张三',sex:'男'},
    {name:'李四',sex:'男'},
    {name:'王五',sex:'男'},
  ]
  response.send(students)
})
app.listen(3000,function(err){
  if(err){
     console.log(err)
     return;
  }
  console.log('服务已经启动，请访问http://localhost:3000')
})

三.建立一个html文件

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="getUsername()">获取用户名，通过ajax请求</button>
  <span id="username"></span>
</body>
</html>
<script src="axios.min.js"></script>
<script>

 function getUsername(){
      axios.get('./get_students').then((res)=>{
        console.log(res)
        document.getElementById('username').innerHTML = res.data[0].name
      })
  }
</script>

通过原生XMLHttpRequest模拟发送网络请求

一.首先安装express

二.建立一个js文件

   const path = require('path')

const express = require('express')

const app = express()

app.use(express.static(path.join(__dirname,'..','public')))

app.get('/get_friends',function(req,res){
  let friends =[
    {name:'张三'},
    {name:'李四'}
  ]
  res.send(friends)
})

app.listen(3000,function(err){
  if(err){
    console.log(err)
    return;
  }
})

三.建立html文件

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  indexh.html
  <button onclick="getuserfriends()">获取我的朋友列表</button>
  <ul id="my_friend"> 
    
  </ul>
</body>
</html>
<script>
function getuserfriends(){
  var http =new XMLHttpRequest()
  http.onreadystatechange =function(){
    if(http.readyState ===4){
      if(http.status===200){
       var friends = JSON.parse(http.responseText)
       var ul = document.getElementById('my_friend')
       ul.innerHTML =''
       for(var i=0;i<friends.length;i++){
         var li =document.createElement('li')
         li.innerHTML = friends[i].name
         ul.appendChild(li)
       }
      }
    }
  }
  http.open('GET','./get_friends')
  http.send()
}
</script>

上一篇： Python学习笔记

下一篇： C#中的反序列化和序列化

推荐阅读