浏览器请求服务器向数据库中添加数据

浏览器发送axios请求,服务器接收后控制数据库进行增删改查
浏览器
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>blog</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			username:<input type="text" v-model="username">
			password:<input type="password" v-model="password"><br>
			<button @click="getList">getList</button>
			<button @click="postList">PostList</button>
		</div>
		<script>
			Vue.prototype.axios = axios;
			let vm = new Vue({
				el:"#app",
				data(){
					return{
						i:0,
						username:'',
						password:'',
					}
				},
				methods:{
					getList(){
						this.axios.get('/bannertable')
						.then(res => {
							console.log(res)
						})
						.catch(err => console.log(err))
					},
					postList(){
						this.axios.post('/upload',{
							"username":this.username,
							"password":this.password
						})
						.then(res => console.log(res))
						.catch(err=> console.log(err))
					}
				}
			})
		</script>
	</body>
</html>

服务器

const express = require("express");
const mysql = require("mysql");
const fs = require("fs");
const bodyParser = require('body-parser');
const querystring = require('querystring');

let server = express();
server.use(bodyParser.urlencoded())

let db = mysql.createPool({
	host:'localhost',
	user:'root',
	password:'136136',
	//database:'blog',
	database:'20200322',
	port:3306//端口号默认3306,不写即默认,可写
})

server.get('/bannertable',function(req,res){
	
	//db.query('SELECT * FROM `bannertable`;',function(err,data){
	db.query('SELECT * FROM `usertable`;',function(err,data){
		if(err)
			console.log(err);
		else
			res.send(data);
	})
})
let str = [];
server.post('/upload',function(req,res){
	req.on('data', function(data) {
		str.push(data)
	});
	req.on('end', function() {
		res.send(str);
		let s = str.toString().match(/\w+/g);
		console.log(s)
		let username = s[1];
		let password = s[3];
		db.query("INSERT INTO `usertable` (`ID`,`username`,`password`) VALUES(0,'"+username+"','"+password+"');",function(err,data){
			if(err)
				console.log(err);
			else
				console.log(data);
		})
	})
})

server.use('/',(req,res,next)=>{
	fs.readFile('./blog.html',function(err,data){
		if(err)
			console.log(err);
		else
			res.write(data);
		res.end();
	});
})


server.listen(8080);
发布了117 篇原创文章 · 获赞 146 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/printf_hello/article/details/105064012