ajax+servlet+mybatis 搭建网站

最近忙于搞工程实践，一个基于机器学习的电影推荐系统，除了算法部分外还需要搭建一个展示用的网站，由于网站的功能不是很复杂，本来打算用ssm做架构，最后想想决定不用Spring和SpringMVC，只用一个MyBatis，前后台的交互用ajax+servlet来实现。现记录一下以备以后翻阅。

开发工具：Eclipse，Sublime

开发环境：jdk1.8，mysql-5.7.20，tomcat8，Maven

涉及：jQuery，ajax，servlet，MyBatis，

一、前端界面

点顶部导航栏登录后弹出这个登录框，页面具体的代码就不贴了，关键代码下面都有，完整的可以点击这里下载

二、以登录为例的前后台交互

ajax部分

js获取到用户输入的信息，然后传递给后台servlet

1.登录部分html代码：

<!--用户名-->
<input id="signin-inp1" name="username" autocomplete="off" placeholder="用戶名" type="text">
<!--密码-->
<input id="signin-inp2" name="password" autocomplete="off" placeholder="密码" type="password">
<!--登录按钮-->
<input value="登 录" hidefocus="true" id="btn-signin-inp" class="btn-sign-inp" type="button" onclick="login()">

2.登录部分js代码：

//登录
function login() {

var username = $("#signin-inp1").val();
var password = $("#signin-inp2").val();

$.ajax({

type : "post",
//url 要写正确
url : "/website1/UserValidateService?username=" + username,
success : function(data) {
var da = eval("(" + data + ")");
if (da != null && da.password == password) {
login_success();
} else {
$("#signin-error").html("用户名或密码错误！")
}
},
complete : function(argument) {

},
error : function(argument) {
alert('error');
}
});
}

function login_success() {

$("#left1").show();
$("#right1").show();
$(".sp-li-on").show().css("display", "inline");
$("#btn-herder-img").show();
$(".sp-li-off").hide();
$(".sign-css").hide();
$("#sign-backgro").hide();
$("#signin-error").html("");
}

servlet部分

servlet获取ajax传递过来的数据用request.getParameter()就可以了

String username = request.getParameter("username");
String password = request.getParameter("password");

要注意的是，servlet传递给ajax的数据要转换成json，需要下面这6个jar包



可以自己下载了搞进去，我这里用的Maven自动导入，很方便，pom文件里加这个dependency节点

<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>

然后用JSONObject的fromObject()方法将bean对象转化为json，像这样：

JSONObject jsonObject = JSONObject.fromObject(user);

然后再用response.getWriter()获取的PrintWriter写给ajax

PrintWriter pWriter = response.getWriter();
pWriter.write(jsonObject.toString());

servlet完整代码，UserValidateService.java

package com.jkbao.ustc.service;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.ibatis
105a7
.session.SqlSession;

import com.jkbao.ustc.entity.User;
import com.jkbao.ustc.mapper.UserMapper;
import com.jkbao.ustc.tool.SqlSessionUtil;

import net.sf.json.JSONObject;

/*********************************************
* UserValidateService.java Author: jkbao Created on: 2018年3月3日
********************************************/
public class UserValidateService extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");

String username = request.getParameter("username");
// String password = request.getParameter("password");

SqlSession session = SqlSessionUtil.getSqlSession();
try {
// User user = (User) session.selectOne("selectUserByName", username);
UserMapper uMapper = session.getMapper(UserMapper.class);
User user = uMapper.selectUserByName(username);
session.commit();
JSONObject jsonObject = JSONObject.fromObject(user);
PrintWriter pWriter = response.getWriter();
pWriter.write(jsonObject.toString());
pWriter.flush();
System.out.println(jsonObject.toString());
} catch (Exception e) {
e.printStackTrace();
} finally {
session.close();
}
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request, response);
}

}

MyBatis部分

MyBatis 是一款优秀的持久层框架，主要用起来很顺手，方便，配置也很简单所以就用了它，省的还要吭哧吭哧的用原生jdbc

1.首先确保电脑mysql已经安装好，然后配置MyBatis ，需要的jar包如下：



