（十八）VueCli3.0全栈——加载动画和消息提醒

因为我们在添加注册加载动画是请求注册，注册成功后提示动画，需要axios。

1、安装axios

• 到前端项目中 cd client
• 安装axios cnpm install axios

2、设置请求响应拦截(因为用axios要用到请求和响应拦截)

• 在client/src 下面新建http.js文件

import axios from 'axios';

// 请求拦截

//响应拦截

export default axios;

• 在main.js中引入并设置 (client/src/main.js)

import axios from './http'

Vue.prototype.$axios = axios; //这句话设置之后所有的组件都能使用axios了

3、设置加载动画

• 到之前的http.js里面设置(client/src/http.js)

import axios from 'axios';
import {Message,Loading} from 'element-ui';

let loading;

function startLoading() {
    loading = Loading.service({
        lock: true,
        text: '拼命加载中...',
        background: 'rgba(0,0,0,0.7)'
    });
}

function endLoading() {
    loading.close();
}
// 请求拦截
// 请求的时候需要加载动画
axios.interceptors.request.use(
    config => {
    // 加载动画
    startLoading();
    return config;
    }, 
    error => {
        return Promise.reject(error);
    }
);

//响应拦截
axios.interceptors.response.use(
    response=>{
        // 结束加载动画
        endLoading();
        return response;
    },
    error=>{
        // 错误提醒
        endLoading();
        Message.error(error.response.data);
        return Promise.reject(error);
    }
)


export default axios;

4、配置跨域请求(vue-cli3.0的配置方法)

• 新建vue.config.js文件 ，在client文件夹下面，注意一定得是这个名字

  const path = require('path');
  const debug = process.env.NODE_ENV !== 'production';
  
  module.exports = {
      publicPath: '/',   // 根域上下文目录
      outputDir: 'dist',// 构建输出目录
      assetsDir:'assets',//静态资源目录(js,css,img,fonts)
      lintOnSave: true,// eslint-loader 是否在保存的时候检查
      // compiler: false,
      runtimeCompiler:true,
      transpileDependencies:[],
      productionSourceMap:true,
      chainWebpack: config => {
          if(debug){
              // 本地开发配置
          }else{
              // 生产开发配置
          }
      },
      configureWebpack: config => {
          if(debug){
              // 开发环境配置
              config.devtool = 'cheap-module-eval-source-map';
          }else{
  
          }
      },
      parallel: require('os').cpus().length > 1,
      // 第三方插件配置
      pluginOptions: {
          // ...
      },
      pwa: {},
      // webpack-dev-server 相关配置
      devServer: {
       open: true,
       host: 'localhost',
       port: 8080,
       https: false,
       hotOnly: false,
       proxy: {// 配置跨域
           '/api': {
               target:'http://localhost:5000/api/',
               ws:true,
               changOrigin:true,
               pathRewrite:{
                   '^/api':''
               }
           }
       }, 
       before: app => {}
      },
      
     }
  
  

  可以参考链接配置：Vue-cli3跨域配置

  但是注意：其中的baseUrl已经被弃用了，改成了publicPath。

5、Registert.vue提交那里修改内容

methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {

            this.$axios.post("/api/users/register",this.registerUser)
            .then(res=>{
                // 注册成功
                this.$message({
                    message:'账号注册成功！',
                    type:'success'
                });
            })
            .catch(err=>{
                console.log(err);
            })

            // 注册成功,跳转
            // this.$router.push('/login');


        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }

6、测试

前端显示 数据库插入数据

注册成功。