資訊專欄INFORMATION COLUMN
摘要：總的來(lái)說(shuō)就是開(kāi)發(fā)博客系統(tǒng)，探索前端走向全棧之路。我會(huì)記錄下來(lái)整個(gè)過(guò)程在我的專欄，有興趣的可以關(guān)注一下，一起學(xué)習(xí)，歡迎討論。話不多說(shuō)，先進(jìn)行前后端項(xiàng)目的初始化。安裝完成后，輸入命令切換到項(xiàng)目文件夾后輸入命令訪問(wèn)一下項(xiàng)目初始化完成。
學(xué)習(xí)JS也有一段時(shí)間了，準(zhǔn)備試著寫(xiě)一個(gè)博客項(xiàng)目，前后端分離開(kāi)發(fā)，后端用node只提供數(shù)據(jù)接口，前端用vue-cli腳手架搭建，路由也由前端控制，數(shù)據(jù)異步交互用vue的一個(gè)插件vue-resourse來(lái)做，數(shù)據(jù)庫(kù)用mongodb?？偟膩?lái)說(shuō)就是 node + vue + mongodb 開(kāi)發(fā)博客系統(tǒng)，探索前端走向全棧之路。
我會(huì)記錄下來(lái)整個(gè)過(guò)程在我的專欄，有興趣的可以關(guān)注一下，一起學(xué)習(xí)，歡迎討論。
話不多說(shuō)，先進(jìn)行前后端項(xiàng)目的初始化。
前端項(xiàng)目初始化新建項(xiàng)目的文件夾，并切換到新建的文件夾
安裝vue腳手架vue-cli 命令行輸入 npm install vue-cli -g
安裝完成后，輸入 vue init webpack blog // vue初始化，blog是項(xiàng)目的名稱，可自行更改，初始化的數(shù)據(jù)可根據(jù)自己的的需要選擇默認(rèn)或是自己命名，需要說(shuō)明的是，vue-router選項(xiàng)需要選擇yes，因?yàn)橐昂蠖朔蛛x，路由由前端控制。
安裝完成后，輸入命令 cd blog 切換到項(xiàng)目文件夾后,輸入命令 npm run dev 訪問(wèn)一下 http://localhost:8080,項(xiàng)目初始化完成。（最新版本的vue-cli不用手動(dòng)安裝依賴，他會(huì)自動(dòng)安裝，所以沒(méi)有了 npm install )
下面解釋一下項(xiàng)目的目錄
build和config文件都是關(guān)于webpack的相關(guān)配置，暫且先不管它
項(xiàng)目中安裝的依賴都存放在node_modules目錄中
src目錄就是我們?cè)陂_(kāi)發(fā)過(guò)程中寫(xiě)代碼的地方
assets存放一些js css 圖片等資源，可根據(jù)需要選擇要與不要
components中放的就是.vue的文件，每一個(gè)文件都是一個(gè)組件
router中index.js就是我們寫(xiě)路由的地方
app.vue就是最終的單頁(yè)面呈現(xiàn)的組件
main.js就是整個(gè)項(xiàng)目的入口文件
這里我用的node的express框架，先安裝expres生成器，用來(lái)快速生成express應(yīng)用骨架
命令行輸入 npm install express-generator -g
安裝成功后，命令行輸入 express blog-server // 這里blog-server是后端項(xiàng)目的名稱，根據(jù)自己需要改變
安裝完成后，進(jìn)入后端項(xiàng)目 cd blog-server
然后執(zhí)行 npm install 安裝項(xiàng)目依賴
安裝完成后，啟動(dòng)項(xiàng)目 npm start
打開(kāi)瀏覽器訪問(wèn) localhost:3000 可看到啟動(dòng)成功
前端和后端都啟動(dòng)成功，接下來(lái)就正式開(kāi)始開(kāi)發(fā)。
show time~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/19145.html
摘要：總的來(lái)說(shuō)就是開(kāi)發(fā)博客系統(tǒng)，探索前端走向全棧之路。我會(huì)記錄下來(lái)整個(gè)過(guò)程在我的專欄，有興趣的可以關(guān)注一下，一起學(xué)習(xí)，歡迎討論。話不多說(shuō)，先進(jìn)行前后端項(xiàng)目的初始化。安裝完成后，輸入命令切換到項(xiàng)目文件夾后輸入命令訪問(wèn)一下項(xiàng)目初始化完成。 學(xué)習(xí)JS也有一段時(shí)間了，準(zhǔn)備試著寫(xiě)一個(gè)博客項(xiàng)目，前后端分離開(kāi)發(fā)，后端用node只提供數(shù)據(jù)接口，前端用vue-cli腳手架搭建，路由也由前端控制，數(shù)據(jù)異步交互用...
摘要：用寫(xiě)一個(gè)用寫(xiě)一個(gè)上一節(jié)我們把數(shù)據(jù)庫(kù)連接成功了，這節(jié)我準(zhǔn)備寫(xiě)關(guān)于文章的數(shù)據(jù)接口增刪改查上次說(shuō)到接口都在文件夾里面寫(xiě)，打開(kāi)文件，首先引入文章的模型新增文章新增文章方法保存數(shù)據(jù)到數(shù)據(jù)庫(kù)如果出現(xiàn)錯(cuò)誤，直接把錯(cuò)誤進(jìn)的錯(cuò)誤中樞處理儲(chǔ)存成功后，返回給客戶 【Part1】用JS寫(xiě)一個(gè)Blog （node + vue + mongoDB）【Part2】用JS寫(xiě)一個(gè)Blog （node + vue + m...
摘要：用寫(xiě)一個(gè)用寫(xiě)一個(gè)上一節(jié)我們把數(shù)據(jù)庫(kù)連接成功了，這節(jié)我準(zhǔn)備寫(xiě)關(guān)于文章的數(shù)據(jù)接口增刪改查上次說(shuō)到接口都在文件夾里面寫(xiě)，打開(kāi)文件，首先引入文章的模型新增文章新增文章方法保存數(shù)據(jù)到數(shù)據(jù)庫(kù)如果出現(xiàn)錯(cuò)誤，直接把錯(cuò)誤進(jìn)的錯(cuò)誤中樞處理儲(chǔ)存成功后，返回給客戶 【Part1】用JS寫(xiě)一個(gè)Blog （node + vue + mongoDB）【Part2】用JS寫(xiě)一個(gè)Blog （node + vue + m...
摘要：用寫(xiě)一個(gè)上一節(jié)前后端項(xiàng)目分別初始化完成，這一小節(jié)我就從后端項(xiàng)目開(kāi)始寫(xiě)。每一個(gè)都映射到一個(gè)的集合，并定義了該集合中的文檔的形式。 【Part1】用JS寫(xiě)一個(gè)Blog （node + vue + mongoDB） 上一節(jié)前后端項(xiàng)目分別初始化完成，這一小節(jié)我就從后端項(xiàng)目開(kāi)始寫(xiě)。實(shí)現(xiàn)mongoDB數(shù)據(jù)庫(kù)的連接。 整理后端目錄 下面是通過(guò)express-generate生成的項(xiàng)目的目錄 show...
摘要：用寫(xiě)一個(gè)上一節(jié)前后端項(xiàng)目分別初始化完成，這一小節(jié)我就從后端項(xiàng)目開(kāi)始寫(xiě)。每一個(gè)都映射到一個(gè)的集合，并定義了該集合中的文檔的形式。 【Part1】用JS寫(xiě)一個(gè)Blog （node + vue + mongoDB） 上一節(jié)前后端項(xiàng)目分別初始化完成，這一小節(jié)我就從后端項(xiàng)目開(kāi)始寫(xiě)。實(shí)現(xiàn)mongoDB數(shù)據(jù)庫(kù)的連接。 整理后端目錄 下面是通過(guò)express-generate生成的項(xiàng)目的目錄 show...
閱讀 3829·2021-10-12 10:11
閱讀 3648·2021-09-13 10:27
閱讀 2555·2019-08-30 15:53
閱讀 1983·2019-08-29 18:33
閱讀 2198·2019-08-29 14:03
閱讀 1004·2019-08-29 13:27
閱讀 3327·2019-08-28 18:07
閱讀 797·2019-08-26 13:23
