element-ui 增删改查

第一部分: 搭建springboot 测试数据库是否连接成功,并引入element_ui.js和vue.js的依赖

1.引入pom.xml依赖 ***必须是maven 版本支持的

<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.ElementApplication 启动类

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

}

application.properties 配置 连接数据库

#配置端口号
server.port=8081


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


spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.druid.max-active=10
spring.datasource.druid.initial-size=5


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

4.StudentController 控制层

@Controller
public class StudentController {

    @Autowired
    private StudentService studentService;

    @RequestMapping("/findStudent")
    @ResponseBody
    public Student findStudent(int id){

        return  studentService.findStudentById(id);
    }

    @RequestMapping("/findAllStudent")
    @ResponseBody
    public List<Student> findStudent(){
        return studentService.findAllStudent();
    }


    @RequestMapping("/updateStudent")
    @ResponseBody
    public String updateStudent(Student student){

        int num =   studentService.updateStudent(student);

        if (num>0){
            return "success";
        }
        return "fail";
    }


    @RequestMapping("/deleteStudent")
    @ResponseBody
    public String deleteStudent(int id){

        int num =   studentService.deleteStudent(id);

        if (num>0){
            return "success";
        }
        return "fail";
    }


    @RequestMapping("/addStudent")
    @ResponseBody
    public String addStudent(Student student){

        int num =   studentService.addStudent(student);

        if (num>0){
            return "success";
        }
        return "fail";
    }
}

5.实体类

public class Student {

    private int id;


    private String name;

    private int age;

    private String sex;

    private float height;

6.dao 层 ,数据操作层

@Mapper
@Repository
public interface StudentMapper {
    @Select("select * from student_tb where id = #{id}")
    Student findStudentById(int id);

    @Select("select * from student_tb")
    List<Student> findAllStudent();

    @Update("update student_tb set name = #{name},age=#{age},sex=#{sex},height=#{height} where id = #{id}")
    int updateStudent(Student student);

    @Delete("delete from student_tb where id = #{id}")
    int deleteStudent(int id);

    @Insert("insert into student_tb (name,age,sex,height) values(#{name},#{age},#{sex},#{height})")
    int addStudent(Student student);
}

7.业务逻辑层

接口类

public interface StudentService {

    Student findStudentById(int id);

    List<Student> findAllStudent();

    int updateStudent(Student student);

    int deleteStudent(int id);

    int addStudent(Student student);
    
}

8.实现类

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentMapper studentDao;

    @Override
    public Student findStudentById(int id) {
        return studentDao.findStudentById(id);
    }

    @Override
    public List<Student> findAllStudent() {
        return studentDao.findAllStudent();
    }

    @Override
    public int updateStudent(Student student) {
        return studentDao.updateStudent(student);
    }

    @Override
    public int deleteStudent(int id) {
        return studentDao.deleteStudent(id);
    }

    @Override
    public int addStudent(Student student) {
        return studentDao.addStudent(student);
    }
}

第二部分: 前台界面的搭建需要引入需要的jar包,与引入依赖

js目录中:

axios.min.js
jquery-3.3.1.js
vue.js
vue-router.min.js

ele目录中

lib-master

注意:因为要求用到的vue 与 element ,axios 的本地依赖 需要满足版本匹配,所以这里用配套的;

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!-- 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>



</head>

第三部分: 用element ui 组件在前台页面实现对数据表的增删改查

<body>
<div id="app">


    <el-button @click="addstudent_visible = true">增加学生</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别">
        </el-table-column>

        <el-table-column
                prop="age"
                label="年龄">
        </el-table-column>

        <el-table-column
                prop="height"
                label="身高">
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-dialog :visible.sync="visible" title="Hello world">
        <!--   :model="form"   双向 绑定form表单数据-->
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="id">
                <el-input v-model="form.id"></el-input>
            </el-form-item>

            <el-form-item label="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="age">
                <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="sex">
                <el-input v-model="form.sex"></el-input>
            </el-form-item>
            <el-form-item label="height">
                <el-input v-model="form.height"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="updateStudent">修改</el-button>
                <el-button    @click="visible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
<!-- 增加学生谈款-->
    <el-dialog :visible.sync="addstudent_visible" title="新增学生">
        <!--   :model="form"   双向 绑定form表单数据-->
        <el-form ref="form" :model="add_student_form" label-width="80px">


            <el-form-item label="name">
                <el-input v-model="add_student_form.name"></el-input>
            </el-form-item>

            <el-form-item label="age">
                <el-input v-model="add_student_form.age"></el-input>
            </el-form-item>
            <el-form-item label="sex">
                <el-input v-model="add_student_form.sex"></el-input>
            </el-form-item>
            <el-form-item label="height">
                <el-input v-model="add_student_form.height"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addStudent">增加</el-button>
                <el-button    @click="addstudent_visible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            tableData: [

            ],
            visible:false,  // 更新学生弹窗
            form:{
                id:0,
                name:'',
                age:0,
                sex:'',
                height:0
            },
            addstudent_visible:false, // 添加学生 弹框
            add_student_form:{
                name:'',
                age:0,
                sex:'',
                height:0
            }
        },
        mounted:function () {
           /* axios
                .get('/findAllStudent').then( function (response) {
                   console.log("data:"+ response.data);

                   //初始化数据
                   vm.tableData =  response.data;

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

            // table 数据的的下标   row 每一行数据 对应tableData 每一个元素
            handleEdit(index, row) {
                console.log(index, row);
                // 初始化弹窗数据
                this.form = row;
                // 显示窗口
                this.visible = true;
            },
            handleDelete(index, row) {
                console.log(index, row);

                this.$confirm('此操作将该学生信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 确定删除 ---》提交服务器
                    axios
                        .get('/deleteStudent',{
                            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: '已取消删除'
                    });
                });
            },
            updateStudent:function () {
                // 提交 修改内容
                axios
                    .get('/updateStudent',{
                        params:this.form
                    }).then(response =>{
                    console.log("data:"+ response.data);

                    if (response.data == 'success'){
                        window.location.reload()
                    }else {
                        this.$message.error('修改失败');
                    }
                    this.visible = false;
                }).catch(function (error) {
                    console.log(error)
                })
            },
            addStudent:function () {  // 新增 学生提交服务器
                axios
                    .get('/addStudent',{
                        params:this.add_student_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)
                })
            }
        }
    })
</script>
</body>
</html>