前端用node+mysql實現簡單服務端

node express + mysql實現簡單服務端
前端新人想寫服務端不想學PHP等后端語言怎么辦，那就用js寫后台吧！
這也是我這個前端新人的學習成果分享，如有那些地方不對，請給我指出。

1.准備工作
node：官網下載，然后配置環境變量，在cmd中輸入node -v檢查是否配置成功。
npm：集成在node里了，npm -v檢查。
MySQL：官網下載安裝，配置請問度娘。


2.構建服務端
首先先在項目文件夾里新建一個server的新文件夾，新建一個index.js服務端入口文件，一個mysql.js配置文件，一個api.js接口文件。



index.js

const userApi = require('./api')
const bodyParser = require('body-parser')
const express = require('express')
const app = express()

// 中間件
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

app.use('/sqlapi', userApi)
// 監聽端口
app.listen(3000)
console.log('success listen at port:3000')

mysql.js

var mysql = require('mysql')
var connection = mysql.createConnection({
  host: 'localhost',//數據庫地址
  user: 'root', //連接數據庫的用戶名
  password: '',//連接數據庫的密碼
  database: ''//數據庫名
})

module.exports = connection

 

api.js

var mysql = require('./mysql')
var express = require('express')
var router = express.Router()
mysql.connect()
router.post('/login', (req, res) => {
  var params = req.body
  mysql.query("SELECT * FROM `user` WHERE `username` = '" + params.username + "' AND `password` = '" + params.password + "'", function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      if (result.length > 0) {
        res.json({ message: '登錄成功', status: 1 })
      } else {
        res.json({ message: '用戶名或密碼錯誤', status: 0 })
      }
      res.end('is over')
    }
  })
})

 

這樣服務端就完成了，然后進入server文件夾，cmd運行命令

node index

 

啟動服務端

3.前端訪問
服務端構建完成后就可以在前台用ajax訪問了，這里我用我正在寫的個人項目做演示，我個人項目用的是vue-cli3，請求用的是axios，並且封裝了攔截器，所以可能有些不同，只需要按照常規的post請求即可。

** 注意，因為服務端和前端端口不一致，所以存在跨域問題，需要進行跨域 **
這是我前端api封裝的代碼，不含攔截器

import request from '@/utils/request'

/**
* 登錄
*/
export function login (data) {
  return request({
    url: '/sqlapi/login',
    method: 'post',
    data: {
      username: data.username,
      password: data.password
    }
  })
}

 

調用頁面

login () {
      var _this = this
      if (this.disabled) return
      this.disabled = true
      login({ username: this.username, password: this.password }).then(function (data) {
        _this.disabled = false
        if (data.data.status) {
          Toast(data.data.message)
          _this.$store.dispatch('SetUserInfo', { username: _this.username, login: true })
        } else {
          Toast(data.data.message)
        }
      })
    }

 

跨域配置：
跨域我是在前台進行配置的，因為還用到其它接口，也可以在服務端進行配置噢。

proxy: {
      '/sqlapi': {
        target: 'http://localhost:3000/sqlapi',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/sqlapi': ''
        }
      }
    }

 

 mysql 建表
首先先建一個表，比如賬戶信息，用戶名作為主鍵，隨便寫兩個字段測試一下

登錄界面填好賬號密碼后，點擊登錄請求

查看返回數據，請求成功


這樣就實現了node express + mysql的服務端，是不是很簡單，覺得有用的話就給我評個分吧！

完整項目地址：github