*关于用vue配置node.js访问mysql

1.Navicat创建新的数据库及表，

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `userId` int NOT NULL,
  `userName` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `passWord` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  PRIMARY KEY (`userId`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, 'tom', '123');
INSERT INTO `user` VALUES (2, 'jack', '123');
INSERT INTO `user` VALUES (3, 'mary', '1234');

SET FOREIGN_KEY_CHECKS = 1;

2.访问工程目录，目录下创建新的vue_cli ，删除原本的assets和components，

• 下载express

npm install express

• 下载cors，用于处理接口跨域问题

npm install cors

• 下载mysql

npm install mysql

• 下载axios

npm install axios

3.在项目中创建server文件夹，用于搭建本地服务器

• 新建  根目录/server/app.js，用于配置服务器相关信息

let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')

app.use(bodyParser.json());  //配置解析，用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())              //配置跨域，必须在路由之前


app.listen(80, () => {
    console.log('服务器启动成功');
})

• 新建  根目录/server/db/index.js，用于配置数据库相关信息

  let mysql = require('mysql')
  
  let db = mysql.createPool({
      host: '127.0.0.1',     //数据库IP地址
      user: '',          //数据库登录账号
      password: '',      //数据库登录密码
      database: ''       //要操作的数据库
  })
  
  module.exports = db
  

• 新建  根目录/server/API/user.js，用于操作数据库

  let db = require('../db/index')
  
  exports.get = (req, res) => {
      var sql = 'select * from user'
      db.query(sql, (err, data) => {
          if(err) {
              return res.send('错误：' + err.message)
          }
          res.send(data)
      })
  }
  

• 新建  根目录/server/router.js，用于配置对应路由

  let express = require('express')
  let router = express.Router()
  let user = require('./API/user')
  
  router.get('/user', user.get)
  
  module.exports = router
  

• 在/server/app.js中导入路由配置

  let express = require('express')
  let app = express()
  let cors = require('cors')
  let bodyParser = require('body-parser')
  let router = require('./router')
  
  app.use(bodyParser.json());  //配置解析，用于解析json和urlencoded格式的数据
  app.use(bodyParser.urlencoded({extended: false}));
  app.use(cors())              //配置跨域
  app.use(router)              //配置路由
  
  app.listen(80, () => {
      console.log('服务器启动成功');
  })
  

• 测试服务器是否搭建成功
  server文件夹下执行

  node app.js

  提示“服务器启动成功”，浏览器打开http://127.0.0.1/user，可看见user数据表中对应的数据，表示服务器搭建成功。

4.Vue项目访问接口获取数据 

 

<template>
  <div>
    <button @click="get()">获取user表数据</button>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data () {
    return {
    };
  },

  methods: {
    get() {
      axios.get('http://127.0.0.1/user').then(res=>{
          console.log(res.data);
      }).catch(err=>{
          console.log("获取数据失败" + err);
      })
    }
  }
}
</script>

本文仅供自己记录学习使用，文章出处来源@呦呀

侵权自删