当前位置：首页 > 文章列表 > 数据库 > MySQL > Vue+MySQL+Express小试牛刀

Vue+MySQL+Express小试牛刀

来源：SegmentFault 2023-02-16 15:30:09 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《Vue+MySQL+Express小试牛刀》，文章讲解的知识点主要包括MySQL、vue.js、express，如果你对数据库方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

眼睛一闭一睁，到年底了。早就想尝试用js玩儿全栈，最近正好做毕设了，是一个关于资金的管理系统，于是乎，正好用来练练手。一咬牙一跺脚----嗯，就用Vue+MySQL+Express吧。前端用Vue，后端用Express做服务端提供数据接口，数据库用MySQL（由于毕设就要求的是基于SQL数据库）。

说时易，做时难。以前都是单写Vue，数据请求是请求的假数据，而且没有搭建过环境，所以单独用Express的话，也只是用

"dependencies": {
    "vue": "^2.1.0",
    "vue-router": "^2.0.3",
    "vue-resource": "^1.0.3"
  },

2.添加Express服务端目录。

前提：电脑安装mysql数据库

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

db.js----用来添加mysql配置

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

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

// 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......');

sqlMap.js----SQL语句映射文件，以供api逻辑调用

// sql语句
var sqlMap = {
    // 用户
    user: {
        add: 'insert into user(id, name, age) values (0, ?, ?)'
    }
}

module.exports = sqlMap;

api/userApi.js ---- 测试用api示例

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.user.add;
    var params = req.body;
    console.log(params);
    conn.query(sql, [params.username, params.age], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

module.exports = router;

编写完成之后，就可以在项目根目录下安装依赖

<template><div class="hello">
    <h1>{{ msg }}</h1>
    <form>
      &lt;input type=&quot;text&quot; name=&quot;username&quot; v-model=&quot;userName&quot;&gt;<br>&lt;input type=&quot;text&quot; name=&quot;age&quot; v-model=&quot;age&quot;&gt;<br><a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5rqJiUpn-yvpawqJd6iJuzrX7Ogdyxo5KthWCxdnFkv42jYIp9grCzlbCigZyimbOImdCF3cijheB-nLCJfWa-s6Nt' rel='nofollow'>提交</a>
    </form>
  </div>
</template><script>
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);
      })
    }
  }
}
</script>

4.设置代理与跨域

完成上面3步之后，执行

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

，这样就不会有跨域问题了。

好了，到这里，基本上完成了，可以去添加一个数据试试了。

最终项目目录结构

|-- build
|-- config
|-- node_modules
|-- server
  |-- api
    |-- userApi.js
  |-- db.js
  |-- index.js
  |-- sqlMap.js
|-- src
  |-- assets
  |-- components
    |-- Hello.vue
  |-- App.vue
|-- static
|-- .babelrc
|-- .editorconfig
|-- .gitignore
|-- index.html
|-- package.json
|-- README.md