用mybatis实现TodoList

最新推荐文章于 2020-03-29 17:54:01 发布

zy6648

最新推荐文章于 2020-03-29 17:54:01 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/zy6648/article/details/80021187

版权

todolist.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>记事本</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link 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-6 ">
				<h1 class="text-center ">{{title}}</h1>
			</div>
		</div>
		<div class="row ">
			<div class="col-md-6 ">
					请输入编号：<input type="text"  v-model="atodolist.id">  

					请选择类型：<select name="type" v-model="atodolist.type">
						<option v-for="item in type" :value="item">{{item.name}}</option>
					</select><br/> <br/>
					请输入内容：<input type="text" name="text"
						placeholder="请输入事件" v-model="atodolist.content" />  
					<button type="button" class="btn btn-default btn-success" v-on:click="save()">添加</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 ">
				<table>
					<tr>
						<th><h4>序号</h4></th>
						<th><h4>类型</h4></th>
						<th><h4>内容</h4></th>
					</tr>
					<tr v-for="item in list">
						<td>{{item.id}}</td>
						<td>{{item.type}}</td>
						<td>{{item.content}}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">    
        var vue=new Vue({    
            el:'#app',    
            data:{    
                list:[],  
                todolist:{  
                    id:'',  
                    type:{  
                        name:''  
                    },   
                    content:''  
                },  
                title:'TODOLIST',    
                type:[  
                    {  
                        name:'日常'  
                    },  
                    {  
                        name:'学习'
                    },
                    {  
                        name:'娱乐'
                    },
                ]  
                },    
            methods:{     
                init:function(){  
                    console.log('do init')  
                    axios.get('/control/TodoServlet?action=listjson').then(function(result){  
                       console.log(result);  
                       vue.list=result.data;  
                       console.log(vue.list)  
                    });  
                },  
                save:function(){  
                    var postdata="";  
                    var urlparams=new URLSearchParams();  
                    params.append('id',vue.todolist.id);  
                    params.append('type',vue.todolist.type.name);  
                    params.append('content',vue.todolist.content);  
                    axios.post('/control/TodoServlet?action=save',urlparams).then(function(result){  
                            if(result.status==200){  
                                alert('添加成功');  
                                var obj={};  
                                obj.id=vue.todolist.id;  
                                obj.type=vue.todolist.type;    
                                obj.content=vue.todolist.content;  
                                vue.list.push(obj);  
                            }else{  
                                alert('添加失败');  
                            }  
      
                    }).catch(function(result){  
                        console.log(result);  
                        alert('服务器出错！');  
                    });  
                }      
        },  
            mounted:function(){  
                      console.log("inited");  
                      this.init();  
                  }  
                });     
    </script>

mybatis.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <plugins>
        <plugin  interceptor="com.github.pagehelper.PageInterceptor">
        </plugin>
    </plugins>

    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"></transactionManager>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull"/>
                <property name="username" value="root"/>
                <property name="password" value="123456"/>
            </dataSource>
        </environment>

    </environments>

    <mappers>
        <mapper resource="model/TodoListDAO.xml"/>
    </mappers>

</configuration>

TodoListDao.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="model.TodoListDao">
    <select id="list" resultType="model.TodoList">
      select * from thing order by id asc
    </select>
    <insert id="save" parameterType="model.TodoList">
        insert into thing(id,type,content)
        values(
        #{id},
        #{type},
        #{content}
        )
    </insert>
</mapper>

TodoDao.java

package model;

import java.sql.Connection;  
import java.sql.PreparedStatement;  
import java.sql.ResultSet;  
import java.util.*; 
import util.Util;

public class TodoDao {
	public boolean save(Integer id,String type,String direction,String content){   
        Connection conn= Util.getConnection();  
        PreparedStatement ps = null;  
        String sql="insert into todolist(id,type,content) values(?,?,?)";  
        try{  
            ps=conn.prepareStatement(sql);  
            ps.setInt(1,id);  
            ps.setString(2,type);    
            ps.setString(3, content);  
            boolean result = ps.execute();  
            if(!conn.getAutoCommit()){  
                conn.commit();  
            }
            return result;  
        }catch (Exception ex){  
            ex.printStackTrace();  
            return false;  
        }finally {  
            try{  
                if(ps!=null){ps.close();}  
                if(conn!=null){conn.close();}  

            }catch (Exception ex){  
                ex.printStackTrace();  
            }  

        }  
    }  
 public List<Map<String,Object>> list(){   
        String sql="select id,type,content from thing order by id asc";  
        Connection conn=Util.getConnection();  
        List<Map<String,Object>> list=new ArrayList<>();  
        PreparedStatement ps = null;  
        ResultSet rs=null;  
        try{  
            ps=conn.prepareStatement(sql);  
            rs = ps.executeQuery();  

            while (rs.next()){  
                Map map=new HashMap();  
                map.put("id",rs.getInt("id"));  
                map.put("type",rs.getString("type"));  
                map.put("content",rs.getString("content"));  
                list.add(map);  
            }  
            return list;  
        }catch (Exception ex){  
            ex.printStackTrace();  
        }finally{  
            try{  
                if(rs!=null){rs.close();}  
                if(ps!=null){ps.close();}  
                if(conn!=null){conn.close();}  

            }catch (Exception ex){  
                ex.printStackTrace();  
            }  
        }  
        return result;  
}  
}

TodoServlet.java

package control;

import java.io.IOException;  
import java.util.*;   
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
import model.TodoDao;
import org.apache.commons.lang3.StringUtils;  
import com.alibaba.fastjson.JSONArray;  
  
public class TodoServlet extends HttpServlet{

       @Override  
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {  
          
            doPost(req, resp);  
        }

@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); String action=req.getParameter("action"); TodoDao todoD=new TodoDao();
List<Map<String, Object>> list = todoD.list(); if(StringUtils.equalsIgnoreCase("save",action)){ String id=req.getParameter("id"); String type=req.getParameter("type"); String content=req.getParameter("content"); boolean result = todoD.save(Integer.valueOf(id), type,content); }
else if(StringUtils.equalsIgnoreCase("listjson",action)){ JSONArray jsonArray=new JSONArray(); jsonArray.addAll(list); resp.getWriter().print(jsonArray.toJSONString()); } else{ req.setAttribute("list",list); } } }

运行结果：

zy6648

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用mybatis实现TodoList

todolist.html记事本.top { margin-top: 10px; margin-bottom: 10px} {{title}} 请输入编号：请选择类型： {{item.name}} 请输入内容：<input type="tex
复制链接

扫一扫