vue+node+mysql 实现数据使用

vue+node+mysql 实现数据使用

1. 安装mysql
   npm i mysql

2. vue项目根目录下创建server文件夹
   
   api下的文件为数据库具体操作，sql.js为数据库配置信息，app.js配置后端端口

3. 配置数据库

// sql.js
var mysql = require('mysql')
var con = mysql.createConnection({
	host: 'localhost', // 或 127.0.0.1
	user: '管理者名称',
	password: '数据库密码',
	database: '数据库名称'
})
module.exports = con;

// 或
module.exports = {
	mysql: {
		host: 'localhost', // 或 127.0.0.1
		user: '管理者名称',
		password: '数据库密码',
		database: '数据库名称',
		port:'数据库端口号' // 一般为3306
	}
}

4. app.js

const studentApi = require('./api/studentApi');
// body-parser是一个HTTP请求体解析的中间件，使用这个模块可以解析JSON、Raw、文本、URL-encoded格式的请求体
const bodyParser = require('body-parser');
const express = require('express'); 
const app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use('/api/student', studentApi);

// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');

4. 引入axios
   npm i axios

 // main.js
 import axios from 'axios'
 Vue.prototype.$axios = axios  // this.$axios
 
 // or
 //axios文件夹下的index,js
 import axios from 'axios'
 export default axios;
 //在需要使用的vue页面引入axios，直接axios.

5. api下的student.api

const db=require('../sql.js');//数据库连接信息
const express = require('express'); 
const mysql=require('mysql');
var router = express.Router();

var sqlMap = {
  student: {
    add: 'insert into student(name,sno) values(?,?)',
    delete: 'delete from student where sno = ?',
    alter: 'update student set name = ? where sno = ?',
    select: 'select * from student'
  }
}

// 连接数据库
var conn = mysql.createConnection(db.mysql);
conn.connect();

var jsonWrite = function(res, ret) {
  if(typeof ret === 'undefined') {
    res.json({
      code: '1',
      msg: '操作失败'
    });
  } else {
    res.json(ret);
  }
};

// 编写用户接口
router.post('/addStudent', (req, res) => {
  let sql = sqlMap.student.add;
  let params = req.body;
  console.log(params);
  conn.query(sql, [params.name, params.sno], (err, result) => {
    if (err) console.log("添加失败"+err);
    if (result) jsonWrite(res, result);
  })
});

router.post('/deleteStudent', (req, res) => {
  let sql = sqlMap.student.delete;
  let params = req.body;
  console.log(params);
  conn.query(sql, [params.sno], (err, result) => {
    if (err) console.log("删除失败"+err);
    if (result) jsonWrite(res, result);
  })
});

router.post('/alterStudent', (req, res) => {
  let sql = sqlMap.student.alter;
  let params = req.body;
  console.log(params);
  conn.query(sql, [params.name, params.sno], (err, result) => {
    if (err) console.log("修改失败"+err);
    if (result) jsonWrite(res, result);
  })
});

router.get('/selectStudent', (req, res) => {
  let sql = sqlMap.student.select;
  conn.query(sql, (err, result) => {
    if(err) console.log("查询失败" + err);
    if(result) jsonWrite(res, result);
  })
})

module.exports = router;

6. vue页面调用

	<form action="">
	  // 功能分开试
      <input type="text" name="name" v-model="name">
      <input type="text" name="sno" v-model="sno">
      <a href="javascript::" @click="addStudent">添加</a><br>
      <input type="text" name="sno" v-model="sno">
      <a href="javascript::" @click="deletStudent">删除</a><br>
      <input type="text" name="name" v-model="name">
      <input type="text" name="sno" v-model="sno">
      <a href="javascript::" @click="alterStudent">修改</a><br>
      <a href="javascript::" @click="selectStudent">查询</a><br>
    </form>

data(){
	return {
		name: '',
      	sno: ''
	}
},
methods: {
    addStudent() {
      let name = this.name;
      let sno = this.sno;
      this.$axios.post('/student/addStudent', {
      //  此处路径要看控制台，报错404即为路径错误
      // 正确路径为http://127.0.0.1:8080/api/student/addStudent
      // 控制台路径如果为 http://127.0.0.1:8080/student/addStudent，则改为/api/student/addStudent
        name: name,
        sno: sno
      }).then((res) => {
        console.log(res);
      })
    },
    deletStudent() {
      let sno = this.sno;
      this.$axios.post('/student/deleteStudent', {
        sno: sno
      }).then((res) => {
        console.log(res);
      })
    },
    alterStudent() {
      let name = this.name;
      let sno = this.sno;
      this.$axios.post('/student/alterStudent', {
        name: name,
        sno: sno
      }).then((res) => {
        console.log(res);
      })
    },
    selectStudent() {
      this.$axios.get('/student/selectStudent').then((res) => {
        console.log(res);
      })
    }
  },
  // TypeError: Cannot read properties of undefined (reading 'post')
  // 此种错误为axios报错
  // axios修改 let axios = require('axios');
  // this.$axios.get --> axios.get

7. 项目根目录下创建config文件夹，下设index.js文件，配置代理服务器

module.exports = {
  devServer: {
    port: 8080, // 项目运行端口号
    host: '127.0.0.1',
    open: true, // 配置自动启动浏览器
    https: false,
    proxy: {
      '/api': {
          target: 'http://localhost:3000', // 你请求的第三方接口
          ws: true,
          changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: {  // 路径重写，
              '^/api': '/api'  // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
          }
      }
    }
  }
}

部分参考https://www.cnblogs.com/xufeikko/p/10880819.html