使用Express搭建Node.js服务器

Express: 基于 Node.js 平台，快速、开放、极简的 web 开发框架。

说明

• 安装
• 搭建 Express
• 测试是否成功
• 调用 服务器方法： vue-resourc & axios
• vue-resource 和 axios的 区别
• axios参考: https://www.awesomes.cn/repo/axios/axios

安装：

• 这里使用第三方 npm
• 安装express

npm install express

搭建 Express 详细步骤：

• 新建 js文件：　server.js

//1.导包
const express = require('express');
const bodyParser = require('body-parser')

//2.创建App
const app = express();

// parse application/x-www-form-urlencoded  只支持 usernname=lisi&password=lisi
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json 只支持 "{username:'lisi',password:'lisi'}"
app.use(bodyParser.json())


//服务器端设置允许跨域
app.all('/*',(req,res,next)=>{
	//告诉浏览器一些额外信息
	res.setHeader("Access-Control-Allow-Origin", "*");
	res.setHeader("X-Powered-By",' 3.2.1')
	res.setHeader("Content-Type", "application/json;charset=utf-8");
	
    res.setHeader("Access-Control-Allow-Credentials", "true");
    res.setHeader("Access-Control-Allow-Methods", "*");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
    res.setHeader("Access-Control-Expose-Headers", "*");
	
	next();
})

//3.路由处理

//GET登录请求处理
app.get('/api/login',(req,res)=>{
	const result = {status:1,message:"登录成功"}
	// 		/login?username=zhangsan&password=123
	if (req.query.username=='zhangsan' && req.query.password=='123'){
		
	}else{
		result.status = 0;
		result.message = "用户名或密码失败"
	}
	res.setHeader("Content-Type","text/json;charset=utf-8");
	res.json(result);
})

//POST登录请求处理
app.post('/postLogin',(req,res)=>{
	const result = {status:1,message:"登录成功"}
	if (req.body.username=='lisi' && req.body.password=='lisi'){
		
	}else{
		result.status = 0;
		result.message = "用户名或密码失败"
	}
	res.setHeader("Content-Type","text/json;charset=utf-8");
	res.json(result);
})

//4.启动
app.listen(3000,"127.0.0.1", function(){
	console.log("start success");
});

测试 Express

• 我用 vscode, 选择 server.js文件， 右键： 选择在终端中打开
• 通过如下命令启动此应用： node server.js
• 如果成功： 输出 start success

调用 服务器 演示两种

准备工作：

• 引入文件

    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>

第一种： vue-resource

// html代码
<div id="app">
    <button @click="jsonp()">发送JSONP请求</button>
</div>

使用 get 请求

<script>

    // console.log(window)
    Vue.use(VueResource) //Vue.propertype.$http = VueResource

    const vm = new Vue({
        el:'#app',
        methods:{
            getLogin(){
                //1.url
                const url = "http://IP地址:3000/api/login?username=lisi&password=123"

                this.$http.get(url).then(function(response){
                    console.log(response.body)
                },function(err){
                    console.log(err)
                })
            }
        }
    })
</script>

使用 post 请求

<script>
    const vm = new Vue({
        el:'#app',
        methods:{
            postLogin(){
                //1.url
                const url = "http://IP地址:3000/postLogin"

                //username=lisi&password=lisi
                //请求头 Content-Type:application/x-www-form-urlencoded
                this.$http.post(url,{username:'lisi',password:'lisi'},{emulateJSON:true}).then(response=>{
                    console.log(response.body)
                },err=>{
                    console.log(err)
                })
            }
        }
    })
</script>

使用 jsonp 跨域 请求

<script> 
    new Vue({
        el:'#app',
        methods: {
            jsonp() {
                const url ="https://api.douban.com/v2/movie/in_theaters";
                this.$http.jsonp(url).then((response) => {
                    console.log(response.body);
                }, (err) =>{
                    console.log(err)
                })
            }
        }
    })
</script>

第二种: axios

• 引入文件

 <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
 <!-- 导入了之后，就相当于jQuery -->
 <script src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script>

使用 get 请求

<script>
    const vm = new Vue({
        el:'#app',
        methods:{
            getLogin(){
                //1.url
                const url = "http://IP地址:3000/api/login?username=zhangsan&password=123"
                axios.get(url).then(response=>{
                    console.log(response.data)
                },err=>{
                    console.log(err)
                })
            }
        }
    })
</script>

使用 post 请求

<script>
    const vm = new Vue({
        el:'#app',
        methods:{
            postLogin(){
                //1.url
                const url = "http://IP地址:3000/postLogin"

                // axios.post(url,"username=lisi&password=lisi").then(response=>{
                //     console.log(response.data)
                // },err=>{
                //     console.log(err)
                // })

                //这种方式，最终会以json格式的字符串提交过去
                axios.post(url,{username:'lisi',password:'lisi'}).then(response=>{
                    console.log(response.data)
                },err=>{
                    console.log(err)
                })
            }
        }
    })
</script>

vue-resource 和 axios的 区别

1、vue-resource是基于vue的，只能在vue中使用
2、axios没有基于Vue，在其它框架中都可以使用
3、vue-resource支持jsonp，axios不支持
4、vue-resource不支持在node中使用，axios支持