美文网首页
创建node+vue+mysql项目

创建node+vue+mysql项目

作者: 昵称被占用厉害了 | 来源:发表于2022-06-22 17:05 被阅读0次

在已经创建好的vue项目中执行以下步骤

1、下载安装需要的插件

下载express

npm install express

下载cors,用于处理接口跨域问题

npm install mysql

下载mysql

npm install mysql

下载axios

npm install axios

2.在项目中创建server文件夹,用于搭建本地服务器

新建/server/app.js,用于配置服务器相关信息

let express = require('express')

let app = express()

let cors = require('cors')

let bodyParser = require('body-parser')

app.use(bodyParser.json());  //配置解析,用于解析json和urlencoded格式的数据

app.use(bodyParser.urlencoded({extended: false}));

app.use(cors())              //配置跨域,必须在路由之前

app.listen(80, () => {

    console.log('服务器启动成功');

})

新建/server/db/index.js,用于配置数据库相关信息

let mysql = require('mysql')

let db = mysql.createPool({

    host: '127.0.0.1',    //数据库IP地址

    user: 'root',          //数据库登录账号

    password: 'root',      //数据库登录密码

    database: 'test'      //要操作的数据库

})

module.exports = db

新建/server/API/user.js,用于操作数据库

let db = require('../db/index')

exports.get = (req, res) => {

    var sql = 'select * from user'

    db.query(sql, (err, data) => {

        if(err) {

            return res.send('错误:' + err.message)

        }

        res.send(data)

    })

}

新建/server/router.js,用于配置对应路由

let express = require('express')

let router = express.Router()

let user = require('./API/user')

router.get('/user', user.get)

module.exports = router

在/server/app.js中导入路由配置

let express = require('express')

let app = express()

let cors = require('cors')

let bodyParser = require('body-parser')

let router = require('./router')

app.use(bodyParser.json());  //配置解析,用于解析json和urlencoded格式的数据

app.use(bodyParser.urlencoded({extended: false}));

app.use(cors())              //配置跨域

app.use(router)              //配置路由

app.listen(80, () => {

    console.log('服务器启动成功');

})

测试服务器是否搭建成功

server文件夹下执行

node app.js

提示“服务器启动成功”,浏览器打开http://127.0.0.1/user,可看见user数据表中对应的数据,表示服务器搭建成功。

启动成功

这样项目就搭建成功了,(ps:数据库要调好才能访问链接)

相关文章

  • 创建node+vue+mysql项目

    在已经创建好的vue项目中执行以下步骤 1、下载安装需要的插件 下载express npm install exp...

  • Vue中使用markdown

    最近一直在做node+vue+mysql的博客项目,想用mardown编辑器,找了很多方法,最后总结出以下几点:刚...

  • IDEA创建项目

    1.创建新项目 选择创建新项目创建项目1.png 选择项目类型创建项目2.png 项目名 和 项目路径创建项目3...

  • # Flask框架之视图和路由

    HelloWord程序 创建Python项目 打开Pycharm,创建 pure Python类型的项目,创建项目...

  • 1.1 django项目-新闻博客系统之项目环境搭建

    01 项目环境搭建 一、创建django项目 1、创建python虚拟环境 2、创建项目 安装项目所需的包 创建d...

  • 创建项目

    一. 打开Visual Studio二. File -> New -> Project : 新建项目 三. 选择...

  • 项目创建

    一、创建项目和基本设置 mes is short for Manufacturing execution syst...

  • 创建项目

    一、 新建MFC项目 选择:基于对话框 MFC的使用:在共享DLL中使用MFC (程序运行需要dll)在静态库中使...

  • 创建项目

    1. ng new my-app【my-app项目名称】2.cd my-app3.ng serve 上面这种创建方...

  • 创建项目

    如果这是你第一次使用 Django 的话,你需要一些初始化设置。也就是说,你需要用一些自动生成的代码配置一个 Dj...

网友评论

      本文标题:创建node+vue+mysql项目

      本文链接:https://www.haomeiwen.com/subject/fyruvrtx.html