第二十二讲 前后端分离demo

本章主要介绍如何开发一个vue页面并且调用服务接口

一、在第二十讲我们搭建了一个后端服务，开发了一个登录验证接口。

接口地址：http://localhost:8080/user/login
入参：username、password
出参：string

二、在第二十一讲我们搭建了一个前端服务，并且运行成功。

页面地址：http://localhost:8080

三、为了方便，我们讲前端服务端口修改为8081

我们打开前端项目，将端口修改为8081，如下图。

image.png

重新运行，npm run dev；浏览器中访问http://localhost:8081

四、首先我们写一个http请求的工具类

如下图，新建一个文件夹，命名为util，然后在文件夹中新建一个js工具类，命名为http.js

image.png

http.js

import axios from 'axios';

// 创建axios实例
const httpService = axios.create({
    // url前缀-'https://some-domain.com/api/'
    baseURL: 'api', // 需自定义
    // 请求超时时间
    timeout: 3000 // 需自定义
});

// request拦截器
httpService.interceptors.request.use(
    config => {
        return config;
    }, 
    error => {
        Promise.reject(error);
    }
)

// respone拦截器
httpService.interceptors.response.use(
    response => {
        const res = response.data;
        return response.data;
    },
    // 处理处理
    error => {
         if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '错误请求';
                    break;
                case 401:
                    error.message = '未授权，请重新登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = '请求错误,未找到该资源';
                    break;
                case 405:
                    error.message = '请求方法未允许';
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器端出错';
                    break;
                case 501:
                    error.message = '网络未实现';
                    break;
                case 502:
                    error.message = '网络错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网络超时';
                    break;
                case 505:
                    error.message = 'http版本不支持该请求';
                    break;
                default:
                    error.message = `未知错误${error.response.status}`;
            }
        } else {
            error.message = "连接到服务器失败";
        }
        return Promise.reject(error);
    }
)

/*网络请求部分*/

/*
 *  get请求
 *  url:请求地址
 *  params:参数
 * */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'get',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  post请求
 *  url:请求地址
 *  params:参数
 * */
export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: {
                'content-type': 'application/x-www-form-urlencoded; charset=UTF-8' // 设置完以后 传入的params对象就会时候用formdata传参的方式
            }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  文件上传
 *  url:请求地址
 *  params:参数
 * */
export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

export default {
    get,
    post,
    fileUpload
}

五、新建一个登录页面，命名为login.vue

image.png

login.vue

<template>
  <div class="login" id="login">
    <div>
      <div><input type="text" placeholder="用户名" v-model="username"></div>
      <div><input type="password" placeholder="密码" v-model="password"></div>
      <a href="javascript:;" class="login-btn" @click="login">登录</a>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import http from '@/util/http';
  export default {
    name: 'Login',
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      login() {
        if (this.username != '' && this.password != '') {
          this.toLogin()
        } else {
          alert('请输入用户名密码');
        }
      },
      toLogin() {
        let loginParam = {
          username: this.username,
          password: this.password
        };
        http.post('/user/login', qs.stringify(loginParam)).then(res => {
          alert(res);
        }).catch(err => {
        });
      }
    }
  }
</script>

<style scoped>
  
</style>

六、路由配置里面新增当前页面的路由

image.png

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

七、未解决跨域问题，我们需要增加以下配置

image.png

proxyTable: {
        '/api':{
            target: 'http://localhost:8080', 
            changeOrigin: true, 
            secure: false,
            pathRewrite:{
                '^/api':''
            }
        }
    },

八、重新运行项目：npm run dev

访问login页面：http://localhost:8081/#/login