vue +axios+node +express +mysql+navicat

最新推荐文章于 2024-02-21 11:19:36 发布

小小蝙蝠侠

最新推荐文章于 2024-02-21 11:19:36 发布

阅读量895

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lqx_520/article/details/98848538

本文详细介绍了如何在Vue项目中集成Node.js、Express和MySQL，实现前后端分离的全栈开发。从环境搭建到代码实现，包括数据库连接、CRUD操作及跨域处理等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端 vue+node+express+mysql

     **废话不多说，直接上代码
   ***1，***首先  新建vue项目，这个无须赘述，自行百度

下面重点来了，上代码

1 官网下载mysql数据库，傻瓜式安装，一步到位，填写帐号以及密码；
2，在vue项目下下载express**


 npm install express --save

3，在vue项目新建node文件夹，里面新建js文件，我这里是index.js

在这里插入图片描述
4，在vue项目里下载mysql依赖包 npm install mysql --save以及下载 npm axios install --save
5，此时需配置一个文件
展示如下
6. index.js 里的代码如下

const express = require('express') // 引入express
const mysql = require('mysql') // 引入mysql
// 连接数据库
const connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : 'root',
    database : 'liang'
  });
  connection.connect();
  let app = express()
  
// 解决跨域
app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
    res.header('Access-Control-Allow-Headers', 'X-Requested-With')
    res.header('Access-Control-Allow-Headers', 'Content-Type')
    next()
  })
  const result = {
    "status": "200",
    "message": "success", 
}
//获取数据列表
app.use('/mockapi/list', function (req, res){
    connection.query('SELECT * from user_info', function (error, results, fields) {
        if (error) throw error;
        result.data = results
        res.json(result)
      });
  })
//新增数据列表
  app.post('/mockapi/add', function (req, res){
    connection.query('INSERT INTO user_info(name,age)VALUES(?,?)',['撒谎','25'],function (error, results, fields) {
        if (error) throw error;
        result.data = results
        res.json(result)
      });
  })
//修改数据列表
  app.post('/mockapi/modify', function (req, res){
    connection.query('update user_info set name=? where id=2',['暗时'],function (error, results, fields) {
        if (error) throw error;
        result.data = results
        res.json(result)
      });
  })
//   删除数据列表
  app.post('/mockapi/delete', function (req, res){
    connection.query('delete from user_info where id=2',function (error, results, fields) {
        if (error) throw error;
        result.data = results
        res.json(result)
      });
  })
  app.listen('8090', () => {
    console.log('监听端口 8090')
  })

7 在mock下 node index 启动 node js搭建的服务
8 在vue文件里可以调用
在这里插入图片描述