因为我们在添加注册加载动画是请求注册，注册成功后提示动画，需要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、测试
前端显示
数据库插入数据
注册成功。
