三大框架整合

于 2021-09-28 20:48:43 发布
阅读量386 收藏 2
点赞数 2
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_60509834/article/details/120537102
版权

                                                框架概述

框架之间的调用关系

  1. Spring框架：

Spring为了团队开发将复杂的框架进行整合,使得程序从控制到调用浑然一 体.以一种统一的方式进行调用.
核心: 整合第三方框架.

2，Spring框架核心机制：

IOC:
控制反转: 将对象创建的权利交给Spring容器管理,由Spring容器管理对 象的生命周期
DI: 依赖注入
创建对象时,如果该对象中有需要依赖的属性,Spring负责为属性赋值.

AOP 面向切面编程

3，SpringMVC

说明: 该框架的主要的作用 接收用户的请求,之后完成业务处理,最终返回 响应给用户.

4，项目的实现：

创建项目：

编辑pom.xml文件：

说明: 复制之前的项目中的pom.xml文件 格式如下

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.jt</groupId>
    <artifactId>springboot_demo6_mybatis4</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot_demo6_mybatis4</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.4.1</spring-boot.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--支持热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <!--引入插件lombok 自动的set/get/构造方法插件  -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <!--mybatis依赖包-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
        </dependency>

        <!--jdbc依赖包-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.4.1</version>
                <configuration>
                    <mainClass>com.jt.springboot_demo3.SpringbootDemo3Application</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

编辑核心代码：

编辑User的pojo：

package com.jt.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

import java.io.Serializable;

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class User implements Serializable {
    private Integer id;
    private String name;
    private Integer age;
    private String sex;
}

编辑Mapper接口：

package com.jt.mapper;

import com.jt.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.mybatis.spring.annotation.MapperScan;

import java.util.List;
//@Mapper
public interface UserMapper {
    //查询demo_user表中的所有数据
    List<User> findAll();

    User findUserById(Integer id);
}

编辑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="com.jt.mapper.UserMapper">
    <select id="findAll" resultType="com.jt.pojo.User">
        select * from demo_user
    </select>
    <select id="findUserById" resultType="User">
        select * from demo_user where id = #{id}
    </select>
</mapper>

编辑Service接口和实现类

编辑UserService接口：

package com.jt.service;

import com.jt.pojo.User;

import java.util.List;
public interface UserService {
    //查询user表中的所有数据
    List<User> findAll();

    User findUserById(Integer id);
}

编辑ServiceImpl实现类：

package com.jt.service;

import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service    //将该类交给Spring容器管理
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;  //代理对象 JDK动态代理
    @Override
    public List<User> findAll() {
        //List<User> userList = userMapper.findAll();
        //return userList;
        return userMapper.findAll();
    }
    @Override
    public User findUserById(Integer id) {
        return userMapper.findUserById(id);
    }
}

编辑Controller：

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController //@Controller 将该类交给Spring容器管理 +
                // @ResponseBody 业务返回值时,将数据转化为JSON.
public class UserController {
    @Autowired
    /**
     * 需求: 查询全部user表数据
     * 请求类型: get/post/put/delete
     * 路径: /findUser
     * 参数: 无
     * 返回值: List<User>
     */
    private UserService userService;
    @RequestMapping("/getUser")
    public List<User> findUser(){

        return userService.findAll();
    }
    /**
     * 业务: 根据ID查询用户数据.
     * 请求类型: get
     * URL:http://localhost:8090/findUserById?id=1
     * 参数: id=1
     * 返回值: User对象
     * SpringMVC业务规范:
     *      1.接收参数时,必须与用户参数保持一致.
     */
    //@RequestMapping(value = "findUserById",method = RequestMethod.GET)
    @GetMapping("findUserById") //只能接收Get请求类型
    public User findUserById(Integer id){

        return userService.findUserById(id);
    }
}

编辑核心配置-application.yml

数据源配置：

链接写法:
1. serverTimezone=GMT%2B8 指定时区 东八区
2. useUnicode=true&characterEncoding=utf8
开启使用Unicode编码,并且指定字符集utf-8
3. autoReconnect=true 断线是否重新链接.
4. &allowMultiQueries=true 是否允许批量操作
 

编辑yml文件：

#语法: 1.key:(空格)value结构
server:
  port: 8090

#整合1.数据源
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root

#SpringBoot整合mybatis
mybatis:
  #指定别名包
  type-aliases-package: com.jt.pojo
  #加载指定的xml映射文件
  mapper-locations: classpath:/mybatis/mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true

前端代码交互（用户列表展现案例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h3 align="center">用户新增</h3><br>
				<p>
					<!-- 看到input框架 第一时间想到双向数据绑定 -->
					用户名称: <input type="text" name="name" v-model="addUser.name"/>
					用户年龄: <input type="text" name="age"  v-model="addUser.age" />
					用户性别: <input type="text" name="sex"  v-model="addUser.sex" />
					<button @click="addUserBtn">新增</button>
				</p>
			</div>
			<hr />
			<div align="center">
				<h3 align="center">用户修改操作</h3><br>
				<p>
						用户ID号: <input type="text" name="id"   v-model="updateUser.id"   disabled/>
						用户名称: <input type="text" name="name" v-model="updateUser.name"/>
						用户年龄: <input type="text" name="age"  v-model="updateUser.age"/>
						用户性别: <input type="text" name="sex"  v-model="updateUser.sex"/>
						<button @click="updateUserCommit">修改</button>
				</p>
			</div>
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="80%">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="updateBtn(user)">修改</button>
						<button>删除</button>
					</td>
				</tr>
				
			</table>
		</div>
		
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			//为axios执行前缀
			axios.defaults.baseURL="http://localhost:8090"

			const app = new Vue({
				el: "#app",
				data: {
					//3.定义数据列表
					userList: [],
					//指定新增对象
					addUser: {
						name: '',
						age: '',
						sex: ''
					},
					updateUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
				},
				methods: {
					//2.定义获取列表数据的函数
					async getUserList(){
						let {data: result} = await axios.get("/axios/findAll")
						//console.log(result)
						//将ajax返回值传递给Vue
						this.userList = result
					},
					async addUserBtn(){
						//将数据实现入库操作
						let {data: result} = await axios.post("/axios/saveUser",this.addUser)
						//用户提示
						alert(result)
						//清空原有数据
						this.addUser = {}
						//如果新增成功,应该重新获取列表信息
						this.getUserList()
					},
					updateBtn(user){
						//将用户传递的数据绑定到修改页面中.
						this.updateUser = user
					},
					async updateUserCommit(){
						//实现数据的更新操作
						let {data: result} = await axios.put("/axios/updateUser",this.updateUser)
						alert(result)
						this.updateUser = {}
						this.getUserList()
					}
				},
				mounted(){
					//1利用生命周期函数调用getUser函数
					this.getUserList()
				}
			})
			
		</script>
	</body>
</html>

数据库交互数据

 

 

目录：

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值