动力节点Vue-p99-演示AJAX跨域问题~p101-开启Vue脚手架的代理机制

我这里已经是最后学完p102的自己了

b站动力节点的这一期视频，弄了8000和8001两个后端访问的资源模拟ajax跨域问题，但是视频中并没有讲解怎么部署这两个资源。

我也是根据动力节点前面的教学视频所学的之后，在IDEA中，使用Tomcat服务器进行了简单的部署，虽然有一些差别，但是也基本达到了想要的效果。由于前面JavaWeb讲过了很多知识，我就简单的给一些步骤就行了哈

废话不多说，直接开搞

Tomcat服务器配置

新建一个项目，新建两个Modeul，分别给两个Modeul配置不同的服务器

 

 

 注意：两个服务器的端口号，和两个webapp项目名

 Servlet

• bug

  import javax.servlet.ServletException;
  import javax.servlet.annotation.WebServlet;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  import java.io.IOException;
  import java.io.PrintWriter;
  
  @WebServlet("/bug")
  public class BugServlet extends HttpServlet {
      @Override
      protected void doGet(HttpServletRequest request, HttpServletResponse response)
              throws ServletException, IOException {
          response.setContentType("text/html;charset=utf-8");
          PrintWriter out = response.getWriter();
  
          StringBuilder bug = new StringBuilder();
          bug.append("  [");
          bug.append("  {");
          bug.append("      \"id\": \"001\",");
          bug.append("          \"desc\" :\"222行出现空指针异常\",");
          bug.append("          \"resolved\" : false");
          bug.append("  },");
          bug.append("  {");
          bug.append("      \"id\":\"002\",");
          bug.append("          \"desc\" : \"666行出现类型转换异常\",");
          bug.append("          \"resolved\": false");
          bug.append("  },");
          bug.append("  {");
          bug.append("      \"id\" : \"003\",");
          bug.append("          \"desc\" :\"888行出现算术异常\",");
          bug.append("          \"resolved\": false");
          bug.append("  }");
          bug.append("  ]");
  
          // 响应
          out.println(bug);
      }
  }
  

• user

  import javax.servlet.ServletException;
  import javax.servlet.annotation.WebServlet;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  import java.io.IOException;
  import java.io.PrintWriter;
  
  @WebServlet("/user")
  public class UserServlet extends HttpServlet {
      @Override
      protected void doGet(HttpServletRequest request, HttpServletResponse response)
              throws ServletException, IOException {
          response.setContentType("text/html;charset=utf-8");
          PrintWriter out = response.getWriter();
  
          StringBuilder user = new StringBuilder();
          user.append("[{\"id\": \"001\",\"name\":\"张三\",\"age\" : 20},{\"id\" :\"002\",\"name\":\"李四\",\"age\": 21},{\"id\": \"003\",\"name\":\"王五\",\"age\": 22}]");
  
          /*响应*/
          out.println(user);
      }
  }
  

  注意：两个servlet的url

 Vue组件

• App.vue

  <template>
      <div>
          <Bugs></Bugs>
      </div>
  </template>
  
  <script>
      import Bugs from './components/Bugs.vue';
      export default {
          name: 'App',
          components:{Bugs},
      }
  </script>

• Bugs.vue

  <template>
      <div>
          <button @click="getBugs">获取bug列表信息</button>
          <br>
          <button @click="getUsers">获取用户列表信息</button>
      </div>
  </template>
  
  <script>
      import axios from 'axios'
      export default {
          name: 'Bugs',
          methods:{
              getUsers(){
                  axios.get('/abc/vue/user').then(
                      response => {
                          console.log(response.data)
                      },
                      error => {
                          console.log('错误信息：',error.message)
                      }
                  )
              },
              getBugs(){
                  // 发送AAX请求，访间:http://localhost:8000/vue/bug.json
                  // 使用axios库发送AJAX请求
                  // axios.get('http://localhost:8000/vue/bug.json').then(
                  // 原理:发送AJAX请求的时候，会优先从自己的服务器当中找/vue/bugs
                  // 资源如果找不到，就会找代理，然后去http://localhost:8000找/vue/bugs资源
                  // axios.get('http://localhost:8080/vue/bug').then(
                      // 当前按钮这个页面就是在8e80服务器上，又去访问8080服务器上的资源，所以http://localhost:8080可以省略。
                  /* axios.get('/vue/bug').then(
                      response => {
                          console.log(response.data)
                      },
                      error => {
                          console.log('错误信息：',error.message)
                      }
                  ) */
  
                  axios.get('/api/vue/bug').then(
                      response => {
                          console.log(response.data)
                      },
                      error => {
                          console.log('错误信息：',error.message)
                      }
                  )
              },
          },
      }
  </script>
  

运行结果

 

谢谢观看！