数据库与前端的连接
bootstrap全局css样式链接mysql数据库的搭建后端node.js前端技术栈：后端 Node.js 数据库 mysql 前端 jquery数据库的搭建1.新建数据库2.添加表单3.根据所需内容设计表样式后端node.js本次使用express模块作为搭建express/mysql/multer都是第三方模块，都需要下载后再进行使用//expers框架const express=requi
·
技术栈：后端 Node.js 数据库 mysql 前端 jquery
数据库的搭建
1.新建数据库，本次数据库名字为menu
2.添加表单menu_goods/menu_type/menu_user
- 注意格式为_
3.根据所需内容设计表样式
4.在与后端进行连接时，需要保持运行状态
后端node.js
本次使用express模块作为搭建
- express/mysql/multer都是第三方模块，都需要下载后再进行使用
- 图片一
//experss框架
const express=require("express")
//express的使用
const app=express()
//fs模块
const fs=require("fs")
//mysql模块
const mysql=require("mysql")
//连接到mysql服务器
const db=mysql.createConnection({
host:"localhost",//host主机地址本文用的是本机地址，也可以用公司ip192.168.1.109
user:"root",//用户名
password:"",//密码
database:"menu"//链接的数据库
})
//post文件全域操作
const bodyparser=require("body-parser")
app.use(bodyparser.urlencoded({
extended:false
}))
//引入图片接受的模块multer
const multer=require("multer")
let m=multer({
dest:"./public/images"//图片保存路
})
app.use(m.any())//全局接受图片
//post请求注册页面
app.post("/reg",(req,res)=>{
let {username,upass}=req.body
//fs模块重命名.因为multer模块在保存后不加图片后缀，导致图片无法显示。具体参考图片一所示
// fs.rename()
let oldname="./public/images/"+req.files[0].filename
let newname=oldname+"."+req.files[0].originalname.split(".")[1]
fs.rename(oldname,newname,(err,data)=>{
if(err){
console.log("数据访问失败")
}else{
console.log("成功")
}
})
//注册逻辑，查询语句
db.query("select * from menu_user where username='"+username+"'",(err,data)=>{
if(err){
console.log(err)
res.send("服务器查询失败")
}else{
if(data.length>0){
res.send("用户已存在，注册失败")
}else{
db.query("INSERT INTO `menu_user` (`id`, `username`, `upass`, `uimg`) VALUES (NULL, '"+username+"', '"+upass+"', '"+newname+"');",(err,data)=>{
if(err){
res.send({message:"服务器数据注册成功"})
}else{
res.send({message:"服务器数据插入成功"})
}
})
}
}
})
})
//post登录页面
app.post("/login",(req,res)=>{
let {username,upass}=req.body
//登陆语句
// console.log(username)
// console.log(upass)
db.query("select * from menu_user where username='"+username+"'",(err,data)=>{
if(err){
res.send({message:"服务器端错误"})
}else{
// console.log(data,2222)
if(data.length>0){
db.query("select * from menu_user where upass='"+upass+"'",(err,data)=>{
if(err){
res.send({message:"服务器密码请求错误"})
}else{
if(data.length>0){
res.send({message:"登录成功"})
}else{
res.send({message:"登录失败,密码错误"})
}
}
})
}else{
res.send({message:"没有此用户，请重新输入"})
}
}
})
})
app.use(express.static("./public"))
app.listen(8080)
前端
本次使用的是formdata进行数据交互
<body>
<form action="http://localhost:8080/login" method="post" enctype="multipart/form-data" id="form">
<p>
名字：<input type="text" name="username"/>
</p>
<p>
密码：<input type="text" name="upass"/>
</p>
<button>登录</button>
</form>
</body>
<script>
//使用formData进行数据交互
var form=document.getElementById("form")
form.onsubmit=function(){
//1.创建异步对象xml
let f2=new FormData(form)
let xhr=new XMLHttpRequest()
//2.创建连接
xhr.open(form.method,form.action,true)
//3.发送请求
xhr.send(f2)
//数据交互监听请求的状态变化
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
let result=JSON.parse(xhr.responseText)
console.log(result)//返回数据
}
}
return false//阻止默认事件
}
</script>
无需安装部署，在线快速体验 Byzer
更多推荐
14
0- 0
已为社区贡献1条内容
所有评论(0)