添加axios 配置跨域， 配置接口请求文件

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
         "plugin:prettier/recommended"
     ],
     rules: {
+        "no-unused-vars": 'off',
         "vue/component-name-in-template-casing": ["error", "PascalCase"],
         "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
         "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",

package-lock.json

@@ -3680,6 +3680,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.0.tgz",
+      "integrity": "sha1-Jt8IiAOiNQ3/LCf5b++Z/klEKso=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -7057,8 +7065,7 @@
     "follow-redirects": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
-      "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==",
-      "dev": true
+      "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
     },
     "for-in": {
       "version": "1.0.2",

package.json

@@ -25,6 +25,7 @@
     "@ckeditor/ckeditor5-theme-lark": "^21.0.0",
     "@ckeditor/ckeditor5-vue": "^1.0.1",
     "@popperjs/core": "^2.4.4",
+    "axios": "^0.21.0",
     "cash-dom": "^8.0.0",
     "chart.js": "^2.9.3",
     "core-js": "^3.6.5",

src/utils/api/login.js

@@ -0,0 +1,10 @@
+
+import request from '@/utils/request'
+
+export function signUp (data){
+    return request({
+        url: '123',//自己的接口地址
+        method: 'post',//请求方法
+        data //需要携带的参数
+    })
+}

src/utils/request.js

@@ -1,67 +1,41 @@
-import axios from '@/utils/request'
-
-
+ 
+import axios from 'axios'
+ 
+ 
+const token = false
+// create an axios instance
 const service = axios.create({
-	baseURL: process.env.VUE_APP_BASE_URL,
-	timeout: 5000
+  baseURL: '/api',
+  timeout: 80000 // request timeout
 })
-
-
+ 
+// request interceptor
 service.interceptors.request.use(
-	config => {
-		if (store.getters.token) {
-			config.headers['X-Token'] = getToken()
-		}
-		return config
-	},
-	error => {
-		return Promise.reject(error)
-	}
+ 
+  config => {
+    // Do something before request is sent
+    if (token) {
+      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+      config.headers.Authorization = token 
+      
+    }
+    return config
+  },
+  error => {
+    // Do something with request error
+    // console.log("出错啦",error) // for debug
+    Promise.reject(error)
+  }
 )
-
+ 
 // response interceptor
 service.interceptors.response.use(
-	response => {
-		const res = response.data
-		console.log(res.msg, 'msg')
-		// if the custom code is not 20000, it is judged as an error.
-		if (res.code !== 0) {
-			Message({
-				message: res.message || 'Error',
-				type: 'error',
-				duration: 5 * 1000
-			})
-			if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-				console.log(res.code, 'res code3')
-				// to re-login
-				MessageBox.confirm(
-					'You have been logged out, you can cancel to stay on this page, or log in again',
-					'Confirm logout',
-					{
-						confirmButtonText: 'Re-Login',
-						cancelButtonText: 'Cancel',
-						type: 'warning'
-					}
-				).then(() => {
-					store.dispatch('user/resetToken').then(() => {
-						location.reload()
-					})
-				})
-			}
-			return Promise.reject(new Error(res.message || 'Error'))
-		} else {
-			return res
-		}
-	},
-	error => {
-		console.log('err' + error) // for debug
-		Message({
-			message: error.message,
-			type: 'error',
-			duration: 5 * 1000
-		})
-		return Promise.reject(error)
-	}
+  response => response,
+ 
+  error => {
+    console.log('err' + error) // for debug
+    return Promise.reject(error)
+  }
 )
-
-export default service
+ 
+export default service

src/views/Register.vue

@@ -127,6 +127,8 @@
 </template>
 
 <script>
+import { signUp } from "../utils/api/login";
+
 export default {
   data() {
     return {
@@ -173,20 +175,23 @@ export default {
         this.countNum--;
       }, 1000);
     },
- 
 
     // 获取验证码
     sendMobile() {
-       
-      if(this.btnMsg === null) {
-        return
-      }
+      signUp().then((res) => {
+        console.log(res);
+      }).catch(err=>{
       
+      })
+
+      if (this.btnMsg === null) {
+        return;
+      }
       //获取输入手机号码
-      let mobile = this.info.phone;
+      let phone = this.info.phone;
       //正则校验手机号是否合法
-      if (!/^1(3|4|5|7|8)\d{9}$/.test(mobile)) {
-        alert("手机号错误");
+      if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
+        this.$message.error("手机号错误");
         return;
       }
       //触发定时器方法

vue.config.js

@@ -1,9 +1,28 @@
 const webpack = require("webpack");
 const path = require("path");
 const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin");
-const {styles} = require("@ckeditor/ckeditor5-dev-utils");
+const { styles } = require("@ckeditor/ckeditor5-dev-utils");
 
 module.exports = {
+	devServer: {
+		open: true, //是否自动弹出浏览器页面
+		host: "localhost",
+		port: '8080',
+		https: false,
+		hotOnly: false,
+		proxy: {
+			'/api': {
+				target: 'http://localhost:5000', //API服务器的地址
+				ws: true, //代理websockets
+				changeOrigin: true, // 虚拟的站点需要更管origin
+				pathRewrite: {  //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
+					'^/api': ''
+				}
+			}
+		},
+	},
+
+
 	configureWebpack: {
 		plugins: [
 			new webpack.ProvidePlugin({