Vue-cli连接mysql

ganjiang 2019-10-07 原文

Vue-cli连接mysql

本文把前后台一起串起来，前端使用vue-cli后台用nodejs连接数据库，vue-cli请求接口其数据是来自于mysql数据。

一、vue-cli请求接口部分

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted(){
    
    this.axios.get("api/list").then((res)=>{
      console.log(res.data[0]);
    })
  }
}
</script>

接口部分当然要设置代理了。设置代理连接：https://www.3mooc.com/front/articleinfo/441

二、nodejs连接数据部分

express-generator

1. 全局安装

npm install express-generator -g

2. express –view=ejs 项目名称

例如： express –view=ejs server

3. npm install mysql

var mysql      = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'rootroot',
  database : 'demo'
});

module.exports = connection;

var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js');
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});


router.get('/list', function(req, res, next) {
 	connection.query("select * from user",function(error, results, fields){
 		res.json(results);
 	})
});


module.exports = router;

每日分享文章-附带视频教程：https://www.3mooc.com/front/couinfo/1002