飞天班第19节：企业项目研发（三）前后端联调

1、创建前端vue工程

基于基础版 vue-admin-template 3.x做的二次开发就比较简单了，vue-element-admin 3.11 做为工具箱。直接复制一份vue-admin-template，修改项目名称，package.json相关说明。

我们把http请求都放到api文件下，如上面的login.js，可以看到有三个请求。新增一个后台模块edu-admin-login作为一个微服务处理登录登出请求：

2、安装nginx

edu-admin-login模块的端口是8120,edu-edu模块的端口是8110，前端项目jude-edu-vue的BASE_API不可能同时指向两个服务，springcloud微服务可以通过网关服务zuul或gateway模块，由网关根据uri中的application name把请求指向具体的服务。现在还没网关模块，可以通过nginx反向代理，根据uri判断指向具体的服务。

Nginx 安装完后，配置文件增加监听8210端口，如下：

server{
  listen 8210;
  server_name localhost;
  
  location ~ /edu/{
    proxy_pass http://localhost:8110;
  }
  
  location ~ /admin/user/{
    proxy_pass http://localhost:8120;
  }
}

jude-edu-vue的BASE_API修改：

3、讲师管理CRUD

添加路由

列表查询

效果

添加修改

同一个组件页面add-or-update.vue