小编给大家分享一下Ajax如何实现注册并选择头像后上传功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
在初次接触Ajax后,我们做了一个crm训练的项目,大多数小组都有注册用户这一项,但是都忽略掉了一个功能,那就是,很多网站的注册是可以上传头像的,在这里我做了一个在已有的头像数组里选择图片上传作头像的小型crm(当然,可以从本地照片上传并裁剪的那种我还没做出来,不过只要有时间我就会研究的,相信时间也不会太久的)。
1。先写出一个注册页面以及css样式我命名为regist.html, css文件名为regist。css,在这里我省略掉具体代码,上图看效果吧:(页面有点丑,别介意)
还有一个用于显示添加后记录的信息。html页面,此时只有表头:
2。写出创建连接池模块(dbutil。js),也即是建立链接的js文件,我在这里建的是users_infor表,使用的数据库是测试。
var mysql =,要求(& # 39;mysql # 39;); var pool =, mysql.createPool ({ 时间:host & # 39; localhost # 39; 时间:user & # 39;根# 39; 时间:password & # 39; lovos # 39; 数据库:“test", 端口:3306 }); exports.pool=池;
3。写出模块用来连接数据库,处理(增删改查)用户数据(Userdao。js),里面把操作数据库的函数一律命名为getAllUser:
var db =,要求(“. ./DBUtil/dbutil.js");//var conn =, db.conn; var mypool =db.pool; function getAllUser (sql、参数、有趣){ mypool.getConnection(函数(呃,康涅狄格州){ conn.query (sql、参数、有趣的); conn.end (); }) } exports.getAllUser=getAllUser;
4。写出操作数据库的模块,也即是对数据表的增,删,改,查(Userservice。js):
var dao =,要求(“. ./刀/UserDao.js");
定义注册函数,即往数据表user_infor添加新纪录的函数
exports.regist =,函数(点播,res) { var 参数; if (req.method ==,“get", | |, req.method ==,“get"), { (req.query.username arg =,,, req.query.pwd,, req.query.pics); },{else (req.body.username arg =,,, req.body.pwd,, req.body.pics); } var sql =,“insert into user_infor (u_name、u_pwd u_pics),值(?,?,?)“; dao.getAllUser (sql,参数,,function (呃,,结果),{ if (错),{ console.log(错); },{else if (result.affectedRows> 0) { res.sendfile(“。/静态/html/information.html") },{else res.sendfile(“。/静态/html/regist.html") } } }) }
定义显示信息。html页面所有记录的函数,即查询user_infor表所有内容的函数
exports.listAll=function(点播,res) { var sql =,,, select *,得到user_infor “; dao.getAllUser (sql, function (呃,,结果,,字段),{ if (err) { console.log(错); },{else if (result.length> 0) { res.json(结果);console.log(结果) },{else res.send (“failed"); } } }) }
5。当然,不要忘了引入2个模块表达和mysql,新建一个文件夹node_module,将这2个模块包含在其中。
6。然后,就是写一个主要的js文件了(主要。js),也即是跟用户交互的js:
var http =,要求(“http"); var express =,要求(“express"); var userser =,要求(“。/线路/UserService.js"); var url=,要求(“url"); var app =,表达(); app.use (express.cookieParser ()); app.use (express.session ({ 秘密:“123456”, 名称:“userLogin", 饼干:{maxAge: 9999999} })) app.set (“port", 8888); app.use (express.static (__dirname +“/static")); app.use (express.methodOverride ()); app.use (express.bodyParser ()); app.post (“/regist", userser.regist); app.post (“/list", userser.listAll); http.createServer (app) .listen (app.get (“port")、功能(){ console.log(“服务启动成功!监听“+ app.get (“port") +“端口“); })Ajax如何实现注册并选择头像后上传功能