认识前后端分离

前后端分离简单的理解就是前端与后端看做两个不同的项目，分开进行开发，互不干扰，前端只关注页面，后端只关注业务逻辑。后端提供接口，前端来调用。这里使用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