springboot-vue-xml-anno-mysql-oracle搭建

最新推荐文章于 2021-10-11 23:30:20 发布

不许人间有白头

最新推荐文章于 2021-10-11 23:30:20 发布

阅读量263

点赞数

分类专栏： springboot oracle 文章标签： spring boot mysql oracle vue xml

本文链接：https://blog.csdn.net/nnnnnnnnnnii/article/details/107928419

版权

springboot 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

oracle

2 篇文章 0 订阅

订阅专栏

springboot-vue-xml-anno-mysql-oracle搭建

springboot-mysql-vue 的装配实现了两表关联查询,一个entity中封装了另一个实体的属性段,并实现了下拉修改,渲染到了html页面

1.配置本地仓库,并引入依赖

在这里插入图片描述

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.0.RELEASE</version>
    </parent>

    <dependencies>

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

        <!--springboot集成Junit 的启动依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>

        </dependency>

        <!-- 阿里巴巴的Druid数据源依赖启动器 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>

        <!-- MyBatis依赖启动器 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>

        <!-- MySQL数据库连接驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        
    </dependencies>

2.application.properties 配置文件:需要记住 druid, 驼峰,别名,开启日志.

spring.datasource.url=jdbc:mysql://localhost:3306/student_db?serverTimezone=UTC&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456

spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.druid.initial-size=30
spring.datasource.druid.max-active=50
spring.datasource.druid.min-idle=20
#开启驼峰写法
mybatis.configuration.map-underscore-to-camel-case=true
#如果配置文件  和 类名对应包名可以省略，否则 需要声明位置
mybatis.mapper-locations=classpath:mapper/*.xml
#配置别名
mybatis.type-aliases-package=com.aaa.springboot.entity
#dao层日志
logging.level.com.aaa.springboot.dao=debug
server.port=8082

3.配置com/aaa/springboot/MyApplication.java启动类

@SpringBootApplication   //标记当前类是启动类
public class MyApplication {

    public static void main(String[] args) {
        SpringApplication.run(MyApplication.class,args);
    }
}

4.controller层一个测试判断springboot是否装配好

com/aaa/springboot/controller/HelloController.java

@RestController
public class HelloController {
    @RequestMapping("/hello")
    public void hello(){
        System.out.println("你好世界!!!");
    }
}

5entity User中有另一个实体Department的属性列

5.1User 如果有时间,记得引入sql下的date

public class User {
    private int id;
    private String username;
    private int age;
    private String sex;
    private int department;
    private String departmentname;

    public String getDepartmentname() {
        return departmentname;
    }

    public void setDepartmentname(String departmentname) {
        this.departmentname = departmentname;
    }

    public int getId() {
        return id;
    }

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

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", department=" + department +
                ", departmentname='" + departmentname + '\'' +
                '}';
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public int getAge() {
        return age;
    }

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

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public int getDepartment() {
        return department;
    }

    public void setDepartment(int department) {
        this.department = department;
    }
}

5.2Department

public class Department {
    private int departmentid;
    private String departmentname;

    @Override
    public String toString() {
        return "department{" +
                "departmentid=" + departmentid +
                ", departmentname='" + departmentname + '\'' +
                '}';
    }

    public int getDepartmentid() {
        return departmentid;
    }

    public void setDepartmentid(int departmentid) {
        this.departmentid = departmentid;
    }

    public String getDepartmentname() {
        return departmentname;
    }

    public void setDepartmentname(String departmentname) {
        this.departmentname = departmentname;
    }
}

6.装配dao层,测试mybatis依赖是否引入成功,需要的有单元测试test

6.1单元Test com.aaa.springboot.MyApplicationTest

@RunWith(SpringRunner.class)
@SpringBootTest
public class MyApplicationTest {
    @Autowired
    private UserDao userDao;
    @Autowired
    private DepartmentDao departmentDao;
    @Test
    public void test1(){
        List<User> ownerTbList = userDao.findAllOwner();
        for (User ownerTb:ownerTbList){
            System.out.println("ownerTb:"+ownerTb);
        }
    }
    @Test
    public void test2(){
        List<Department> roomList = departmentDao.selectAllDepart();
        for (Department room:roomList){
            System.out.println("ownerTb:"+room);
        }
    }
}

6.2UserDao

@Repository
@Mapper
public interface UserDao {

    @Select("select a.*,b.departmentname from user a  left join department b on a.department=\n" +
            "       b.departmentid")
    List<User> findAllOwner();
    @Update(" update user set username = #{username},age=#{age},sex=#{sex},department=#{department} where id = #{id}")
    int updateOwner(User user);

    @Delete("delete from user where  id=#{id}")
    int deleteOwner(int id);
    @Insert("insert into user (username,age,sex,department) values (#{username},#{age},#{sex},#{department})")
    int inserOwner(User user);

}

6.3DepartmentDao

@Repository
@Mapper
public interface DepartmentDao {
    @Select("select * from department")
    List<Department> selectAllDepart();
}

7.service层

7.1UserService

public interface UserService {

    List<User> findAllOwner();
    int updateowner(User user);
    int deleteowner(int id);
    int inserowner(User user);

}

7.2UserServiceImpl 记得serviceImpl层要引入 @Autowired注解依赖注入

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;

    @Override
    public List<User> findAllOwner() {
        return userDao.findAllOwner();
    }

    @Override
    public int updateowner(User user) {
        return userDao.updateOwner(user);
    }

    @Override
    public int deleteowner(int id) {
        return userDao.deleteOwner(id);
    }

    @Override
    public int inserowner(User user) {
        return userDao.inserOwner(user);
    }
}

7.3DepartmentService

public interface DepartmentService {
    List<Department> selectAllRoom();
}

7.4DepartmentServiceImpl 记得serviceImpl层要引入 @Autowired注解依赖注入

@Service
public class DepartmentServiceImpl implements DepartmentService {
    @Autowired
    private DepartmentDao departmentDao;

    @Override
    public List<Department> selectAllRoom() {
        return departmentDao.selectAllDepart();
    }
}

8.进行测试Test

@RunWith(SpringRunner.class)
@SpringBootTest
public class MyApplicationTest {
    @Autowired
    private UserService userservice;
     @Test
    public void test1(){
        List<User> userList= userservice.findAllOwner();
        for (User user:userList){
            System.out.println("user:"+user);
        }
    }

9.controller控制层

9.1UserController 层要引入 @Autowired注解依赖注入

@Controller
public class UserController {
    @Autowired
    private UserService userService;
     @RequestMapping("/selectAll")
     @ResponseBody
    public List<User> selectAll(){
        return userService.findAllOwner();
     }

    @RequestMapping("/delete")
    @ResponseBody
    public String delete(int id){
        int num =   userService.deleteowner(id);

        if (num>0){
            return "success";
        }
        return "fail";
    }
    @RequestMapping("/update")
    @ResponseBody
    public String update(User user){

        if ( userService.updateowner(user) > 0){
            return "success";
        }

        return "fail" ;
    }

    @RequestMapping("/insertOwner")
    @ResponseBody
    public String insertOwner(User user){

        if ( userService.inserowner(user) > 0){
            return "success";
        }

        return "fail" ;
    }

}

9.2DepartmentController 层要引入 @Autowired注解依赖注入

@RestController
public class DepartmentController {
    @Autowired
    private DepartmentService departmentService;

    @RequestMapping("/selectAllDepart")
    @ResponseBody
    public List<Department> selectAllDepart() {
        return departmentService.selectAllRoom();

    }
}

10.配置前台html页面 vue- element_ui - axios 阿笑思

在这里插入图片描述

10.1timelist.html 前台页面引入本地的源文件

 <!-- import CSS -->
    <link rel="stylesheet" href="/ele/lib-master/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/ele/lib-master/index.js"></script>
    <!-- 引入axios-->
    <script src="/js/axios.min.js"></script>

10.2 vue-element_ui代码,JQuery代码

*注意:mounted有绑定当前的data中的数据源 this.tableData = response.data; this.departDate = response.data;

<body>
<div id="app">

<el-table
        :data="tableData"
        style="width: 100%">
    <el-table-column
            prop="id"
            label="序号"
            width="180">
    </el-table-column>
    <el-table-column
            prop="username"
            label="名字"
            width="180">
    </el-table-column>
    <el-table-column
            prop="age"
            label="年龄">
    </el-table-column>
    <el-table-column
            prop="sex"
            label="性别">
    </el-table-column>
    <el-table-column
            prop="departmentname"
            label="所属部门">
    </el-table-column>

    <el-table-column label="操作">
        <template slot-scope="scope">
            <!--handleEdit触发的是点击事件  绑定了弹出框 -->
            <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

<!--            handleDelete触发的是点击事件   绑定了弹出框  -->
        </template>
    </el-table-column>
</el-table>

<!--  这里visible 在data 中设置 为 false-->
    <el-dialog :visible.sync="visible" title="欢迎">
<!--       :model = " time" 双向绑定time表单数据   等价于
    <div>message: {{message}} </div>
    data:{
      message:hello!!!
    }
-->
        <el-form ref="time" :model="time" label-width="80px">
            <el-form-item label="序号">
                <el-input v-model="time.id"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="time.username"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
            <el-input v-model="time.age"></el-input>
        </el-form-item>
            <el-form-item label="性别">
                <template>
                    <el-radio v-model="time.sex" label="男">男</el-radio>
                    <el-radio v-model="time.sex" label="女">女</el-radio>
                </template>
            </el-form-item>

            <el-form-item label="名字">
                <el-select v-model="time.department" placeholder="请选择">
                    <el-option
                            v-for="item in departDate"
                            :key="item.departmentid"
                            :label="item.departmentname"
                            :value="item.departmentid">
                    </el-option>
                </el-select>            </el-form-item>

            <el-form-item>
<!--                updateOwner  触发的是controller层的方法-->
                <el-button type="primary" @click="updateTime">修改</el-button>
<!--                给取消也添加个点击事件visible = false-->
                <el-button    @click="visible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

<!-- vue 都是写好的-->
<!--  date 存的数据比如
<div>  message: {{message}} </div>
data:{
   message:'hello vue!!!!'
}
 -->
<!--
mounted:function () { // mounted 是vue 的一个声明周期，
在vue加载时调用,适用于查询,因为没有涉及点击事件
   -->

<!--  methods  事件绑定点击事件-->
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            tableData: [],
            visible:false,
            time:{
                username: '',
                age: '',
                sex: '',
                department:0,

            },
            departDate:[],

        },

        methods: {
            /* methods  事件绑定  */

                //table 数据的下标
                //row 对应tableData 中每一行的所有元素
                handleEdit(index, row) {
                    //第一步初始化弹框数据,要在弹窗之前 ,就要把数据展示出来
                    this.time = row;
                    //第二步显示窗口
                    this.visible = true;

                    console.log(index, row);
                },
            updateTime:function () {
                    //提交需要修改的内容
                //参数 params:this.time 进行传参
                axios
                    .get('../update',{
                        params:this.time
                    }).then(response => {
                    console.log("data:" + response.data);
                    if (response.data=='success'){
                        window.location.reload()
                    }
                    else {
                        alert("修改失败!")
                    }
                }).catch(function (error) {
                    console.log(error)
                })

            }
        },
    mounted:function () {
        // 使用 =>实现
        axios
            .get('../selectAll').then(response => {
            console.log("data:" + response.data);
            //初始化数据
            // 通过 箭头函数 调用的方法 this 指向 vue 实例，如果function this 指向的是axios 本身
            this.tableData = response.data;
        }).catch(function (error) {
            console.log(error)
        });

        axios
                .get('../selectAllDepart').then(response => {
                console.log("data:" + response.data);
                //初始化数据
                // 通过 箭头函数 调用的方法 this 指向 vue 实例，如果function this 指向的是axios 本身
                this.departDate = response.data;
            }).catch(function (error) {
                console.log(error)
            })
    }
    })

