vue+node全栈移动商城【3】-安装express,实现第一个nodeJs接口

发布时间:2019-05-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue+node全栈移动商城【3】-安装express,实现第一个nodeJs接口脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

做一个全栈项目少不了nodeJs,总有些同学不太理解nodeJs能做什么。
其实很简单,

1、js本身不安全,所以有些操作以前是后端来做的,例如登录、注册什么的。但现在有了nodeJs,这些之前由后端做的工作,咱们前端也可以做了。
2、为什么是node?因为nodeJs的开发语言默认就是js。

express是一个工作在nodeJs里的框架,它和koa2什么的都是一路货色。就是操作一些http、router、template方面的更方便的操作。只要你会了express,那么其它的都差不多。


安装express

另外新建一个目录,打开cmd,执行:npm install express -save
在目录中新建文件: api_dev.js,在里面写:
var express = require('express');
var app = express();

// 解决跨域问题,网上成熟的解决方案,我是直接拷贝的
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Method", "*");
    res.header("Access-Control-Allow-Headers","Content-Type");
    res.header("Access-Control-Max-Age", "3600");
    next();
});

// 第一个nodeJs接口,接收
app.get('/test_api', function(req, res){
    res.send({a:123});
});

app.listen( 5679,function(){
    console.log( '5679,中间件已经启动!' )
});

然后打开cmd,运行 node api_dev.js


回到你的vue-cli项目里,进入src目录,新建proMain.vue,在script部分写上:

created(){
        axios.get('http://localhost:5679/test_api')
            .then( _d=>{
                console.log( _d.data );
            });
    }

运行项目,如果在控制台能够输出,{a:123},你的第一个接口,就ok了。

注意,此时你要分别打开二个cmd窗口

脚本宝典总结

以上是脚本宝典为你收集整理的vue+node全栈移动商城【3】-安装express,实现第一个nodeJs接口全部内容,希望文章能够帮你解决vue+node全栈移动商城【3】-安装express,实现第一个nodeJs接口所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue