前端获取服务器数据

server.js   搭建一个简易服务器

 

const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	// console.log('请求来自于',request.get('Host'));
	// console.log('请求的地址',request.url);
	next()
})

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

前端发送请求，使用axios发送get请求,简单的用vue-cli生成一个项目，在app.vue文件中

app.vue

<template>
  <div >
  <button @click="getStudents">获取学生信息</button>
  </div>
</template>

<script>

import axios from 'axios'
export default {
  name: 'App',
  methods:{
			getStudents(){
				axios.get('http://localhost:8082/students').then(   //向服务器发请求
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
  }
  }
</script>

<style>

ps：这里引入了axios ,    vs_code中     npm  i   axiox 

 

这里访问服务器会遇到跨域问题，前端解决的话，开发中大多用代理解决。首先理解一下代理。

代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。

图中中间8080就是代理服务器，下面配置一下代理

 

vue.config.js 

module.exports ={
    pages:{
        index:{
            //入口
            entry:'src/main.js'
        },
    },
    lintOnSave:false,   //关闭语法检查
    //开启代理服务器
    devServer:{
        proxy:'http://localhost:5000/' //代理服务器转发给5000服务器

    }
}

 

 ps：这里url是目标服务器地址，我们要访问的，要获取数据的那个服务器地址，这样写了，代理服务器8080会转发到5000目的服务器。

 

开启服务器，   node  server.js

 

跑起vue-cli自带的项目，npm   run   serve

 项目页面:点击获取学生信息，访问服务器，获取服务器中数据，(学生对象)