1.引入mysql模块
1 /**
2 * 1.引入mysql模块
3 * 2.创建连接池对象
4 * 3.导出连接池对象
5 */
6 const mysql = require('mysql');
7 var pool = mysql.createPool({
8 host:'localhost',
9 port:'3306',
10 user:'xxx',
11 password:'xxx',
12 database:'xxx',
13 connectionLimit:20
14 });
15 module.exports = pool;
View Code
2.引入express模块
1 //引入express模块
2 const express = require('express');
3 //引入路由器
4 const userRouter = require('./routes/user.js');
5 const productRouter = require('./routes/product.js');
6 const myproRouter = require('./routes/mypro.js');
7 const demoRouter = require('./routes/demo.js');
8 const bodyParser = require('body-parser');
9 //创建web服务器
10 var server = express();
11 //监听端口
12 server.listen(8080);
13 //托管静态资源
14 server.use(express.static('public'));
15 server.use(express.static('ajaxdemo'));
16 server.use(express.static('mypro'));
17 server.use(express.static('js'));
18 server.use(express.static('css'));
19 server.use(express.static('bootstrap'));
20 server.use(express.static('img'));
21 //使用body-parser中间件
22 server.use(bodyParser.urlencoded({
23 extended:false
24 }));
25 //挂载路由器
26 server.use('/user',userRouter);
27 server.use('/demo',demoRouter);
View Code
3.导出路由
1 /*
2 1.引入express
3 2.创建路由器对象
4 3.添加路由
5 4.导出路由器
6 5.引入连接池对象
7 6.将数据插入到数据库中
8 */
9 const express = require('express');
10 const pool = require('../pool.js');
11 var router = express.Router();
12 //查看所有数据
13 router.get('/sele', (req, res) => {
14 //验证数据是否为空
15 var obj = req.query;
16 //console.log('query',obj);
17 for(var key in obj) {
18 if(!obj[key]) {
19 res.send('数据不能为空');
20 return;
21 }
22 }
23 var sqlselect = 'select * from xxx';
24 pool.query(sqlselect,(err, result) => {
25 if(err) throw err;
26 if(result.length > 0) {
27 res.send(result);
28 }
29 });
30 });
31 //查看用户名
32 router.get('/seleUname', (req, res) => {
33 //验证数据是否为空
34 var obj = req.query;
35 //console.log('query',obj);
36 for(var key in obj) {
37 if(!obj[key]) {
38 res.send('数据不能为空');
39 return;
40 }
41 }
42 var sqlselect = 'select uname from xxx where uname = ?';
43 pool.query(sqlselect,[obj.uname],(err,result) => {
44 if(err) throw err;
45 if(result.length > 0) {
46 console.log(result.tength);
47 res.send('1');
48 }else{
49 res.send('0');
50 }
51 });
52 });
53 router.post('/reg', (req, res) => {
54 var obj = req.body;
55 console.log('body',obj);
56 for(var key in obj){
57 if(!obj[key]){
58 res.send('内容不能为空');
59 return;
60 }
61 }
62 var selectInsert = 'insert into xxx set ?';
63 pool.query(selectInsert, [obj], (err, result) => {
64 if(err) throw err;
65 if(result.affectedRows > 0) {
66 console.log(result.affectedRows)
67 res.send('1');
68 } else {
69 res.send('0');
70 console.log(result.affectedRows)
71 }
72 });
73 });
74 //导出路由器
75 module.exports = router;
View Code
4.html页面
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 <!--<link rel="stylesheet" type="text/css" href="/code.css" />-->
8 <script src="/reg.js" type="text/javascript" charset="utf-8"></script>
9 <script src="/jquery.min.js" type="text/javascript" charset="utf-8"></script>
10 <script src="/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
11 <link rel="stylesheet" type="text/css" href="/bootstrap.css" />
12 <style type="text/css">
13 *{
14 margin: 0;
15 padding: 0;
16 }
17 body{
18 background: url(/true.png) no-repeat;
19 background-size: cover;
20 overflow-x: hidden;
21 overflow-y: hidden;
22 }
23 #box{
24 width: 700px;
25 height: 500px;
26 left: 50%;
27 top: 50%;
28 margin-left: -350px;
29 margin-top: -250px;
30 position: absolute;
31 }
32 </style>
33 </head>
34
35 <body>
36 <div id="box">
37 <div class="container">
38 <div class="row clearfix">
39 <div class="col-md-10 column">
40 <form class="form-horizontal" role="form">
41 <div class="form-group">
42 <label for="inputEmail3" class="col-sm-2 control-label">UserName:</label>
43 <div id="uname_box" class="col-sm-6">
44 <input id="uname" name="uname" type="text" class="form-control" placeholder="Please enter a user name" />
45 </div>
46 <div id="p1">
47
48 </div>
49 </div>
50 <div class="form-group">
51 <label for="inputPassword3" class="col-sm-2 control-label">UserPassword:</label>
52 <div class="col-sm-6">
53 <input id="upwd" name='upwd' type="password" class="form-control" placeholder="Please enter your user password"/>
54 </div>
55 <div id="p2">
56
57 </div>
58 </div>
59 <div class="form-group">
60 <label for="inputPassword3" class="col-sm-2 control-label">ConfirmPassword:</label>
61 <div class="col-sm-6">
62 <input id="upwd1" name='upwd' type="password" class="form-control" placeholder="Confirm user password"/>
63 </div>
64 <div id="p3">
65
66 </div>
67 </div>
68 <div class="form-group">
69 <label for="inputPassword3" class="col-sm-2 control-label">Email:</label>
70 <div class="col-sm-6">
71 <input id="email" name="email" type="text" class="form-control" placeholder="Please enter user email"/>
72 </div>
73 <div id="p4">
74
75 </div>
76 </div>
77 <div class="form-group">
78 <label for="inputPassword3" class="col-sm-2 control-label">Tel:</label>
79 <div class="col-sm-6">
80 <input id="phone" name="phone" type="text" class="form-control" placeholder="Please enter the user's mobile phone number"/>
81 </div>
82 <div id="p5">
83
84 </div>
85 </div>
86 <div class="form-group">
87 <div class="col-sm-offset-2 col-sm-8">
88 <button id="reg" type="submit" class="btn col-lg-9 btn-info">Register</button>
89 </div>
90 </div>
91 </form>
92 </div>
93 </div>
94 </div>
95 </div>
96 </body>
97 </html>
View Code
5.js前端验证以及Ajax异步交互实现用户注册
1 window.onload = function() {
2 uname.onfocus = notNull;
3 uname.onblur = notNull;
4 upwd.onfocus = notNull;
5 upwd.onblur = notNull;
6 upwd1.onfocus = notNull;
7 upwd1.onblur = notNull;
8 email.onfocus = notNull;
9 email.onblur = notNull;
10 phone.onfocus = notNull;
11 phone.onblur = notNull;
12 upwd.onfocus = passw;
13 upwd.onblur = passw;
14 upwd1.onfocus = passw;
15 upwd1.onblur = passw;
16 //声明一个全局的xhr
17 var xhr = new XMLHttpRequest();
18 var flag = true;
19 //验证是否为空并且用户名是否已经存在
20 function notNull() {
21 if(!uname.value) {
22 p1.innerHTML = '用户名不能为空';
23 return;
24 } else {
25 p1.innerHTML = '';
26 getUname();
27
28 }
29 if(!upwd.value) {
30 p2.innerHTML = '密码不能为空';
31 return;
32 } else {
33 p2.innerHTML = '';
34 }
35 if(!upwd1.value) {
36 p3.innerHTML = '确认密码不能为空';
37 return;
38 } else {
39 p3.innerHTML = '';
40 }
41 if(!email.value) {
42 p4.innerHTML = '邮箱不能为空';
43 return;
44 } else {
45 p4.innerHTML = '';
46 }
47 if(!phone.value) {
48 p5.innerHTML = '手机号不能为空';
49 return;
50 } else {
51 p5.innerHTML = '';
52 }
53 }
54 //验证用户名是否已存在
55 function getUname() {
56 xhr.onreadystatechange = function() {
57 if(xhr.readyState == 4 && xhr.status == 200) {
58 var result = xhr.responseText;
59 console.log(result);
60 if(result === '1') {
61 p1.innerHTML = '用户名已存在';
62 //如果用户名已存在，该按钮处于禁用状态
63 reg.setAttribute('disabled','true');
64 } else {
65 p1.innerHTML = '';
66 reg.disabled = false;
67 }
68 }
69 }
70 var url = "/demo/seleUname?uname=" + uname.value;
71 xhr.open('get', url, true);
72 xhr.send(null);
73 }
74 //密码验证
75 function passw() {
76 if(upwd.value != upwd1.value) {
77 p3.innerHTML = '两次密码不一致';
78 }
79 }
80
81 reg.onclick = function() {
82 //查询所有用户信息
83 xhr.onreadystatechange = function() {
84 if(xhr.readyState == 4 && xhr.status == 200) {
85 var result = xhr.responseText;
86 console.log(JSON.parse(result));
87 }
88 }
89 var url = "/demo/sele";
90 xhr.open('get', url, true);
91 xhr.send(null);
92
93 //执行注册
94 xhr.onreadystatechange = function() {
95 if(xhr.readyState == 4 && xhr.status == 200) {
96 var result = xhr.responseText;
97 if(flag) {
98 getUname();
99 if(result === '1') {
100 alert('success');
101 setTimeout(()=>{
102 location.href = 'http://localhost:8080/login_user.html';
103 });
104 } else {
105 alert('error');
106 }
107 }
108
109 }
110 }
111 var str = "/demo/reg";
112 xhr.open('post', str, true);
113 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
114 var formdata = "uname=" + uname.value + "&upwd=" + upwd.value + "&email=" + email.value + "";
115 xhr.send(formdata);
116 }
117 }
View Code
根据官网 入门 express
java叫接口control什么的app.get.post等等都是请求方式我们可...
为了前端丢进去的时候可以直接判断中间件就是经过了这个就会...
Express 文件的上传和下载
运行命令下载app.js 增加中间件。
基本模板来的 后面用后就有什么加什么都行。