前后端分离情况下的数据交互

使用jQuery进行数据交互

前端提交/获取ajax数据

var data = {
    "name": "test",
    "test": "test",
};
$.ajax({
    type: 'GET', // 请求类型
    url: /your/url/, //请求发送到的服务器接口
    data: data, // 传输的内容
    dataType: 'json', // 传输的值的类型
    success: function(data) { //服务器返回的数据
    }
});

后台获取前端传输的数据

1. 开启服务器

// 开启服务器
const express = require("express");//需要安装express包方便
const app = express();
const bp = require("body-parser");
app.use(bp.urlencoded({ extended: true }));
app.listen(8080, () => console.log("服务器连接成功"));//设置本地服务器端口号
const router = express.Router();
// 全局设置跨域请求头
app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5501"); //前端的服务器端口
    res.header("Access-Control-Allow-Headers", "*");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", " 3.2.1");
    res.header("Content-Type", "application/json;charset=utf-8");
    res.header("Access-Control-Allow-Credentials", "true");
    next();
});

2. 连接数据库
   2.1 连接MongoDB数据库

   MongoDB是一个介于关系数据库和非关系数据库之间的数据库,无序事先创建好数据库内文件夹,表,字段.可在服务器内代码进行创建

   const mongoose = require("mongoose");//连接数据库,需要先安装mongoose包
   mongoose.connect("mongodb://localhost/mondb", {//mondb:数据库内分类文件夹名
     useNewUrlParser: true,
     useUnifiedTopology: true,
   }).then(() => console.log("数据库连接成功")).catch((err) => console.log("数据库连接失败", err));
   //设定集合规则
   const coureseSchema = new mongoose.Schema({
       ip: String,//String表示字符串格式的数据,可选择多种格式.
       time: String,
       text: String,
   });
   const lyb = mongoose.model("lyb", coureseSchema);//创建数据表格,lyb表示表格名,coureseSchema表示表内字符的名字集合跟格式规则
   lyb.find({}).exec(function(err, data) {//{}查找的条件
         console.log(data);//返回查找到的数据
     });
   

   2.2 连接 MySQL 数据库

   MySQL关系型数据 调用数据必须先创建好表名,字段格式才能进行操作

   let mysql = require("mysql"); //引入mysql数据库 须先安装mysql包
   let option = {
       lost: "localhost", //数据库端口类型
       port: "3306", //端口号
       user: "root", //用户登录名
       password: "199905", //密码
       database: "mydb", //表名
    }; 
   let connection = mysql.createConnection(option);
   connection.connect(function(err) {
      if (err) {
         console.log("数据库连接失败", err);
      } else {
         console.log("数据库连接成功");
         connection.query("select * from article ", function(err, data) {//select * from article:数据库查找语法
            console.log(data);//数据库内返回的内容
         }
      }
   }
   

3. 服务器获取前端传输的数据
   3.1 post请求

   app.post("/index",function(req,res){
      console.log(req.body);//前端传输过来的数据
      res.json(data)//回传到接口的json数据,方便前端进行获取数据
   })
   

   3.2 GET请求

   app.get("/index",function(req,res){
      console.log(req.query);//前端传输过来的json数据
      res.json(data)//回传到接口的json数据,方便前端进行获取数据
   })
   

   3.3 结合数据库使用方法

   app.post("/list", function(req, res) {
       // 操作数据库
       lyb.find(req.body).exec(function(err, data) {//find(req.body):查找所有符合req.body内的数据
           res.json(data);//查找到的数据进行传输到接口方便前端进行调用
       });
   });