vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue 直连mysql

vue实现直连mysql的方法步骤

作者：zhaocarbon

Vue.js通常运行在浏览器环境,而浏览器不允许直接与MySQL数据库进行连接,本文主要介绍了vue实现直连mysql的方法步骤,感兴趣的可以了解一下

最近又搞了个小项目，单机版本的内部考勤管理系统，直接部署在对方的工作电脑上，不需要在云端部署，因为项目本身就小，我就没配置后端同事进行开发，而是通过VUE直连mysql进行业务开发及保存。后期再通过PM2来守护页面及服务，随时打开使用。

下面来复盘一下整体开发过程。

一、mysql及navicat的安装

1、mysql的安装

前往官方网站下载安装，点击连接->mysql下载及安装官网

 需求说明的是，这里下载使用5.7.44的版本，8.0及9.0连接机制有所调整，会增加额外的一些配置。这里就不再讨论展开。

下载后的步骤一路默认进行即可。安装完成后配置环境变量即可。安装过程中需要输入root的密码，设置时记录好后面连接服务要用。

 2、navicat的安装

网上自行找哈，这里也不展开，后期用于设计表。

 二、创建Vue项目

CD到指定的目录后运行以下命令，按时提示完成项目的创建。

vue create 项目名

三、安装相关依赖

在项目目录中依次执行如下命令

下载express：npm install express -save

下载cors：npm install cors -save

下载mysql：npm install mysql -save

下载axios：npm install axios -save

下载elementUI：npm install element-ui -save

下载sass：npm install sass -save

等，所有依赖如下，自行查看并安装即可

四、在项目中创建server文件夹，用于搭建本地服务器。

4.1、在server文件下创建app.js文件，粘贴以下内容。此为api连接服务。

let express  = require('express')
let cors = require('cors')
let bodyParser = require('body-parser')
let router = require('./router')
let app = express()

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))
app.use(cors())
app.use(router)

app.listen(80,()=>{
    console.log('服务器启动成功');
})

4.2、在server文件下创建db文件夹，并在db文件夹下创建index.js文件，粘贴以下内容。此为mysql连接服务。注意数据库名及密码，密码即1.1步设置的ROOT密码，我创建的库名叫oadb，你创建的叫什么就写什么。不要写为user哦，user是表名不是库名，一个库里面有多个表，注意关系区分。

let mysql = require('mysql')

let db = mysql.createConnection({
    host:'127.0.0.1',
    user:'root',
    password:'abel',
    database:'oadb'
})

module.exports = db

4.3、在server文件夹下创建api文件夹，并在api文件夹下创建user.js，用于操作数据库。注意此为示例，这里也仅供部分功能，其他业务逻辑功能暂不示例。all方法在API路由表中定义的是get方式，所以取参是req.query.xxx，而del和update方法是POST方法，取参是req.body.xxx,自己注意区分。

let db = require("../db/index");

exports.all = (req, res) => {
    var sql =
        "select * from t_user";
    db.query(sql, [], (err, data) => {
        if (err) {
            console.log("出错了", err);
            return res.send("错误" + err.message);
        }
        res.send(data);
    });
};

//删除人员
exports.del = (req, res) => {
    var sql = "delete from t_user where id = ?";
    db.query(sql, [req.body.id], (err, data) => {
        if (err) {
            console.log("出错了", err);
            return res.send("错误" + err);
        }
        res.send(data);
    });
};

//更新
exports.update = (req, res) => {
    var sql =
        "update t_user set name = ?,mobile=?,idNo=?,sex=?,noteText=?,groupId=? where id = ?";
    db.query(
        sql,
        [
            req.body.name,
            req.body.mobile,
            req.body.idNo,
            req.body.sex,
            req.body.noteText,
            req.body.groupId,
            req.body.id,
        ],
        (err, data) => {
            if (err) {
                console.log("出错了", err);
                return res.send("错误" + err);
            }
            res.send(data);
        }
    );
};

 4.4、在server文件夹下创建router.js，用于配置对应api路由，这个文件管理着所有接口及请求方式，将api与相应的表操作类进行关联。代码如下 ：

let express = require('express')
let router = express.Router()

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

//用户相关，get方法
router.get('/user/all',user.all)
//post方法
router.post('/user/del',user.del)
router.post('/user/update',user.update)


module.exports = router

以上完成后项目目录看起来应该是这样的：

五、设计用户表

5.1、使用navicat设计user表，字段简要定义如下：

5.2、手动插入一条数据。这步的目的是为了验证连接是否成功。

CD到server目录下，运行以下命令来启动服务：

node app.js

5.3、验证api连接服务是否正常

浏览器打开http://127.0.0.1/user，因为我的表包含以下字段，显示如下：

六、业务页面的开发 

6.1、注册elementUI组件。在mian.js粘贴以下完整代码：

import Vue from 'vue'
import App from './App.vue'

import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import vuePrototype from '@/utils/vuePrototype'

Vue.use(Element)
Vue.use(vuePrototype)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

6、2修改VUE脚本手架生成的页面，一般叫叫hellowordcomponet，把里面的代码清空，粘贴以下代码：

<template>
  <div>
    <button @click="get()">获取user表数据</button>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data () {
    return {
    };
  },

  methods: {
    get() {
      axios.get('http://127.0.0.1/user').then(res=>{
          console.log(res.data);
      }).catch(err=>{
          console.log("获取数据失败" + err);
      })
    }
  }
}
</script>

不出意外的话，控制台打印数据如下：

 到此，所有关键点均打通，后期就看你业务逻辑，无非就是增加页面、增加api、增加表、增加加密等。

因为我项目中涉及三个模块业务，所以我的api定义如下，对应三张表，有多少表，就对应多少个api文件，相互隔离，便于维护及保持项目结构的清晰。

 我的业务页面：

当然你如果不会mysql查询就需要查阅资料或者是找后端人员协助你写查询语句。

在此再次强调接口服务的参数写法，参考4.4，认真读每一行的说明。

all方法在API路由表中定义的是get方式，所以取参是req.query.xxx,del和update方法是POST方法，取参是req.body.xxx,自己注意区分。

整体开发完成后，单机部署请移步以下教程学习查看->戳我学习单机部署

到此这篇关于vue实现直连mysql的方法步骤的文章就介绍到这了,更多相关vue 直连mysql内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文