mybatis+vue2前后端分离

你说我胖？

已于 2024-06-03 16:15:54 修改

阅读量644

点赞数 20

文章标签： mybatis vue.js 前端

于 2024-06-03 16:12:36 首次发布

本文链接：https://blog.csdn.net/m0_74003170/article/details/139398031

版权

后端样例目录结构：

编辑pom.xml文件

连接数据库信息（mysql）： config.properties

全部配置文件：mybatis-config.xml

包装sqlSessionFactory（减少代码耦合）

前置准备：（安装axios和element组件）

登录页面：

创建路由：

App.vue文件：（应用程序入口点的 App.vue 组件）

解决跨域问题：

vue.config.js文件下：

后端样例
目录结构：

pom.xml文件

<!--作用：连接池来管理数据库连接-->
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>druid</artifactId>
  <version>1.1.22</version>
</dependency>
<!--作用：JDBC驱动程序允许Java程序与MySQL数据库进行交互-->
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <version>8.0.32</version>
</dependency>
<!--作用：一个服务器程序(servlet)，目的是和浏览器交互并且生成动态的web内容-->
<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>javax.servlet-api</artifactId>
  <version>3.1.0</version>
  <scope>provided</scope>
</dependency>
<!--作用：数据库交互支持自定义 SQL、存储过程以及高级映射。-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.13</version>
</dependency>
<!--日志输出到标准输出到控制台-->
<dependency>
  <groupId>org.slf4j</groupId>
  <artifactId>slf4j-simple</artifactId>
  <version>1.7.36</version>
</dependency>
<!--作用：测试类工具提供@Test注解-->
<dependency>
  <groupId>org.junit.jupiter</groupId>
  <artifactId>junit-jupiter-api</artifactId>
  <version>5.9.2</version>
  <scope>test</scope>
</dependency>
<!-- Java 对象和 JSON 字符串之间进行转换-->
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>2.0.21.graal</version>
</dependency>

连接数据库信息（mysql）： config.properties

driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/数据库名?serverTimezone=GMT
username=root
password=1234

全部配置文件：mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--引入数据库连接信息-->
    <properties resource="config.properties" />
    <!--实体类名与表名转换-->
    <typeAliases>
        <package name="dao"/>
    </typeAliases>

<!--通过上面引入的resource="config.properties"-->
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="${driver}"/>
                <property name="url" value="${url}"/>
                <property name="username" value="${username}"/>
                <property name="password" value="${password}"/>
            </dataSource>
        </environment>
    </environments>

    <!--加载某包下所有的映射配置文件-->
    <!--如果没有在 mybatis-config.xml 中引入 UserMapper.xml，那么 MyBatis 将不知道
    UserMapper.xml 文件中定义的任何 SQL 语句，也无法将这些语句与 UserMapper 接口中的方法关联起来。-->
    <mappers>
        <package name="mapper"/>
    </mappers>


</configuration>

包装sqlSessionFactory（减少代码耦合）

private static SqlSessionFactory sqlSessionFactory;

static {
    try {
        String resource = "mybatis/mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
    } catch (IOException e) {
        throw new RuntimeException(e.getMessage());
    }
}

public static SqlSessionFactory getSqlSessionFactory() {
    return sqlSessionFactory;
}

实体类food:

。。。

编写mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="mapper.FoodMapper"><!--命名空间:用于标识这个Mapper的作用域-->
    <!--列名映射，如果字段不一致-->
    <resultMap id="FoodMap" type="food">
        <id property="foodId" column="food_id"/>
        <result property="foodName" column="food_name"/>
        <result property="foodPrice" column="food_price"/>
        <result property="foodImgUrl" column="food_img_url"/>
    </resultMap>
   <!--id:方法名  resultMap:里面写的上面编写的id-->
    <select id="selectAllFoods" resultMap="FoodMap">
        SELECT food_id,food_name,food_price,food_img_url
        FROM food
    </select>

</mapper>

mapper接口:

public interface FoodMapper {
    // 方法名对应上面.xml里面的id
    List<Food> selectAllFoods();

}

完整代码（测试）：

@Test
public void login() throws IOException {
    SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryUtil().getSqlSessionFactory();
    SqlSession sqlSession = sqlSessionFactory.openSession();

    FoodMapper foodMapper = sqlSession.getMapper(FoodMapper.class);
    List<Food> foods = foodMapper.selectAllFoods();
    System.out.println(foods);
// 如果进行非查询操作，写入数据库需要提交：sqlSession.commit();
    sqlSession.close();
}

后端实例：(前后交叉)

