Node.js+Express+Vue+MySQL+axios的項(xiàng)目搭建全過程

更新時(shí)間：2022年12月07日 09:58:42 作者：鍵.

這篇文章主要介紹了Node.js+Express+Vue+MySQL+axios的項(xiàng)目搭建全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1 基本搭建

創(chuàng)建vue項(xiàng)目之前需要先安裝Node.js和MySQL數(shù)據(jù)庫(kù)

1.1 vue腳手架安裝

npm i vue -g
npm i @vue/cli -g

//初始化vue項(xiàng)目
vue create 項(xiàng)目名

1.2 在創(chuàng)建好的項(xiàng)目中創(chuàng)建server文件夾

在文件夾內(nèi)創(chuàng)建這幾個(gè)文件：

新建api文件夾、db.js、index.js、sqlMap.js。（api文件存放相關(guān)api接口路徑及方法，db.js配置相關(guān)數(shù)據(jù)庫(kù)，index.js配置后端端口及api路由）

index.js

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

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

// 后端api路由
app.use('/api/user', userApi);

// 監(jiān)聽端口
app.listen(3000);
console.log('success listen at port:3000......');

db.js

//數(shù)據(jù)庫(kù)配置信息 并進(jìn)行導(dǎo)出
module.exports ={
  mysql:{
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'h5',
    port: '3306'
  }
}

sqlMap.js

var sqlMap = {
  // 用戶
  user: {
    add: 'insert into user(name,age) values(?,?)',
	update:'....'
  },
  //商品
  goods:{
	  add:'insert into goods(name,desc,price,num) value(?,?,?,?)'
  },
  //訂單
  orders:{
	  ....
  }
}
module.exports = sqlMap;

userApi.js

//引入express，調(diào)用路由模塊
var express = require('express');
var router = express.Router();

//引入mysql，mysql配置文件
var models = require('../db');
var mysql = require('mysql');
var $sql = require('../sqlMap');

// 連接數(shù)據(jù)庫(kù)
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);
  }
};

// 增加用戶接口  完整進(jìn)入該post的路徑問index.js里面配置的路由加上該post的路徑
//   '/api/user/addUser'
router.post('/addUser', (req, res) => {
  let sql = $sql.user.add;
  let params = req.body;
  console.log(params);
  conn.query(sql, [params.name, params.pass], function(err, result) {
    if (err) {
      console.log("添加失敗"+err);
    }
    if (result) {
      jsonWrite(res, result);
    }
  })
});

module.exports = router;

1.3 編寫前端界面

在src的views目錄下建一個(gè)前端界面

<template>
  <div class="home">
	<form action="http://localhost:3000/api/user/addUser" method="post">
		user:<input type="text" name="name" /><br>
		pass:<input type="password" name="pass" /><br>
		<input type="submit"/>
	</form>
	
	<button type="button" @click="addUser">post添加用戶</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods:{
	  addUser(){
		// console.log(111)
		//發(fā)起ajax請(qǐng)求
		//使用axios請(qǐng)求
	  }
  }
}
</script>

1.4 啟動(dòng)服務(wù)測(cè)試

此時(shí)我們還沒有安裝mysql模塊

npm i mysql --save

同時(shí)啟動(dòng)前端和后端的服務(wù)

輸入數(shù)據(jù)測(cè)試：

數(shù)據(jù)插入成功！

這里需要注意一點(diǎn)：

前端界面表單中的name要和數(shù)據(jù)庫(kù)中的字段一致，不然數(shù)據(jù)不能插入數(shù)據(jù)庫(kù)而顯示為NULL

2 axios的使用

axios安裝和使用

安裝axios

npm i --save axios

在vue項(xiàng)目中的main.js中引入axios

// 引入axios
import axios from 'axios'

//全局注冊(cè)axios
Vue.prototype.$axios=axios

<template>
  <div class="home">
	<form action="http://localhost:3000/api/user/addUser" method="post">
		user:<input type="text" name="name" /><br>
		pass:<input type="password" name="pass" /><br>
		<input type="submit"/>
	</form>
	
	<button type="button" @click="selectUser">post添加用戶</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods:{
	  selectUser(){
		// console.log(111)
		//發(fā)起ajax請(qǐng)求
		//使用axios請(qǐng)求
		// console.log(this.$axios)
		this.$axios({
			url:'http://localhost:3000/api/user/',//請(qǐng)求的url地址
			method:'post',
			data:{
				name:'胡桃',
			},
		}).then(function(data){
			console.log(data)
		}).catch(function(err){
			console.log(err)
		})
	  }
  }
}
</script>

測(cè)試報(bào)錯(cuò)，因?yàn)镹ode后端和vue端端口不一致，需要跨域

配置proxy進(jìn)行跨域請(qǐng)求

vue根目錄找到vue.config.js,如果沒有就手動(dòng)創(chuàng)建一個(gè)

module.exports={
	devServer:{
		proxy:{//配置跨域
			'/api':{
				target:'http://localhost:3000/',//這里填寫真實(shí)的后臺(tái)接口
				changeOrigin:true,//允許跨域
				pathRewrite:{
				/* 重寫路徑，當(dāng)我們?cè)跒g覽器中看到請(qǐng)求的地址為：http://localhost:8080/api/core/getData/userInfo 時(shí)
		            實(shí)際上訪問的地址是：http://121.121.67.254:8185/core/getData/userInfo,因?yàn)橹貙懥?/api
		           */
					'^/api':'/'
				}
			}
		}
	}
}

userApi.js中新增一個(gè)post

router.post('/selectUser', (req, res) => {
  console.log(req.body);
});

<template>
  <div class="home">
	<form action="http://localhost:3000/api/user/addUser" method="post">
		user:<input type="text" name="name" /><br>
		pass:<input type="password" name="pass" /><br>
		<input type="submit"/>
	</form>
	
	<button type="button" @click="selectUser">post添加用戶</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods:{
	  selectUser(){
		// console.log(111)
		//發(fā)起ajax請(qǐng)求
		//使用axios請(qǐng)求
		// console.log(this.$axios)
		this.$axios({
			url:'/api/api/user/selectUser',//請(qǐng)求的url地址
			method:'post',
			data:{
				name:'胡桃',
			},
		}).then(function(data){
			console.log(data)
		}).catch(function(err){
			console.log(err)
		})
	  }
  }
}
</script>

重啟前端和后端服務(wù)，點(diǎn)擊按鈕

查看后臺(tái)控制臺(tái)

跨域請(qǐng)求數(shù)據(jù)成功！

proxy寫多個(gè)代理

module.exports={
	devServer:{
		proxy:{//配置跨域
			'/api/select':{
				target:'http://localhost:3000/',//這里填寫真實(shí)的后臺(tái)接口
				changeOrigin:true,//允許跨域
				pathRewrite:{
					'^/api/select':''
				}
			},
			'/api':{
				target:'http://localhost:3000/',//這里填寫真實(shí)的后臺(tái)接口
				changeOrigin:true,//允許跨域
				pathRewrite:{
				  // api代表網(wǎng)址是： http://localhost:3000/api/user
					'^/api':''
				}
			},
		}
	}
}

前端url路徑寫成哪個(gè)都可以跨域請(qǐng)求到數(shù)據(jù)