nodejs+mysql+express+vue实现增删改查功能

Node.js+MySQL+Express+Vue 实现CRUD操作

最新推荐文章于 2022-11-17 15:46:17 发布

原创

最新推荐文章于 2022-11-17 15:46:17 发布 · 3k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #vue #mysql

本文介绍了使用Node.js、Express、MySQL和Vue.js组合实现前端和后端交互，完成增删改查功能的过程。首先展示了前端Vue页面的简单Bootstrap UI设计，接着跳过数据库环境搭建，直接进入Node.js后端接口的编写，强调了接口跨域配置、自增ID设置以及不同查询条件下的SQL语句编写注意事项。文章中还提及了遇到的跨域问题和解决方案。

费话不多说先来一波效果图：

实现步骤如下：

1.Vue编写前端页面（ps:比较简单都是一些form表单之类的简单应用，UI组件用的是bootstrap，所以省去了样式布局一堆）这一步比较简单

2.数据库之类的安装环境搭建不做赘述，我用的是navicat和mysql,...步入正题：nodejs部分开始了

// 1. 一些必须要引用的文件
const express = require("express");
const app = express();
const mysql = require("mysql");
const bodyParser = require("body-parser");
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); 

// 2. 设置跨域访问
app.all("*", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  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");
  next();
});

// 3.连接数据库的配置
var con