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

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

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

我前后尝试了两种 方法:

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

目录下使用Axios获取

我的这两个json文件名叫 hotItem.jsontypeItem.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中的 hotItemtypeItem 不带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 = 3000app.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服务端这些,继续加油吧。

相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20154 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip