JavaEE-前端与后台的搭建

一.idea连接数据库

在使用 IntelliJ IDEA 连接数据库时，可以按照以下步骤操作：

### 1. 打开数据库工具窗口
- 在 IntelliJ IDEA 中，点击右侧的 `Database` 工具窗口，或通过 `View -> Tool Windows -> Database` 打开。

### 2. 添加数据源
- 在 `Database` 工具窗口中，点击 `+` 按钮，选择 `Data Source`，然后选择你要连接的数据库类型（如 MySQL、PostgreSQL、Oracle 等）。

### 3. 配置数据库连接
- 在弹出的窗口中，填写数据库连接信息：
- **Host**: 数据库服务器地址（如 `localhost` 或 IP 地址）。
- **Port**: 数据库端口（如 MySQL 默认是 `3306`）。
- **Database**: 数据库名称。
- **User**: 数据库用户名。
- **Password**: 数据库密码。

### 4. 测试连接
- 点击 `Test Connection` 按钮，确保连接信息正确。如果成功，会显示 `Connection successful`。

### 5. 应用并保存
- 点击 `Apply` 和 `OK` 保存配置，IDEA 将连接到数据库并在 `Database` 工具窗口中显示数据库结构。

### 6. 使用数据库工具
- 连接成功后，你可以：
- 浏览数据库表和视图。
- 执行 SQL 查询。
- 编辑表数据。
- 导出/导入数据。

### 7. 驱动管理
- 如果缺少数据库驱动，IDEA 会提示下载。你也可以手动下载并添加到 `Drivers` 部分。

### 示例：连接 MySQL
1. 选择 `MySQL` 作为数据源。
2. 填写：
- Host: `localhost`
- Port: `3306`
- Database: `your_database_name`
- User: `root`
- Password: `your_password`
3. 测试连接并保存。

### 注意事项
- 确保数据库服务已启动。
- 检查防火墙设置，确保端口可访问。
- 使用 VPN 或 SSH 隧道连接远程数据库。

通过这些步骤，你可以在 IntelliJ IDEA 中轻松连接并管理数据库。

二.控制层

使用Servlet处理控制层.
Servlet: java代码运行在web容器中+一定规则

1.创建一个servlet代码

@WebServlet(value = "/api/findAllUsers")
public class FindAllUserController extends HttpServlet {private IUserService ius;protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{//Your Codes Are Hereius = new UserServiceImpl();List<User> all = ius.findAll();Result r = Result.success(all);ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(r);resp.getWriter().write(json);}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{doGet(req,resp);}
}

2.将返回对象(Result)变成字符串

Json对象:JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人类阅读和编写，同时也易于机器解析和生成。它基于JavaScript的一个子集，但独立于编程语言，几乎所有现代编程语言都支持JSON

2.1 引用json转换

<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.15.2</version>
</dependency>

三.接口测试

1.检测tomcat配置

2.项目运行配置tomcat

启动tomcat--->API测试

具有单元测试和api的能力

四.乱码过滤器

解决从前到后，从后到前的乱码问题

public class CharsetFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {Filter.super.init(filterConfig);}@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {request.setCharacterEncoding("UTF-8"); //请求过滤response.setContentType("text/html;charset=UTF-8");//响应过滤filterChain.doFilter(request,response); //继续走其他过滤器}@Overridepublic void destroy() {Filter.super.destroy();}
}

五.跨域

public class CorsFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {Filter.super.init(filterConfig);}@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse httpResponse = (HttpServletResponse) response;// 设置跨域响应头httpResponse.setHeader("Access-Control-Allow-Origin", "*");httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");httpResponse.setHeader("Access-Control-Allow-Credentials", "true");httpResponse.setHeader("Access-Control-Max-Age", "3600");// 继续处理请求filterChain.doFilter(request, response);}@Overridepublic void destroy() {Filter.super.destroy();}
}

六.ApiPost

七.前端框架

Vue+Axios+Router+ElementUI

1.Vue-cli项目

D:\maven-workspace\javaee-demo\src\main\webapp>vue create ee-demo

2.安装ElementUI

2.1 安装Axios

（1）拦截器

import axios from 'axios'const $request = axios.create({timeout: 5000
});$request.interceptors.request.use(config=>{config.headers['Content-Type']='application/json;charset=utf-8';return  config;},error=>{return Promise.reject(error);}
);export default $request;

（2）main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

3.开发页面

从前端发起请求，从后台获得数据展示在页面上表格展示

<template><div class="about"><!-- 查询按钮 --><el-row><el-button type="primary" @click="findAll" :loading="loading">查询</el-button></el-row><!-- 数据表格 --><el-row><el-table:data="tableData"style="width: 100%"stripeborderv-loading="loading"element-loading-text="数据加载中..."element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"><el-table-columnprop="id"label="ID"width="180"align="center"></el-table-column><el-table-columnprop="username"label="用户名"width="180"align="center"></el-table-column><el-table-columnprop="password"label="密码"align="center"></el-table-column></el-table></el-row><!-- 分页 --><el-row style="margin-top: 20px;"><el-paginationbackgroundlayout="prev, pager, next":total="total":page-size="pageSize"@current-change="handlePageChange"></el-pagination></el-row><!-- 错误提示 --><el-row v-if="error" style="margin-top: 20px;"><el-alert:title="error"type="error"show-icon></el-alert></el-row></div>
</template><script>
import $request from "@/util/request";export default {data() {return {tableData: [], // 表格数据loading: false, // 加载状态error: '', // 错误信息total: 0, // 总数据条数pageSize: 10, // 每页显示条数currentPage: 1, // 当前页码user:{username: 'aaa',password:'8888'}};},methods: {// 查询数据findAll() {this.loading = true;this.error = '';// $request.get('http://localhost:8099/javaee-demo/api/findAllUsers')//     .then((response) => {//       this.tableData = response.data.results;//       this.total = response.data.results.length; // 假设返回的数据包含总条数//     })//     .catch((error) => {//       this.error = '数据加载失败，请稍后重试。';//       console.error(error);//     })//     .finally(() => {//       this.loading = false;//     });$request.post('http://localhost:8099/javaee-demo/api/addUser',this.user).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});},// 分页切换handlePageChange(page) {this.currentPage = page;//  this.findAll(); // 根据页码重新加载数据},},mounted() {// this.findAll(); // 页面加载时自动查询数据},
};
</script><style scoped>
.about {padding: 20px;
}.el-row {margin-bottom: 20px;
}.el-table {margin-top: 20px;
}.el-pagination {text-align: center;
}.el-alert {margin-top: 20px;
}
</style>