Vue+MySQL+Express+Node 实现前端js和服务器交互

最新推荐文章于 2025-05-31 20:47:41 发布

fade_hide

最新推荐文章于 2025-05-31 20:47:41 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： node.js webpack npm vue.js

本文链接：https://blog.youkuaiyun.com/fade_hide/article/details/116297923

本文介绍了如何使用Vue、MySQL、Express和Node.js搭建一个项目，实现前端JavaScript与服务器的交互。首先，通过安装Node.js并验证安装成功，接着安装cnpm以提高npm模块安装速度。然后，安装vue-cli、Express、body-parser和axios。在项目中配置axios，创建项目文件夹，并设置Express服务器。同时，展示了如何处理数据库连接和SQL操作。最后，通过设置代理解决跨域问题，启动服务器并展示Vue页面。

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

Vue+MySQL+Express+Node 实现前端js和服务器交互

安装node
node官网地址：https://nodejs.org/en/
直接选择对应的版本安装就可以了。

查看是否安装成功

node -v
npm -v
cnpm -v

安装cnpm (使用npm安装依赖模块可能会很慢，建议换成 cnpm)

<!-- -g表示全局安装 -->
npm install -g cnpm --registry=http://registry.npm.taobao.org

安装vue-cli脚手架工具

cnpm install -g vue-cli

*安装express和body-parser

 cnpm install express
 cnpm install body-parser

安装axios

 cnpm install axios --save

main.js引入axios

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.prototype.axios = axios

new Vue({
   
   
  el: '#app',
  router,
  components: {
   
    App },
  template: '<App/>'
})

创建一个项目文件夹，进入项目目录执行

<!--myexpress是项目名-->
vue init webpack myexpress

项目目录:
在这里插入图片描述
运行项目，进行开发时调试

npm run dev

添加 Express 服务端目录

在项目根文件夹下创建一个 server 文件夹。然后里面创建下面三个文件；
和api目录，api里面建一个文件

图片：
在这里插入图片描述
db.js——用来添加 mysql 配置

根据mysql的IP，端口，用户名，密码，数据库名称自行修改

示例

// 数据库连接配置
module.exports = {
   
   
    mysql: {
   
   
        host: 'localhost',//新建数据库连接时的 主机名或ID地址 内容
        user: 'root',//用户名
        password: '',//密码
        database: 'xz_user',//表名
        port: '3306'//端口号
    }
}

index.js——Express 服务器入口文件

// node 后端服务器
const StuApi = require('./api/StuApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
// 采用设置所有均可访问的方法解决跨域问题
app.all('*', function (req, res, next) {
   
   
    // 设置允许跨域的域名，*代表允许任意域名跨域
    res.header('Access-Control-Allow-Origin', '*');
    // 允许的header类型
    res.header('Access-Control-Allow-Headers', 'content-type');
    //