项目是JavaEE和Vue课程的大作业，必须使用JavaEE实现，不能使用如MyBatis、Spring框架等。

### JavaEE 不使用 MyBatis 和 Spring 框架实现 Vue 前后端分离 #### 项目结构设计 为了实现JavaEE与Vue的前后端分离，在不依赖于MyBatis和Spring的情况下，可以构建一个基于Servlet/JSP的传统JavaWeb应用作为后端服务提供者。前端部分完全独立出来，通过Ajax请求获取数据并渲染页面。 #### 后端技术选型 - **服务器容器**: 使用Tomcat来部署应用程序。 - **持久层访问**: 可以直接利用JDBC API完成对数据库的操作，编写原生SQL语句处理增删改查逻辑[^1]。 ```java public class StudentDAO { private Connection getConnection() throws SQLException { String url = "jdbc:mysql://localhost:3306/test"; String user = "root"; String password = ""; return DriverManager.getConnection(url, user, password); } public List<Student> getAllStudents() { List<Student> students = new ArrayList<>(); try (Connection conn = getConnection(); Statement stmt = conn.createStatement(); ResultSet rs = stmt.executeQuery("SELECT * FROM student")) { while (rs.next()) { int id = rs.getInt("id"); String name = rs.getString("name"); // ... other fields ... Student student = new Student(id, name /*...*/ ); students.add(student); } } catch (SQLException e) { throw new RuntimeException(e); } return students; } } ``` #### 数据交互方式 由于采用了前后端分离架构模式，则不再适合传统的表单提交形式传递参数；而是应该借助JSON格式的数据交换协议，配合RESTful风格API接口定义一套完整的CRUD操作集。 例如对于`/api/students`路径下的GET请求返回所有学生列表： ```java @WebServlet("/api/students") public class StudentsServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Gson gson = new GsonBuilder().create(); PrintWriter out = resp.getWriter(); List<Student> students = new StudentDAO().getAllStudents(); resp.setContentType("application/json;charset=UTF-8"); out.print(gson.toJson(students)); out.flush(); } } ``` #### 跨域资源共享(CORS) 当Vue运行环境位于不同域名下时会遇到浏览器同源策略限制问题。可以在web.xml配置全局CORS过滤器解决此情况: ```xml <filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> <init-param> <param-name>cors.allowed.origins</param-name> <param-value>*</param-value> </init-param> </filter> <filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> ``` #### 前端集成 在Vue工程内部安装axios库用于发起HTTP请求并与后台通信。组件内调用方法如下所示： ```javascript import axios from 'axios'; export default { data () { return {students: []}; }, created(){ this.fetchData() }, methods:{ fetchData(){ let self=this; axios.get('http://yourserver/api/students') .then(function(response){ console.log(response.data); // 处理响应体中的json对象数组 self.students=response.data;}) .catch(error=>console.error(`Error fetching ${error}`)) } } } ```