</script>
</body>

springboot–vue-xml-mysql 一对一实现关联查询

1.entity实体类

1.1User 实体类这里声明了Department对象 private Department departmented;

public class User {
    private int id;
    private String username;
    private int age;
    private String sex;
    private int department;
    private Department departmented;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", department=" + department +
                ", departmented=" + departmented +
                '}';
    }

    public Department getDepartmented() {
        return departmented;
    }

    public void setDepartmented(Department departmented) {
        this.departmented = departmented;
    }


    public int getId() {
        return id;
    }

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

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public int getAge() {
        return age;
    }

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

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public int getDepartment() {
        return department;
    }

    public void setDepartment(int department) {
        this.department = department;
    }
}

1.2Department实体类

public class Department {
    private int departmentid;
    private String departmentname;

    @Override
    public String toString() {
        return "department{" +
                "departmentid=" + departmentid +
                ", departmentname='" + departmentname + '\'' +
                '}';
    }

    public int getDepartmentid() {
        return departmentid;
    }

    public void setDepartmentid(int departmentid) {
        this.departmentid = departmentid;
    }

    public String getDepartmentname() {
        return departmentname;
    }

    public void setDepartmentname(String departmentname) {
        this.departmentname = departmentname;
    }
}

2.dao层

2.1UserDao 注意:即使用了xml来写查询,但是dao层依旧要用@Mapper注解,否则扫描不到dao层

