Vue/node 前后台交互演练

前后台交互

• 在我们做项目的时候，会分为前端和后端
  • 前端：前端负责界面
  • 后端：后端负责数据处理
• 前端会有很多的框架和交互的方式
  • 在我们做数据交互的时候 会碰到跨域的问题
  • 当你使用 vue 作为页面框架的时候 就会开启前端的 vue 的 npm 服务
  • 当你使用 node 作为页面后端的服务器的时候 就会开启后端 的 node 服务
• 那么问题就来了 当你开启 npm 服务 和 node 服务的时候 分别都有两个端口
  • vue的 npm端口 去获取 node得服务得时候 就会出现在两个不同得服务处在不同得域内
  • 这样就出现了跨域问题了
• 既然出现了跨域问题，那么着么去解决这个跨域得问题呢
  1. 方法一：在后端服务中设置请求报文头
  2. 方法二：在 vue 的 webpack 中的配置文件中设置代理跨域 （不会暂时不写）

后台服务设置跨域(设置请求报文头就可以)

//2.0 将所有api的请求响应content-type设置为application/json
app.all('/api/*', (req, res, next) => {
  //设置允许跨域响应报文头
  //设置跨域
  // 启用 Node 服务器端的 cors 跨域
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods", "*");

  res.setHeader('Content-Type', 'application/json;charset=utf-8');
  next();
});

项目演练

1. 项目地址
   • Vue与Node交互项目演练
2. 使用项目
   • 把地址里面都 vue-jh 这个包下载下来（用迅雷可以直接下载）
   • 项目分布
     • vue-tepmlate 是 vue 的前端案例
       • index.html 是渲染的主页（留坑）
       • App.vue 是主页 vue 模块
       • main.js 是业务逻辑
       • router.js 路由
       • webpack.config.js 是 vue webpack 的配置文件
     • node_server 是 node 的后端服务
       • app.js 是node 服务
       • controller.js 业务逻辑
       • model.js 操作数据库
       • router.js 路由
     • 分别打开这两个文件在终端安装依赖
       • suco cnpm i (安装依赖包)
     • 分别开启服务
       • vue-tepmlate
         • sudo npm run dev
       • node_server
         • sudo node app.js (或) sudo nodemon app.js
     • 还有个最重要的是配置数据库
       • 在 node_serve 中的model.js 文件中配置本地的mysql数据库