简单用户管理系统（P-11）

请求交互 加载动画和消息提醒

• 你需要安装，axios，或者其他的使用，# vue-resource具体学习看你喽
  然后你需要cd 到客户端 cd client
  npm install axios 安装axios，具体的文档你可以看 Axios中文文档
• 使用axios 会用到请求拦截，响应拦截，所以在src下新建一个http.js
  请求文件http.js，然后需要在main.js中去引入http文件
  在main.js 引入http 同时
  Vue.prototype.$axios = axios; // 添加一个属性axios 可以在其他地方调用axios
  定义一个loading加载内容，和一个结束内容

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(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

我们还引入了Message消息提醒

// 请求拦截   在请求或响应被 then 或 catch 处理前拦截它们。
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);
});

接下来是比较重点的内容了，如何解决跨越问题在前端，当然你也可以在后端去处理这个问题。
视频教程，请进去查看
其实就是在vue.config.js的配置文件中去写，在clinet中新建一个配置文件vue.config.js文件

proxy: {
            // 配置跨域
            '/api': {
                target: 'http://localhost:5000/api',
                ws: true, // 跨越
                changeOrigin: true, // 开启代理
                pathRewrite: {
                    '^/api': ''
                }
            }
        },

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'

module.exports = {
    baseUrl: '/', // 根域上下文目录
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
    lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | 'error'
    runtimeCompiler: true, // 运行时版本是否需要编译
    transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
    productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
    configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
        if (debug) { // 开发环境配置
            config.devtool = 'cheap-module-eval-source-map'
        } else { // 生产环境配置
        }
        // Object.assign(config, { // 开发生产共同配置
        //     resolve: {
        //         alias: {
        //             '@': path.resolve(__dirname, './src'),
        //             '@c': path.resolve(__dirname, './src/components'),
        //             'vue$': 'vue/dist/vue.esm.js'
        //         }
        //     }
        // })
    },
    chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
        if (debug) {
            // 本地开发配置
        } else {
            // 生产开发配置
        }
    },
    parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
    pluginOptions: { // 第三方插件配置
    },
    pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    },
    devServer: {
        open: true,
        host: 'localhost',
        port: 8081,
        https: false,
        hotOnly: false,
        proxy: { // 配置跨域
            '/api': {
                target: 'http://localhost:5001/api/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => { }
    }
}

---

此时在submitForm中我们去做请求，之前写的post注册用户

submitForm(formName) {
        this.$refs[formName].validate(valid => {
            if (valid) {
            // alert("submit!");
            // 执行请求axios
            this.$axios
                .post("/api/users/register", this.registerUser)
                .then( res => {
                    if (res.data.code === 0) {
                        this.$message({
                        message: "注册成功",
                        type: "success"
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                })
                .catch(error => {
                    this.$message({
                        message: "无法注册，请重试!",
                        type: "error"
                    });
                });
            } else {
                console.log("error submit!!");
                return false;
            }
        });
    }