美文网首页
Vue-cli连接mysql

Vue-cli连接mysql

作者: 三人行慕课 | 来源:发表于2019-10-07 21:47 被阅读0次

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

    一、vue-cli请求接口部分

    
    <template>
    
      <div id="app">
    
        <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

    相关文章

      网友评论

          本文标题:Vue-cli连接mysql

          本文链接:https://www.haomeiwen.com/subject/ifcvpctx.html