一个可以连接到数据库的todolist
package com.westos.todo;
public class todolist {
private Integer id;
private String type;
private String direction;
private String content;
public todolist() {
}
public todolist(String type, String direction, String content, Integer id) {
super();
this.id = id;
this.type = type;
this.direction = direction;
this.content = content;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getDirection() {
return direction;
}
public void setDirection(String direction) {
this.direction = direction;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
@Override
public String toString() {
return "todolist [id=" + id + ", type=" + type + ", direction=" + direction + ", content=" + content + "]";
}
}数据库连接：
package com.westos.util;
import java.sql.Connection;
import java.sql.DriverManager;
public class Util {
private static String DRIVERCLASS = "com.mysql.jdbc.Driver";
private static String URL = "jdbc:mysql://localhost/javaweb?useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull";
private static String USERNAME = "root";
private static String PASSWORD = "123456";
public static Connection getConnection() {
try {
Class.forName(DRIVERCLASS);
Connection conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
return conn;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
}service
package com.westos.todo;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.westos.util.Util;
public class TodoService {
public boolean save(Integer id,String type,String direction,String content){
String sql="";
Connection conn= Util.getConnection();
PreparedStatement ps = null;
sql="insert into todolist(id,type,direction,content) values(?,?,?,?)";
try{
ps=conn.prepareStatement(sql);
ps.setInt(1,id);
ps.setString(2,type);
ps.setString(3, direction);
ps.setString(4, 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="";
sql="select id,type,direction,content from todolist order by id asc";
Connection conn=Util.getConnection();
List<Map<String,Object>> result=new ArrayList<>();
PreparedStatement ps = null;
ResultSet rs=null;
try{
ps=conn.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()){
Map amap=new HashMap();
amap.put("id",rs.getInt("id"));
amap.put("type",rs.getString("type"));
amap.put("direction",rs.getString("direction"));
amap.put("content",rs.getString("content"));
result.add(amap);
}
return result;
}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;
}
}
servlet
package com.westos.todo;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringUtils;
import com.alibaba.fastjson.JSONArray;
public class TodoServlet extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
String action=req.getParameter("action");
TodoService todoService=new TodoService();
if(StringUtils.equalsIgnoreCase("save",action)){
String id=req.getParameter("id");
String type=req.getParameter("type");
String direction=req.getParameter("direction");
String content=req.getParameter("content");
boolean result = todoService.save(Integer.valueOf(id), type,direction,content);
}else if(StringUtils.equalsIgnoreCase("listjson",action)){
List<Map<String, Object>> result = todoService.list();
JSONArray jsonArray=new JSONArray();
jsonArray.addAll(result);
resp.getWriter().print(jsonArray.toJSONString());
}
else{
List<Map<String, Object>> result = todoService.list();
req.setAttribute("list",result);
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>todolist</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-4">
<h3>{{title}}</h3>
<p>
序号<input type="text" placeholder="请输入序号" v-model="atodolist.id"><br>
类型：<select name="type" v-model="atodolist.type">
<option v-for="item in type" :value="item">{{item.name}}</option>
</select><br>
方向：<select name="direction" v-model="atodolist.direction" >
<option v-for="a in atodolist.type.direction" :value="a">{{a.name}}</option>
</select><br>
内容：<input type="text" placeholder="请输入内容" name="text" placeholder="请输入事件" v-model="atodolist.content"/>
<button type="button" v-on:click="save()">保存</button>
</p>
<table>
<tr>
<th><h4>序号</h4></th>
<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.direction}}</td>
<td>{{item.content}}</td>
</tr>
</table>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue=new Vue({
el:'#app',
data:{
list:[],
atodolist:{
id:'',
type:{
name:'',
direction:[]
},
direction:{
name:''
},
content:''
},
title:'TODOLIST',
type:[
{
name:'生活',
direction:[
{
name:'吃饭',
},
{
name:'睡觉'
}
]
},
{
name:'学习',
direction:[
{
name:'早读',
},
{
name:'自习'
}
]
},
]
},
methods:{
init:function(){
console.log('do init')
axios.get('/Todolist/todoServlet?action=listjson').then(function(result){
console.log(result);
vue.list=result.data;
console.log(vue.list)
});
},
save:function(){
var postdata="";
var params=new URLSearchParams();
params.append('id',vue.atodolist.id);
params.append('type',vue.atodolist.type.name);
params.append('direction',vue.atodolist.direction.name);
params.append('content',vue.atodolist.content);
axios.post('/Todolist/todoServlet?action=save',params).then(function(result){
if(result.status==200){
alert('保存成功');
var tmp={};
tmp.id=vue.atodolist.id;
tmp.type=vue.atodolist.type;
tmp.direction=vue.atodolist.direction;
tmp.content=vue.atodolist.content;
vue.list.push(tmp);
}else{
alert('保存失败');
}
}).catch(function(result){
console.log(result);
alert('保存失败，网络服务器故障');
});
}
},
mounted:function(){
console.log("inited");
this.init();
}
});
</script> html页面样式
数据库显示
保存完毕后如果不刷新会出现如下现象，还未解决
扫描二维码关注公众号，回复：
2324226 查看本文章
