mvc 怎么把后台拼接好的div写到前台_五、controller层配置和前台数据crud操作的实现...
这个系列专栏的完结可能比我想象要快一些。不过可能将来要完善这个项目的时候还会加以改进。我今天争取把最后一层:控制层的代码给写完。明天最后一篇博文将讲讲Session、cookie对用户登录的控制,并最后完善一下前端页面,这个专栏的主要内容就算完结了。
一、Spring MVC的配置
首先,写一下spring mvc的配置文件dispatcher-servlet.xml:
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
基本跟spring的配置文件一样。注释给得全,没什么值得解释的。值得注意的是jspViewResolver这个bean。这个视图解析器主要工作是返回解析的视图给控制层。在本项目中,前缀为“/”,后缀为“.jsp”的视图都会被spring mvc检测到。
二、控制层
然后就是控制层的代码了。首先是登录功能。这个项目中所有的表单提交方式我都准备用ajax提交表单。form提交适合进行页面跳转的操作,但ajax可以局部刷新,响应速度比较快,而且能从不同的html控件中通过js获取值。因此相对而言,ajax是页面数据传输的首选方式。
按照我的习惯,先从controller层开始写。首先UserController要实现的功能有:注册、登录验证。很好写。
首先,要把前几篇文章没填完的坑填上:
1、在BlogDAO实现根据用户id查询文章列表的操作:
/*** 根据用户id查询文章列表* @param uid 用户id* @return List 返回Blog列表*/
public List findByUid(int uid) {
return this.getHibernateTemplate().execute(new HibernateCallback>() {
@Transactional
public List doInHibernate(Session session) {
Query query = session.createQuery("from Blog where userid=" + uid);
return query.list();
}
});
}2、UserDAO里实现根据用户名查询用户:
/*** 根据用户名查询用户* @param username 用户名* @return List 返回Blog列表*/
public List findByUsername(String username) {
return this.getHibernateTemplate().execute(new HibernateCallback>() {
@Transactional
public List doInHibernate(Session session) {
Query query = session.createQuery("from User where username=" + username);
return query.list();
}
});
}
配置完毕。下面进入正题。
一、UserController实现:
现在可以来实现UserController了:
package org.caihaolun.controller;
import org.caihaolun.dao.UserDAO;
import org.caihaolun.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.Map;
/*** Created by Administrator on 2017/4/3.* 控制层*/
@Controller
@ContextConfiguration(locations = {"classpath:applicationContext.xml"})
public class UserController {
private UserDAO userDAO;
@Resource
public void setUserDAO(UserDAO userDAO) {
this.userDAO = userDAO;
}
private static void addCookie(String name, String value, int maxAge, HttpServletResponse response) throws Exception {
//添加cookie操作 Cookie cookie = new Cookie(name, URLEncoder.encode(value.trim(), "UTF-8"));
cookie.setMaxAge(maxAge);// 设置为10天 cookie.setPath("/");
System.out.println("已添加" + name);
response.addCookie(cookie);
}
@RequestMapping(value = "/", method = RequestMethod.GET)
public String index() {
return "login";
}
@RequestMapping(value = "/validate", method = RequestMethod.POST)
@ResponseBody
public Map validate(@RequestBody User user, HttpServletResponse response) throws Exception {
Map map = new HashMap<>();
User user1 = userDAO.findByID(user.getUid());
//登录成功返回user,失败返回null if (user1 == null || !user1.getUsername().equals(user.getUsername())) {
map.put("result", "用户名不正确!");
return map;
} else if (!user1.getPassword().equals(user.getPassword())) {
map.put("result", "密码不正确!");
return map;
} else {
map.put("result", "SUCCESS");
addCookie("uid", user1.getUid().toString(), 10 * 24 * 60 * 60, response);
addCookie("username", user1.getUsername(), 10 * 24 * 60 * 60, response);
return map;
}
}
@RequestMapping(value = "/register", method = RequestMethod.POST)
@ResponseBody
public Map register(@RequestBody User user, HttpServletResponse response) throws Exception {
Map result = new HashMap<>();
userDAO.save(user);
addCookie("uid", user.getUid().toString(), 10 * 24 * 60 * 60, response);
addCookie("username", user.getUsername(), 10 * 24 * 60 * 60, response);
result.put("result", "SUCCESS");
return result;
}
}
这里就稍微解释一下:
1、@RequestMapping注解意为:表现层请求的路径对应RequestMapping中的value值,才可以把这个请求传递到后台的控制层。并且还可以定义RequestMethod为GET或POST。然后可以通过@RequestBody把一个封装好的对象传递到后台控制层。
2、@ResponseBody:由于ajax无法直接接收到返回的String类型,因此要把类型封装成map,便于前台的jQuery接收返回参数。
3、addCookie:添加cookie操作。由于HTTP协议是无状态的协议,所以客户端需要记录用户的状态时,就需要用某种机制来识具体的用户,这个机制就是cookie。这里我把uid和username添加进cookie并加进response返回前台。本来服务器端需要用Session保存用户信息的,但这篇文章中暂时不使用Session。
然后就是前台ajax的编程:
1、首先是注册页面:
$(document).ready(function () {
var uname_ = $.cookie("username");
$("#register-button").click(function () {
var id = $("#id-reg").val();
var username = $("#username-reg").val();
var password = $("#password1").val();
var repassword = $("#password2").val();
if (password != repassword) {
alert("密码与确认密码不一致!");
} else if (id == "" || username == "" || password == "") {
alert("请确认是否有空缺项!");
} else {
var user = {
"uid": id,
"username": username,
"password": password
};
$.ajax({
type: 'post',
url: 'register',
contentType: 'application/json;charset=utf-8',
data: JSON.stringify(user),
success: function (data) {
if (data["result"] == "SUCCESS") {
alert("注册成功!");
$("#top_menu").html
('
' href="#" title="">' +
'' +
' ' + uname_ + '
- ' +
'
' +
'
' + uname_ + '
' +
'修改密码' +
' ' +
'注销
');
$("#myDiv").load("articleList.jsp");
} else {
alert("注册失败!" + data["result"]);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
alert(errorThrown);
}
});
}
})
})
在$.post中,如果最后一个参数(表示接收返回值的类型)填的是json,那么data["result"]就可直接引用返回的map中对应键的值。
注意一下,这里的uname_值是从cookie中拿进来的。需要导入的js引用。而且引用顺序一定是在jQuery之后!!
这是原来的那个主页:
简单博客系统
- 注册
- 登录
这里ajax提交成功之后改变的就是top_menu这块div中的html。
2、然后登录页面:
$(document).ready(function () {
var uname = $.cookie("username");
$("#register_").click(function () {
$("#myDiv").load("register.jsp");
});
$("#login_").click(function () {
var uid = $("#uid").val();
var username = $("#username").val();
var password = $("#password").val();
if (uid == "" || username == "" || password == "") {
alert("请确认是否有空缺项!");
} else {
var user_ = {
"uid": uid,
"username": username,
"password": password
};
$.ajax({
type: 'post',
url: 'validate',
contentType: 'application/json;charset=utf-8',
data: JSON.stringify(user_),
success: function (data) {
if (data["result"] == "SUCCESS") {
alert("登陆成功!");
$("#top_menu").html
('
' href="#" title="">' +
'' +
' ' + uname + '
- ' +
'
' +
'
' + uname + '
' +
'修改密码' +
' ' +
'注销
');
$("#myDiv").load("articleList.jsp");
} else {
alert("登录失败!" + data["result"]);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
alert(errorThrown);
}
});
}
});
});
同理,不赘述。
效果:
登录页面同样。读者可以自行试验。
二、BlogController实现
博客就那几个操作:增加、编辑、删除、和浏览。分页的功能在下篇文章将会实现。
还是BlogController.java文件:
package org.caihaolun.controller;
import org.caihaolun.dao.BlogDAO;
import org.caihaolun.model.Blog;
import org.springframework.stereotype.Controller;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import java.util.HashMap;
import java.util.Map;
/*** Created by Administrator on 2017/4/3.* 控制层*/
@Controller
@ContextConfiguration(locations = {"classpath:applicationContext.xml"})
public class BlogController {
private BlogDAO blogDAO;
@Resource
public void setBlogDAO(BlogDAO blogDAO) {
this.blogDAO = blogDAO;
}
private static String textParser(String source) {
if (source == null) {
return "";
}
StringBuilder buffer = new StringBuilder();
for (int i = 0; i < source.length(); i++) {
char c = source.charAt(i);
switch (c) {
case '
buffer.append("<");
break;
case '>':
buffer.append(">");
break;
case '&':
buffer.append("&");
break;
case '"':
buffer.append(""");
break;
case '\n':
buffer.append("
");
break;
default:
buffer.append(c);
}
}
return buffer.toString();
}
@RequestMapping(value = "/addArticle")
@ResponseBody
public Map add(String title, String content, Integer uid) throws Exception {
Map res = new HashMap<>();
Blog blog = new Blog();
blog.setTitle(title);
blog.setContent(textParser(content));
blog.setUserid(uid);
blogDAO.save(blog);
res.put("result", "SUCCESS");
return res;
}
@RequestMapping(value = "/articleList/{uid}")
public String getAllBlog(@PathVariable("uid") Integer uid, ModelMap modelMap) throws Exception {
// 查询表中所有记录 // 将所有记录传递给要返回的jsp页面,放在blogList当中 modelMap.addAttribute("blogList", blogDAO.findByUid(uid));
// 返回原本jsp页面 return "articleList";
}
@RequestMapping(value = "/show/{bid}")
public String get(@PathVariable("bid") Integer bid, ModelMap modelMap) throws Exception {
modelMap.addAttribute("blog", blogDAO.findByID(bid));
return "article";
}
/*** 转到update的目录** @param bid 根据bid返回* @return 页面* @throws Exception*/
@RequestMapping(value = "/update/{bid}")
public String toUpdatePage(@PathVariable("bid") Integer bid, ModelMap modelMap) throws Exception {
modelMap.addAttribute("blog", blogDAO.findByID(bid));
return "articleUpdate";
}
@RequestMapping(value = "/update")
@ResponseBody
public Map update(@RequestBody Blog blog) throws Exception {
Map res = new HashMap<>();
blogDAO.save(blog);
res.put("result", "SUCCESS");
return res;
}
@RequestMapping(value = "/delete/{bid}")
public String delete(@PathVariable("bid") Integer bid) throws Exception {
blogDAO.delete(blogDAO.findByID(bid));
return "index";
}
}
这里我稍微对输入的字符串进行一些处理。html输入的字符需要经过一些转换转为text文本才能存入数据库。否则页面再取会出现各种各样的问题。
接下来就把页面各种功能完善一下:
添加博文的jQuery:
$(document).ready(function () {
$("#pullout").click(function () {
var uid = $.cookie("uid");
var title = $("#title").val();
var text = $("#text").val();
if (title == "" || text == "") {
alert("请确认是否有空缺项!");
} else {
$.post("addArticle", {"title": title, "content": text, "uid": uid},
function (data) {
if (data["result"] == "SUCCESS") {
alert("添加成功!");
$("#myDiv").load("articleList/" + uid);
}
});
}
});
})
列出博文列表:
博文列表
|
其他模块,都是差不多的写法。就不一一赘述了。
最后的效果:
1、博文列表:
2、添加博文:
3、博文显示:
4、编辑博文:
删除的效果看不到,就不贴了。
就这么多了。私以为,前台和控制层交互的部分最难写,各种各样的路径问题 、ajax传输错误、控制层代码写错,还有前端页面总会出那么几个错,要么js文件执行不了,要么就是少导工具包,总是不能顺畅地写完代码。也许是我前端基础薄弱的一个表征吧。等哪天花点时间得好好看看前端了。
mvc 怎么把后台拼接好的div写到前台_五、controller层配置和前台数据crud操作的实现...相关推荐
- mvc 怎么把后台拼接好的div写到前台_MVC 从后台页面 取前台页面传递过来的值的几种取法...
<1>前台页面 Index视图 注意:用户名表单的name值为txtName 密码表单的name值为txtPassword Test 用户名 密 码 <2>后台页面,Home控 ...
- mvc 怎么把后台拼接好的div写到前台_asp.net-mvc – 如何在我的视图中将HTML从MVC控制器返回到div...
我正在尝试将生成的 HTML字符串返回到视图,以动态生成带有结果的HTML表.我无法获得返回的HTML字符串任何建议和帮助非常感谢. 这是我的控制器代码 public ActionResult Val ...
- 支付宝免密代扣签约SDK后台拼接(JAVA代码)
支付宝免密代扣签约SDK后台拼接(JAVA代码) 我是在做小程序时遇到的困难,在多方支持下才发现支付宝官方文档有很大的漏洞0.0,所以附上完整成功版供大家使用.开发时请结合支付宝官方免密代扣签约文档. ...
- 后台拼接字符串加双引号
做 拼接按钮给按钮写click事件时候,展现html在前台 一直因为 单引号 .双引号.单斜线 出问题 ,导致click事件失效,后来试了很久,终于拼接成功了,在这里记录一下方便以后使用. 1 Str ...
- 用于MyBatis CRUD操作的Spring MVC 3控制器
到目前为止,我们已经为域类" User "创建了CRUD数据库服务,并且还将MyBatis配置与Spring Configuration文件集成在一起. 接下来,我们将使用Spri ...
- service 层 拼接的html 代码如何直接返回_代码分层的设计之道
分层思想,是应用系统最常见的一种架构模式,我们会将系统横向切割,根据业务职责划分.MVC 三层架构就是非常典型架构模式,划分的目的是规划软件系统的逻辑结构便于开发维护.MVC:英文即 Model-Vi ...
- div文字自动扩充_文字资料扩充
div文字自动扩充 自然语言处理 (Natural Language Processing) Data Augmentation is the process that enables us to i ...
- koa --- [MVC实现之二]Controller层的实现
[MVC实现之一]传送门 https://blog.csdn.net/piano9425/article/details/103362966 Router层 router这一层,不做业务处理,仅仅只是 ...
- Spring MVC + Hibernate + Maven:CRUD操作示例
在本文中,我想研究一个Spring MVC + Hibernate + Maven用法的示例. 这套技术暗含领域领域的基础知识. 因此,我将尝试详细解释所有重要时刻. 其他没有主题的内容将提供指向更多 ...
最新文章
- PHP工程师面临的成长瓶颈
- python与正则表达式(part1)--元字符
- Mysql 数据库默认值选 ‘‘“ 、Null和Empty String的区别
- r语言岭回归参数选择_数据分析中常见的七种回归分析以及R语言实现(三)---岭回归...
- 脸盲分不清公司的程序员,同事教我一招,果然好用
- python粒子风暴代码_turtle爆炸粒子效果源码
- mysql 排查问题一些小技巧
- [置顶] 任务一 基本的数据库连接——以类为单位的编程思想
- python语言的变量随时_python的变量和简单的数据类型
- 通过编译TPC-DS生成测试数据并发送到benchmark进行查询测试
- matlab创建wps服务器,wps云文档服务器架设(mac版wps云文档在哪)
- CSDN很火的汤小洋老师全部课程总共有哪些(问号问号问号)
- bluecms 手把手教你0day挖掘-基础入门篇
- 五年程序员一般多少工资?网友:能活下来我都觉得是庆幸的!
- PAT 乙级 1065 单身狗 (25 分)
- c++系统骨干研发进阶的道和术
- 1335 工作计划的最低难度(动态规划)
- 【2015盘点】这些手游如何“霸榜”
- python判断图片中含有另外一张图
- “该微信号已经绑定了50个小程序,不可继续绑定”,如何自助解绑
热门文章
- Visual Web Developer 中的网站类型
- OLE DB , ODBC , ADO 知识了解
- [Axios] FETCH中的基础语法
- 【ES6】什么是Promise?解析Promise的基本用法
- 利用奇异值产生脆弱水印应用于检测、定位、恢复文章总结
- opencv基于DNN的人脸检测
- 816固件a2可以升a1吗_你好,我是A2的证我在15年出的交通事故为什么不能学B2呢-免费法律咨询...
- 7-7 天梯赛的善良 (20 分)
- 中国科学院计算机网络信息中心领导,中国科学院计算机网络信息中心
- mongodb 持久化 mysql_(转)mongodb与mysql区别