idea 中创建一个基于vue的登录页面，访问后台Servlet, 使用axios

在IntelliJ IDEA中创建一个基于Vue.js的登录页面，并通过axios向后台Servlet发送请求，可以按照以下步骤操作：

1. **设置项目结构**:
- 创建一个新的Vue项目，可以选择使用`Create New Project` -> `Vue.js`。

2. **安装axios库**:
- 在项目的`src/main/webapp`下的`node_modules`文件夹外（如果不存在就新建一个），打开命令行工具，运行`npm install axios`，这会将axios库添加到项目中。

3. **创建登录组件**:
- 在`src/components`目录下创建一个新的`.js`文件，比如`Login.vue`。编写基本的登录表单组件，包括用户名和密码输入框，以及一个提交按钮。

<template>
  <div>
    <input v-model="username" placeholder="Username">
    <input type="password" v-model="password" placeholder="Password">
    <button @click="handleSubmit">Login</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleSubmit() {
      this.$axios.post('/api/login', { username: this.username, password: this.password })
        .then(response => console.log('Success:', response.data))
        .catch(error => console.error('Error:', error));
    }
  }
};
</script>

4. **配置axios**:
- 需要在main.js或某个全局配置文件中设置axios的baseURL和默认headers（如果有认证信息）。

import axios from 'axios';

// 如果你有API服务器地址前缀
axios.defaults.baseURL = 'http://your-backend-api-url.com';
// 设置跨域
axios.defaults.withCredentials = true;
// 添加axios实例到Vue原型上方便在每个组件里直接使用
Vue.prototype.$axios = axios;

5. **启动应用和服务**:
- 在`package.json`文件中设置`scripts`字段，运行`npm run serve`启动Vue开发服务器，然后启动你的后台Servlet服务。

6. **访问Servlet**:
- 确保你的后台Servlet监听了相应的端口，接收来自前端的POST请求并处理登录逻辑。