Node.js+Express+Vue+MySQL+axios的項目搭建全過程
更新時間：2022年12月07日 09:58:42 作者：鍵.
這篇文章主要介紹了Node.js+Express+Vue+MySQL+axios的項目搭建全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
1 基本搭建
創(chuàng)建vue項目之前需要先安裝Node.js和MySQL數(shù)據(jù)庫
1.1 vue腳手架安裝
npm i vue -g npm i @vue/cli -g //初始化vue項目 vue create 項目名
1.2 在創(chuàng)建好的項目中創(chuàng)建server文件夾
在文件夾內(nèi)創(chuàng)建這幾個文件：
新建api文件夾、db.js、index.js、sqlMap.js。（api文件存放相關api接口路徑及方法，db.js配置相關數(shù)據(jù)庫，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ù)庫配置信息 并進行導出
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ù)庫
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);
}
};
// 增加用戶接口 完整進入該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目錄下建一個前端界面
<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請求
//使用axios請求
}
}
}
</script>
1.4 啟動服務測試
此時我們還沒有安裝mysql模塊
npm i mysql --save
同時啟動前端和后端的服務
輸入數(shù)據(jù)測試：
數(shù)據(jù)插入成功！
這里需要注意一點：
前端界面表單中的name要和數(shù)據(jù)庫中的字段一致，不然數(shù)據(jù)不能插入數(shù)據(jù)庫而顯示為NULL
2 axios的使用
axios安裝和使用
安裝axios
npm i --save axios
在vue項目中的main.js中引入axios
// 引入axios import axios from 'axios' //全局注冊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請求
//使用axios請求
// console.log(this.$axios)
this.$axios({
url:'http://localhost:3000/api/user/',//請求的url地址
method:'post',
data:{
name:'胡桃',
},
}).then(function(data){
console.log(data)
}).catch(function(err){
console.log(err)
})
}
}
}
</script>
測試報錯，因為Node后端和vue端端口不一致，需要跨域
配置proxy進行跨域請求
vue根目錄找到vue.config.js,如果沒有就手動創(chuàng)建一個
module.exports={
devServer:{
proxy:{//配置跨域
'/api':{
target:'http://localhost:3000/',//這里填寫真實的后臺接口
changeOrigin:true,//允許跨域
pathRewrite:{
/* 重寫路徑，當我們在瀏覽器中看到請求的地址為：http://localhost:8080/api/core/getData/userInfo 時
實際上訪問的地址是：http://121.121.67.254:8185/core/getData/userInfo,因為重寫了 /api
*/
'^/api':'/'
}
}
}
}
}
userApi.js中新增一個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請求
//使用axios請求
// console.log(this.$axios)
this.$axios({
url:'/api/api/user/selectUser',//請求的url地址
method:'post',
data:{
name:'胡桃',
},
}).then(function(data){
console.log(data)
}).catch(function(err){
console.log(err)
})
}
}
}
</script>
重啟前端和后端服務，點擊按鈕
查看后臺控制臺
跨域請求數(shù)據(jù)成功！
proxy寫多個代理
module.exports={
devServer:{
proxy:{//配置跨域
'/api/select':{
target:'http://localhost:3000/',//這里填寫真實的后臺接口
changeOrigin:true,//允許跨域
pathRewrite:{
'^/api/select':''
}
},
'/api':{
target:'http://localhost:3000/',//這里填寫真實的后臺接口
changeOrigin:true,//允許跨域
pathRewrite:{
// api代表網(wǎng)址是： http://localhost:3000/api/user
'^/api':''
}
},
}
}
}
前端url路徑寫成哪個都可以跨域請求到數(shù)據(jù)
代碼更改后需要充錢前端服務
簡寫代碼：
同理，我們把第二個代理修改
但是這里測試請求失敗，
我們做如下修改：
最終就可以測試成功了！
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
array-uniq是一個非常實用的NPM包,用于在JavaScript中創(chuàng)建不含重復元素的數(shù)組,它提供了一個簡單而有效的方法來去除數(shù)組中的重復項,本文將介紹如何安裝和使用array-uniq來清理你的數(shù)組數(shù)據(jù),需要的朋友可以參考下2024-06-06
最近做項目遇到npm install 的問題,下面這篇文章主要給大家介紹了關于npm?install安裝過程報錯的實用解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
nodejs 提示‘xxx’ 不是內(nèi)部或外部命令解決方法
本文介紹了node.js包管理工具npm安裝模塊后，無法通過命令行執(zhí)行命令，提示‘xxx’ 不是內(nèi)部或外部命令的解決方法，給需要的小伙伴參考下。2014-11-11
本文給大家分享一段代碼，主要是解決了在項目中遇到的一個問題，批量將GBK編碼轉(zhuǎn)換為UTF8，非常實用，推薦給大家。2015-01-01
node+koa2+mysql+bootstrap搭建一個前端論壇
本篇文章通過實例給大家分享了用node+koa2+mysql+bootstrap搭建一個前端論壇的步驟，有需要的朋友參考下。2018-05-05
這篇文章主要介紹了詳解如何修改node_modules里的文件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
node.js中的http.response.writeHead方法使用說明
這篇文章主要介紹了node.js中的http.response.writeHead方法使用說明,本文介紹了http.response.writeHead的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
Node.js v8.0.0正式發(fā)布！看看帶來了哪些主要新特性
Node.js v8.0.0 已正式發(fā)布。v8.0.0 是下一個主要的版本，帶來了一系列重大的變化和新功能，內(nèi)容十分多！下面這篇文章主要帶著大家一起看看Node.js v8.0.0帶來了哪些主要新特性，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要為大家介紹了為何從eggjs升級到midwayjs的原因詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了node ftp上傳文件夾到服務器的視線方法,結合具體實例分析了node.js調(diào)用ftp模塊進行文件上傳的相關配置、連接、path路徑操作與文件傳輸實現(xiàn)方法,需要的朋友可以參考下2023-04-04