Flutter项目实战之女装商城------后台接口环境搭建

继续Flutter商城项目的编写，这次准备用Node来搭建后来模拟一种真实的get和post请求，当然对于Node这里仅限能将它跑起来能为咱们的Flutter前端所使用既可，关于Node这块我也是白痴一个，不过这块领域的知识之后有想法系统的学习一下，之后再说，先进入正题。

Node安装：

关于这块就不过多说明了，上官网下载安装装去安装：

由于我本地已经好早之前安装过了，这里就不装最新版本了，安装成功之后查看一下node的版本：

这样就代表node环境已经安装好了，没啥好说的。

创建工程：

配置package.json：

接下来则来创建node工程准备开搞咱们的后台数据了，先来在咱们的主工程同级目录下新建一个文件夹：

此时用Visual Studio Code打开此目录，用它来进行JS的编写，就是它：

接下来新建第一个文件：package.json，它是一个node的配置文件，当然对于这块的文件也可以用自动生成的方式【如用npm init，像之前博文阅读密码验证 - 博客园用的这是这种方式】，这里手敲一遍，当然熟手勿喷，这块纯小白，但我的目的不是学习node，而是只要能用为了Flutter的学习做好准备既可，所以可能略显笨拙，但是于我而言一切都很美好~~下面来配置一下：

上面这些简单就不过多解释，接一下继续：

这配置有啥用呢？像上面配置了一下start之后，则可以通过命令"npm start"就相当于调用了在配置中start对应的命令“node app.js”，还可以配一些其它的，下面贴出来，等用到了到时再来看：

对我们最有用的就是下面这个了，就是依赖库的引入，这里引入两个库：

这里先对引入的两个库先了解一下，exress的官网：Express - Node.js web application framework，看一下它的简介：

搜了一下国内对它的简介，看一下它能干嘛？

嗯，反正目的是用于我们来定义api用的，而第二个依赖reqeust，从名字就晓得是为了请求而生的：

2、npm install：

接下来则来安装一下依赖库，如下：

此时再来查看一下目录变化：

此时node的工程就已经初步搭建完。

启动Http服务：

接下来则来编写node的Http服务，基本也是模板代码，不用纠结具体语法，能正常的启动可用就成，这里新建一个app.js：

问一句，为啥要新建它呢？因为咱们在package.json中配置了它：

这块app.js的代码直接贴出来，目前先不关注它的细节，读不懂也不要紧：

const express = require("express");
const path = require("path");
const app = express();

app.use(express.static(path.resolve(__dirname, "public")));

app.use(function(req, res, next) {
    const proxy = req.query.proxy;
    if(proxy) {
        req.header.cookie = req.header.cookie + `__proxy__${proxy}`;
        next();
    }
});

const port = process.env.PORT || 3000;
app.listen(port, ()=>{
    console.log(`server running @http://localhost:${port}`);
})

module.exports = app;

然后此时咱们可以启动看一下：

添加资源：

接下来添加一下前端需要的商品数据，这里统一放到一个新的目录中：

这里先弄一个html访问，先保证咱们在浏览器中能够成功访问：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flutter女装商城</title>
</head>
<body>
    <h1>Flutter女装商城</h1>
  <style>
    html,body{
      height: 100vh;
      width: 100vw;
      margin: 0;
      padding: 0;
      background: #ffffff;
      text-align: center;
      margin-top:30px;
      overflow: hidden;
    }
    *{
      color:rgb(100,100,100);
    }
    a{
      color:#42b983;
    }
    ul,li{
      margin: 0;
    }
    ul{
      margin-left: -40px;
      line-height: 30px;
    }
    li{
      list-style: none;
    }
  </style>
</body>
</html>

此时再重新启动一下npm，浏览器访问一下：

好，说明咱们的http服务是已经通了，接下来则来准备商品图片资源：

资源文件链接: 链接: 百度网盘请输入提取码提取码: rr9k

接下来再来访问一下图片看一下：

获取测试数据：

目前咱们已经能正常访问服务器的资源了，接下来则来准备一下测试API了，这里这样写：

为啥要路由，因为接口是有很多的，如果用if...else的方式来写会比较臃肿，最好就是根据我们请求的地址自动来路由到指定的js来进行数据的处理，也就是为啥上面要这样写的原因了，也就是由epress来寻找具体的路由接口，另外在正式写test.js时，还得先新建一个config.js，里面将接口地址和端口号定义好，因为我们在写接口时需要用到的，如下：

此时咱们就可以来写test.js准备接口了，具体的代码直接贴出来了，之后的接口写法就可以效仿，这里以简单的get请求作为测试：

const express = require("express");
const router = express();
const config = require("./config");
const base_url = "http://" + config.IP + ":" + config.PORT + "/images/banner/";

router.get("/",(req,res) => {

    var id = req.query.id;
    console.log("传递过来的参数测试:id = " + id);

    var data = {
        "code":"0",
        "message":"success",
        "data":[
            {
                "image": base_url + "1.jpeg",
            },
            {
                "image": base_url + "2.jpeg",
            },
            {
                "image": base_url + "3.jpeg",
            },
        ]
    };

    res.send(data);

});

module.exports = router;

好，接下来重新npm start一下，访问一下，发现出不来。。