@Mapper
@Repository
public interface UserDao {
    List<User> findAllOwner();
}

2.2DepartmentDao

@Repository
@Mapper
public interface DepartmentDao {
    @Select("select * from department")
    List<Department> selectAllDepart();
}

*除了dao层改变不用注解,配置了相应的mapper.xml之外没有改变

3.UserDao.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 对应的是字符串一般是 对应dao层 接口全限定名
在mybatis 使用二级缓存时会用到id==== namespace
-->
<mapper namespace="com.aaa.springboot.dao.UserDao">
    <resultMap id="scoreWithStudent" type="com.aaa.springboot.entity.User">
        <id property="id" column="id"></id>
        <result property="username" column="username"></result>
        <result property="age" column="age"></result>
        <result property="sex" column="sex"></result>
        <result property="department" column="department"></result>

        <association property="departmented" column="department" javaType="com.aaa.springboot.entity.Department">
            <id property="departmentid" column="departmentid"></id>
            <result property="departmentname" column="departmentname"></result>

        </association>

    </resultMap>

    <select id="findAllOwner" resultMap="scoreWithStudent">

    SELECT a.*,b.* FROM user a LEFT JOIN department b ON a.department=b.departmentid;
    </select>

</mapper>

4.timelist.html 前台页面只写了查询,注意另一个标的字段如何展示的就行.

在这里插入图片描述

<el-table-column
            prop="departmented.departmentid"
            label="所属部门">
    </el-table-column>

4.1引入本地资源

  <!-- import CSS -->
    <link rel="stylesheet" href="/ele/lib-master/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/ele/lib-master/index.js"></script>
    <!-- 引入axios-->
    <script src="/js/axios.min.js"></script>

4.2element_ui 和 JQuery代码

<body>
<div id="app">

<el-table
        :data="tableData"
        style="width: 100%">
    <el-table-column
            prop="id"
            label="序号"
            width="180">
    </el-table-column>
    <el-table-column
            prop="username"
            label="名字"
            width="180">
    </el-table-column>
    <el-table-column
            prop="age"
            label="年龄">
    </el-table-column>
    <el-table-column
            prop="sex"
            label="性别">
    </el-table-column>
    <el-table-column
            prop="departmented.departmentid"
            label="所属部门">
    </el-table-column>

    <el-table-column label="操作">
        <template slot-scope="scope">
            <!--handleEdit触发的是点击事件  绑定了弹出框 -->
            <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

