uniapp 连接 node.js 本地接口

一：准备工作

uniapp

1.创建uniapp文件

新建项目

node.js

1.安装node相关依赖,然后根据提示操作4,5,6步骤

image.png

npm install express --save -g  //express依赖
npm install express-generator --save -g  //express应用生成器
express nodeDemo  //node项目名字
cd nodeDemo //进入node项目
npm install //安装依赖
npm start //启动node项目

2.地址栏打开 localhost:3000 显示下图，则运行成功

3.写一个自定义的接口
打开uniNode/nodeDemo/routes/index.js文件 添加下面两段代码，记得重启！！！

var express = require('express');
var router = express.Router();

// 解决跨域问题
router.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OP0TIONS");
    res.header("X-Powered-By", "Express");
    res.header("Content-Type", "text/html; charset=UTF-8");
    next();
});

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});


// 自定义接口
router.get('/list', function(req, res, next) {
  res.send({
        "code":1,
        data:[
            {id:1,name:'html'},
            {id:2,name:'css'},
            {id:3,name:'javascript'},
        ]
    })
});

module.exports = router;

重新运行node，地址栏输入 localhost:3000/list 可查看到写的数值

二：项目接入node接口

uniNode/pages/index/index.vue 文件夹下,请求接口，F12控制台，即可查看返回内容

uni.request({
             //localhost也可以换成本地局域网ip地址,192.168.xxxx
                url:'http://localhost:3000/list',
                success: (res) => {
                    console.log(res.data);
                }
            })

简单的uniapp项目连接node就结束啦