最近在研究vue項目中使用node.js搭建server服務器，鏈接本地mysql數據庫，進行數據操作。
準備工作：
1.vue
2.node.js
3:mysql
前面兩項對於入行前端的小夥伴應該不是問題了吧， 如果有的話，可以參考vue安裝項目。
我選用的vue-cli構建項目，我好久沒有用vue了，才發現快落伍了，現在3.0版本使用的vue create < project-name>，我就還是選用的2.0構建的項目，附vue-cli 3.0 和 2.0的區別。
附npm淘寶鏡像
npm install cnpm -g --registry=https://registry.npm.taobao.org
然後去安裝mysql了，不是專業後臺人員，這個我也是鼓搗了好久，給大家附上幾個靠譜的參考鏈接
1、mysql下載以及安裝配置方法
2、mysql基礎知識
3、Navicat神器的安裝以及使用教程
準備工作會花費很多時間的，一定要細心和耐心啊
準備好了，就開始進入正題啦
1、第一步：
在vue項目中創建server文件夾
2、先來看index.js做了什麼事
// node後端服務器
const homeApi = require('./api/homeApi') // 上面說的後臺接口文件
const bodyParser = require('body-parser')
// body-parser是非常常用的一個express中間件，作用是對http請求體進行解析
const express = require('express') // express框架
const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
// 後端api路由
app.use('/home', homeApi) // 使用homeapi文件中的接口
// 監聽端口
app.listen(3000) // 監聽server3000端口
console.log('success listen at port:3000')
3、db.js就是數據庫的基本配置
module.exports = {
mysql: {
host: 'localhost',
user: 'root',
password: '123456', // mysql用戶名密碼
database: 'test_ly', // mysql數據庫名
port: '3306' // mysql鏈接端口
}
}
4、再來看一下api中honeApi.js
// homeApi.js
var models = require('../db') // 引入db配置
var express = require('express') // express框架
var router = express.Router()
var mysql = require('mysql')
var $sql = require('../sqlMap') // sql語句
// 連接數據庫
var conn = mysql.createConnection(models.mysql)
conn.connect()
var jsonWrite = function (res, ret) {
if (typeof ret === 'undefined') {
res.json({
code: '1',
msg: '操作失敗'
})
} else {
res.json(ret)
}
}
// 查詢列表接口，
// get接口，這裏配置的/getlist,使用的時候就是 /home/getlist
// 回看index.js 中 app.use('/home', homeApi) ，就懂了
router.get('/getlist', (req, res) => {
var sql = $sql.home.search
var parms = req.query
console.log(parms)
conn.query(sql, function (err, result) {
if (err) {
console.log(err)
}
if (result) {
console.log(result)
res.send(result)
}
})
})
// 新增列表
router.post('/addlist', (req, res) => {
var sql = $sql.home.add
var parms = req.body
console.log(parms)
conn.query(sql, [parms.title, parms.num], function (err, result) {
if (err) {
console.log(err)
}
if (result) {
jsonWrite(res, result)
}
})
})
module.exports = router
5、存放sql語句的sqlMap.js
// sqlmap.js
var sqlMap = {
// home
home: {
search: 'select * from zp_list',
add: 'insert into zp_list(name) values (?)'
},
other:{
delete:'', // delete sql語句
post: '',
get: ''
}
}
module.exports = sqlMap
6、項目根目錄下安裝
npm install express mysql body-parser
現在我們就可以使用home/getlist接口了麼？我們的server服務還沒有啓動呢，啓動有幾個方法
1、cmd到項目中server目錄下執行 node index.js
2、編輯器啓動，我用的vscode
啓動服務以後，控制檯打印“success listen at port:3000”，說明node服務已經啓動了，如果報錯，仔細看數據庫的相關配置哦，別搞錯了
7、前端開始連接後臺數據庫
export default {
name: 'hello',
data () {
return {
}
},
methods: {
getList() {
this.$http.get('/home/getlist',{}).then((response) => {
console.log(response);
})
}
}
}
如果沒有引用vue-resource，this.$http.post是不生效的，還會報錯
報錯信息：
Uncaught TypeError: Cannot read property ‘post’ of undefined
解決方案：在main.js中引入vue-resource
在根目錄下還要安裝vue-resource哦，如果用的axios也是一樣，記得安裝
8、設置代理轉發
然後我們在前端目錄下npm run dev執行getList方法，發現控制檯報錯404，那是因爲直接訪問8080端口，是訪問不到的，這裏需要設置一下代理轉發。後端啓動的服務是3000
找到config目錄下index.js中的proxyTable設置代理轉發
proxyTable: {
'/api': {
target: 'http://localhost:3000', // 你請求的第三方接口
changeOrigin: true, //
在本地會創建一個虛擬服務端，然後發送請求的數據，
並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
pathRewrite: { // 路徑重寫，
'^/api': '' // 替換target中的請求地址，也就是說以後你在請求http://api.douban.com/v2/XXXXX這個地址的時候直接寫成/api即可。
}
}
這個時候接口地址前要加上api/home/getlist
然後再重新啓動npm run dev就可以看到數據，恭喜你！說明你的操作成功了。
9、總結
這是我花了兩天空餘時間研究出來的，突發興趣，一下總結了幾點容易犯的錯誤吧：
1、mysql安裝不小心，記得安裝mysql server服務
2、db.js文件配置數據庫的用戶名和密碼記得別搞錯了
3、記得server搭建好了要啓動服務
4、vue中用到的express、axios、vue-resouce等，記得安裝和配置
5、設置代理轉發
6、mysql服務要啓動
希望能幫助到各位感興趣的小夥伴