1.数据库的创建：
create table todo(
id integer primary key,
title varchar(50),
todoclassid integer,
state integer,
create_dt datetime,
modify_dt datetime
);
create table todoclass(
id integer primary key,
name varchar(30),
parentid integer
);
2.html页面代码展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TODOLIST</title> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <script src="./js/vue.js"></script> <script src="./js/axios.min.js"></script> </head> <body> <div class="container" id="app"> <div class="row"> <div class="col-md-12"> <div class="page-header"> JAVA的TODOLIST </div> </div> </div> <div class="row"> <div class="col-md-4"> <form class="form form-inline"> <div class="form-group form-group-sm"> <input type="text" class="form-control" v-model="todoclassname" placeholder="请输入分类名称" /> <button type="button" class="btn btn-primary" v-on:click="addtodoclass('0')">添加同级</button> <button type="button" class="btn btn-info" v-on:click="addtodoclass('1')">添加下级</button> </div> </form> <ul class="nav nav-pills nav-stacked"> <li v-for="(item,index) in todoclasses" v-on:click="changetodoclass(item,index)"> <a rel="nofollow" href="#"> {{item.todoclass.name}}</a></li> </ul> </div> <div class="col-md-8"> <form class="form form-inline"> <div class="form-group"> <input type="text" class="form-control" v-model="todotitle" placeholder="请输入待办事项名称" /> <button type="button" class="btn btn-primary" v-on:click="addtodo()">添加</button>
</div>
</form>
<div class="list-group">
<a rel="nofollow" href="#" class="list-group-item" v-for="(item,index) in currenttodoclass.todos">
<span class="badge label-success" v-if="item.state==1">已完成</span>
<span class="badge label-info" v-if="item.state==0" v-on:click="updatastate(item)">未完成</span>
<span class="badge label-info" v-on:click="deltetodo(item)">删除</span>
{{index+1}}.{{item.title}}【{{item.create_dt}}】
</a>
</div>
</div>
</div>
</div> </body> </html> <script type="text/javascript"> var vue=new Vue({ el:"#app", data:{ index:0, msg:'helloworld', todoclassname:'', todotitle:'', currenttodoclass:{ todoclass:{ id:1, name:"学习" }, todos:[
]
},
todoclasses:[]
},
methods:{
updatastate:function (item){
if(confirm("确定事情已经做完了吗？")) {
var param = '';
param = "id=" + item.id;
axios.post('/todo/updatetodo.wst', param).then(function (result) {
if (result.status == 200) {
console.log(result);
alert("保存成功！");
vue.init();
}
})
}
},
changetodoclass:function(item,index){
this.index=index;
this.currenttodoclass=item;
},
addtodoclass:function(level){
var param='';
param="todoclassname="+this.todoclassname;
axios.post('/todo/savetodoclass.wst',param).then(function(result){
if(result.status==200){
console.log(result);
alert("保存成功！");
vue.init();
}
// }).catch(function(err){ console.error(err); alert('网络异常'); });
},
addtodo:function(){
var param='';
param='todoclassid='+this.currenttodoclass.todoclass.id+'&title='+this.todotitle;
axios.post("/todo/savetodo.wst",param).then(function (result) {
if(result.status==200){
console.log(result);
alert("保存成功！");
vue.init();
}
})
},
deltetodo:function(item){
if(confirm("您确定要删除吗？")){
var param=''
param="id="+item.id
axios.post('/todo/deletetodo.wst',param).then(function(result){
if(result.status==200){
console.log(result);
alert("保存成功！");
vue.init();
}
})
}
},
init:function(){
axios.get('/todo/listtodoclasses.wst').then(function(result){
console.log(result);
while(vue.todoclasses.length>0){
vue.todoclasses.pop();
}
for(var i=0;i<result.data.todoclasses.length;i++){
vue.todoclasses.push(result.data.todoclasses[i]);
}
vue.currenttodoclass=vue.todoclasses[vue.index];
vue.todoclassname='';
vue.todotitle=''
}).catch(function(err){
console.error(err);
alert('网络异常');
});
}
},
mounted:function(){
console.log('inited');
this.init();
}
});
</script>
结果展示：
3.Java代码部分展示
Controller层: public class TodoController { // xxx/todo/listtodoclasses.wst public TodoVO listtodoclasses(HttpServletRequest req, HttpServletResponse response){ TodoService todoService=new TodoServiceImpl(); List<TodoClassVO> result = todoService.listTodoClasses(null); TodoVO todoVO=new TodoVO(); todoVO.setTodoclasses(result); return todoVO; }
// xxx/todo/savetodoclass.wst
public Boolean savetodoclass(HttpServletRequest req, HttpServletResponse response){
TodoService todoService=new TodoServiceImpl();
TodoClass todoClass=new TodoClass();
todoClass.setName(req.getParameter("todoclassname"));
Boolean result=todoService.saveTodoClass(todoClass);
return result;
}
// xxx/todo/savetodo.wst
public Boolean savetodo(HttpServletRequest req, HttpServletResponse response){
TodoService todoService=new TodoServiceImpl();
Todo todo=new Todo();
Date date =new Date();
todo.setCreate_dt(date);
todo.setState(0);
todo.setTitle(req.getParameter("title"));
todo.setTodoclassid(Integer.parseInt(req.getParameter("todoclassid")));
Boolean result=todoService.saveTodo(todo);
return result;
}
// xxx/todo/updatetodo.wst
public Boolean updatetodo(HttpServletRequest req, HttpServletResponse response){
TodoService todoService=new TodoServiceImpl();
Boolean result=todoService.updateTodo(Integer.parseInt(req.getParameter("id")));
return result;
}
public Boolean deletetodo(HttpServletRequest req,HttpServletResponse response ){
TodoService todoService=new TodoServiceImpl();
Boolean result=todoService.deletetodo(Integer.parseInt(req.getParameter("id")));
return result;
}
} Service层 接口： public interface TodoService { /** * 获取所有的todo分类 * @return */ List<TodoClassVO> listTodoClasses(Integer parentid);
/**
* 保存Todo分类
* @param todoClass
* @return
*/
Boolean saveTodoClass(TodoClass todoClass);
Boolean saveTodo(Todo todo);
Boolean updateTodo(Integer todoid);
Boolean deletetodo(Integer todoid);
} 实现接口 public class TodoServiceImpl implements TodoService {
@Override
public List<TodoClassVO> listTodoClasses(Integer parentid) {
SqlSession sqlSession = MybatisUtil.getInstance().getSqlSessionFactory().openSession();
TodoDAO dao=sqlSession.getMapper(TodoDAO.class);
List<TodoClassVO> result=new ArrayList<>();
try{
List<TodoClass> root = dao.listTodoClassesByParentid(parentid);
for(TodoClass tc:root){
TodoClassVO todoClassVO=new TodoClassVO();
todoClassVO.setTodoclass(tc);
todoClassVO.setTodos(dao.listTodosByClassid(tc.getId()));
todoClassVO.setTodoclassvolist(listTodoClasses(tc.getId()));
result.add(todoClassVO);
}
return result;
}finally {
sqlSession.close();
}
}
@Override
public Boolean saveTodoClass(TodoClass todoClass) {
SqlSession sqlSession = MybatisUtil.getInstance().getSqlSessionFactory().openSession();
TodoDAO dao=sqlSession.getMapper(TodoDAO.class);
int result=0;
try {
result=dao.saveTodoClass(todoClass);
sqlSession.commit();
}finally{
sqlSession.close();
}
return result>0;
}
@Override
public Boolean saveTodo(Todo todo) {
SqlSession sqlSession = MybatisUtil.getInstance().getSqlSessionFactory().openSession();
TodoDAO dao=sqlSession.getMapper(TodoDAO.class);
int result =0;
try {
result= dao.saveTodo(todo);
sqlSession.commit();
}finally {
sqlSession.close();
}
return result>0;
}
@Override
public Boolean updateTodo(Integer todoid) {
SqlSession sqlSession = MybatisUtil.getInstance().getSqlSessionFactory().openSession();
TodoDAO dao=sqlSession.getMapper(TodoDAO.class);
int result =0;
try {
result= dao.updateTodo(todoid);
sqlSession.commit();
}finally {
sqlSession.close();
}
return result>0;
}
@Override
public Boolean deletetodo(Integer todoid) {
SqlSession sqlSession = MybatisUtil.getInstance().getSqlSessionFactory().openSession();
TodoDAO dao=sqlSession.getMapper(TodoDAO.class);
int result =0;
try {
result= dao.deletetodo(todoid);
sqlSession.commit();
}finally {
sqlSession.close();
}
return result>0;
}
} DAO层 接口： public interface TodoDAO { List<Todo> listTodosByClassid(@Param("todoclassid") Integer todoclassid); List<TodoClass> listTodoClassesByParentid(@Param("parentid") Integer parentid); int saveTodoClass(TodoClass todoClass); int saveTodo(Todo todo); int updateTodo(Integer todoid); int deletetodo(Integer todoid); } 配置文件： <?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.westos.todo.dao.TodoDAO"> <select id="listTodosByClassid" resultType="com.westos.todo.entity.Todo"> select * from todo <where> todoclassid=#{todoclassid} </where> </select> <select id="listTodoClassesByParentid" resultType="com.westos.todo.entity.TodoClass"> select * from todoclass <where> <if test="parentid==null"> parentid is NULL </if> <if test="parentid!=null"> parentid=#{parentid} </if> </where> </select> <insert id="saveTodoClass" parameterType="com.westos.todo.entity.TodoClass"> <selectKey keyProperty="id" resultType="int" order="BEFORE"> select max(ifnull(id,0))+1 from todoclass </selectKey> insert into todoclass(id,name) VALUES (#{id},#{name}); </insert> <insert id="saveTodo" parameterType="com.westos.todo.entity.Todo"> <selectKey keyProperty="id" resultType="int" order="BEFORE"> select max(ifnull(id,0))+1 from todo </selectKey> insert into todo(id,title,todoclassid,create_dt,state) VALUES (#{id},#{title},#{todoclassid},#{create_dt},#{state}); </insert> <update id="updateTodo" parameterType="java.lang.Integer"> update todo set state=1 where id=#{id} </update> <delete id="deletetodo" parameterType="java.lang.Integer"> delete from todo where id=#{id} </delete> </mapper>
