本文把前后台一起串起来,前端使用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

Vue-cli连接mysql的更多相关文章

  1. vue项目中连接MySQL时,报错ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password:YES)

    一.前言 我们前端很多时候在写vue项目的时候,会把后端的数据拿到本地来跑,在连接MySQL数据库的时候,可能出现一些问题,如: ER_ACCESS_DENIED_ERROR: Access deni ...

  2. PHP连接MySql闪断自动重连的方法

    使用php作为后台运行程序(例如短信群发),在cli模式下执行php,php需要连接mysql循环执行数据库处理. 当mysql连接闪断时,之后循环的执行将会失败. 我们需要设计一个方法,当mysql ...

  3. hive连接MySQL报错

    错误如下: [root@awen01 /usr/local/apache-hive-1.2.1-bin]#./bin/hive Logging initialized using configurat ...

  4. Vue CLI 3.x 简单体验

    文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...

  5. php 连接mysql 主机 localhost,显示 No such file or directory

    打开 php.ini文件,找到这1行 mysql.default_socket 然后将它修改为 mysql.default_socket=/path/to/mysql.sock /path/to/my ...

  6. vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)

    2020-02-13. 网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题.接下来看下最新的安装方法. 前四步是一样的: 1.下载并安装vscode 2 ...

  7. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  8. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  9. nodejs进阶(6)—连接MySQL数据库

    1. 建库连库 连接MySQL数据库需要安装支持 npm install mysql 我们需要提前安装按mysql sever端 建一个数据库mydb1 mysql> CREATE DATABA ...

  10. 【初学python】使用python连接mysql数据查询结果并显示

    因为测试工作经常需要与后台数据库进行数据比较和统计,所以采用python编写连接数据库脚本方便测试,提高工作效率,脚本如下(python连接mysql需要引入第三方库MySQLdb,百度下载安装) # ...

随机推荐

  1. LeetCode 笔记

    Valid Sudoku 数独整体能够满足的情况是比较复杂.参考:编程之美 关于数独问题的讨论 这道题的解法可能简单一点,因为对输入进行来限制.只是去判断是否是一个数独数独的形式相比较来说也是较简单的 ...

  2. Kth Minimum Clique_2019牛客暑期多校训练营(第二场)

    题目连接: https://ac.nowcoder.com/acm/contest/882/D Description Given a vertex-weighted graph with N ver ...

  3. 牛客多校第五场 E room 二分图匹配 KM算法模板

    链接:https://www.nowcoder.com/acm/contest/143/E来源:牛客网 Nowcoder University has 4n students and n dormit ...

  4. 天梯杯 L2-010. 排座位

    L2-010. 排座位 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 布置宴席最微妙的事情,就是给前来参宴的各位宾客安排座位. ...

  5. Atcoder E - RGB Sequence(dp)

    题目链接:http://arc074.contest.atcoder.jp/tasks/arc074_c 题意:一共有3种颜色,红色,绿色,蓝色.给出m个要求l,r,x表示在区间[l,r]内要有x种不 ...

  6. 网络流---最大流(Edmond-Karp算法)的学习

    先上个代码,等有空补充详解 #include<iostream> #include<cstdio> #include<cstring> #include<cm ...

  7. spring aop 的一个思考

    问题: spring  aop 默认使用jdk代理织入. 也就是我们常这样配置:<aop:aspectj-autoproxy /> 通过aop命名空间的<aop:aspectj-au ...

  8. spring aop 之链式调用

    关关雎鸠,在河之洲.窈窕淑女,君子好逑. 概述 AOP(Aspect Orient Programming),我们一般称为面向方面(切面)编程,作为面向对象的一种补充,用于处理系统中分布于各个模块的横 ...

  9. glusterfs详解及kubernetes 搭建heketi-glusterfs

    本文包含: gluster各存储卷详解.创建及使用 gluster-kubernetes搭建glusterfs存储 前言 传统的运维中,往往需要管理员手动先在存储集群分配空间,然后才能挂载到应用中去. ...

  10. Hbase 日常运维

    日常维护的命令 1,major_compact 'testtable',通常生产环境会关闭自动major_compact(配置文件中hbase.hregion.majorcompaction设 为0) ...