这次实现的这三个功能可以说是特别的套路了，
文章删除 —— 访问一次数据库并删除数据库中的文章
文章添加 —— 访问一次数据库并在数据库中添加新的文章
文章修改 —— 访问两次数据库，第一次拿到数据库中的文章详细信息，第二次将修改的信息更新到数据库中
五、文章删除
- 1、写前端页面
从myartlist.html页面进行跳转，所以要再myartlist.html中进行如下修改：
jQuery.getJSON("myartlist",{},function (data) {
// 2、将table中的信息替换成后台的数据
if(data != null && data.succ ==1){
var html = "";
for (var i = 0; i < data.list.length; i++) {
var article = data.list[i];
html += "<tr>\n" +
"<td>\n" +
article.id + "\n" +
"</td>" +
"<td>\n" +
article.title + "\n" +
"</td>" +
"<td>\n" +
article.createtime + "\n" +
"</td>" +
"<td>\n" +
article.rcount + "\n" +
"</td>" +
"<td>\n" +
"修改" +
"<a href='javascript:mydel("+ article.id +")'>删除</a>\n" +
"</td>" +
"</tr>\n"
}
jQuery("#tab1").append(html);
}else{
alert("操作失败：" + data.msg);
}
})
- 这个就是将原本的删除字段变成一个超链接，这个超链接会调用我们在javascript中写的
mydel()删除函数，通过这个函数取沟通后端删除数据库中的文章 - 我在这里放上我修改后的
myartlist.html整个代码，里面包涵了删除函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文章列表</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
// 删除文章功能
function mydel(id){
if(confirm("确认删除？")){
// 调用删除方法，执行文章删除功能
jQuery.getJSON("mydel",{"id":id},function (data) {
if(data != null && data.succ == 1){
alert("文章删除成功");
}else{
alert("删除失败，" + data.msg);
}
})
}
}
// 查询文章列表功能
jQuery(function () {
// 1、去后台查询我的文章列表
// 因为是从session中那用户的uid，所以前端不需要给后端发送键值对
jQuery.getJSON("myartlist",{},function (data) {
// 2、将table中的信息替换成后台的数据
if(data != null && data.succ ==1){
var html = "";
for (var i = 0; i < data.list.length; i++) {
var article = data.list[i];
html += "<tr>\n" +
"<td>\n" +
article.id + "\n" +
"</td>" +
"<td>\n" +
article.title + "\n" +
"</td>" +
"<td>\n" +
article.createtime + "\n" +
"</td>" +
"<td>\n" +
article.rcount + "\n" +
"</td>" +
"<td>\n" +
"修改" +
"<a href='javascript:mydel("+ article.id +")'>删除</a>\n" +
"</td>" +
"</tr>\n"
}
jQuery("#tab1").append(html);
}else{
alert("操作失败：" + data.msg);
}
})
})
</script>
</head>
<body>
<div style="margin-top: 70px; text-align: center">
<h1>我的文章列表</h1>
<a href="addart.html">添加文章</a>
<table id="tab1" style="width: 80%;margin-left: 100px;" border="1">
<tr>
<td>
编号
</td>
<td>
标题
</td>
<td>
发布时间
</td>
<td>
阅读数
</td>
<td>
操作
</td>
</tr>
</table>
</div>
</body>
</html>
- 在删除函数中，我们给后端传递了文章的 id 作为参数，并且使用的路由是
mydel - 2、写后端的Servic类
- 惯例在service文件夹下创建
MyDeleServlet类用来实现与后端数据库的交互（服务员）
@WebServlet("/mydel")
public class MyDeleServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int succ = -1;
String msg = "";
// 1、从前端获取参数
int id = Integer.parseInt(request.getParameter("id"));
// 2、逻辑业务处理
ArticleInfoDao articleInfoDao = new ArticleInfoDao();
try{
succ = articleInfoDao.del(id);
}catch (SQLException throwables){
throwables.printStackTrace();
}
// 3、将结果返回给前端
HashMap<String, Object> result = new HashMap<>();
result.put("succ", succ);
result.put("msg",msg);
ResultJSONUtils.write(response,result);
}
}
- 同样，套路去
ArticleInfoDao类下去创建del()方法
- 把删除文章的执行代码写到
ArticleInfoDao类下
// 删除文章操作
public int del(int id) throws SQLException {
int result = 0;
Connection connection = DBUtils.getConnection();
String sql = "delete from articleinfo where id=?";
PreparedStatement statement = connection.prepareStatement(sql);
statement.setInt(1,id);
result = statement.executeUpdate();
DBUtils.close(connection,statement,null);
return result;
}
-
这样删除的功能也就实现了，其实这个案例就可以明显地发现，前期在写完工具类之后，我们要改的东西基本就只有前端页面和具体的SQL语句，其他的都很套路。
-
可以运行一下看看，进入到这个页面，我们点击删除，就会提示删除成功
-
此时再看我们的数据库中，数据就只剩一条了
-
OK，删除功能就好了(p≧w≦q)
六、文章添加
- 套路套路，和删除大差不差
1、先写前端 - 我们在
myartlist.html里添加一个超链接，我将修改后的代码贴在下面（在 body 中加一个超链接>）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文章列表</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
// 删除文章功能
function mydel(id){
if(confirm("确认删除？")){
// 调用删除方法，执行文章删除功能
jQuery.getJSON("mydel",{"id":id},function (data) {
if(data != null && data.succ == 1){
alert("文章删除成功");
}else{
alert("删除失败，" + data.msg);
}
})
}
}
// 查询文章列表功能
jQuery(function () {
// 1、去后台查询我的文章列表
// 因为是从session中那用户的uid，所以前端不需要给后端发送键值对
jQuery.getJSON("myartlist",{},function (data) {
// 2、将table中的信息替换成后台的数据
if(data != null && data.succ ==1){
var html = "";
for (var i = 0; i < data.list.length; i++) {
var article = data.list[i];
html += "<tr>\n" +
"<td>\n" +
article.id + "\n" +
"</td>" +
"<td>\n" +
article.title + "\n" +
"</td>" +
"<td>\n" +
article.createtime + "\n" +
"</td>" +
"<td>\n" +
article.rcount + "\n" +
"</td>" +
"<td>\n" +
"修改" +
"<a href='javascript:mydel("+ article.id +")'>删除</a>\n" +
"</td>" +
"</tr>\n"
}
jQuery("#tab1").append(html);
}else{
alert("操作失败：" + data.msg);
}
})
})
</script>
</head>
<body>
<div style="margin-top: 70px; text-align: center">
<h1>我的文章列表</h1>
<a href="addart.html">添加文章</a> //这里这里，改了这里
<table id="tab1" style="width: 80%;margin-left: 100px;" border="1">
<tr>
<td>
编号
</td>
<td>
标题
</td>
<td>
发布时间
</td>
<td>
阅读数
</td>
<td>
操作
</td>
</tr>
</table>
</div>
</body>
</html>
- 点了
<a href="addart.html">添加文章</a>这里的添加文章，就跳转到addart.html页面 - 下面贴上
addart.html的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的文章添加页面</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
function mysub(type) {
var title = jQuery("#title");
var content = jQuery("#content");
if (type == 2) {
// todo:清空操作
return false;
}
// todo:非空效验
jQuery.getJSON("addart", {
"title": title.val(),
"content": content.val()
}, function (data) {
if (data != null && data.succ == 1) {
alert("文章添加成功！");
if (confirm("是否继续添加？")) {
location.href = location.href;
} else {
location.href = "myartlist.html";
}
} else {
alert("抱歉：操作失败" + data.msg);
}
});
}
</script>
</head>
<body>
<div style="margin-top: 30px;margin-left: 30px;">
<h1>添加文章</h1>
标题：<input id="title" type="text">
<p></p>
正文：<textarea style="width: 60%;height: 300px" id="content"></textarea>
<p></p>
<input type="button" value=" 提 交 " onclick="mysub(1)">
<input type="button" value=" 清 空 " onclick="mysub(2)">
</div>
</body>
</html>
2、再写后端
- 根据前端页面中写的路由地址
addart创建AddArtServlet类，代码贴在下面
@WebServlet("/addart")
public class AddArtServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int succ = -1;
String msg = "";
// 1、从前端获取参数
String title = request.getParameter("title");
String content = request.getParameter("content");
HttpSession session = request.getSession(false); // 获得前端在服务器端暂时储存的用户访问信息
if(session != null &&session.getAttribute("userinfo") != null){
// 2、逻辑业务处理
UserInfo userInfo = (UserInfo) session.getAttribute("userinfo"); //得到用户信息
ArticleInfoDao articleInfoDao = new ArticleInfoDao();
try {
succ = articleInfoDao.add(title,content,userInfo.getId());
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}else{
msg = "非登录状态，请先登录";
}
// 3、将结果返回给前端
HashMap<String, Object> result = new HashMap<>();
result.put("succ", succ);
result.put("msg",msg);
ResultJSONUtils.write(response,result);
}
}
- 一样是在
ArticleInfoDao中添加新的方法
// 文章新增
public int add(String title, String content, int id) throws SQLException {
int result = 0;
Connection connection = DBUtils.getConnection();
String sql = "insert into articleinfo(title,content,uid) values(?,?,?)";
PreparedStatement statement = connection.prepareStatement(sql);
statement.setString(1, title);
statement.setString(2, content);
statement.setInt(3, id);
result = statement.executeUpdate();
DBUtils.close(connection, statement, null);
return result;
}
- 文章添加功能也实现了，所以说是真的套路(￣y▽,￣)╭
七、文章修改
- 也是一样的套路，不过这个需要访问两次数据库，第一次拿到数据库中的文章详细信息，第二次将修改的信息更新到数据
- 一样在
myartlist.html中就行一个超链接的添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文章列表</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
// 删除文章功能
function mydel(id){
if(confirm("确认删除？")){
// 调用删除方法，执行文章删除功能
jQuery.getJSON("mydel",{"id":id},function (data) {
if(data != null && data.succ == 1){
alert("文章删除成功");
}else{
alert("删除失败，" + data.msg);
}
})
}
}
// 查询文章列表功能
jQuery(function () {
// 1、去后台查询我的文章列表
// 因为是从session中那用户的uid，所以前端不需要给后端发送键值对
jQuery.getJSON("myartlist",{},function (data) {
// 2、将table中的信息替换成后台的数据
if(data != null && data.succ ==1){
var html = "";
for (var i = 0; i < data.list.length; i++) {
var article = data.list[i];
html += "<tr>\n" +
"<td>\n" +
article.id + "\n" +
"</td>" +
"<td>\n" +
article.title + "\n" +
"</td>" +
"<td>\n" +
article.createtime + "\n" +
"</td>" +
"<td>\n" +
article.rcount + "\n" +
"</td>" +
"<td>\n" +
"<a href='upart.html?id="+ article.id +"'>修改</a> " + //在这里添加了超链接
"<a href='javascript:mydel("+ article.id +")'>删除</a>\n" +
"</td>" +
"</tr>\n"
}
jQuery("#tab1").append(html);
}else{
alert("操作失败：" + data.msg);
}
})
})
</script>
</head>
<body>
<div style="margin-top: 70px; text-align: center">
<h1>我的文章列表</h1>
<a href="addart.html">添加文章</a>
<table id="tab1" style="width: 80%;margin-left: 100px;" border="1">
<tr>
<td>
编号
</td>
<td>
标题
</td>
<td>
发布时间
</td>
<td>
阅读数
</td>
<td>
操作
</td>
</tr>
</table>
</div>
</body>
</html>
- 然后写
upart.html前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的文章修改页面</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
// 1、首先要交互数据集，显示文章详情 ———— 第一次交互
jQuery(function () { // 页面加载完成后，执行当前jQuery
var params = location.search; // ?id=xxx;
id = params.substring(1).split("=")[1]; //理论上应该是单个整数了
alert(id);
jQuery.getJSON("init",{"id":id},function (data) {
if(data != null && data.succ == 1){
alert("文章内容查询成功");
jQuery("#title").val(data.art.title);
jQuery("#content").val(data.art.content);
}else{
alert("查询失败，" + data.msg);
}
})
})
}
</script>
</head>
<body>
<div style="margin-top: 30px; margin-left: 50px">
<h1>文章修改功能</h1>
标题：<input type="text" id="title" ><p></p>
正文：<textarea id="content" style="width: 80%; height: 300px;"></textarea><p></p>
<input value=" 提 交 " type="button" onclick="mysub(1)">
<input value=" 清 空 " type="button" onclick="mysub(2)">
</div>
</body>
</html>
- 先根据第一次交互的路由
init在service文件夹下创建InitServlet类去查询到文章详情
@WebServlet("/init")
public class InitServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int succ = -1;
String msg = "";
// 因为要返回文章的信息，所以后端类要建立一个文章信息类，以供返回给前端内容
ArticleInfoVO articleInfo = null;
// 1、从前端获取参数
int id = Integer.parseInt(request.getParameter("id"));
// 2、逻辑业务处理
if(id > 0){
ArticleInfoDao articleInfoDao = new ArticleInfoDao();
try {
articleInfo = articleInfoDao.getArtById(id);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
succ = 1;
}else{
msg = "无效参数";
}
// 3、将结果返回给前端
HashMap<String, Object> result = new HashMap<>();
result.put("succ", succ);
result.put("msg",msg);
result.put("art",articleInfo);
ResultJSONUtils.write(response,result);
}
}
- 在
ArticleInfoDao去写getArtById()方法，该方法是根据文章id拿到文章详情
// 根据用户id拿到文章详情
public ArticleInfoVO getArtById(int id) throws SQLException {
ArticleInfoVO articleInfo = new ArticleInfoVO();
if(id > 0){
Connection connection = DBUtils.getConnection();
String sql = "select a.*,u.username from articleinfo a left join userinfo u on a.uid=u.id where a.id=?";
PreparedStatement statement = connection.prepareStatement(sql);
statement.setInt(1,id);
ResultSet resultSet = statement.executeQuery();
while(resultSet.next()){
articleInfo.setId(resultSet.getInt("id"));
articleInfo.setTitle(resultSet.getString("title"));
articleInfo.setContent(resultSet.getString("content"));
articleInfo.setUsername(resultSet.getString("username"));
articleInfo.setCreatetime(resultSet.getDate("createtime"));
articleInfo.setRcount(resultSet.getInt("rcount"));
}
DBUtils.close(connection,statement,resultSet);
}
return articleInfo;
}
- 如果这个时候运行IDEA，可以看到再点击
修改后新的页面上出现了文章详情，但是修改后还无法对服务器的数据库造成影响，然后我们在前端页面中添加修改数据库的代码，修改后的完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的文章修改页面</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
// 1、首先要交互数据集，显示文章详情 ———— 第一次交互
jQuery(function () { // 页面加载完成后，执行当前jQuery
var params = location.search; // ?id=xxx;
id = params.substring(1).split("=")[1]; //理论上应该是单个整数了
alert(id);
jQuery.getJSON("init",{"id":id},function (data) {
if(data != null && data.succ == 1){
alert("文章内容查询成功");
jQuery("#title").val(data.art.title);
jQuery("#content").val(data.art.content);
}else{
alert("查询失败，" + data.msg);
}
})
})
// 2、修改文章内容 ———— 第二次交互
function mysub(type) {
var title = jQuery("#title");
var content = jQuery("#content");
if(type == 2){
//todo:清空操作
return false;
}
// todo:提交前进行非空校验
jQuery.getJSON("upart", {
"id":id,
"title":title.val(),
"content":content.val()
},function (data) {
if(data != null && data.succ == 1){
alert("修改成功");
location.href = "myartlist.html";
}else{
alert("修改失败，" + data.msg);
}
})
}
</script>
</head>
<body>
<div style="margin-top: 30px; margin-left: 50px">
<h1>文章修改功能</h1>
标题：<input type="text" id="title" ><p></p>
正文：<textarea id="content" style="width: 80%; height: 300px;"></textarea><p></p>
<input value=" 提 交 " type="button" onclick="mysub(1)">
<input value=" 清 空 " type="button" onclick="mysub(2)">
</div>
</body>
</html>
- 同样根据第二个功能中的路由
upart去写服务类UpArtServlet
@WebServlet("/upart")
public class UpArtServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int succ = -1;
String msg = "";
// 1、从前端获取参数
int id = Integer.parseInt(request.getParameter("id"));
String title = request.getParameter("title");
String content = request.getParameter("content");
// 2、逻辑业务处理
if(id > 0 && title !=null && content != null &&
!title.equals("") && !content.equals("")){
ArticleInfoDao articleInfoDao = new ArticleInfoDao();
try {
succ = articleInfoDao.upArt(id,title,content);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}else{
msg = "无效参数";
}
// 3、将结果返回给前端
HashMap<String, Object> result = new HashMap<>();
result.put("succ", succ);
result.put("msg",msg);
ResultJSONUtils.write(response,result);
}
}
- 然后是去
ArticleInfoDao写修改的方法upArt()
// 修改文章内容
public int upArt(int id, String title, String content) throws SQLException {
int result = 0;
Connection connection = DBUtils.getConnection();
String sql = "update articleinfo set title=?,content=? where id=?";
PreparedStatement statement = connection.prepareStatement(sql);
statement.setString(1,title);
statement.setString(2,content);
statement.setInt(3,id);
result = statement.executeUpdate();
DBUtils.close(connection,statement,null);
return result;
}
- 这样这个功能也实现了，懒得演示了，都是套路ԅ(¯﹃¯ԅ)
扫一扫
1730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
