实战vue+mySql 链接数据库并操作

梦里梦外; 2024-04-18 03:21 33阅读 0赞

今天遇到了一个PHP后台，给接口文档的时候给了我一个数据库的账户密码和表，所以我只能通过前端连接数据库并写sql语句调用数据，以下是我整理的实战过程，包括步骤，遇到的问题等，复制即用，哈哈，那么我们开始吧~  
【个人学习笔记，包含各种前端，及工作中遇到的问题，欢迎大家关注我  
会持续更新基本每天都更新 】  
(*╹▽╹*) 笔记地址地址：[十二的前端笔记-语雀][-]

**1.安装vue-cli脚手架**

npm install -g vue-cli

**2.创建项目**

vue init webpack my-project

**3.在 package.json 中添加**

"dependencies": {
    "vue": "^2.1.10",
    "vue-router": "^2.2.0",
    "vue-resource": "^1.0.3"
    },

或者

npm install vue-resource --save

**4.在项目根文件夹下创建一个 server 文件夹**

其中1)api文件夹为与数据库的各个表连接接口，每一个子文件为一个数据库中一个表的

//userApi.js
    var models = require('../db')
    var express = require('express')
    var router = express.Router()
    var mysql = require('mysql')
    var $sql = require('../sqlMap')
    
    // 连接数据库
    var conn = mysql.createConnection(models.mysql)
    
    conn.connect()
    var jsonWrite = function (res, ret) {
      if (typeof ret === 'undefined') {
        res.json({
          code: '1',
          msg: '操作失败'
        })
      } else {
        res.json(ret)
      }
    }
    
    // 增加用户接口
    router.post('/addUser', (req, res) => {
      var sql = $sql.admin_user.add;
      var params = req.body;
      console.log(params);
      conn.query(sql, [params.loginname, params.password], function(err, result) {
        if (err) {
          console.log(err);
        }
        if (result) {
          jsonWrite(res, result);
        }
      })
    })
    
    // 增加用户接口
    router.post('/addReader', (req, res) => {
      var sql = $sql.reader.add
      var params = req.body
      console.log(params)
      conn.query(sql, [params.name], function (err, result) {
        if (err) {
          console.log(err)
        }
        if (result) {
          jsonWrite(res, result)
        }
      })
    })
    
    router.post('/cancelReader', (req, res) => {
      var sql = $sql.reader.delete
      var params = req.body
      console.log(params)
      conn.query(sql, [params.name], function (err, result) {
        if (err) {
          console.log(err)
        }
        if (result) {
          jsonWrite(res, result)
        }
      })
    })
    
    router.get('/searchReader', (req, res) => {
      var sql = $sql.reader.search
      var params = req.query
      console.log(params)
      conn.query(sql, [params.name], function (err, result) {
        if (err) {
          console.log(err)
        }
        if (result) {
          console.log(result)
          res.send(result)
        }
      })
    })
    
    router.post('/readerBorrow', (req, res) => {
      var sql = $sql.reader.borrowBook
      var params = req.body
      console.log(params)
      conn.query(sql, [params.readerName, params.bookName], function (err, result) {
        if (err) {
          console.log(err)
        }
        if (result) {
          jsonWrite(res, result)
        }
      })
    })
    
    module.exports = router

2)db.js为数据库连接配置

// 数据库连接配置db.js
    module.exports = {
      mysql: {
      host: '47.99.153.***',//mysql连接ip地址
      user: 'abc',
      password: 'abc123',//mySql用户名密码
      database: 'abc_ddd',//mySql数据库名
      port: '3306'//mysql连接端口
      }
    }

3)index.js用来定义与监听后端服务器

// node 后端服务器
    const userApi = require('./api/userApi');
    const fs = require('fs');
    const path = require('path');
    const bodyParser = require('body-parser');
    const express = require('express');
    const app = express();
    
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended: false}));
    
    // 后端api路由
    app.use('/api/user', userApi);
    
    // 监听端口
    app.listen(3000);
    
    console.log('success listen at port:3000......');

4)sqlMap.js用来实现sql语句的api

//sqlMap.js
    var sqlMap = {
      // 用户
      admin_user: {
        add: 'insert into admin_user(loginname,password) values(?, ?)'
      },
      reader: {
        add: 'insert into reader(name) values (?)',
        delete: 'delete from reader where name = ?',
        search: 'select * from reader where name = ?', //查找读者信息
        borrowBook: 'update reader set lendBook1 = ? where name = ?'//更新用户表中的已借阅书籍
      },
      book: {
        add: 'insert into book(name, author, stock) values (?, ?, ?)',
        search: 'select * from book where name = ?',
        borrowBook: 'update book set stock = ? , lendNum = ? where name = ?'//更新书籍表中的库存
      }
    }
    module.exports = sqlMap;

**5.在项目根目录下安装**

npm install express mysql body-parser

然后在 server 文件夹下执行node index（这里也可以加载package.json中，然后使用 npm 执行）看到 success listen at port:3000……恭喜你！服务端启动成功。  
**6.html中的使用**

export default {
        name: 'hello',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App',
                userName: '',
                age: ''
                }
        },
        methods: {
            addUser() {
                var name = this.userName;
                var age = this.age;
                this.$http.post('/api/user/addUser', {
                    username: name,
                    age: age
                },{}).then((response) => {
                    console.log(response);
                })
            }
        }
    }

如果没有引用vue-resource，this.$http.post是不生效的，还会报错  
报错信息：  
Uncaught TypeError: Cannot read property ‘post’ of undefined  
解决方案：在main.js中引入vue-resource

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import VueRouter from 'vue-router'
    import VueResource from 'vue-resource'
    /* eslint-disable no-new */
    new Vue({
    el: '#app',
    router,
    template: '',
    components: { App }
    })
    // 此处需要use后，this.$http.get或者this.$http.post才可以
    Vue.use(VueRouter)
    Vue.use(VueResource)

执行npm run dev,打开一个页面，然后输入一组数据，点击保存，你会发现会报一个错误：  
vue-resource.common.js?e289:1071 POST http://localhost:8080/api/user/addUser 404 (Not Found).  
这是由于直接访问8080端口，是访问不到的，这里需要设置一下代理转发。  
设置代理与跨域  
vue-cli 的 config 目录的index.js文件中有一个proxyTable参数，用来设置地址映射表，可以添加到开发时配置（dev）中

dev: {
        env: require('./dev.env'),
    
        port: 8080,
    
        autoOpenBrowser: true,
    
        assetsSubDirectory: 'static',
    
        assetsPublicPath: '/',
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/api': {
            // target: 'http://192.168.3.154:81',
            target: 'http://localhost:3000/api/',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          },  
        },

**附录：**  
user表建表语句  
DROP TABLE IF EXISTS `user`;  
CREATE TABLE `user` (  
`id` varchar(50) NOT NULL,  
`name` varchar(255) DEFAULT NULL,  
`age` int(11) DEFAULT NULL,  
PRIMARY KEY (`id`)  
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

npm的常用命令  
npm -v \#显示版本，检查npm 是否正确安装。  
npm install express \#安装express模块  
npm install -g express \#全局安装express模块  
npm list \#列出已安装模块  
npm show express \#显示模块详情  
npm update \#升级当前目录下的项目的所有模块  
npm update express \#升级当前目录下的项目的指定模块  
npm update -g express \#升级全局安装的express模块  
npm uninstall express \#删除指定的模块

[-]: https://www.yuque.com/nizhidaoba