<!--            handleDelete触发的是点击事件   绑定了弹出框  -->
        </template>
    </el-table-column>
</el-table>
</div>

<!-- vue 都是写好的-->
<!--  date 存的数据比如
<div>  message: {{message}} </div>
data:{
   message:'hello vue!!!!'
}
 -->
<!--
mounted:function () { // mounted 是vue 的一个声明周期，
在vue加载时调用,适用于查询,因为没有涉及点击事件
   -->
<!--  methods  事件绑定点击事件-->
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            tableData: [],
            visible:false,
        },

        methods: {
            /* methods  事件绑定  */

                //table 数据的下标
                //row 对应tableData 中每一行的所有元素
                handleEdit(index, row) {
                    //第一步初始化弹框数据,要在弹窗之前 ,就要把数据展示出来
                    this.time = row;
                    //第二步显示窗口
                    this.visible = true;

                    console.log(index, row);
                },

        },
    mounted:function () {
        // 使用 =>实现
        axios
            .get('../selectAll').then(response => {
            console.log("data:" + response.data);
            //初始化数据
            // 通过 箭头函数 调用的方法 this 指向 vue 实例，如果function this 指向的是axios 本身
            this.tableData = response.data;
        }).catch(function (error) {
            console.log(error)
        });
    }
    })
</script>
</body>

spring-vue-anno-mysql 用注解实现两表关联查询

1.entity实体类

1.1User 实体类这里声明了Department对象 private Department departmented;

public class User {
    private int id;
    private String username;
    private int age;
    private String sex;
    private int department;
    private Department departmented;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", department=" + department +
                ", departmented=" + departmented +
                '}';
    }

    public Department getDepartmented() {
        return departmented;
    }

    public void setDepartmented(Department departmented) {
        this.departmented = departmented;
    }


    public int getId() {
        return id;
    }

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

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public int getAge() {
        return age;
    }

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

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public int getDepartment() {
        return department;
    }

    public void setDepartment(int department) {
        this.department = department;
    }
}

1.2Department实体类

public class Department {
    private int departmentid;
    private String departmentname;

    @Override
    public String toString() {
        return "department{" +
                "departmentid=" + departmentid +
                ", departmentname='" + departmentname + '\'' +
                '}';
    }

    public int getDepartmentid() {
        return departmentid;
    }

    public void setDepartmentid(int departmentid) {
        this.departmentid = departmentid;
    }

    public String getDepartmentname() {
        return departmentname;
    }

    public void setDepartmentname(String departmentname) {
        this.departmentname = departmentname;
    }
}

2.dao层

2.1UserDao

@Repository
@Mapper
public interface UserDao {
    @Results(id = "userId",value = {
            @Result(id = true,property = "id",column = "id"),
            @Result(property = "username",column = "username"),
            @Result(property = "age",column = "age"),
            @Result(property = "sex",column = "sex"),
            @Result(property = "department",column = "department"),
            @Result(property = "departmented",column = "department",
                    one = @One(select = "com.aaa.springboot.dao.DepartmentDao.findDepartmentById"))

    })
    @Select("select * from user")
    List<User> findAllOwner();
}

2.2DepartmentDao

@Repository
@Mapper
public interface DepartmentDao {
    @Select("select * from department")
    List<Department> selectAllDepart();
}

3.timelist.html 前台页面只写了查询,注意另一个标的字段如何展示的就行.

在这里插入图片描述

<el-table-column
            prop="departmented.departmentid"
            label="所属部门">
    </el-table-column>

3.1引入本地资源

  <!-- import CSS -->
    <link rel="stylesheet" href="/ele/lib-master/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/ele/lib-master/index.js"></script>
    <!-- 引入axios-->
    <script src="/js/axios.min.js"></script>

