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

选择 `MySQL` 作为数据源。

填写：

Host: `localhost`

Port: `3306`

Database: `your_database_name`

User: `root`

Password: `your_password`

测试连接并保存。

注意事项

确保数据库服务已启动。

检查防火墙设置，确保端口可访问。

使用 VPN 或 SSH 隧道连接远程数据库。

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

二.控制层

使用Servlet处理控制层.

Servlet: java代码运行在web容器中+一定规则

1.创建一个servlet代码

java 复制代码

@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 Here
        ius = 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转换

html 复制代码

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

三.接口测试

1.检测tomcat配置

2.项目运行配置tomcat

启动tomcat--->API测试

具有单元测试和api的能力

四.乱码过滤器

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

java 复制代码

public class CharsetFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
    }

    @Override
    public 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); //继续走其他过滤器
    }

    @Override
    public void destroy() {
        Filter.super.destroy();
    }
}

五.跨域

java 复制代码

public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
    }

    @Override
    public 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);
    }

    @Override
    public void destroy() {
        Filter.super.destroy();
    }
}

六.ApiPost

七.前端框架

Vue+Axios+Router+ElementUI

1.Vue-cli项目

sql 复制代码

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

2.安装ElementUI

2.1 安装Axios

（1）拦截器

java 复制代码

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

java 复制代码

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 = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3.开发页面

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

html 复制代码

<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%"
          stripe
          border
          v-loading="loading"
          element-loading-text="数据加载中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-table-column
            prop="id"
            label="ID"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户名"
            width="180"
            align="center">
        </el-table-column>
        <el-table-column
            prop="password"
            label="密码"
            align="center">
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 分页 -->
    <el-row style="margin-top: 20px;">
      <el-pagination
          background
          layout="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>