使用node.js搭建简单的web服务

服务端

var http = require('http')

var server = http.createServer()
server.on('request', function (request, response) {
    // 在服务端默认发送的数据,其实是utf8编码的内容
    // 但是浏览器不知道你是utf8编码的内容
    // 浏览器在不知道服务器响应内容的编码的情况下会按照当前操作系统的默认编码去解析
    // 中文操作系统默认是gbk
    // 解决方法就是正确的告诉浏览器我给你发送的内容是什么编码
    // 在http协议中,Content-Type就是用来告知对方我给你发送的数据内容是什么类型

    // response.setHeader('Content-Type', 'text/plain;charset=utf-8') // 发送的是普通文本，编码是utf-8
    // response.end('hello 世界1')

    // 此章节教你使用node写一个接口

    var url = request.url

    if (url === '/plain') {
        // response.setHeader('Content-Type', 'text/plain;charset=utf-8')
        response.setHeader('Content-Type', 'application/json;charset=utf-8')
        // 取消跨域限制
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Cache-Control", "no-cache");
        // var k = 1
        // console.log('客户端正在发起第' + k + '次请求')
        // k+=1
        var test = {
            code: 200,
            list: [
                {
                    name: '苹果',
                    price: 9999
                },
                {
                    name: '华为',
                    price: 6666
                },
                {
                    name: '小米',
                    price: 3333
                }
            ]
        }
        response.end(JSON.stringify(test))
        // console.log(response.end(JSON.stringify(test)))
        // response.end('hello 世界')
    } else if (url === '/html') {
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.end('<p>hello world <a href="www.baidu.com">点我</a></p>')
    }
})

server.listen(3000, function () {
    console.log('Server is running ...')
})

前端

<template>
    <div>
        <p v-for="item in testArr" :key="item.id">{{ item.name }}</p>
    </div>
</template>

<script>
export default {
    data () {
        return {
            testArr: []
        }
    },
    mounted () {
        this.test()
    },
    methods: {
    	// http://192.168.0.133:3000 是本机ip和端口地址
        test () {
            this.axios.get('http://192.168.0.133:3000/plain').then((res) => {
                console.log(res)
                if (res.data.code === 200) {
                    this.testArr = res.data.list
                }
            })
        },
    }
}
</script>

启动服务端

效果

恩， 一个简单的node生成接口的操作完成了~
如果觉得有用，给个小小的赞呗~