一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

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

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

我前后尝试了两种 方法:

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

目录下使用Axios获取

我的这两个json文件名叫 hotItem.jsontypeItem.json ,把json文件放入项目目录下的static文件夹里。
static静态文件目录及搭建express服务器心得
然后在你要请求的vue模板中的script标签下,导入axios包并写入这个路径。

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中的 hotItemtypeItem 不带s,但是我json文件又带了,不细心就可能出错。
路径也要注意,如果没写好,就访问不到文件了。
完成以后,我们可以使用npm run dev命令运行项目,这时它会跑在http://localhost:8080这个地址上,打开就发现成功了。
static静态文件目录及搭建express服务器心得
注意:此方法只在开发时可行,项目打包后由于同源政策的限制,它没有访问本地目录下的这样一个协议,所以无法跨域访问。

使用express搭建服务器访问

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

static静态文件目录及搭建express服务器心得
然后我们需要把json文件拷贝到static目录下,再对app.js添加如下代码,这段代码应该放在port = 3000app.listen之间。

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请求的地址。

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服务端这些,继续加油吧。

原文链接:https://juejin.cn/post/7327502674017927222 作者:sakihomura

(0)
上一篇 2024年1月25日 上午10:00
下一篇 2024年1月25日 上午10:11

相关推荐

发表评论

登录后才能评论