SpringBoot + vue的todo例子

附上github的链接：[email protected]:201705010201/SpringBoot-Vue-demo3.git

项目结构：

主要代码：

Todo实体类：

package com.xm.pojo;

public class Todo {
	
    private Integer id;
    private String content;
    private Integer done;

    public Todo() {
    }

    public Todo(String content, Integer done) {
        this.content = content;
        this.done = done;
    }

    public Integer getId() {
        return id;
    }

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

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public Integer getDone() {
        return done;
    }

    public void setDone(Integer done) {
        this.done = done;
    }

    @Override
    public String toString() {
        return "Todo{" + "id=" + id + ", content=" + content + ", done=" + done + '}';
    }

  
}

TodoMapper接口：

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.xm.mapper;

import java.util.List;
import com.xm.pojo.Todo;

/**
 *
 * @author chen
 */
public interface TodoMapper {
    //查看
    public  List<Todo> selectTodos();   
    //增加
    public Integer saveTodo(Todo todo);
    //修改
    public Integer modifyTodo(Todo todo);

    //选中一个删除
    public Integer removeTodo(int id);

    //clear done 删除已经完成的
    public Integer removeDone();

}

TodoMapper映射文件。TodoMapper.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">
<!-- namespace指用户自定义的命名空间。 -->
<mapper namespace="com.xm.mapper.TodoMapper">

    <select id="selectTodos"  resultType="Todo">
        select id,content,done from t_todos order by id desc
    </select>

    <!-- 插入statement 
        useGeneratedKeys：开启主键回写
        keyColumn：主键列名(既数据库表中的列名)
        keyProperty：主键对应的属性名（实体中的属性名）
        插入数据时，传过来的参数是一个对象，#{***}中的名字必须与对象中属性名一致
    -->
    <insert id="saveTodo" parameterType="Todo"   useGeneratedKeys="true" keyColumn="id" keyProperty="id">
        insert into t_todos (content,done)  values(#{content},#{done})
    </insert>

    <!-- update操作  parameterType="Todo" 需要一个Todo对象作为参数-->
    <update id="modifyTodo" parameterType="Todo">
        update t_todos set content=#{content},done=#{done} where id=#{id}  
    </update>

    <!-- delete操作 parameterType="int"表示该查询语句需要一个int类型的参数-->
    <delete id="removeTodo" parameterType="Integer">
        delete from t_todos where id=#{id}
    </delete>

    <delete id="removeDone">
        delete from t_todos where done = 1
    </delete>

</mapper>

TodoController类：

package com.xm.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import com.xm.pojo.Todo;
import com.xm.mapper.TodoMapper;

@CrossOrigin
@RestController
public class TodoController {
    @Autowired
    private TodoMapper todoMapper;

    /**
     * 查询
     *
     * @return
     */
    @GetMapping("/select")
    public List<Todo> todoslist() {
        List<Todo> todos = todoMapper.selectTodos();
        return todos;
    }

    /**
     * 录入
     *
     * @param todo
     * @return
     */
    @PostMapping("/insert")
    public String insert(@RequestBody Todo todo) {
        todoMapper.saveTodo(todo);
        Integer id = todo.getId();//回传的id
        return "{\"id\":\"" + id + "\"}";
    }

    /**
     * 修改
     *
     * @param todo
     * @return
     */
    @PutMapping("/update")
    public String modify(@RequestBody Todo todo) {
        Integer rows = todoMapper.modifyTodo(todo);//返回修改记录数
        return "{\"rows\":\"" + rows + "\"}";
    }

    /**
     * 根据id删除
     *
     * @param id
     * @return
     */
    @DeleteMapping("/delete/{id}")
    public String remove(@PathVariable("id") int id) {
        Integer row = todoMapper.removeTodo(id);
        return "{\"row\":\"" + row + "\"}";
    }

    /**
     * 删除done
     * @return
     */
    @DeleteMapping("/deleteDone")
    public String removeDone() {
        Integer rows = todoMapper.removeDone();
        return "{\"rows\":\"" + rows + "\"}";
    }

}

前端代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"> </script>

</head>

<body>
    <div id="app" class="container">
        <h3 class="mt-3">todos(手机版F12)</h3>
        <div class="mt-3">
            <input class="form-control" v-model="inputText" placeholder="下一步行动计划是？"></input><br>
            <button class="btn-primary btn-block" @click="newTodo">确定</button>
        </div>
        <ul class="list-group mt-4">
            <li class="list-group-item" v-for="(item,index) in todo"
                v-if="type === 'all' || (type === 'active' && !item.done) || (type === 'done' && item.done)">
                <label class="form-check-label">
                    <input type="checkbox" v-model="item.done" @change="toggle(index)" />
                    {{ item.content }}
                </label>
                <button class="btn float-right" @click="deleteItem(index)">X</button>
            </li>
        </ul><br><br>

        <div class="navbar navbar-expand-sm fixed-bottom">
            <div class="nav-item mr-4">
                <div class="strong">{{ left }} items left</div>
            </div>

            <div class='nav-item p-2' :class="type === 'all' ? 'bg-light' : ''" data-filter='all' @click="filter">
                All
            </div>
            <div class='nav-item p-2' :class="type === 'active' ? 'bg-light' : ''" data-filter='active' @click="filter">
                Active
            </div>
            <div class='nav-item p-2' :class="type === 'done' ? 'bg-light' : ''" data-filter='done' @click="filter">
                Done
            </div>

            <button class="nav-item" @click="clear">Clear done</button>
        </div>
    </div>
</body>

<script>

    new Vue({
        el: '#app',
        data: {
            todo: [],
            type: 'all',
            inputText: '',
            shareurl: 'http://localhost:8080/todo/'
        },
        created() {  //这里mounted和created生命周期函数区别
            //发送get请求
            axios.get(this.shareurl + 'select')
                .then(response => {
                    this.todo = response.data
                    for (let i = 0, len = this.todo.length; i < len; i++) {
                        this.todo[i].done == 0 ? this.todo[i].done = false : this.todo[i].done = true
                    }
                })
                .catch(error => console.log(error));// 请求失败处理
        },
        computed: {
            left() {
                let num = 0
                for (let i = 0, len = this.todo.length; i < len; i++) {
                    if (!this.todo[i].done) { num++ }
                }
                return num
            }
        },
        methods: {
            toggle(i) {
                axios.put(this.shareurl + 'update', { id: this.todo[i].id, content: this.todo[i].content, done: this.todo[i].done ? 1 : 0 })
                    .then(response => {
                        console.log(response)
                    })
                    .catch(error => console.log(error));// 请求失败处理
            },
            newTodo() {
                if (this.inputText.trim() === '') {
                    return
                }
                axios.post(this.shareurl + 'insert', { content: this.inputText, done: 0 })
                    .then(response => {
                        //unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
                        this.todo.unshift({
                            id: response.data.id,
                            content: this.inputText,
                            done: false
                        })
                        this.inputText = ''
                    })
                    .catch(error => console.log(error));// 请求失败处理
            },
            deleteItem(i) {
                //请学生完成删除数据库数据的功能，注意：数据库删除成功后，再进行下面对象数组的删除
                axios.delete(this.shareurl + 'delete/' + this.todo[i].id)
                    .then(response => {
                        if (response.data.rows > 0) {
                            this.todo.splice(i, 1)
                        }
                    })
                    .catch(error => console.log(error));// 请求失败处理
            },
            filter(evt) {
                this.type = evt.currentTarget.dataset.filter
            },
            clear() {
                axios.delete(this.shareurl + 'deleteDone')
                    .then(response => {
                        if (response.data.rows > 0) {
                            for (let i = 0, len = this.todo.length; i < len; i++) {
                                const item = this.todo[i]
                                if (item.done) {
                                    this.todo.splice(i, 1)
                                    len--
                                    i--
                                }
                            }
                        }
                    })
                    .catch(error => console.log(error));
            }
        }
    })
</script>

</html>

运行：localhost:8080/todo/select

先看效果图：

再打开前端代码，即可进行。