Vue.js 利用 Express 结合 MySQL 或者 MongoDB

栏目: Node.js · 发布时间: 5年前

内容简介：使用 vue-cli 脚手架工具创建一个基于 webpack 的 Vue 项目本身已经包含了 Express, 但是项目若需要结合 MySQL 或者 MongoDB, 还需折腾一番前提： 安装在你的

使用 vue-cli 脚手架 工具 创建一个基于 webpack 的 Vue 项目本身已经包含了 Express, 但是项目若需要结合 MySQL 或者 MongoDB, 还需折腾一番

构建 Vue 项目

前提： 安装 node.js 环境

安装 vue-cli 

npm install -g vue-cli

一个基于 webpack 的 Vue 项目 

vue init webpack [project-name]
cd [project-name]
npm install

使用 vue-resource 请求数据 

npm install --save vue-resource

在你的 src/main.js 适当位置添加以下代码 

import VueResource from "vue-resource"
Vue.use(VueResource)

MySQL

添加 Express 服务端目录

前提： 安装 MySQL 数据库

在项目根文件夹下创建一个 server 文件夹。 然后里面创建下面几个文件夹及文件

|-- server
  |-- bin
    |-- www.js      => Express 服务器入口文件
  |-- config
    |-- db.js       => MySQL 数据库配置文件
  |-- map
    |-- sqlMap.js   => SQL 语句存储文件
  |-- router
    |-- userApi.js  => 数据库操作文件

bin/www.js 

const express = require("express")
const path = require("path")
const bodyParser = require("body-parser")
const cookieParser = require("cookie-parser")
const logger = require("morgan")
const compression = require("compression")
const app = express()
const userApi = require("../router/userApi")
app.use(logger("dev"))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: false
}))
app.use(cookieParser())
app.use(compression({
    threshold: 0
}))
// 后端api路由
app.use("/api/user", userApi)
// 监听端口
app.use((req, res, next) => {
    var err = new Error("This page not found")
    err.status = 404
    next(err)
})
app.listen(3000, () => {
    console.log("Server running in port 3000...")
})

config/db.js 

// 数据库连接配置
module.exports = {
    mysql: {
        host: "127.0.0.1", 
        user: "root", 
        password: "root", 
        database: "test", 
        port: "3306"
    }
}

map/sqlMap.js 

// sql语句
const sqlMap = {
    // 用户
    user: {
        add: "insert into users( `id` , `user_id` , `user_pwd` ) values (NULL, ?, ?)"
    }
}
module.exports = sqlMap

router/userApi.js 

const models = require("../config/db")
const express = require("express")
const router = express.Router()
const mysql = require("mysql")
const $sql = require("../map/sqlMap")
// 连接数据库
const conn = mysql.createConnection(models.mysql)
conn.connect()
const jsonWrite = (res, ret) => {
    if (typeof ret === "undefined") {
        res.json({
            code: "1", 
            msg: "操作失败"
        })
    } else {
        res.json(ret)
    }
}
// 增加用户接口
router.post("/addUser", (req, res) => {
    var sql = $sql.user.add
    var params = req.body
    console.log(params)
    conn.query(sql, [params.user_id, params.user_pwd], (err, result) => {
        if (err) {
            console.log(err)
        }
        if (result) {
            jsonWrite(res, result)
        }
    })
})
module.exports = router

添加 scripts 到 package.json 

"scripts": {
  "server": "nodemon ./server/bin/www.js", 
}

注意到 package.json 中的 nodemon, 这是热加载插件, 就是有新文件的创建或者有新增代码, 将会重新启动 Express 服务

安装依赖 

npm install --save nodemon mysql body-parser

MongoDB

示例： https://github.com/vxhly/vue-express-mongodb

添加 Express 服务端目录

前提： 安装 MongoDB 数据库

在项目根文件夹下创建一个 server 文件夹。 然后里面创建下面几个文件夹及文件

|-- server
  |-- bin
    |-- www.js      => Express 服务器入口文件
  |-- config
    |-- db.js       => MongoDB 数据库配置文件
  |-- router
    |-- userApi.js  => 数据库操作文件

bin/www.js 

