vue+vant移动端入门实现4（仿网易严选）（node中间件,实现一个数据接口）

实现数据从后端拿取

（1）创建nodemiddleare文件

在文件夹powershell上运行npm install express -save-dev

（express是node的一个框架会比较容易创建一个node的服务）

（2）下载好后该express不会在nodemiddleare文件中而是在node_modules中,所以下面要在nodemiddleare文件中创建js文件对其进行引用。

5632表示端口号,这边只需4位数字都可以

var express=require('express');
var app=express();

//发送get请求
app.get('/xxx',function(req,res){
    res.send('我是xxx,xx123');
})

//一个node执行的监听
app.listen(5632,function(){
    console.log('5632,网易严选中间件,已经运行！')
})

（3）运行在powershell中运行node

当页面也出现了,get请求的数据时,说明,node服务成功运行,

 (4)在项目上下载 axios 用来处理http请求负责ajax方面的请求

(5)完成后重新启动项目并引用axios

import axios from 'axios'

(6)再与vue连接在data后写

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

在这个位置

(7)并在you_163_middleware.js文件中写入端口跨域

//解决跨域问题,网上成熟的解决方案,直接拷贝
app.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,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("content-Type", "application/json;charset=utf-8");
    next();
})

（8）然后运行vue,console出现相应数据则表示node服务启动,并且前端获取到了对于node端口的数据

 

然后实现这个滚动标签数据的获取

(9)在you_163_middleware.js文件中写入数组，模拟后端数据

app.get('/get_tabBtnList',function(req,res){
    var tabBtnList=['推荐','居家生活','服饰鞋包','美食酒水','个护清洁','母婴亲子','全球特色'];
    res.send(tabBtnList);
})

因为修改了node中间件中的代码所以得把node重新启动

(10)在vue文件中写入来获取网页中的get请求

created(){
    axios.get('http://localhost:5632/get_tabBtnList')
      .then(_d=>{
        console.log(_d.data);
        this.tabBtnList=_d.data;
      });
  }

(11)运行项目