提交 网络请求封装

mock/index.js

@@ -5,9 +5,9 @@ const adminLogin = require("./data/admin_login.json");
 const adminPermission = require("./data/admin_permission.json");
 const vipPermission = require("./data/vip_permission.json");
 const url = require("url");
-
 app.get("/login", (req, res) => {
-    const user = url.parse(req.url, true).query.user;
+    const user = url.parse(req.url, true).query.account;
+    console.log(user,"产参数");
     if (user === 'admin') {
         res.send(adminLogin)
     } else {
@@ -25,6 +25,6 @@ app.get("/permission", (req, res) => {
 })
 
 
-app.listen(3300, () => {
-    console.log('服务器运行在3300');
+app.listen(5000, () => {
+    console.log('服务器运行在5000');
 })

src/apirequest/base.js

@@ -1,5 +1,5 @@
 const base = {
-    sq: 'https://xiaojieapi.com/api',    // http://api.wpbom.com/api/bution.php  
+    sq: 'http://localhost:8081/api',    // http://api.wpbom.com/api/bution.php  https://xiaojieapi.com/api
     bd: 'http://xxxxx22222.com/api'
 }
 export default base;

src/apirequest/basic/index.js

@@ -0,0 +1,20 @@
+import axios from '@/apirequest/http';
+import base from '../base'; // 导入接口域名列表
+import qs from 'qs'
+
+const basic = {
+
+    // post提交    
+    login(params) {
+        return axios.get(`${base.sq}/login`,params);
+    },
+    // 其他接口…………
+
+    articleDetail(id, params) {
+        return axios.get(`${base.sq}/topic/${id}`, {
+            params: params
+        });
+    },
+}
+
+export default basic;

src/apirequest/index.js

@@ -1,5 +1,8 @@
 import article from '@/apirequest/article';
+import basic from '@/apirequest/basic';
 
 export default {    
     article,
+    basic
+
 }

src/pages/login/index.vue

@@ -20,7 +20,13 @@ export default {
     return {
       formList: [
         { type: "input", prop: "account", label: "姓名", width: "280px" },
-        { type: "input", prop: "password", label: "密码", width: "280px" ,style:'password' },
+        {
+          type: "input",
+          prop: "password",
+          label: "密码",
+          width: "280px",
+          style: "password",
+        },
       ],
       formValue: {
         account: "",
@@ -29,11 +35,9 @@ export default {
     };
   },
   methods: {
-    async login() {
-      // 网络请求
-      let data = await login(this.formValue);
-      let token = data.token;
-      // 本地  vuex
+    async login() { 
+      let result = await this.$api.basic.login(this.formValue);
+      let {token} = result.data
       this.$store.commit("LOGIN_IN", token);
       this.$router.replace("/");
     },

vue.config.js

@@ -5,7 +5,6 @@ function resolve(dir) {
 }
 
 module.exports = {
-
     lintOnSave: true,
     chainWebpack: (config) => {
         config.resolve.alias
@@ -16,14 +15,17 @@ module.exports = {
             .set('@c', resolve('src/components'))
     },
     devServer: {
+        host: "localhost",
+        port: '8081',
         proxy: {
             '/api': {
-                target: 'http://localhost:3300',
-                changeOrigin: true,
-                pathRewrite: {
+                target: 'http://localhost:5000', //API服务器的地址
+                ws: true,  //代理websockets
+                changeOrigin: true, // 虚拟的站点需要更管origin
+                pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                     '^/api': ''
                 }
             }
-        }
+        },
     }
 }