詳解在vue中如何使用node.js
更新時(shí)間：2023年07月06日 16:08:43 作者：默默無聞的FYH
這篇文章主要給大家介紹了關(guān)于在vue中如何使用node.js的相關(guān)資料,vue和nodejs經(jīng)常讓新手們感到困惑,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
在vue中使用node.js。 當(dāng)然具體是使用node.js 的框架express 和mongodb來完成的。 按照以下我的步驟一步一步來，即可完成在vue中使用自己寫的接口完成增刪改查進(jìn)行頁面交互。
1：需要下載安裝mongodb。并打開
2：在vue項(xiàng)目中文件目錄下和src目錄同級創(chuàng)建一個(gè)文件。如：server 然后再server文件夾下分別創(chuàng)建 1、mongo.js 。2、index.js 。 3、server.js 。 4、package.json
3：開始在已經(jīng)創(chuàng)建的文件中加代碼
（1）在 package.json 里面加上以下代碼。示例：
{
"dependencies": {
"body-parser": "^1.20.0",
"mongoose": "^6.5.0",
}
}（2）npm install 補(bǔ)全依賴。生成node_modules 包
（3）在 mongo.js文件中鏈接到mongodb。 示例：
var express = require('express');
var router = express.Router()
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', { title: 'Express' });
});
var mgs = require('mongoose')
var url = "mongodb://127.0.0.1:27017/dataList" //連接MongoDB
console.log(url)
mgs.connect(url, function (err) {
if (!err) {
console.log('+++++++++')
}
})
// 數(shù)據(jù)類型
var type = { dateTime: String, ming: String, dizhi: String }
var dataLists = mgs.model('dataLists', type)
module.exports = dataLists
（4）在 index.js 文件用來寫接口。 示例：
var express = require('express');
var router = express.Router();
let dataLists = require('./mongo') 引入mongo.js 文件
// 添加新增 /list 為自定義接口名
router.post('/list', function (req, res) {
var obj = req.body
dataLists.create(obj, function (err, result) {
if (!err) {
res.send(result);
}
})
})
// 查詢
router.post('/querys', function (req, res) {
console.log(req)
var obj = req.body
dataLists.find(obj, function (err, result) {
if (!err) {
res.send(result);
}
})
})
// 修改
router.post('/modify', function (req, res) {
console.log(req)
var obj = req.body
dataLists.findOneAndUpdate({ _id: obj._id }, obj, function (err, result) {
if (!err) {
res.send(result)
}
})
})
// 刪除
router.post('/deleds', function (req, res) {
var obj = req.body
console.log(obj)
for (let i = 0; i < obj.length; i++) {
dataLists.deleteOne({ _id: obj[i] }, function (err, result) {
if (!err) {
res.send(result)
}
})
}
})
module.exports = router
（5）在 server.js 中進(jìn)行配置
var express = require('express');
var bodyParser = require('body-parser');
// 創(chuàng)建項(xiàng)目實(shí)例
const app = express();
// 加載路由控制
var routes = require('./index');
// 定義數(shù)據(jù)解析器
// parse application/x-www-form-urlencoded body-parser 插件 數(shù)據(jù)問題
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
// 跨域等
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', ['mytoken', 'Content-Type']);
next();
});
// 匹配路徑和路由
app.use('/', routes);
app.listen('8080', function () { //此處的8080 需要和vue項(xiàng)目中的target 端口號后綴一模一樣才可。
console.log("8080");
})
module.exports = app;（6）最后 需要啟動server.js 文件 可以在當(dāng)前文件夾下cmd進(jìn)入命令框然后 node server.js 啟動。
（7）mongodb 需要啟動服務(wù).
（8）完成以上的之后，就可以在vue頁面中調(diào)用接口使用了。
比如：
this.$post("list", data).then((res) => {
});總結(jié)
到此這篇關(guān)于在vue中如何使用node.js的文章就介紹到這了,更多相關(guān)vue使用node.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件
這篇文章主要介紹了關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了vue導(dǎo)出excel表格并支持樣式及行高修改，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue中如何動態(tài)設(shè)置css樣式的hover
這篇文章主要介紹了vue中如何動態(tài)設(shè)置css樣式的hover，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue實(shí)現(xiàn)手機(jī)號、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)）
這篇文章主要介紹了Vue實(shí)現(xiàn)手機(jī)號、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)），幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
本文主要介紹了vue中ref實(shí)現(xiàn)子向父傳值的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
最近學(xué)習(xí)了hooks,特地寫一篇文章加深一下印象,下面這篇文章主要給大家介紹了關(guān)于vue3?hook自動導(dǎo)入原理及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
Vue v-for中:key中item.id與Index使用的區(qū)別解析
這篇文章主要介紹了Vue v-for中:key中item.id與Index使用的區(qū)別解析,推薦使用【:key="item.id"】而不是將數(shù)組下標(biāo)當(dāng)做唯一標(biāo)識,前者能做到全部復(fù)用,本文給大家詳細(xì)講解,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Vue中的directive指令快速使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
基于Vue3實(shí)現(xiàn)SSR(服務(wù)端渲染)功能
在現(xiàn)代網(wǎng)頁開發(fā)中,用戶體驗(yàn)日益成為網(wǎng)站成功的重要因素,從加載時(shí)間到SEO優(yōu)化,越來越多的開發(fā)者開始關(guān)注使用服務(wù)端渲染（SSR）來提升應(yīng)用的表現(xiàn),本文將深入探討 Vue 3 的 SSR 特性,并以示例代碼展示如何實(shí)現(xiàn)這一功能,需要的朋友可以參考下2024-11-11