或者Maven：

<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.41</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.4</version>
</dependency>

2.接着是jdbc.properties

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/（数据库名）?useSSL=false&
username=root
password=

3.还有mybatis-config.xml，注意typeAliases，mappers根据实际情况配置，在下面讲

<?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> <!--加载连接数据库的基本信息文件 -->
<properties resource="jdbc.properties"></properties>
<typeAliases>
<typeAlias alias="User" type="com.jkbao.ustc.entity.User" />
</typeAliases>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC" />
<dataSource type="POOLED">
<property name="driver" value="${driver}" />
<property name="url" value="${url}" />
<property name="username" value="${username}" />
<property name="password" value="${password}" />
</dataSource>
</environment>
</environments>
<mappers>
<mapper resource="mapper/UserMapper.xml" />
</mappers>
</configuration>

整个项目目录是这样的：



user表结构：



4.接下来要写对应user表的实体类User.java，如下：

package com.jkbao.ustc.entity;

public class User {
private int id;
private String username;
private String password;

public User() {
}

public User(String username, String password) {
this.username = username;
this.password = password;
}

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}
}

5.接着是定义对于user表的mapper接口，UserMapper.java

/*********************************************
* UserMapper.java
* Author: bjk
* Created on: 2018年3月4日
********************************************/
/**
*
*/
package com.jkbao.ustc.mapper;

import com.jkbao.ustc.entity.User;

/*********************************************
* UserMapper.java Author: jkbao Created on: 2018年3月4日
********************************************/
public interface UserMapper {

User selectUserByID(int id);
User selectUserByName(String username);
void add(User user);
void del(int id);
void update(User user);
}

6.接着是UserMapper.xml，注意namespace要写成mapper接口的路径

<?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="com.jkbao.ustc.mapper.UserMapper">
<select id="selectUserByID" parameterType="int" resultType="User">
SELECT * FROM user where id = #{id}
</select>
<select id="selectUserByName" parameterType="String" resultType="User">
SELECT * FROM user where username = #{username}
</select>
<insert id="add" parameterType="com.jkbao.ustc.entity.User">
insert into
user(username,password) value(#{username},#{password})
</insert>
<delete id="del" parameterType="int">
delete from user where id = #{id}
</delete>
<update id="update" parameterType="com.jkbao.ustc.entity.User">
update user set
name=#{username},age=#{password} where id=#{id}
</update>
</mapper>

7.接着要注册userMapper.xml文件，在mybatis-config.xml加上，如下

<mappers>
<mapper resource="mapper/UserMapper.xml" />
</mappers>

8.最后在UserValidateService.java里用就行了，首先需要获得SqlSession对象，这里作为工具类提取了出来

/*********************************************
* SqlSessionUtil.java
* Author: bjk
* Created on: 2018年3月4日
********************************************/
/**
*
*/
package com.jkbao.ustc.tool;

import java.io.IOException;
import java.io.Reader;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

/*********************************************
* SqlSessionUtil.java Author: jkbao Created on: 2018年3月4日
********************************************/
public class SqlSessionUtil {
public static SqlSession getSqlSession() throws IOException {

Reader reader = Resources.getResourceAsReader("mybatis-config.xml");

SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);

return sqlSessionFactory.openSession();
}
}

然后

//获得sqlsession
SqlSession session = SqlSessionUtil.getSqlSession();
try {
//查询db
UserMapper uMapper = session.getMapper(UserMapper.class);
User user = uMapper.selectUserByName(username);
session.commit();
//user类转换成json数据
JSONObject jsonObject = JSONObject.fromObject(user);
//发送数据给ajax
PrintWriter pWriter = response.getWriter();
pWriter.write(jsonObject.toString());
pWriter.flush();
} catch (Exception e) {
e.printStackTrace();
} finally {
session.close();
}

这里会将查询到的对象传递给前台，然后在前台验证是否通过

三、总结

用这种方式感觉很轻，网站功能也不多，不用花时间搞Spring和SpringMVC，我是觉得还不错，欢迎大佬拍砖。

最后

登陆失败：



登录成功：



以上。