步骤一：新建项目
file->new->Dynamic web project（新建一个动态web项目）->命名项目->next->next->改名WebContent
步骤二：设置结构
创建实体和包：new->class->包名entity->类名news（根据属性，有参构造和无参构造和get、set方法）
创建controller：new->servlet->包名controller->名NewsListController（展示新闻列表功能）
创建utils工具类：数据库工具类和json工具类
导入jar包：
（json格式校验网址：在线JSON校验格式化工具（Be JSON））
步骤三：实现功能
功能1：新闻列表显示到页面上
1.1Controller部分-Servlet
//命名：NewsListController
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//乱码的解决：编码的规范(以json形式解析)
response.setContentType("application/json;charset=UTF-8");
//新闻列表显示到页面上
List<News> list=new ArrayList<News>();
list.add(new News(0,"标题：例如：好好学习天天向上", "", ""));
list.add(new News(1, "标题****", "", ""));
list.add(new News(2, "标题****", "", ""));
list.add(new News(3, "标题****", "", ""));
list.add(new News(4, "标题****", "", ""));
list.add(new News(5, "标题****", "", ""));
//变成json：快速方法，利用json库
String json=JsonUtils.objectToJson(list);
//响应
//ctrl+shift+o=智能导包
PrintWriter pw=response.getWriter();
pw.print(json);
pw.flush();
pw.close();
}1.2页面部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//就绪
$(function(){
//发送ajax异步请求
$.get('NewsListController',function(data){
//console.log(data);//检测成功拿到数据没
str="";
for(i=0;i<data.length;i++){//var可以省略
str+="<tr>";
str+="<td>"+data[i].id+"</td>";
str+="<td>"+data[i].title+"</td>";
str+="<td>"+data[i].descn+"</td>";
str+="</tr>";
}
$('#newsList').append(str);
});
});
</script>
</head>
<body>
<table id="newsList">
<tr>
<td>ID</td>
<td>标题</td>
<td>描述</td>
</tr>
</table>
</body>
</html>功能2：添加显示（Ajax不用跳转）
2.1 建数据库
2.2 四层架构
2.2.1 DAO层
package dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import entity.News;
import util.JDBCUtils;
public class NewsDAO {
/**
* 查询全部新闻
* @return
*/
public List<News> selectAll(){
String sql="select * from news";
List<News> list =new ArrayList<News>();
ResultSet rs=JDBCUtils.search(sql);
try {
while(rs.next()) {
int id=rs.getInt("id");
String title=rs.getString("title");
String descn=rs.getString("descn");
String content=rs.getString("content");
list.add(new News(id, title, descn, content));
}
JDBCUtils.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return list;
}
/**
* 添加新闻
* @return
*/
public int insertNews(News news){
String sql="insert into news value(default,'"+news.getTitle()+"','"+news.getDescn()+"','"+news.getContent()+"');";
return JDBCUtils.executeSQL(sql);
}
}
2.2.2 服务层：service层接口及具体实现类
package service;
import entity.News;
public interface NewsService {
/**
* 获取全部新闻
* @return json
*/
public String getAllNews();
/**
* 添加新闻
* @return json
*/
public String saveNews(News news);
}
package service.impl;
import java.util.List;
import dao.NewsDAO;
import entity.HttpResult;
import entity.News;
import service.NewsService;
import util.JsonUtils;
//实现接口的类
public class NewServiceImpl implements NewsService {
private NewsDAO dao=new NewsDAO();
@Override
public String getAllNews() {
List<News> list =dao.selectAll();
return JsonUtils.objectToJson(list);
}
@Override
public String saveNews(News news) {
int i=dao.insertNews(news);
HttpResult hr=null;
if(i>0) {
//添加成功
hr=new HttpResult(HttpResult.STATE_SUCCESSED, "添加新闻成功");
}else {
//添加失败
hr=new HttpResult(HttpResult.STATE_FAILURE, "添加新闻失败");
}
return JsonUtils.objectToJson(hr);//将java对象转换成json串
}
}
2.2.3 controller层
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//乱码的解决：编码的规范(以json形式解析)
response.setContentType("application/json;charset=UTF-8");
//页面上新闻添加
String title =request.getParameter("title");//标题
String descn =request.getParameter("descn");//描述
//调用方法
NewsService service =new NewServiceImpl();
//变成json：快速方法，利用json库
String json=service.saveNews(new News(0, title, descn, null));
//响应
PrintWriter pw=response.getWriter();
pw.print(json);
pw.flush();
pw.close();
}2.2.4 视图层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//就绪
$(function(){
//需要复用的匿名函数(刷新用)-新闻列表显示
requestNewsList = function(){
//发送ajax异步请求
//数据库中列表展示
$.get('NewsListController',function(data){
//console.log(data);//检测成功拿到数据没
str="<tr><td>ID</td><td>标题</td><td>描述</td></tr>";
for(i=0;i<data.length;i++){//var可以省略
str+="<tr>";
str+="<td>"+data[i].id+"</td>";
str+="<td>"+data[i].title+"</td>";
str+="<td>"+data[i].descn+"</td>";
str+="</tr>";
}
$("#newsList").empty();
$('#newsList').append(str);
});
};
requestNewsList();//请求新闻列表（从上到下解析，先定义才能调用）
//添加数据(点击添加按钮时)
doAdd=function(){
//获取文本框的值
titleAdd=$("#title").val();
descnAdd=$("#descn").val();
//通过post请求向servlet中提交数据
//区别于get的?传参
//$post('响应地址',{参数列表},function(data=){回调函数});
$.post('NewsAddController',
{
title:titleAdd,
descn:descnAdd
},
function(data){//对应HttpResult
if(data.code==200){
//根据servlet响应的结构动态改变新闻列表
requestNewsList();//请求新闻列表（从上到下解析，先定义才能调用）
}else{
alert(data.msg);
}
}
);
};
});
</script>
</head>
<body>
标题：<input id="title" type="text" size="12"/>
描述：<input id="descn" type="text" size="12"/>
<input type="button" value="添加" onclick="doAdd()"/>
<table id="newsList">
</table>
</body>
</html>
7912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
