前后端分离---前后端的连接步骤

一头探索java的孤狼

已于 2023-12-18 09:58:57 修改

阅读量662

点赞数 9

文章标签：交互前端 vue

于 2023-11-07 22:23:39 首次发布

本文链接：https://blog.csdn.net/melody_girl/article/details/134275714

版权

搭建项目请转到：前后端项目分离–项目搭建

vscode部署

第一步：在src目录下创建一个utils文件夹，然后在里面创建一个js文件。这里我创建了一个request.js文件,然后下载axios。
在这里插入图片描述
第二步：在request.js中添加以下代码，已解决前后端连接时产生的跨域问题

import axios from 'axios'

export function request(config) {
    const request = axios.create({
        baseURL: 'api', // 后端请求端口设置，根据自己的端口进行设置
        timeout: 4000 // 超时时间
    })

    // request 请求拦截
    // 可以在请求发送前对请求做一些处理
    // eg.统一加上token，对请求参数统一加密
    request.interceptors.request.use(config => {
        config.headers['Content-Type'] = 'application/json;charset=utf-8';
        // console.log(config);
        // config.headers['token'] = user.token;  // 设置请求头
        return config
    }, error => {
        console.log(error);
    });

    // response 响应拦截
    // 可以在接口响应后统一处理结果
    request.interceptors.response.use(
        response => {
            let res = response.data;
            // console.log(res);
            // 如果是返回的文件
            if (response.config.responseType === 'blob') {
                return res
            }
            // 兼容服务端返回的字符串数据
            if (typeof res === 'string') {
                // 如果是json字符串，将json字符串转换为json对象
                res = res ? JSON.parse(res) : res
            }
            return res;
        },
        error => {
            console.log('err' + error) // 控制台打印错误信息，用于调试

        })
    // 直接返回
    return request(config)
}

// export default request

第三步：在自己创建的vue文件中添加methods中的queryUserList()方法用来获取后端数据

<template>
<div>
  <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "../../utils/request";
export default {
  data(){
    return{
       tableData: [{
               
            }],

       
    }
  },
  methods:{
        //获取服务器上的用户列表，并将列表呈现到前端页面中的表格中
        //向服务器发送一个名为 userServlet 的请求，获取用户列表
        queryUserList(){
            request({
            url: '/userServlet'  //请求的 URL 是 /userServlet
        }).then(res => {
            console.log(res);   //当响应结果返回并成功时，函数将服务器响应的数据赋值给 this.tableData
            this.tableData = res; //，this.tableData 将会被用来呈现在前端的表格中，用于显示用户数据
        }, err => {
            console.log(err);  //如果请求出现错误，该函数将会输出错误信息。
        })
      }
    },
    mounted() {
    
        this.queryUserList();// 钩子，页面加载时调用此方法。

    }
    } 
  
</script>

<style>

</style>

第四步：第三步操作后，我们还没有调用aixo方法实现异步加载，所以在main.js文件中加入代码：

import axios from 'axios'
import request from "@/utils/request"; //用于封装 axios 进行更高层次的请求处理的工具函数
Vue.prototype.request = request //将 request 工具函数在整个 Vue 实例中访问和调用。
Vue.prototype.$axios = axios  //将 axios 在整个 Vue 实例中访问和调用。
axios.defaults.baseURL = '/api' //在请求时可以省略掉本地地址并直接使用相对路径

如图所示：
在这里插入图片描述
最后，如果运行时出现了如下警告。这个警告提示说在 ./src/main.js 中，你使用了 import request from "@/utils/request"，但是在文件路径 @/utils/request 中没有找到名为 default 的导出项。这意味着在 @/utils/request 模块中没有使用 export default 将 request 导出，而是使用了 export const request 这种方式导出的。

为了解决这个警告，你可以在 ./src/main.js 文件中将 import request from "@/utils/request" 修改为 import { request } from "@/utils/request"，因为 request 是该模块的具名导出项。这样就可避免警告提示了。
在这里插入图片描述

在这里插入图片描述
最后看下结果叭：

后端连接的具体过程：

第一步：pom.xml配置maven：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>VUEdemo1</artifactId>
    <version>1.0-SNAPSHOT</version>

    <packaging>war</packaging>


    <dependencies>
        <!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j -->
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <version>8.0.33</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.8</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>

        <!-- https://mvnrepository.com/artifact/commons-dbutils/commons-dbutils -->
        <dependency>
            <groupId>commons-dbutils</groupId>
            <artifactId>commons-dbutils</artifactId>
            <version>1.6</version>
        </dependency>


        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.2.3</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.2.3</version>
        </dependency>



    </dependencies>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <configuration>
<!--                    端口号-->
                    <port>8080</port>  
                    <path>/</path>
                </configuration>
                <version>2.2</version>
            </plugin>
        </plugins>
    </build>

</project>

第二步：创建dao包，service包，servlet包
在这里插入图片描述

第三步：创建实体类：

package com.wedu.entity;

/**
 * @author chunhua
 * @date 2023/11/2 20:39
 */
public class User {
    private  int id;
    private  int age;

    public User() {
    }

    public User(int id, int age) {
        this.id = id;
        this.age = age;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", age=" + age +
                '}';
    }
}

第四步：创建接口

package com.wedu.dao;

import com.wedu.entity.User;

import java.util.List;

public interface UserDao {
    List<User> find();

}

第五步：创建Dao层实现类：

package com.wedu.dao.impl;

import com.wedu.dao.UserDao;
import com.wedu.entity.User;
import com.wedu.util.JDBCUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ArrayListHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

public class UserDaoImpl implements UserDao {
    Connection connection = null;
    QueryRunner qr = new QueryRunner();
    String sql = null;
    @Override
    public List<User> find() {
        try {
            connection = JDBCUtils.getConnection();
            sql = "select * from user  ";
            qr = new QueryRunner(JDBCUtils.getDataSource());
//            BeanListHandler<User> handler = new BeanListHandler<>(User.class);
            List<User> result = qr.query(connection, sql, new BeanListHandler<>(User.class));
            return result;
        }catch (Exception e){
            e.printStackTrace();
            return  null;
        }finally {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

第六步：创建userServlet类：

package com.wedu.servlet; 

import com.fasterxml.jackson.databind.ObjectMapper;
import com.wedu.dao.UserDao;
import com.wedu.dao.impl.UserDaoImpl;
import com.wedu.entity.User;
import com.wedu.service.UserService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    UserDao userDao = new UserDaoImpl();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<User> user = userDao.find();

        ObjectMapper objectMapper = new ObjectMapper();
        //将数据库查询的结果封装为一个JSON类型的数据
        String data = objectMapper.writeValueAsString(user);

        //设置一下响应的编码格式
        response.setCharacterEncoding("utf-8");

        //获取输出流
        PrintWriter printWriter = response.getWriter();
        printWriter.append(data);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            this.doGet(request,response);

    }
}

第四步：测试后端
在这里插入图片描述

一头探索java的孤狼

关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