3.2element_ui 和 JQuery代码

<body>
<div id="app">

<el-table
        :data="tableData"
        style="width: 100%">
    <el-table-column
            prop="id"
            label="序号"
            width="180">
    </el-table-column>
    <el-table-column
            prop="username"
            label="名字"
            width="180">
    </el-table-column>
    <el-table-column
            prop="age"
            label="年龄">
    </el-table-column>
    <el-table-column
            prop="sex"
            label="性别">
    </el-table-column>
    <el-table-column
            prop="departmented.departmentid"
            label="所属部门">
    </el-table-column>

    <el-table-column label="操作">
        <template slot-scope="scope">
            <!--handleEdit触发的是点击事件  绑定了弹出框 -->
            <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

<!--            handleDelete触发的是点击事件   绑定了弹出框  -->
        </template>
    </el-table-column>
</el-table>
</div>

<!-- vue 都是写好的-->
<!--  date 存的数据比如
<div>  message: {{message}} </div>
data:{
   message:'hello vue!!!!'
}
 -->
<!--
mounted:function () { // mounted 是vue 的一个声明周期，
在vue加载时调用,适用于查询,因为没有涉及点击事件
   -->
<!--  methods  事件绑定点击事件-->
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            tableData: [],
            visible:false,
        },

        methods: {
            /* methods  事件绑定  */

                //table 数据的下标
                //row 对应tableData 中每一行的所有元素
                handleEdit(index, row) {
                    //第一步初始化弹框数据,要在弹窗之前 ,就要把数据展示出来
                    this.time = row;
                    //第二步显示窗口
                    this.visible = true;

                    console.log(index, row);
                },

        },
    mounted:function () {
        // 使用 =>实现
        axios
            .get('../selectAll').then(response => {
            console.log("data:" + response.data);
            //初始化数据
            // 通过 箭头函数 调用的方法 this 指向 vue 实例，如果function this 指向的是axios 本身
            this.tableData = response.data;
        }).catch(function (error) {
            console.log(error)
        });
    }
    })
</script>
</body>

springboot-vue-oracle 这里用的是一个实体封装了另一个实体的属性

1.配置本地仓库,并引入依赖,注意要引入本地的一个JAR包ojdbc14.jar

在这里插入图片描述

   <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.0.RELEASE</version>
    </parent>
    
    <dependencies>

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

        <!--springboot集成Junit 的启动依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>

        </dependency>

        <!-- 阿里巴巴的Druid数据源依赖启动器 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>

        <!-- MyBatis依赖启动器 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>

    </dependencies>

2.配置application.properties

*必须知道,如果用了插件那么配置的时候不需要加@符号

spring.datasource.url=jdbc:oracle:thin:@//localhost:1521/ORCLHJL

server.port=8082
## 数据源
spring.datasource.url=jdbc:oracle:thin:@//localhost:1521/ORCLHJL
spring.datasource.username=scott
spring.datasource.password=tiger
# 配置driver驱动

spring.datasource.driver-class-name=oracle.jdbc.OracleDriver
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.druid.max-active=100

mybatis.type-aliases-package=com.aaa.oracle.entity
mybatis.configuration.map-underscore-to-camel-case=true

