数据库与前端的连接

一郭炖不下%

已于 2022-09-07 22:13:27 修改

阅读量1.3w

点赞数 14

文章标签： node.js 前端 mysql

于 2022-05-07 10:48:04 首次发布

本文链接：https://blog.youkuaiyun.com/m0_69327201/article/details/124625765

版权

mysql（菜品管理系统）

数据库的搭建
后端node.js
前端

技术栈：后端 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>