Day4
上午简单的弄了一下tomcat的环境，（因为昨天没弄）
然后老师在讲的时候很多地方都是直接用快捷键，一下多出一大串的东西，
太快了，跟不上了，然后就学会了如何使用万能键（ALT+‘Insert’）
今天最佳：“你会~，只是你不做！”
这里复习一下HTTP请求方式中8种请求方法（上课时讲到这个居然忘了一些...）
HTTP请求的方法：
HTTP/1.1协议中共定义了八种方法（有时也叫“动作”），来表明Request-URL指定的资源不同的操作方式
HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法
HTTP常用方法：
（1）GET方法：获取资源
GET方法是用来请求URL指定的资源。指定资源经服务器端解析后返回响应内容。
例：返回index.html的页面资源
GET /index.html HTTP/1.1
Host: www.php.cn
（2）POST方法：传输实体主题
POST方法用来传输实体的主体
例：返回submit.cgi接收数据的处理结果
POST /submit.cgi HTTP/1.1
Host:www.php.cn
Content-Length:1560
（3）PUT方法：传输文件
PUT方法用来传输文件。像FTP协议的文件上传一样，要求在请求报文主体中包含文件的内容，然后保存到请求URL指定的位置。不太常用。
例：响应返回状态码204 No Content(比如：该html已存在于服务器上)
PUT /example.html HTTP/1.1
Host:www.php.cn
Content-Type: text/html
Content-Length: 1560
（4）HEAD方法：获取报文首部
HEAD方法和GET方法一样，只是不返回报文主体部分。用于确认URL的有效性及资源更新的日期时间等。
例：返回index.html有关的响应首部
HEAD /index.html HTTP/1.1
Host:www.php.cn
（5）DELETE方法：删除文件
DELETE方法用来删除文件，是PUT的相反方法。DELETE方法按请求URL删除指定的资源。也不常用。
例：响应返回状态码204 No Content(比如：该html已从该服务器上删除)
DELETE /example.html HTTP/1.1
Host:www.php.cn
（6）OPTIONS方法：询问支持的方法
OPTIONS方法用来查询针对请求URL指定的资源支持的方法。
OPTIONS * HTTP/1.1
Host:www.php.cn响应
HTTP/1.1 200 OK
Allow:GET,POST,HEAD,OPTIONS// 1.数据查询
public User queryUser(User user);
// 2.数据添加
public void insertUser(User user);
// 3.数据的修改
public void DataUpdate(User user);
// 4.根据ID查询
public int queryUserId(Integer id);
// 1.登陆业务
public String login(User user);
// 2.注册业务
public String register(User user);
// 3.修改密码业务
public void UpdatePwd(User user);
// 4.个人信息业务
public int queryById(Integer id);
瞎聊APP
部分代码：(修改前，后面的代码是由室友做的---前端和后端的优化，以及美化添加功能等，大佬们都tql，我懒得贴了)
DBHELPER.java
package com.jju.xl.utill;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 10:32
**/
/**
*
* @DBHelper 数据的连接、关闭、编译sql语句等操作
*
* **/
public class DBHelper {
public static final String URL = "jdbc:mysql://localhost:3306/xialiao1?useUnicode=true&&characterEncoding=utf8&&useSSL=true";
public static final String CLASSNAME = "com.mysql.jdbc.Driver";
public static final String USER = "root";
public static final String PASSWORD = "hello1";
public static Connection conn = null;
public static PreparedStatement pst = null;
// 加载驱动、连接成功的方法
public DBHelper(String sql){
try {
// 1. 加载驱动
Class.forName(CLASSNAME);
System.out.println("加载成功");
// 2.连接数据库
conn = DriverManager.getConnection(URL,USER,PASSWORD);
System.out.println("连接成功");
// 3.编译SQL语句
pst = conn.prepareStatement(sql);
}catch (Exception e){
e.printStackTrace();
}
}
public DBHelper() {
}
// 关闭连接
public void close(){
if (this.conn!=null){
try {
this.pst.close();
this.conn.close();
}catch (Exception e){
e.printStackTrace();
}
}
}
}Publish.java
package com.jju.xl.xialiao.bean;
import java.util.Date;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 10:15
**/
public class Publish {
private int id;
private String nickname;
private String date;
private String content_txt;
private String content_img;
private String icon;
private String sign;
public Publish(int id, String nickname, String date, String content_txt, String content_img, String icon, String sign) {
this.id = id;
this.nickname = nickname;
this.date = date;
this.content_txt = content_txt;
this.content_img = content_img;
this.icon = icon;
this.sign = sign;
}
public Publish() {
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getContent_txt() {
return content_txt;
}
public void setContent_txt(String content_txt) {
this.content_txt = content_txt;
}
public String getContent_img() {
return content_img;
}
public void setContent_img(String content_img) {
this.content_img = content_img;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public String getSign() {
return sign;
}
public void setSign(String sign) {
this.sign = sign;
}
}User.java
package com.jju.xl.xialiao.bean;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 9:53
**/
public class User {
private int id;
private String username;
private String password;
private String nickname;
private String icon;
public User(int id, String username, String password, String nickname, String icon) {
this.id = id;
this.username = username;
this.password = password;
this.nickname = nickname;
this.icon = icon;
}
public User() {
}
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;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
}PublishDaoImpl.java
package com.jju.xl.xialiao.dao.impl;
import com.jju.xl.xialiao.bean.Publish;
import com.jju.xl.xialiao.dao.PublishDao;
//import com.jju.xl.xialiao.util.DBHelper;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 10:00
**/
public class PublishDaoImpl implements PublishDao {
@Override
public void insertPublish(Publish publish) {
com.jju.xl.utill.DBHelper db = new DBHelper("insert into publish(nickname,date,content_txt,content_img,sign) value(?,?,?,?,?)");
try {
db.pst.setString(1,publish.getNickname());
db.pst.setString(2,publish.getDate());
db.pst.setString(3,publish.getContent_txt());
db.pst.setString(4,publish.getContent_img());
db.pst.setString(5,publish.getSign());
} catch (SQLException e) {
e.printStackTrace();
}finally {
db.close();
}
}
@Override
public void deletePublish(String sign) {
}
@Override
public List<Publish> queryAllPublish() {
// 实例化集合
ArrayList<Publish> list = new ArrayList<>();
// select publish.nickname,publish.date,publish.content_txt.publish_img,publish_sign,user.icon from publish,user where publish.nickname =user.nickname;
DBHelper db = new DBHelper("select publish.nickname,publish.date,publish.content_txt,publish.content_img,publish.sign,users.icon from publish,users where publish.nickname=users.nickname;");
try {
ResultSet resultSet = db.pst.executeQuery();
while (resultSet.next()){
Publish publish = new Publish();
publish.setNickname(resultSet.getString("nickname"));
publish.setDate(resultSet.getString("date"));
publish.setContent_txt(resultSet.getString("content_txt"));
publish.setContent_img(resultSet.getString("content_img"));
publish.setSign(resultSet.getString("sign"));
publish.setIcon(resultSet.getString("icon"));
list.add(publish);
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
db.close();
}
return list;
}
@Override
public List<Publish> queryNickPublish(String nickname) {
return null;
}
}UserDaoImpl.java
package com.jju.xl.xialiao.dao.impl;
import com.jju.xl.xialiao.bean.User;
import com.jju.xl.xialiao.dao.UserDao;
//import com.jju.xl.xialiao.util.DBHelper;
//import com.jju.xl.xialiao.util.Result;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 9:55
**/
public class UserDaoImpl implements UserDao {
@Override
public User queryUser(User user) {
// 查询用户
com.jju.xl.utill.DBHelper db = new DBHelper("select * from users where username = '"+user.getUsername()+"'");
try {
ResultSet resultSet = db.pst.executeQuery();
user = new User();
while (resultSet.next()){
user.setId(resultSet.getInt("id"));
user.setUsername(resultSet.getString("username"));
user.setPassword(resultSet.getString("password"));
user.setNickname(resultSet.getString("nickname"));
user.setIcon(resultSet.getString("icon"));
}
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
db.close();
}
return user;
}
@Override
public void insertUser(User user) {
// 插入数据的语句
DBHelper db = new DBHelper("insert into users(nickname,username,password) value(?,?,?);");
try {
db.pst.setString(1,user.getNickname());
db.pst.setString(2,user.getUsername());
db.pst.setString(3,user.getPassword());
db.pst.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally {
db.close();
}
}
@Override
public void DataUpdate(User user) {
}
@Override
public int queryUserId(Integer id) {
return 0;
}
private class DBHelper extends com.jju.xl.utill.DBHelper {
public DBHelper(String s) {
super();
}
}
}-DBHELPER.java
package com.jju.xl.xialiao.dao.impl;
import com.jju.xl.xialiao.bean.User;
import com.jju.xl.xialiao.dao.UserDao;
//import com.jju.xl.xialiao.util.DBHelper;
//import com.jju.xl.xialiao.util.Result;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 9:55
**/
public class UserDaoImpl implements UserDao {
@Override
public User queryUser(User user) {
// 查询用户
com.jju.xl.utill.DBHelper db = new DBHelper("select * from users where username = '"+user.getUsername()+"'");
try {
ResultSet resultSet = db.pst.executeQuery();
user = new User();
while (resultSet.next()){
user.setId(resultSet.getInt("id"));
user.setUsername(resultSet.getString("username"));
user.setPassword(resultSet.getString("password"));
user.setNickname(resultSet.getString("nickname"));
user.setIcon(resultSet.getString("icon"));
}
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
db.close();
}
return user;
}
@Override
public void insertUser(User user) {
// 插入数据的语句
DBHelper db = new DBHelper("insert into users(nickname,username,password) value(?,?,?);");
try {
db.pst.setString(1,user.getNickname());
db.pst.setString(2,user.getUsername());
db.pst.setString(3,user.getPassword());
db.pst.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}finally {
db.close();
}
}
@Override
public void DataUpdate(User user) {
}
@Override
public int queryUserId(Integer id) {
return 0;
}
private class DBHelper extends com.jju.xl.utill.DBHelper {
public DBHelper(String s) {
super();
}
}
}PublishDao.java
package com.jju.xl.xialiao.dao;
import com.jju.xl.xialiao.bean.Publish;
import java.util.List;
public interface PublishDao {
// 添加
public void insertPublish(Publish publish);
// 删除 发布的标识号
public void deletePublish(String sign);
// 查询所有数据
public List<Publish> queryAllPublish();
// 根据昵称查询发表的内容
public List<Publish> queryNickPublish(String nickname);
}UserDao.java
package com.jju.xl.xialiao.dao;
import com.jju.xl.xialiao.bean.User;
public interface UserDao {
// 1.数据查询
public User queryUser(User user);
// 2.数据添加
public void insertUser(User user);
// 3.数据的修改
public void DataUpdate(User user);
// 4.根据ID查询
public int queryUserId(Integer id);
}PublishServiceImpl.java
package com.jju.xl.xialiao.service.impl;
import com.google.gson.Gson;
import com.jju.xl.xialiao.bean.Publish;
import com.jju.xl.xialiao.dao.impl.PublishDaoImpl;
import com.jju.xl.xialiao.service.PublishService;
//import com.jju.xl.xialiao.util.Result;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 10:45
**/
public class PublishServiceImpl implements PublishService {
@Override
public String Upload(HttpServletRequest req) {
com.jju.xl.utill.Result result = new Result();
// 获取对应的真实路径
String path = req.getServletContext().getRealPath("/icon");
Publish publish = new upload().upload_file(path,req);
//
if (publish.getContent_txt().equals("")){
result.setStatus("error");
result.setMessage("内容不能为空");
}else {
new PublishDaoImpl().insertPublish(publish);
result.setStatus("success");
result.setMessage("发表成功");
result.setTotal(new Gson().toJson(publish));
}
return new Gson().toJson(result);
}
@Override
public String queryByPublish() {
Result result = new Result();
List<Publish> list = new PublishDaoImpl().queryAllPublish();
System.out.println(list);
if (list.size()!=0){
result.setStatus("success");
result.setMessage("获取成功");
result.setTotal(new Gson().toJson(list));
}else {
result.setStatus("error");
result.setMessage("没有发表的瞎聊");
}
return new Gson().toJson(result);
}
@Override
public String queryNickname(String nickname) {
return null;
}
@Override
public String deletePublish(String sign) {
return null;
}
private class Result extends com.jju.xl.utill.Result {
}
private class upload {
public Publish upload_file(String path, HttpServletRequest req) {
return null;
}
}
}UserServiceImpl.java
package com.jju.xl.xialiao.service.impl;
import com.google.gson.Gson;
import com.jju.xl.xialiao.bean.User;
import com.jju.xl.xialiao.dao.impl.UserDaoImpl;
import com.jju.xl.xialiao.service.UserService;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 10:45
**/
public class UserServiceImpl implements UserService {
@Override
public String login(User user) {
com.jju.xl.utill.Result result = new com.jju.xl.utill.Result();
User user_dao = new UserDaoImpl().queryUser(user);
// 将数据访问拿到的数据集进行判断
if (user_dao.getUsername() != null){
if (user.getPassword().equals(user_dao.getPassword())){
// 当判断两次的密码相同,代表登陆验证成功,
// 传递成功的信息
result.setStatus("success");
result.setMessage("登陆成功");
// 成功之后将数据传递给前端界面
result.setTotal(new Gson().toJson(user_dao));
}else {
result.setStatus("error");
result.setMessage("密码错误");
}
}else {
result.setStatus("error");
result.setMessage("用户名不存在");
}
return new Gson().toJson(result);
}
@Override
public String register(User user) {
com.jju.xl.utill.Result result = new com.jju.xl.utill.Result();
// 要想注册 必须先查询
User user_dao = new UserDaoImpl().queryUser(user);
// 判断是否存在同名的用户
if (user_dao.getUsername()==null){
new UserDaoImpl().insertUser(user);
result.setStatus("success");
result.setMessage("注册成功");
}else {
result.setStatus("error");
result.setMessage("用户已存在");
}
return new Gson().toJson(result);
}
@Override
public String UpdatePwd(User user) {
return null;
}
@Override
public int queryById(Integer id) {
return 0;
}
}PublishService.java
package com.jju.xl.xialiao.service;
import javax.servlet.http.HttpServletRequest;
public interface PublishService {
// 发表业务
public String Upload(HttpServletRequest req);
// 查询所有用户
public String queryByPublish();
// 个人发表查询
public String queryNickname(String nickname);
// 删除个人的
public String deletePublish(String sign);
}UserService.java
package com.jju.xl.xialiao.service;
import com.jju.xl.xialiao.bean.User;
public interface UserService {
// 1.登陆业务
public String login(User user);
// 2.注册业务
public String register(User user);
// 3.修改密码业务
public String UpdatePwd(User user);
// 4.个人信息业务
public int queryById(Integer id);
}
PublishServlet.java
package com.jju.xl.xialiao.servlet;
import com.jju.xl.xialiao.service.impl.PublishServiceImpl;
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 java.io.IOException;
import java.io.PrintWriter;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 10:15
**/
@WebServlet("/xialiao/publish")
public class PublishServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 编码过滤
req.setCharacterEncoding("utf-8");
// 响应的编码进行过滤
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
// 实例化一个输出对象
PrintWriter printWriter = resp.getWriter();
// 请求的数据进行解析
String action = req.getParameter("action");
System.out.println(action);
switch (action){
case "publish":
printWriter.write(new PublishServiceImpl().Upload(req));
printWriter.flush(); //清除输出的缓存
printWriter.close(); //关闭对应的IO资源
break;
case "queryall_publish":
printWriter.write(new PublishServiceImpl().queryByPublish());
printWriter.flush(); //清除输出的缓存
printWriter.close(); //关闭对应的IO资源
break;
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doGet(req, resp);
}
}UserServlet.java
package com.jju.xl.xialiao.servlet;
import com.jju.xl.xialiao.bean.User;
import com.jju.xl.xialiao.service.impl.UserServiceImpl;
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 javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 10:17
**/
@WebServlet("/xialiao/user")
public class UserServlet extends HttpServlet {
// 请求方式 get post
//
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 编码过滤
req.setCharacterEncoding("utf-8");
// 响应的编码进行过滤
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
// 实例化一个输出对象
PrintWriter printWriter = resp.getWriter();
// 请求的数据进行解析
String action = req.getParameter("action");
// 登陆和注册
switch (action){
case "login":
User userL = new User();
userL.setUsername(req.getParameter("username"));
userL.setPassword(req.getParameter("password"));
// 验证输出的业务
printWriter.write(new UserServiceImpl().login(userL));
printWriter.flush(); //清除输出的缓存
printWriter.close(); //关闭对应的IO资源
break;
case "register":
User userR = new User();
userR.setNickname(req.getParameter("nickname"));
userR.setUsername(req.getParameter("username"));
userR.setPassword(req.getParameter("password"));
// 验证输出的业务
printWriter.write(new UserServiceImpl().register(userR));
printWriter.flush(); //清除输出的缓存
printWriter.close(); //关闭对应的IO资源
break;
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doGet(req, resp);
}
}Result.java
package com.jju.xl.xialiao.utill;
import java.util.List;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 10:40
**/
//信息管理工具类
public class Result {
private String status="success";
private String message = "";
private String total = "";
private List item = null;
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public String getTotal() {
return total;
}
public void setTotal(String total) {
this.total = total;
}
public List getItem() {
return item;
}
public void setItem(List item) {
this.item = item;
}
}upload.java
package com.jju.xl.xialiao.util;
import com.jju.xl.xialiao.bean.Publish;
import com.jju.xl.xialiao.bean.Publish;
import org.apache.tomcat.util.http.fileupload.FileItem;
import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.List;
/**
* @PACKAGE_NAME: xl
* @Author: bit
* @DATE: 2021-04-01
* @TIME: 10:45
**/
//文件上传,
public class upload {
public Publish upload_file(String path, HttpServletRequest req){
Publish publish = new Publish();
// 1.判断是否是多文件提交对象
if (!ServletFileUpload.isMultipartContent(req)){
System.out.println("无文件");
return null;
}
// 2.创建保存的文件目录
File file = new File(path);
// 3.验证目录是否存在
if (!file.exists()&&!file.isDirectory()){
file.mkdir(); // 4.创建
}
// 5.初始化配置
ServletFileUpload servletFileUpload = new ServletFileUpload(new DiskFileItemFactory());
servletFileUpload.setHeaderEncoding("utf-8");
// 6.解析请求对象：分解出提交的文本和File文件
try {
// parseRequest:解析
// ServletRequestContext:转换对象类型
List<FileItem> list = servletFileUpload.parseRequest(new ServletRequestContext(req));
// 7.循环遍历列表，获取文本和文件
for (FileItem item:list) {
// 8.判断文本类型 isFormField
if (item.isFormField()){
String name = item.getFieldName(); // 获取input的name属性
String value = item.getString("utf-8"); // 获取input的value属性
if (name.equals("publish-content-txt")){
System.out.println("内容："+value);
publish.setContent_txt(value);
}
if (name.equals("date")){
System.out.println("时间："+value);
publish.setDate(value);
}
if (name.equals("sign")){
System.out.println("标示："+value);
publish.setSign(value);
}
if (name.equals("nickname")){
System.out.println("昵称："+value);
publish.setNickname(value);
}
}else {//文件格式
// 9.获取文件名称 replace：剔除空格字符
String fileName = item.getName().replace(" ","");
// 10.如果为null，继续循环
if (fileName==null||fileName.equals("")){continue;}
publish.setContent_img(fileName);
// 11.通过IO流上传文件到 ../icon/img
InputStream is = item.getInputStream();
// 12.创建输出流
FileOutputStream os = new FileOutputStream(path+"/"+fileName);
// 13.创建缓存字节数组 长度1024
byte[] buffer = new byte[1024];
int len = 0;
// 14.循环读取和写入
while ((len = is.read(buffer))>0){
os.write(buffer,0,len);
}
os.close();
is.close();
}
}
//
}catch (Exception e){
e.printStackTrace();
}
return publish;
}
}
web部分：
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瞎聊APP-首页</title>
<link rel="stylesheet" type="text/css" href="css/home-style.css"/>
</head>
<body>
<!-- 头部 -->
<div class="head">
<p class="logout" id="logout">退出登陆</p>
<img src="img/icon.jpg" class="user-icon" >
<p class="nickname" id="nickname">昵称: 微笑纯属礼貌</p>
<div class="navigation">
<a href="#" id="queryAll">瞎聊圈</a>
<a href="#" id="queryNick">我的瞎聊</a>
</div>
</div>
<!-- 底部 -->
<div class="fart" id="fart">
<!-- 注解：可以先编写静态的死数据结构，切换动态注解 -->
<div class="fart-content">
<a id="delete">X</a>
<div class="fart-content-user">
<img src="img/icon.jpg" class="fart-content-user-icon" >
<div>
<p class="fart-content-user-name">微笑纯属礼貌</p>
<p class="fart-content-user-date">2020-2-02</p>
</div>
</div>
<div class="fart-content-pubish">
<p>XXXXXXXXXXXXXXXXXXXXXXX</p>
<img src="img/0.jpg" >
</div>
</div>
</div>
<a href="publish.html"><img src="img/publish.png" class="publish" id="publish" ></a>
</body>
</html>login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>瞎聊APP-登陆</title>
<link rel="stylesheet" type="text/css" href="css/login-style.css"/>
</head>
<body>
<!-- 登陆提交输入区域 -->
<img src="img/logo.png" class="logo">
<input type="text" name="" id="username" value="" placeholder="QQ号/手机号/邮箱" class="username"/>
<input type="password" name="" id="password" value="" placeholder="密码" class="password"/>
<button type="button" class="login" id="login">登陆</button>
<a href="#" class="nth-password">找回密码</a>
<a href="register.html" class="new-user">新用户</a>
</body>
<!-- 引入juqery -->
<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 点击登陆
document.getElementById("login").onclick = function(){
var username = document.getElementById("username").value
var password = document.getElementById("password").value
var config = {
method:"POST", //请求方式
url:"/xialiao/user", // 请求接口
async:true, // 异步\同步
data:{"action":"login","username":username,"password":password},// post请求提交参数对象,
dataType:"text", // 参数类型,
success:function (data) { // 当请求成功之后，回掉该函数，用于后续业务处理
//当请求成功之后,调用这个函数,提示登陆是否成功 在进行后续数据的处理
data = JSON.parse(data);
if (data.status == "success"){
user = JSON.parse(data.total)
// 将数据存储到浏览器的session中
sessionStorage.setItem("nickname",user.nickname)
// 进行页面跳转
window.location.href="home.html";
} else {
alert(data.message)
}
}
}
// 异步提交
$.ajax(config);
}
</script>
</html>publish.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瞎聊APP-发表</title>
<link rel="stylesheet" type="text/css" href="css/publish-style.css"/>
</head>
<body>
<!-- 表单：配合js使用FormData格式化，ajax异步提交 -->
<!-- enctype="multipart/form-data" 多文件提交 -->
<form id="form_file" enctype="multipart/form-data">
<div class="head">
<a href="#" class="cancle" id="cancle">取消</a>
<p class="title">瞎聊几句</p>
<a class="publish" id="publish">发表</a>
</div>
<div class="publish-content">
<textarea maxlength="50" required="required" placeholder="请输入瞎聊的鲜事..." class="publish-content-txt" id="publish-content-txt" name="publish-content-txt"></textarea>
</div>
<!-- 图片选择及缩略图显示 -->
<a href="javascript:;" id="a-upload" class="a-upload">
<input type="file" required="required" name="publish-content-img" id="publish-content-img" />点击这里上传图片
</a>
<div class="pic-show">
<img src="img/photo.png" id="pic-show">
</div>
</form>
</body>
<!-- 引入juqery -->
<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 1.取消回跳首页面
$("#cancle").click(function(){
window.location.href = "home.html";
});
// 2.显示缩略图
$("#publish-content-img").change(function(){
$("#pic-show").attr("src",URL.createObjectURL($(this)[0].files[0]));
});
// 3.点击发表异步请求
$("#publish").click(function(){
// 判断输入框不能为null
if ($("#publish-content-txt").val()=="") {
alert("不能输入为空...")
return false;
}
// FormData对象：序列化一个form表单，用于异步请求提交
// inpue.name = 索引 key input.value = 值 value
var forms = new FormData($("#form_file")[0]);
// sessionStorage.getItem 获取本地session的昵称
forms.append("nickname",sessionStorage.getItem("nickname"));
forms.append("date",new Date().getFullYear+"-"+(new Date().getMonth+1));
forms.append("sign",new Date().getTime()); // getTime获取世界时间毫秒
forms.append("action","publish"); // getTime获取世界时间毫秒
var config = {
method:"POST", //请求方式
url:"/xialiao/publish?action=publish", // 请求接口
async:true, // 异步\同步
data:forms,// post请求提交参数对象,
dataType:"text", // 参数类型,
cache:false,// 缓存
processData:false,// jquery不要处理发送的数据
contentType:false, // jquery不要去设置请求头部
success:function (data) { // 当请求成功之后，回掉该函数，用于后续业务处理
data = JSON.parse(data);
if (data.status=="success"){
alert(data.message)
window.location.href = "home.html";
} else{
alert(data.message)
}
}
}
// 异步提交
$.ajax(config);
});
</script>
</html>register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瞎聊APP-注册</title>
<link rel="stylesheet" type="text/css" href="css/login-style.css"/>
</head>
<body>
<!-- 注册提交输入区域 -->
<img src="img/logo.png" class="logo">
<input type="text" name="" id="nickname" value="" placeholder="昵称" class="username"/>
<input type="text" name="" id="username" value="" placeholder="QQ号/手机号/邮箱" class="username"/>
<input type="password" name="" id="password" value="" placeholder="密码" class="password"/>
<input type="password" name="" id="passwordT" value="" placeholder="确认密码" class="password"/>
<button type="button" class="login" id="register">注册</button>
</body>
<!-- 引入juqery -->
<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 点击登陆
document.getElementById("register").onclick = function(){
var nickname = document.getElementById("nickname").value
var username = document.getElementById("username").value
var password = document.getElementById("password").value
var passwordT = document.getElementById("passwordT").value
if (password != passwordT) {
return false;
}
var config = {
method:"POST", //请求方式
url:"/xialiao/user", // 请求接口
async:true, // 异步\同步
data:{"action":"register","nickname":nickname,"username":username,"password":password},// post请求提交参数对象,
dataType:"text", // 参数类型,
success:function (data) { // 当请求成功之后，回掉该函数，用于后续业务处理
data = JSON.parse(data);
if (data.status == "success"){
// 页面跳转
window.location.href = "login.html"
} else {
alert(data.message)
}
}
}
// 异步提交
$.ajax(config);
}
</script>
</html>