@WebServlet("/userLogin")
public class UserLogin extends HttpServlet {
    /*将注册用户信息存入数据库*/
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) {
        // 定义全部变量
        ServletContext servletContext = request.getServletContext();
        // 通过servlet获取前端数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        /*密码加密*/
        password = SecureUtil.md5(username+password);
        /*创建session工厂：调用工具类*/
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryUtil().getSqlSessionFactory();
        SqlSession sqlSession = sqlSessionFactory.openSession();
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        /*获取用户信息*/
        User user = userMapper.checkAccount(username, password);
        HashMap<String, Object> result = new HashMap<>();
        sqlSession.close();
        if(Objects.nonNull(user)){
            result.put("user",user);
            result.put("code",200);
            servletContext.setAttribute("user",user);
        }
        // 设置HTTP响应的内容类型和字符集（这里是用的json相应的）
        response.setContentType("application/json;charset=UTF-8");
        String jsonString = JSON.toJSONString(result);
        // 通过调用response.getWriter()方法，Servlet容器（如Tomcat）提供了一个PrintWriter对         象，该对象可以用于将字符数据写入HTTP响应体中。
        try (PrintWriter out = response.getWriter()) {
            out.println(jsonString);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }


    }
}

vue创建：

找到项目创建的文件夹下：输入cmd打开黑窗口

前置准备：（安装axios和element组件）

终端输入以下命令

npm install axios

npm i element-ui // element一个组件可以选择不添加

main.js（或有时命名为 main.ts 如果项目使用 TypeScript）通常是项目的入口文件。这个文件是构建和启动 Vue 应用程序的起点

import Vue from 'vue'  
import App from './App.vue' 
import router from "@/router/index.js";  //引入路由的index.js 
// 引入element组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
// 使用element组件
Vue.use(ElementUI); 


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


//main.js是程序的入口

登录页面：

<template>
  <div class="login" id="root">
    <form>
      <div class="header">登录</div>
      <div class="container">
        <input type="text" 
          v-model="username" 
          id="username" 
          autocomplete="off" 
          placeholder="请输入用户名"
        />
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
      </div>
      <div class="container1">
        <input type="password" v-model="password" id="password" autocomplete="off" placeholder="请输入密码"/>
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
      </div>
      <button type="button" class="btn" @click="login">登录</button>
      <button type="button" class="btnr" @click="register">注册</button>
    </form>
  </div>
</template>
  
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
import http from "@/api/http"; // 导入服务器路径(跨域处理)
import router from '@/router'; // 导入路由切换组件
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
        http.get('/userLogin',{ // 引入http(导入的服务器路径)
          params:{
            username: this.username,
            password: this.password
          }
        }).then(loginResult => {
              if (loginResult.data.code == 200) {
                router.push("/meal");
              }else{
                alert("账号或密码错误，请重试")
              }
        }).catch(err => {
          console.log('登录时出错:', err);
        });
      },
      register(){
        router.push("/register")
      }
    }
};
  </script>
  <!-- scoped仅对当前页面有效，防止css样式对其他页面造成影响 -->
<style scoped>
  @import '../css/login.css';

</style>

创建路由：

//1 引入路由对象
import VueRouter from "vue-router";
import Vue from "vue";
//2.引入vue:@直接转到src路径下
import Login from "@/components/LoginApp.vue";

Vue.use(VueRouter);

//创建路由对象 
var router = new VueRouter({
    routes: [
        {
            path:"/",
            component:Login
        }
        
    ] 
})

//将路由对象暴漏出去
export default router;

App.vue文件：（应用程序入口点的 `App.vue` 组件）

<template>
  <div>
//<router-view/> 是一个功能性的组件，它本身不渲染任何内容。它的作用主要是作为占位符，Vue Router //会根据当前的路由配置，动态地将对应的组件渲染到 <router-view/> 的位置。
    <router-view/>
  
  </div>
</template>

<script>

export default {

}
</script>

<style>

</style>

解决跨域问题：

在src下api下创建http.js

import axios from "axios";

// 配置 
var http = axios.create({
    baseURL:"http://localhost:8080/api" // 代理服务器路径


})

export default http;

vue.config.js文件下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false, // 配置：文件名不必驼峰命名


// 代理服务器：解决跨域问题
devServer:{
  proxy:{
    "/api":{  // 拦截路径中含有api的
      target:"http://localhost:8088",
      changeOrigin:true,
      pathReWrite:{
        "^/api":"" //将所有api和前面的路径重写为字符串""和目标路径拼接
      }

    }
  }
}

})