#如果配置文件  和 类名对应包名可以省略，否则 需要声明位置
mybatis.mapper-locations=classpath:mapper/*.xml

### 执行下面的代码都打印日志
logging.level.com.aaa.oracle.dao=debug

3.配置Myapplication启动类

@SpringBootApplication
public class Myapplication {

    public static void main(String[] args) {

        SpringApplication.run(Myapplication.class,args);

    }
}

4.在controller层进行测试判断springboot是否装配好

com/aaa/springboot/controller/HelloController.java

@RestController
public class HelloController {
    @RequestMapping("/hello")
    public void hello(){
        System.out.println("你好世界!!!");
    }
}

etity实体 OwnerTb

public class OwnerTb {
    private int id;
    private String name;
    private  int room;
    private  String phone;

    @Override
    public String toString() {
        return "OwnerTb{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", room=" + room +
                ", phone='" + phone + '\'' +
                '}';
    }

    public int getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getRoom() {
        return room;
    }

    public void setRoom(int room) {
        this.room = room;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }
}

6.dao层的知识点,因为oracle不支持主键自增,所以新增需要加入id列

@Repository
@Mapper
public interface OwnerTbDao {
    @Select("select * from OwnerTb")
    List<OwnerTb> selectAll();
    @Delete("delete from OwnerTb where id=#{id}")
    int deleteOwnerTb(int id);
    @Update("update OwnerTb set name=#{name},room=#{room},phone=#{phone} where id= #{id}")
    int updateOwnerTb(OwnerTb ownerTb);
    @Insert("insert into OwnerTb (id,name,room,phone) values (#{id},#{name},#{room},#{phone})")
    int insertOwnerTb(OwnerTb ownerTb);
}

7.在测试类MyapplicationTest中进行单元测试

@RunWith(SpringRunner.class)
@SpringBootTest
public class MyapplicationTest {
    @Autowired
    private OwnerTbDao ownerTbDao;
    @Test
    public void test1(){
        List<OwnerTb> ownerTbList = ownerTbDao.selectAll();
        for (OwnerTb ownerTb:ownerTbList){
            System.out.println("ownerTb:"+ownerTb);
        }
    }
}

8.service层

public interface OwnerTbService {
    List<OwnerTb> selectAll();
    int deleteOwnerTb(int id);
    int updateOwnerTb(OwnerTb ownerTb);
    int insertOwnerTb(OwnerTb ownerTb);
}

9.serviceImpl层

@Service
public class OwnerTbServiceImpl implements OwnerTbService {
    @Autowired
    private OwnerTbDao ownerTbDao;
    @Override
    public List<OwnerTb> selectAll() {
        return ownerTbDao.selectAll();
    }

    @Override
    public int deleteOwnerTb(int id) {
        return ownerTbDao.deleteOwnerTb(id);
    }

    @Override
    public int updateOwnerTb(OwnerTb ownerTb) {
        return ownerTbDao.updateOwnerTb(ownerTb);
    }

    @Override
    public int insertOwnerTb(OwnerTb ownerTb) {
        return ownerTbDao.insertOwnerTb(ownerTb);
    }
}

10.timelist.html前台页面

10.1引入本地源文件

<!-- import CSS -->
    <link rel="stylesheet" href="/ele/lib-master/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/ele/lib-master/index.js"></script>
    <!-- 引入axios-->
    <script src="/js/axios.min.js"></script>

10.2element_ui和JQuery代码

<body>
<div id="app">
<!--这句话不理解-->
    <el-button @click="addOwner_visible = true">增加学生</el-button>
<el-table
        :data="tableData"
        style="width: 100%">
    <el-table-column
            prop="id"
            label="序号"
            width="180">
    </el-table-column>
    <el-table-column
            prop="name"
            label="名字"
            width="180">
    </el-table-column>
    <el-table-column
            prop="room"
            label="房间号">
    </el-table-column>
    <el-table-column
            prop="phone"
            label="电话">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <!--handleEdit触发的是点击事件  绑定了弹出框 -->
            <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">修改</el-button>

<!--            handleDelete触发的是点击事件   绑定了弹出框  -->
            <el-button
                    size="mini"
                    type="danger"

                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

<!--  这里visible 在data 中设置 为 false-->
    <el-dialog :visible.sync="visible" title="欢迎">
<!--       :model = " time" 双向绑定time表单数据   等价于
    <div>message: {{message}} </div>
    data:{
      message:hello!!!
    }
-->
        <el-form ref="time" :model="time" label-width="80px">
            <el-form-item label="id">
                <el-input v-model="time.id"></el-input>
            </el-form-item>
            <el-form-item label="名字">
                <el-input v-model="time.room"></el-input>
            </el-form-item>
            <el-form-item label="房间号">
                <el-select v-model="time.id" placeholder="请选择">
                    <el-option
                            v-for="item in tableData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="time.phone"></el-input>
            </el-form-item>


            <el-form-item>
<!--                updateOwner  触发的是controller层的方法-->
                <el-button type="primary" @click="updateTime">修改</el-button>
<!--                给取消也添加个点击事件visible = false-->
                <el-button    @click="visible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <!-- 增加学生谈款-->

    <el-dialog :visible.sync="addOwner_visible" title="新增学生">
        <!--   :model="form"   双向 绑定form表单数据-->
        <el-form ref="form" :model="add_owner_form" label-width="80px">
            <el-form-item label="id">
                <el-input v-model="add_owner_form.id"></el-input>
            </el-form-item>
            <el-form-item label="名字">
                <el-input v-model="add_owner_form.name"></el-input>
            </el-form-item>
            <el-form-item label="房间号">
                <el-input v-model="add_owner_form.room"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="add_owner_form.phone"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addOwner">增加</el-button>
                <el-button    @click="addOwner_visible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

<!-- vue 都是写好的-->
<!--  date 存的数据比如
<div>  message: {{message}} </div>
data:{
   message:'hello vue!!!!'
}
 -->
<!--
mounted:function () { // mounted 是vue 的一个声明周期，
在vue加载时调用,适用于查询,因为没有涉及点击事件
   -->

<!--  methods  事件绑定点击事件-->
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            tableData: [],
            visible:false,
            time:{
                name: '',
                room:0,
                phone:0
            },
            addOwner_visible:false, // 添加学生 弹框
            add_owner_form:{
                id:0,
                name: '',
                room:0,
                phone:0
            }

        },

        methods: {
            /* methods  事件绑定  */

                //table 数据的下标
                //row 对应tableData 中每一行的所有元素
                handleEdit(index, row) {
                    //第一步初始化弹框数据,要在弹窗之前 ,就要把数据展示出来
                    this.time = row;
                    //第二步显示窗口
                    this.visible = true;

                    console.log(index, row);
                },

            handleDelete(index, row) {
                console.log(index, row);

                this.$confirm('此操作将该学生信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    // 确定删除 ---》提交服务器
                    // 使用 =>实现
                    axios
                        .get('../deleteOwnerTb',{
                            params:{
                                id:row.id
                            }
                        }).then(response =>{
                        console.log("data:"+ response.data);

                        if (response.data == 'success'){

                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                            window.location.reload()
                        }else {
                            this.$message.error('删除失败');
                        }

                    }).catch(function (error) {
                        console.log(error)
                    })



                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },


            updateTime:function () {
                //提交需要修改的内容
                //参数 params:this.time 进行传参
                axios
                    .get('../updateOwnerTb',{
                        params:this.time
                    }).then(response => {
                    console.log("data:" + response.data);
                    if (response.data=='success'){
                        window.location.reload()
                    }
                    else {
                        alert("修改失败!")
                    }
                }).catch(function (error) {
                    console.log(error)
                })

            },


            addOwner:function () {  // 新增 学生提交服务器
                axios
                    .get('../insertOwnerTb',{
                        params:this.add_owner_form
                    }).then(response =>{
                    console.log("data:"+ response.data);

                    if (response.data == 'success'){
                        window.location.reload()
                    }else {
                        this.$message.error('新增失败');
                    }

                    this.addstudent_visible = false;
                }).catch(function (error) {
                    console.log(error)
                })

            }


        },

    mounted:function () {
        // 使用 =>实现
        axios
            .get('../selectAll').then(response => {
            console.log("data:" + response.data);
            //初始化数据
            // 通过 箭头函数 调用的方法 this 指向 vue 实例，如果function this 指向的是axios 本身
            this.tableData = response.data;
        }).catch(function (error) {
            console.log(error)
        })
    }
    })

</script>
</body>