const express = require("express")
const path = require("path")
const bodyParser = require("body-parser")
const cookieParser = require("cookie-parser")
const logger = require("morgan")
const compression = require("compression")
const app = express()
const userApi = require("../router/userApi")
app.use(logger("dev"))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: false
}))
app.use(cookieParser())
app.use(compression({
    threshold: 0
}))
// 后端api路由
app.use("/api/user", userApi)
// 监听端口
app.use((req, res, next) => {
    var err = new Error("This page not found")
    err.status = 404
    next(err)
})
app.listen(3000, () => {
    console.log("Server running in port 3000...")
})

config/db.js 

const mongoose = require("mongoose")
mongoose.connect("mongodb://127.0.0.1/test")
const db = mongoose.connection
mongoose.Promise = global.Promise
db.on("error", console.error.bind(console, "Connect error"))
db.once("open", function() {
    console.log("Mongodb started successfully")
})
const userSchema = mongoose.Schema({
    userId: {
        type: Number, 
        required: true
    }, 
    userPwd: {
        type: String, 
        required: true
    }
})
const Models = {
    User: mongoose.model("User", userSchema)
}
module.exports = Models

router/userApi.js 

const express = require("express")
const router = express.Router()
const model = require("../config/db.js")
const jsonWrite = (res, ret) => {
    if (typeof ret === "undefined") {
        res.json({
            code: "404", 
            msg: "server is error"
        })
    } else {
        res.json(ret)
    }
}
router.post("/useradd", (req, res, next) => {
    const params = req.body
    const id = params.userId
    const pwd = params.userPwd
    const user = new model.User({
        userId: id, 
        userPwd: pwd
    })
    model.User.findOne({
            userId: user.userId
        }, 
        (err, doc) => {
            if (err) console.log(err)
            console.log(doc)
            if (doc) {
                jsonWrite(res, doc)
            } else {
                user.save(err => {
                    if (err) {
                        console.log(err)
                    } else {
                        jsonWrite(res, doc)
                    }
                })
            }
        })
})
module.exports = router

编写 vue 测试文件 

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form>
      <input type="text" name="user_id" v-model="user_id" placeholder="Enter your ID"> <br>
      <input type="password" name="user_pwd" v-model="user_id" placeholder="Enter your password"> <br>
      <a href="javascript:" @click="addUser">提交</a>
    </form>
  </div>
</template>

<script>
export default {
  name: 'hello', 
  data () {
    return {
      msg: 'Welcome to Your Vue.js App', 
      user_id: '', 
      user_pwd: ''
    }
  }, 
  methods: {
    addUser() {
      var userId = this.user_id
      var userPwd = this.user_pwd
      this.$http.post('/api/user/addUser', {
        user_id: userId, 
        user_pwd: userPwd
      }).then((response) => {
        console.log(response)
      })
    }
  }
}
</script>

设置代理与跨域

完成上面步骤之后, 执行 npm run dev , 你会发现会报一个错误： vue-resource.common.js?e289:1071 POST http://localhost:8080/api/use... 404 (Not Found) 。 这是由于直接访问 8080 端口, 是访问不到的, 所以这里需要设置一下代理转发映射.

项目根目录下的 config 文件夹中有一个 proxyTable 参数, 用来设置地址映射表, 可以添加到开发时配置（dev）中

config/index.js 

dev: {
    // ...
    proxyTable: {
        '/api': {
            target: 'http://127.0.0.1:3000/api/', 
            changeOrigin: true, 
            pathRewrite: {
                '^/api': ''
            }
        }
    }, 
    // ...
}

添加以上代码之后, 请求 /api 时就代表 http://127.0.0.1:3000/api/ (这里要写 ip, 不要写 localhost), changeOrigin 参数接收一个布尔值, 如果为 true, 这样就不会有跨域问题了。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
数据库索引设计与优化

数据库索引设计与优化

【美】Tapio Lahdenmaki、【美】Michael Leach / 曹怡倩、赵建伟 / 电子工业出版社 / 2015-6 / 79.00元

《数据库索引设计与优化》提供了一种简单、高效、通用的关系型数据库索引设计方法。作者通过系统的讲解及大量的案例清晰地阐释了关系型数据库的访问路径选择原理，以及表和索引的扫描方式，详尽地讲解了如何快速地估算SQL 运行的CPU 时间及执行时间，帮助读者从原理上理解SQL、表及索引结构、访问方式等对关系型数据库造成的影响，并能够运用量化的方法进行判断和优化，指导关系型数据库的索引设计。 《数据库索......一起来看看 《数据库索引设计与优化》 这本书的介绍吧!

码农工具
URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3