Web开发了一个完整精美的聊天室（登录部分引入了Vue技术）
前端JavaScript HTML CSS 为了减小JavaScript动态操作节点的开支消耗，引入了Vue技术
数据库 MySQL 保存聊天信息、用户名、用户密码。采用JDBC编程
后端 servlet 用会话session记忆每个用户状态信息
交互 前端与后端用Ajax交互，静态页面之间通过URL的查询字符部分传递数据(不敏感的）
登录部分我想实现一个登录与注册的一个互相切换（无页面跳转），抽象出来就是一堆HTML节点与另一堆的交替互换。如果用原生方法——JavaScript直接操作节点，这样不仅代码冗长且性能开支大，不宜采用。想到Vue里面有个内置组件component，倒是可以一试。
来看component语法是这样的→
在HTML里面定义好这个组件后，在JavaScript里面就要这么写了→
var register = {
template:"" +"
"+
"Register your username :
\n" +
"Register your password :
\n" +
" \n" +
" "
}
var login = {
template:"" +"
"+
"Login your username :
\n" +
"Login your password :
\n" +
" " +
" "
}
var app = new Vue({
el:"#back",//back为被挂载的节点id
components:{login,register},//字符串被解析成组件
data(){
return{view:"login"}
},
methods:{
shift(view){
this.view=view;
}
}
});注意到里面的组件对象是用一堆HTML代码组成的字符串，在vue对象里这些字符串会被解析成一堆节点并生成到el属性绑定的id所属的节点里，充当子节点。
另外还分享一下自己原创的两个样式（整个聊天室都有用到）
.buttonStyle{
height: 27px;
width: 80px;
border: 0;
background-color:#6C6C6C;
box-shadow:0 0 1px #272727,
0 0 10px 2px #3C3C3C,
0 0 10px 4px #4F4F4F;
border-radius: 4px;
font-family: Calibri;
font-weight: 800;
font-style: italic;
color: aqua;
cursor: pointer;
}
.buttonStyle:hover{
animation: buttonEffect 0.4s linear;
transition-timing-function: linear;
}
.buttonStyle:active{
transform: scale(1.2);
bottom: -3px;
transition-timing-function: ease-in-out;
}
@keyframes buttonEffect {
0%{background: radial-gradient(ellipse 20px 8px,white,black,black);}
20%{background: radial-gradient(ellipse 30px 12px,white,black,black);}
40%{background: radial-gradient(ellipse 40px 16px,white,black,black);}
60%{background: radial-gradient(ellipse 50px 20px,white,black,black);}
80%{background: radial-gradient(ellipse 60px 24px,white,black,black);}
100%{background: radial-gradient(ellipse 70px 280px,white,black,black);}
} 
.inputStyle{
width: 200px;
height: 30px;
background-color:#4F4F4F;
border-radius: 8px;
border-width: 5px 5px 5px 5px;
border-style: inset;
border-color: black;
font-family: "Droid Sans Mono Slashed";
font-weight: 300;
font-style: italic;
color: aqua;}
.inputStyle:focus{
background-color:black;
}
.inputStyle:hover{
animation: inputEffect 0.8s linear;
transition-timing-function: linear;
}
@keyframes inputEffect {
0%{border-top-color: aqua;
background: linear-gradient(to right,aqua,black 20%)}
25%{border-right-color: aqua;
background: linear-gradient(to right,aqua,black 40%)}
50%{border-bottom-color: aqua;
background: linear-gradient(to right,aqua,black 60%)}
75%{border-left-color: aqua;
background: linear-gradient(to right,aqua,black 80%)}
100%{border-color: cyan;
background: linear-gradient(to right,aqua,black 100%)}
}登录界面完整代码如下→
Welcome to Login page
No account you possess,please click here to register....
Click here to back to login....
效果图（那个层叠背景录制效果不佳，真实效果还需亲身体验）
聊天界面部分
Welcome to this page!
Every question you have will be solved
by exchange with others as enthusiastic
as you in this site!
Here you can even meet like-minded
people and become intimate friends.
servlet部分
package lee;
import java.io.IOException;
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.http.HttpSession;
import net.sf.json.JSONArray;
import java.util.ArrayList;
/**
* Servlet implementation class MSGcontroller
*/
@WebServlet("/MSGcontroller")
public class MSGcontroller extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public MSGcontroller() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
String withdraw=request.getParameter("withdraw");
String chatmassage=request.getParameter("chatmassage");
String username=request.getParameter("username");
HttpSession session=request.getSession();//得到这个请求对应的会话，如果无，该方法会自动创建一个
session.setAttribute("username", username);
response.setContentType("text/html;charset=UTF-8");
if(withdraw!=null)
{
manager.withdraw((String)session.getAttribute("username"));//在会话上绑定值，用以标识一个请求的状态信息
}
if(chatmassage!=null)
{username=(String)session.getAttribute("username");
manager.addChatmsg(username,chatmassage);}
ArrayList Buffer=manager.getBuffer();
JSONArray jsonarray=JSONArray.fromObject(Buffer);//list转化成JSONArarry
response.getWriter().println(jsonarray);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
package lee;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ZCcontroller")
public class ZCcontroller extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ZCcontroller() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username=request.getParameter("username");
String password=request.getParameter("password");
response.setContentType("text/html;charset=UTF-8");
if(!username.equals("") && !password.equals("") && username!=null && password!=null)
{if(manager.examinationZC(username))
{
manager.addmsg(username,password);
response.getWriter().println("欢迎<<"+username+">>加入我们的大家庭! ! "+"\n"
+"快去登录吧~❤❤~");}
else {response.getWriter().println("您心仪的用户名<<"+username+">>已经被别人先注册啦，请重新注册");
}}
else {response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("输入不能为空哦，请重新进行注册~~/(ㄒoㄒ)/~~");}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
package lee;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class DLcontroller
*/
@WebServlet("/DLcontroller")
public class DLcontroller extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DLcontroller() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
String username=request.getParameter("username1");
String password=request.getParameter("password1");
response.setContentType("text/html;charset=UTF-8");
if(!username.equals("") && !password.equals("") && username!=null && password!=null) {
if(manager.examinationDL(username, password)) {
response.getWriter().println("success");
}
else {response.getWriter().println("连自己的用户名和密码都不记得了吗，再想想吧");
}
}
else {
response.getWriter().println("输入不能为空哦，请重新进行登录");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
JDBC部分
package lee;
import java.sql.ResultSet;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.ArrayList;
class manager {
static private String driver="com.mysql.cj.jdbc.Driver";//数据库驱动类所对应的字符串
static private String URL="jdbc:mysql://localhost:3306/mydatabase?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8";
//URL语法格式如下
//jdbc:mysql:是固定的写法，后面跟主机名localhost，3306是默认的MySQL端口号
//serverTimezone=UTC是指定时区时间为世界统一时间
//useUnicode=true是指是否使用Unicode字符集，赋值为true
//characterEncoding=utf-8是指定字符编码格式为UTF8
static private Connection cnt=null;
static void initConnection() {//建立与数据库的连接
try {
Class.forName(driver);
cnt=DriverManager.getConnection(URL,"root","941593760s");
}
catch(SQLException e) {
e.printStackTrace();
}
catch(ClassNotFoundException e) {
e.printStackTrace();}
catch(Exception e) {
e.printStackTrace();
}}
static void addmsg(String username,String password) {//添加注册信息
if(cnt==null) {
initConnection();
}
try{
PreparedStatement ps=cnt.prepareStatement("insert into user values(?,?)");
ps.setString(1, username);
ps.setString(2, password);
ps.executeUpdate();
}
catch(SQLException e) {
e.printStackTrace();
}
catch(Exception e) {
e.printStackTrace();
}
}
static void addChatmsg(String username,String message) {//添加聊天记录
if(cnt==null) {
initConnection();
}
try{
PreparedStatement ps=cnt.prepareStatement("insert into messageLibrary (username,message) values(?,?)");
ps.setString(1, username);
ps.setString(2, message);
ps.executeUpdate();
}
catch(SQLException e) {
e.printStackTrace();
}
catch(Exception e) {
e.printStackTrace();
}
}
static boolean examinationDL(String username,String password) {//检验登录信息(密码与用户名)是否正确
if(cnt==null) {
initConnection();
}
try(
PreparedStatement ps=cnt.prepareStatement("select * from user where username=? and password=?"))
{ps.setString(1, username);
ps.setString(2, password);
ResultSet rs=ps.executeQuery();
if(rs.next()) {
return(true);}//登录成功
}
catch(Exception e) {
e.printStackTrace();
}
return(false);
}
static boolean examinationZC(String username) { //检验注册所用的用户名是否有重复 有重复返回false 无则返回true
if(cnt==null) {
initConnection();
}
try(
PreparedStatement ps=cnt.prepareStatement("select * from user where username=?"))
{ps.setString(1, username);
ResultSet rs=ps.executeQuery();
if(rs.next()) {
return(false);}//有重复的的名称，请重新注册(保证数据库里面的用户名唯一)
}
catch(Exception e) {
e.printStackTrace();
}
return(true);
}
static ArrayList getBuffer() {//将所有的聊天信息添加在一个list集合里面，用于JSON数据交互的媒介
if(cnt==null) {
initConnection();
}
ArrayList Buffer=new ArrayList();//在方法里面创建对象，保证线程并发安全
if(Buffer.size()==0)
{Buffer.add("");}
try(
PreparedStatement ps=cnt.prepareStatement("select * from messageLibrary"))
{
ResultSet rs=ps.executeQuery();
while(rs.next()) {
Buffer.add(rs.getString("username")+" : "+rs.getString("message"));
}
}
catch(Exception e) {
e.printStackTrace();
}
return(Buffer);
}
static void withdraw(String username) {//撤回消息
if(cnt==null) {
initConnection();
}
try( PreparedStatement ps1=cnt.prepareStatement("select * from messageLibrary where username=? order by id DESC limit 1");
PreparedStatement ps2=cnt.prepareStatement("delete from messageLibrary where id=?"))
{ ps1.setString(1, username);
ResultSet rs=ps1.executeQuery();
if(rs.next()) {
int id=rs.getInt("id");
ps2.setInt(1, id);
ps2.executeUpdate();
}
}
catch(Exception e) {
e.printStackTrace();
}
}
}