static静态文件目录及搭建express服务器心得

这两天在做一个Vue全家桶项目，是一个收银系统的项目。在使用axios时，有一些个人心得，在这记录一下。

项目中的需求是这样：使用axios发起异步请求，等待对方返回指定的json文件，json文件中放着我自己写的一些Object。由于我暂时没有搭建传数据的云服务器，所以打算在本机放json文件进行调试。

我前后尝试了两种方法：

放在项目目录下的static文件夹，使用axios获取。
使用express搭建了一个本地服务器，在服务器下暴露static文件夹，对服务器地址访问获取这个json文件。

目录下使用Axios获取

我的这两个json文件名叫 hotItem.json 和 typeItem.json ，把json文件放入项目目录下的static文件夹里。然后在你要请求的vue模板中的script标签下，导入axios包并写入这个路径。

js 复制代码

import axios from "axios";
export default {
  name: "pos",
  data() {
    return {
      hotItem: [],
      typeItem: []
    };
  },
  created() {
    const _this = this;
    axios
      .get("../../static/hotItems.json")
      .then(res => {
        _this.hotItem = res.data;
      })
      .catch(error => {
        console.log(error);
      });
    axios
      .get("../../static/typeItems.json")
      .then(res => {
        _this.typeItem = res.data;
      })
      .catch(error => {
        console.log(error);
      });
  },

我是在元素创建好后就发送这个请求，所以写在了created钩子里面。这个文件名最好统一一下，data中的 hotItem 和 typeItem 不带s，但是我json文件又带了，不细心就可能出错。路径也要注意，如果没写好，就访问不到文件了。完成以后，我们可以使用npm run dev命令运行项目，这时它会跑在http://localhost:8080这个地址上，打开就发现成功了。注意：此方法只在开发时可行，项目打包后由于同源政策的限制，它没有访问本地目录下的这样一个协议，所以无法跨域访问。

使用express搭建服务器访问

由于上面提到的同源政策的限制，在一番寻找答案过后，我决定在本地搭建一个服务器来模拟请求和响应的过程。使用express，这里是官方文档给的快速上手教程，还挺简单的。安装express到环境中以后，复制这段代码到我们建立的目录下新建一个index.js文件中。

js 复制代码

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

然后我们需要把json文件拷贝到static目录下，再对app.js添加如下代码，这段代码应该放在port = 3000和app.listen之间。

js 复制代码

const path = require('path');

app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next()
})
app.use(express.static(path.resolve(__dirname, './static')));

这段代码就是一个中间件，它可以对每一个发来的请求和对应的响应进行处理，比如我们要在这里处理的跨域问题。加一个头选项：Access-Control-Allow-Origin 然后next()放行请求。

之后修改我们原来axios请求的地址。

js 复制代码

axios
      .get("http://localhost:3000/hotItem.json")
      .then(res => {
        _this.hotItem = res.data;
      })
      .catch(error => {
        console.log(error);
      });
    axios
      .get("http://localhost:3000/typeItem.json")
      .then(res => {
        _this.typeItem = res.data;
      })
      .catch(error => {
        console.log(error);
      });

再访问就OK了。

通过这次项目，我还是学到了不少东西，但是还是认识到，有些知识点还需要继续学习，主要是element-ui，打包工具，express服务端这些，继续加油吧。