基于vue-cli及express模拟Ajax获取服务器数据

由于vue-cli已经配置好express服务器，可以直接使用，也无需在node中配置其他选项

1、在项目中找到配置文件 ：build/dev-server.js

     先确定已经引入express

     

确定express已经引入，接下来就是申明与配置express服务器，

         

 var apiServer = express()    //名称apiServer根据项目自定义，避免冲突为原则
var bodyParser = require('body-parser')  //express必须要进行的配置
apiServer.use(bodyParser.urlencoded({ extended: true }))  //
apiServer.use(bodyParser.json())
var apiRouter = express.Router()  //配置路由，名称同样可以自拟
var fs = require('fs')
apiRouter.route('/:apiName')    //apiName为接口名称
.all(function (req, res) {    // .all即支持包括get\post在内的所有xhr请求
  fs.readFile('./db.json', 'utf8', function (err, data) {   //db.json 自己配置的模拟数据需要放置到
    if (err) throw err
    var data = JSON.parse(data)   //将从服务器端获取到的json对象转换为普通js对象
    if (data[req.params.apiName]) {
      res.json(data[req.params.apiName])   
    }
    else {
      res.send('no such api name')
    }
  })
})
apiServer.use('/api', apiRouter);   //   配置 '/api'是因为做了服务器代理，所有要指明代理地址
apiServer.listen(port + 1, function (err) {  //配置接口端口号，为了方便查看，一般取前端口号+1
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + (port + 1) + '\n')
})

2、创建db.json  在index.html文件同级目录下新建db.json，整文件是一个 json对象，包含了需要请求的各接口的数据

   

 {
"getNewsList": [   //首先申明数据的接口名称，然后注入需要的接口数据
    {
      "id": 1,
      "title": "新闻条目1新闻条目1新闻条目1新闻条目1",
      "url": "http://starcraft.com"
    },
    {
      "id": 2,
      "title": "新闻条目2新闻条目2新闻条目2新闻条目2",
      "url": "http://warcraft.com"
    },
    {
      "id": 3,
      "title": "新闻条3新闻条3新闻条3",
      "url": "http://overwatch.com"
    },
    {
      "id": 4,
      "title": "新闻条4广告发布",
      "url": "http://hearstone.com"
    }
 ],
       "login": {  //若有多个接口一次向下添加即可，需要获取数据时，写明接口名称即可
    "username": "yudongdong",
    "userId": 123123
  }
       }
     }

3、设置接口代理，为了区分是真是的服务器数据和模拟数据，对模拟数据做一个代理处理

     打开项目中，config/index.js 找到代理入口  proxyTable

       

默认情况代理为空，根据项目需要配置自己的代理地址

   

 proxyTable: {
        '/api/':'http://localhost:8081'  //代理服务器访问地址
      },

4、启动服务器获取数据

    因为做了代理， 直接从 http://localhost:8081获取数据是获取不到的

     

想要获取数据须将代理地址补充完整 http://localhost:8081/api/getNewsList

因为做了代理，也可从前端入口进行获取 http://localhost:8080/api/getNewsList

5、使用vue-resouce发送Ajax获取数据

   

 this.$http.post('api/getNewsList') //之前已经配置了all请求，这里发送get\post请求都没有问题
         .then((res)=>{  //成功的返回数据，因为内置数据处理会用到this所以此处使用es6的箭头函数，内置的this便指向vue对象，如果不想使用箭头函数，那么，就可以在函数体外对this进行一个代理，var me = this
           this.newsList = res.data //数据体默认存在data中，第一次使用，可以先将查看一下res整个对象都包含哪些内容，方便以后使用
           console.log(this.newsList)
         },(err)=>{ //失败返回错误
           console.log(err)
    })

6、至此就可以使用模拟数据渲染页面啦