前端布局
Bootstrap的使用
1.创建模板,引入对应的css,js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>2、引入对应的组件，画出页面
注册：
登录：
主界面
遇到的问题记录：
使用html,ajax发起请求跳转的时候无法使用session的身份做验证。
解决办法：
暂未尝试，后台收到ajax请求的时候，记录下用户的id,并进行加密。记录下的同时将值返回给前台，前端将值存入storage，登录或页面跳转时从storage中把值取出，与后台匹配。若成功，显示对应身份。
后台
不使用框架，使用最基本的servlet处理请求
1、servlet模块合并
package com.yyt.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.yyt.service.UserService;
import com.yyt.service.Impl.UserServiceImpl;
import net.sf.json.JSONObject;
@WebServlet("/user")
public class UserServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
private UserService userService = new UserServiceImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String cmd=req.getParameter("method");
if(cmd.equals("register")) {
this.register(req, resp);
}else if(cmd.equals("login")){
this.login(req,resp);
}else {
}
}
private void login(HttpServletRequest req, HttpServletResponse resp) {
System.out.println("进入登录");
resp.setCharacterEncoding("UTF-8");
resp.setContentType("application/json; charset=utf-8");
String name = req.getParameter("name");
String pwd = req.getParameter("pwd");
Object[] params = new Object[] {name,pwd};
boolean res = userService.isExistUser(params);
PrintWriter out = null;
JSONObject result = new JSONObject();
if(res) {
System.out.println("登录成功");
result.put("status", 1);
}else {
result.put("status", 0);
}
try {
out = resp.getWriter();
out.write(result.toString());
} catch (Exception e) {
System.out.println(e.getMessage());
}
out.flush();
out.close();
}
private void register(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("进入注册");
resp.setCharacterEncoding("UTF-8");
resp.setContentType("application/json; charset=utf-8");
String uname = req.getParameter("uname");
String upwd = req.getParameter("upwd");
Object[] params = new Object[] {uname,upwd};
int num = userService.insertUser(params);
PrintWriter out = null;
JSONObject result = new JSONObject();
if(num==1) {
result.put("status", 1);
}else {
result.put("status", 0);
}
try {
out = resp.getWriter();
out.write(result.toString());
} catch (Exception e) {
System.out.println(e.getMessage());
}
out.flush();
out.close();
}
}
2、处理ajax并将它返回给前台时转换成json格式
3、分页时的sql语句limit ？，？
前一个对应起始位置，后一个对应结束位置，所以可以根据实际情况自己封装pageBean
package com.yyt.pojo;
import java.util.List;
public class PageBean<T> {
// 已知数据
private int pageNum; // 当前页,从请求那边传过来。
private int pageSize; // 每页显示的数据条数。
private int totalRecord; // 总的记录条数。查询数据库得到的数据
// 需要计算得来
private int totalPage; // 总页数，通过totalRecord和pageSize计算可以得来
// 开始索引，也就是我们在数据库中要从第几行数据开始拿，有了startIndex和pageSize，
// 就知道了limit语句的两个数据，就能获得每页需要显示的数据了
private int startIndex;
// 将每页要显示的数据放在list集合中
private List<T> list;
// 分页显示的页数,比如在页面上显示1，2，3，4，5页，start就为1，end就为5，这个也是算过来的
private int start;
private int end;
// 通过pageNum，pageSize，totalRecord计算得来tatalPage和startIndex
// 构造方法中将pageNum，pageSize，totalRecord获得
public PageBean(int pageNum, int pageSize, int totalRecord) {
this.pageNum = pageNum;
this.pageSize = pageSize;
this.totalRecord = totalRecord;
// totalPage 总页数
if (totalRecord % pageSize == 0) {
// 说明整除，正好每页显示pageSize条数据，没有多余一页要显示少于pageSize条数据的
this.totalPage = totalRecord / pageSize;
} else {
// 不整除，就要在加一页，来显示多余的数据。
this.totalPage = totalRecord / pageSize + 1;
}
// 开始索引
this.startIndex = (pageNum - 1) * pageSize;
// 显示5页，这里自己可以设置，想显示几页就自己通过下面算法修改
this.start = 1;
this.end = 5;
// 显示页数的算法
if (totalPage <= 5) {
// 总页数都小于5，那么end就为总页数的值了。
this.end = this.totalPage;
} else {
// 总页数大于5，那么就要根据当前是第几页，来判断start和end为多少了，
this.start = pageNum - 2;
this.end = pageNum + 2;
if (start < 0) {
// 比如当前页是第1页，或者第2页，那么就不如和这个规则，
this.start = 1;
this.end = 5;
}
if (end > this.totalPage) {
// 比如当前页是倒数第2页或者最后一页，也同样不符合上面这个规则
this.end = totalPage;
this.start = end - 5;
}
}
}
//get、set方法。
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalRecord() {
return totalRecord;
}
public void setTotalRecord(int totalRecord) {
this.totalRecord = totalRecord;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getStartIndex() {
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getEnd() {
return end;
}
public void setEnd(int end) {
this.end = end;
}
}
4.DB类的简单封装
package com.yyt.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class DBHelper {
private static final String DRIVENAME = "com.mysql.cj.jdbc.Driver";
private static final String URL = "jdbc:mysql://localhost:3306/stupro?serverTimezone=UTC";
private static final String USER = "root";
private static final String PASSWORD = "yyt";
private Connection conn = null;
private Statement st = null;
private PreparedStatement ppst = null;
private ResultSet rs = null;
/**
* 加载驱动
*/
static{
try {
Class.forName(DRIVENAME).newInstance();
} catch (Exception e) {
System.out.println("驱动加载失败："+e.getMessage());
}
}
/**
* 连接数据库
* @return
*/
public Connection getConn(){
try {
conn = DriverManager.getConnection(URL,USER,PASSWORD);
} catch (SQLException e) {
System.out.println("数据库连接失败："+e.getMessage());
}
return conn;
}
/**
* 获取结果集（无参）
* @param sql
* @return
*/
private ResultSet getRs(String sql){
conn = this.getConn();
try {
st = conn.createStatement();
rs = st.executeQuery(sql);
} catch (SQLException e) {
System.out.println("查询（无参）出错:"+e.getMessage());
}
return rs;
}
/**
* 获取结果集
* @param sql
* @param params
* @return
*/
private ResultSet getRs(String sql,Object[] params){
conn = this.getConn();
try {
ppst = conn.prepareStatement(sql);
if(params!=null){
for(int i = 0;i<params.length;i++){
ppst.setObject(i+1, params[i]);
}
}
rs = ppst.executeQuery();
} catch (SQLException e) {
System.out.println("查询出错："+e.getMessage());
}
return rs;
}
/**
* 查询
* @param sql
* @param params
* @return
*/
public List<Object> query(String sql,Object[] params){
List<Object> list = new ArrayList<Object>();
ResultSet rs = null;
if(params!=null){
rs = getRs(sql, params);
}else{
rs = getRs(sql);
}
ResultSetMetaData rsmd = null;
int columnCount = 0;
try {
rsmd = rs.getMetaData();
columnCount = rsmd.getColumnCount();
while(rs.next()){
Map<String, Object> map = new HashMap<String, Object>();
for(int i = 1;i<=columnCount;i++){
map.put(rsmd.getColumnLabel(i), rs.getObject(i));
}
list.add(map);
}
} catch (SQLException e) {
System.out.println("结果集解析出错："+e.getMessage());
} finally {
closeConn();
}
return list;
}
/**
* 更新（无参）
* @param sql
*/
public int update(String sql){
int affectedLine = 0;//受影响的行数
conn = this.getConn();
try {
st = conn.createStatement();
affectedLine = st.executeUpdate(sql);
} catch (SQLException e) {
System.out.println("更新（无参）失败："+e.getMessage());
} finally {
closeConn();
}
return affectedLine;
}
/**
* 更新
* @param sql
* @param params
* @return
*/
public int update(String sql,Object[] params){
int affectedLine = 0;//受影响的行数
conn = this.getConn();
try {
ppst = conn.prepareStatement(sql);
if(params!=null){
for(int i = 0;i<params.length;i++){
ppst.setObject(i+1, params[i]);
}
}
affectedLine = ppst.executeUpdate();
} catch (SQLException e) {
System.out.println("更新失败："+e.getMessage());
} finally {
closeConn();
}
return affectedLine;
}
private void closeConn(){
if(rs!=null){
try {
rs.close();
} catch (SQLException e) {
System.out.println(e.getMessage());
}
}
if(st!=null){
try {
st.close();
} catch (SQLException e) {
System.out.println(e.getMessage());
}
}
if(ppst!=null){
try {
ppst.close();
} catch (SQLException e) {
System.out.println(e.getMessage());
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
System.out.println(e.getMessage());
}
}
}
}
3412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
