基于JavaScript+JSON +JQuery Ajax实现的项目

基于JavaScript+JSON +JQuery Ajax实现的注册登陆登出功能

var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var mysqlConfig = require('../DB/mysqlConfig')
var pool = mysql.createPool(mysqlConfig.mysql)


/* GET users listing. */
router.get('/', function (req, res, next) {
  // res.send('main', { title: 'Express' });
  res.render('index', { title: 'Express' })
});
router.get('/main', function (req, res, next) {
  res.render('main', { title: 'Express' })
  // res.send('main', { title: 'Express' });
  // var findPattern = {user:"default"}
  // var cookie = req.headers.cookie || '';
  // cookie = cookie.split(";");
  // var cookieUser = "default",
  // sessionUser = "default";
  // console.info("main界面的"+req.session)
});
router.get('/infoshow', function (req, res, next) {
  res.render('infoshow', { title: 'Express' })
  // res.send('main', { title: 'Express' });
  // var findPattern = {user:"default"}
  // var cookie = req.headers.cookie || '';
  // cookie = cookie.split(";");
  // var cookieUser = "default",
  // sessionUser = "default";
  // console.info("main界面的"+req.session)
});
router.get('/getLoginInformation', function (req, res, next) {
  var sessionUser = ''
  console.log("login" + req.session.isLogin)
  if (req.session.status && req.session.status.isLogin == true) {
    console.log("login为true")
    sessionUser = req.session.status.user;
    res.json({
      user: sessionUser,
      msg: 200
    })
  } else {
    res.json({
      msg: 300
    })
  }
});
//获取用户个人信息
router.get('/getUserInformation', function (req, res, next) {
  console.log(req.query)
  var username = req.query.name
  pool.getConnection(function (err, connection) {
    sqlSenetence = 
    connection.query(sqlSenetence, function (err, result) {
      if (result) {
        res.json({
          code: 200,
          msg: "注册成功"
        })
      } else {
        res.json({
          code: 400,
          msg: '注册失败'
        })
      }
    })
    connection.release()
  })
  
});
//跳转注册页面
router.get('/register', function (req, res, next) {
  // res.send('main', { title: 'Express' });
  res.render('register', { title: 'Express' })
});
//注册成功
router.post('/registerSuccessful', function (req, res, next) {
  console.log(req.body)
  pool.getConnection(function (err, connection) {
    sqlSenetence = `INSERT INTO user(username,password,email) VALUES('${req.body.name}','${req.body.pass}','${req.body.email}')`;
    connection.query(sqlSenetence, function (err, result) {
      if (result) {
        res.json({
          code: 200,
          msg: "注册成功"
        })
      } else {
        res.json({
          code: 400,
          msg: '注册失败'
        })
      }
    })
    connection.release()
  })
  // res.send('main', { title: 'Express' });
  // res.render('register',{title: 'Express'})
});
router.get('/checkUsername', function (req, res, next) {
  console.log(req.query)
  var username = req.query.name
  console.info(username)
  pool.getConnection(function (err, connection) {
    sqlSenetence = `select * from user where username = '${username}'`;
    connection.query(sqlSenetence, function (err, result) {
      console.info("res" + result)
      if (result.length >= 1) {
        res.json({
          code: 400,
          msg: "该用户名已存在"
        })
      } else {
        res.json({
          code: 200,
          msag: "可以使用"
        })
      }
    })
    connection.release()
  })
  // res.send('main', { title: 'Express' });
  // res.render('register',{title: 'Express'})
});
router.get('/loginOut', function (req, res) {
  req.session.destroy(function (err) {
    if (err){
      res.json({
        msg:"登出失败"
      })
    }else{
      res.json({
        code: 200,
        msg: "登出成功"
      })
    }  
  })
})
router.post('/login', function (req, res, next) {
  console.info(req.session)

  console.log(req.body)
  var username = req.body.name;
  var password = req.body.pass;
  pool.getConnection(function (err, connection) {
    sqlSenetence = `select * from user where username = '${username}'and password = '${password}'`;
    connection.query(sqlSenetence, function (err, result) {
      console.log(err)
      if (result.length == 1) {
        req.session.status = {
          user: username,
          isLogin: true
        }
        res.json({
          code: 200,
          msg: "账号密码正确"
        })
        // res.setHeader
        // 
      } else {
        res.json({
          code: 400,
          msg: '账号或者密码不正确'
        })
      }
    })
    // res.cookie("账号","123")
  })
})
module.exports = router;

 

 

 

 HTML样式代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>京工商大学研究生考试报名网站</title>
	<link rel="stylesheet" href="/css/style.css" />
