利用node.js框架express简单搭服务器+连接mySQL数据库+原生js发送ajax请求

首先需要安装的程序:npm包管理工具、 node.js服务器

1.利用node.js框架express托管静态资源

npm init -y 初始化项目

 npm i express安装依赖

node server.js   小黑窗运行命令行

serve.js服务器
main 页面静态文件

const express = require('express')
const app = express()
//资源托管
app.use('/', express.static('main'))

app.listen(8080,()=>{
    console.log('8080端口,服务器正在运行中...');
})

2.连接mySQL数据库

 npm i mysql安装依赖

mySQL.js

const mysql = require('mysql')
let connection = mysql.createConnection({ host: 'localhost', port: '3306', user: 'root', password: 'root', database: 'firstData' });
connection.connect(err => {
    if (err) {
        console.log(err)
        return
    }
    console.log('连接数据库成功!');
})

3.原生js发送ajax请求


//get请求
		let XHR = new XMLHttpRequest();
		XHR.open('get',"http://localhost:8080/login?name='11'&age=12")
		 XHR.send()
		 XHR.onreadystatechange=function(){
		 	console.log(XHR)	
		    return 
		 }


//post请求,json格式
		let XHR = new XMLHttpRequest();
		XHR.open('post',"http://localhost:8080/add")
        XHR.setRequestHeader('Content-Type','application/json')
		XHR.send(JSON.stringify({name:'aa',age:12}))
		XHR.onreadystatechange=function(){
			console.log(XHR)
			return 
		}

//post请求,键值对格式
		let XHR = new XMLHttpRequest();
		XHR.open('post',"http://localhost:8080/add")
        XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
		XHR.send('name='aa'&age=12')
		XHR.onreadystatechange=function(){
			console.log(XHR)
			return 
		}

4.node.js写接口

const express = require('express')
const app = express()
const cors = require('cors')
const connection  = require ('./mysql.js')
//下边的这一句的功能是,将请求体中携带的普通键值对或JSON字符串解析出来,保存在req.body中
app.use(express.urlencoded())
app.use(express.json())
// 解决跨域问题
app.use(cors())
//资源托管
app.use('/', express.static('main'))

app.get('/love',(req,res)=>{
	res.json('json')
})
app.get('/login',(req,res)=>{
	console.log(req.query)
	res.json('恭喜你注册成功!')
})
app.post('/add',(req,res)=>{
  const { name, age } = req.body;
   const sqlStr = `insert into heros (name,age) values("${name}","${age}")`
    connection.query(sqlStr, (err, results) => {
        if (err) return res.status(500).send({ code: 500, msg: '服务器处理失败' })
        // 返回英雄
        res.send({ code: 200, msg: '请求成功', data: results })
    })
	res.json('新增成功!')
})


app.listen(8080,()=>{
    console.log('8080端口,服务器正在允许中...');
})

猜你喜欢

转载自blog.csdn.net/weixin_52004060/article/details/119303257