node+vue前后端分离初体验

认识前后端分离

前后端分离简单的理解就是前端与后端看做两个不同的项目，分开进行开发，互不干扰，前端只关注页面，后端只关注业务逻辑。后端提供接口，前端来调用。这里使用node作为服务器后端，前端使用vue，使用axios进行前后端交互，在本地测试一个简单的前后端分离案例。

前端配置

#使用vue-cli@3.0创建项目

vue create myapp

#进入myapp项目中

cd myapp

#引入axios

npm install axios --save

#在main.js中导入axios

import axios from 'axios'
Vue.prototype.$axios = axios

#在src下面的components下创建组件user.vue

<template>
    <div id="">
        <p>这是从服务器拿来的数据 {{msg}}</p>
        
    </div>
</template>
​
<script>
    export default {
      name: 'user',
      data() {
          return {
              msg: ''
          }
      },
      created () {
          this.$axios({
            method: 'get',
            url: 'http://localhost:3000/api/users'
          }).then(response => {
            this.msg = response.data
            console.log(response.data)
          }).catch(error => {
            console.log('error:' + error)
          })
        }
    }
</script>
​
<style>
</style>

​

#App.vue

<template>
  <div id="app">
    <user></user>
  </div>
</template>
​
<script>
import user from './components/user.vue'
export default{
    name: 'app',
    components: {
        user
    }
}
</script>
​
<style>
​
</style>
​

后端配置

#创建项目app-api

#使用npm初始项目

npm init
npm install

#在项目根目录下创建文件夹routers，在routers下创建users.js

var express = require('express');      
var router = express.Router();        
​
router.get('/api/users', function (req, res, next) {
  const data = {
    id: 1,
    name: '张三',
    sex: '男',
    age: 18
  }
  res.json(data);
});
module.exports = router;

#在项目根目录下创建app.js文件

//引包
const express = require('express');
//创建服务器
const app = express();
​
//导入路由文件
const routers = require('./routers/users.js');
​
//挂载路由
app.use(routers);
​
//设置服务器端口号
app.listen(3000,function(){
    console.log('server is running at port 3000');
});

跨域问题

这时候启动前端项目是不能访问的后端的api的，前后端互相访问需要跨域，

#解决之道，跨域可以在前端配置，也可以在后端配置

后端解决跨域

#在app-api项目中安装cors

npm install cors --save

#在app.js中配置

const cors = require('cors'); 
app.use(cors());
//注意这两行配置必须放在挂载路由之前

前端解决跨域

#在myapp项目根目录下创建vue.config.js

module.exports = {
    devServer: {
        proxy: { // 设置代理
            '/api': {
                target: 'http://127.0.0.1:3000', // 请求的目标服务器接口
                changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: { // 重写请求
                    '^/api': '/api' // 替换target中的请求地址，也就是说在请求http://127.0.0.1:8888/XXXXX这个地址的时候直接写成/api即可。
                }
            }
        }
    }
}

#如果使用前端解决跨域问题，则请求接口地址有变化

this.$axios({
            method: 'get',
            url: 'api/users'
          }).then(response => {
            this.msg = response.data
            console.log(response.data)
          }).catch(error => {
            console.log('error:' + error)
          })
        }

语法校验问题

#去除eslint验证

#在myapp根目录下的.eslintrc.js文件中将 parser: 'babel-eslint' 注释掉即可

#如果找不到.eslintrc.js文件，可以在package.json文件中找到 parser: 'babel-eslint' ，将其注释

#在创建项目的时候有一个询问配置信息的存放位置，这里应该选择 Indedicated config files

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    // parser: 'babel-eslint'
  }
}
​

启动项目

#进入app-api，运行app.js

node app.js

#浏览器浏览http://localhost:3000/api/users

#进入myapp，启动配置

npm run serve

#浏览器浏览http://localhost:8080