连接前端工程进行测试

在前后端分离项目中，作为后端开发者，一般接口测试成功后即可认为开发完成。之后将开发好的接口告知前端开发者，前端开发者即可访问接口，获取数据，完成展示。此处我们使用已经开发好的前端工程，展示项目功能。

1. 解压前端项目。

2. 修改前端项目，将配置文件vue.config.js中后端项目的路径改为管理员API模块的路径

   xxxxxxxxxx
   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     transpileDependencies: true,
     // 保存文件的时候不进行eslink检查
     lintOnSave: false,
     // 开发环境
     devServer: {
       // 代理服务器，也就是后端项目的路径
       proxy: {
         '/': {
           target: 'http://localhost:8001',
           changeOrigin: true,  
           // pathRewrite: {
           //   '^/api': ''  
           // }
         },
       }
     }
   })
   

3. 修改前端项目，/src/utils/axios.js，注释掉项目的登录认证

   xxxxxxxxxx
   import axios from 'axios'
   import { ElMessage } from 'element-plus'
   import router  from '@/router'
   
   // 响应拦截器
   axios.interceptors.response.use(res => {
       const { data = {}, status } = res
       if (status == 200) {
           if (data.code != 200) {
   
               ElMessage.error(data.message)
   
               // if (data.code == 401) {
               //   router.push('/login')
               //   return 
               // }
               return Promise.reject(data)
           }
   
           return data.data
       } else {
           const { status, statusText } = res
           ElMessage.error(status + statusText)
           return Promise.reject(res)
       }
   })
   
   export default axios
   

4. 安装nodeJS

5. 在前端项目解压路径安装yarn

   xxxxxxxxxx
   npm install -g yarn
   

6. 使用yarn下载前端项目依赖

   xxxxxxxxxx
   yarn install
   

7. 使用yarn运行前端项目

   xxxxxxxxxx
   yarn serve
   

8. 访问前端项目 http://localhost:8080/#/product/brand