nodeuniappalready

uniapp 连接 node.js 本地接口

2022-06-22  本文已影响0人  鹿简luz

一:准备工作

uniapp

1.创建uniapp文件

新建项目
2.打开运行到谷歌浏览器 http://localhost:8080/

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就结束啦

上一篇下一篇

猜你喜欢

热点阅读