首先需要安装的程序: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端口,服务器正在允许中...'); })