</head>

<body>
	<!--header start-->
	<div class="header_wrap">
		<div class="header">
			<span class="wel_word fl">欢迎访问北京工商大学研究生考试报名网站！</span>
			<span class="corner fr">
				<ul id="nameshow">
					<li class="user_li">
						<div class="user_handle">
							<a href="">个人中心</a>
							<a href="">上传资料</a>
							<a href="">我的话题</a>
							<a href="">我的下载</a>
							<a href="javascript:void(0);">
					<li id="LoginName"></li>
					<li id="LoginOut"><a>登出</a></li>

		</div>
		</li>
		</ul>
		<div class="clear"></div>
		</span>
		<div class="clear"></div>
	</div>
	</div>
	<div class="nav_menu">
		<a href="index.html" class="logo fl"><img src="/images/logo.png" /></a>
		<div class="nav_list fr">
			<ul id="nav" class="nav clearfix">
				<li class="nLi"></li>
				<li class="nLi">
					<h3><a href="about.html">考研须知</a></h3>
				</li>
				<li class="nLi">
					<h3><a href="news.html">新闻热点</a></h3>
					<ul class="sub">
						<li><a href="news.html">教育新闻</a></li>
						<li><a href="news.html">工作动态</a></li>
					</ul>
				</li>
				<li class="nLi">
					<h3><a href="topic.html">考研论坛</a></h3>
				</li>
				<li class="nLi">
					<h3><a href="course.html">课程资源</a></h3>
					<ul class="sub">
						<li><a href="course.html">课改介绍</a></li>
						<li><a href="course1.html">改革课程</a></li>
					</ul>
				</li>
				<li class="nLi">
					<h3><a href="#">教学资源</a></h3>
					<ul class="sub">
						<li><a href="#">文献资料</a></li>
						<li><a href="#">学习资料</a></li>
						<li><a href="#">教学视频</a></li>
					</ul>
				</li>

				<li class="nLi">
					<h3><a href="schoolmate.html">考试安排</a></h3>
				</li>
				<li class="nLi">
					<h3><a href="exam.html">考试必备</a></h3>
					<ul class="sub">
						<li><a href="exam.html">考试安排</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
	<!--inside content start-->
	<div class="inside_wrap">
		<div class="inside_con">
			<div class="adr">
				<a href="index.html">首页</a>&nbsp;>&nbsp;报名须知
			</div>
			<div class="inside_box">
				<div class="sidemenu fl">
					<div class="s_title">报名须知</div>
					<ul>
						<li class="on"><a href="/user/info">个人资料</a></li>
						<li><a href="course1.html">考试报名</a></li>
						<li><a href="course1.html">报名表打印</a></li>
					</ul>
				</div>
				<div class="ic_wrap fr">
					<h1 align="center">个人信息表</h1><br>

					<table border="1" cellspacing="0" align="center">

						<tr>
							<th width="100" height="40" bgcolor="#FFEBCD " align="center">姓名</th>
							<th width="150" height="40" id="name"></th>
							<th width="100" height="40" bgcolor="#FFEBCD " align="center">性别</th>
							<th width="150" height="40" id="sex"></th>
							<th width="150" height="40" rowspan="5" id="photo">照片</th>
						</tr>
						<tr>
							<td width="150" height="40" bgcolor="#FFEBCD " align="center">出生日期</td>
							<td width="150" height="40" id="birth"></td>
							<td width="150" height="40" bgcolor="#FFEBCD " align="center">是否应届生</td>
							<td width="150" height="40" id="grad"></td>

						</tr>
						<tr>