vue nodejs mongodb 專案開發全過程

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...
目錄

vue專案

前端

使用vue-cli快速生成專案文件。

腳手架搭建

1、安裝全域性vue-cli

 npm install --global vue-cli

2、使用腳手架建立專案文件

vue init webpack vuetest

專案目錄

your project
client/     #前端文件
server/     #後臺文件
note/       #說明文件

建立元件,檢視 以home頁為例

1、在src資料夾中建立view資料夾,在view資料夾中建立home.vue元件

2、home.vue的內容格式如下:

<template>
#新增你的html內容,需要使用一個閉合的標籤包裹,例如:
<div>
<nav-header></nav-header>  
//···
<nav-footer></nav-footer>
</div>
</template>
<script>
//匯入外部引入的css樣式
import '../../static/css/index.css'
//匯入子元件
import NavHeader from '../components/NavHeader'
import NavFooter from '../components/NavFooter'
import NavCrumbs from '../components/NavCrumbs'
export default {    # 匯出讓其他地方可以使用
name: 'Home',
data () {       # 元件中資料要寫成閉包的形式
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: {   #引用子元件
NavHeader,
NavFooter,
NavCrumbs
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
# 新增該元件自己的css樣式
</style>

3、子元件:把header和footer做成子標籤,這樣可以在其他頁面使用。

配置路由

在router/index.js檔案中配置:

import Vue from 'vue'               # 匯入vue
import Router from 'vue-router'     # 使用vue-router外掛
import Home from '@/views/Home'     # 匯入元件
//···其他元件
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
//···其他元件
]
})

在元件中使用路由實現單頁切換

使用 router-link標籤,通過to 屬性新增要切換的路由,”/”表示根路由,如果沒有則表示當前路由(可以用在子路由)

<router-link class="link" to="/login" rel="nofollow" >登入</router-link>

router-link預設對映為標籤,當然可以改,除了to屬性,其他屬性可以根據自己的需要新增

在vue中圖片懶載入詳細介紹

說明

當網路載入比較慢的時候,

使用

使用vue的vue-lazyload,地址:https://www.npmjs.com/package…

安裝

npm/cnpm

$ npm install vue-lazyload/$ cnpm install vue-lazyload

CDN

CDN:https://unpkg.com/vue-lazyloa…

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)
...
</script>

如何使用

在入口檔案main.js中:

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: 'body',
components: {
App
}
})

在元件中使用:把專案元件中的需要懶載入的 :src換成v-lazy,例如:

<div class="pic">
<a href="#"><img :src="'static/img/' item.productImage" alt=""></a>
</div>

替換後

<div class="pic">
<a href="#"><img v-lazy="'static/img/' item.productImage" alt=""></a>
</div>

後端

使用express-generator生成專案

nodejs mysql專案搭建
參考express 建立專案詳解

mongodb安裝、配置、使用

mongodb教程,
mongodb下載
mongoose

視覺化工具:mongobooster

MongoDB 是一個基於分散式檔案儲存的資料庫。由 C 語言編寫。旨在為 WEB 應用提供可擴充套件的高效能資料儲存解決方案。

MongoDB 是一個介於關聯式資料庫和非關聯式資料庫之間的產品,是非關聯式資料庫當中功能最豐富,最像關聯式資料庫的。

資料庫連結

// 連線資料庫 如果不自己建立 預設test資料庫會自動生成
mongoose.connect('mongodb://localhost:27017/shop');

新增監聽事件

// 為這次連線繫結事件
const db = mongoose.connection;
// 資料庫連結錯誤監聽
db.once('error', () => console.log('Mongo connection error'));
// 資料庫連結成功監聽
db.once('open', () => console.log('Mongo connection successed'));
// 資料庫關閉監聽
db.once('close', () => console.log('Mongo connection faild'));

模組匯出

module.exports = router;

文件程式碼

var express = require('express');
var router = express.Router();
//匯入mongoose外掛
var mongoose = require('mongoose');
// 連線資料庫 如果不自己建立 預設test資料庫會自動生成
mongoose.connect('mongodb://localhost:27017/shop');
// 為這次連線繫結事件
const db = mongoose.connection;
db.once('error', () => console.log('Mongo connection error'));
db.once('open', () => console.log('Mongo connection successed'));
db.once('close', () => console.log('Mongo connection faild'));
// 匯入集合模組
var Goods = require("../modules/goods");
/* GET goods listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
//新增自己的路由
//···
module.exports = router;

集合模組程式碼

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
// 使用 module.exports 匯出 模組
module.exports = mongoose.model("Goods", new Schema({
productId: String,
productName: String,
salePrice: Number,
productImage: String,
productUrl: String
//···
}))

路由配置

在app.js檔案中完成路由配置,首先匯入

var goods = require('./routes/goods');

然後

app.use('/goods', goods);

新增二級路由

router.get('/list', function(req, res, next) {
res.send('respond with a resource');
//新增資料庫操作
//···
});

資料庫操作

查詢資料並排序輸出

在MongoDB中使用使用sort()方法對資料進行排序,sort()方法可以通過引數指定排序的欄位,並使用 1 和 -1 來指定排序的方式,其中 1 為升序排列,而-1是用於降序排列。
sort(mongoose文件)
sort菜鳥教程

//使用價格排序
Goods.find({}).sort({ 'salePrice': sort })
.exec(function(err, result) {
//···
})

按照範圍查詢使用 $gte/$gt 和 $lte/$lt

mongodb條件操作符,
條件操作符用於比較兩個表示式並從mongoDB集合中獲取資料。MongoDB中條件操作符有:

(>) 大於 - $gt
(<) 小於 - $lt
(>=) 大於等於 - $gte
(<= ) 小於等於 - $lte

使用方式

Goods.find({"likes" : {$gt : 100}}).exec(function(err,result){
//···
})

限制查詢數量limit()

如果你需要在MongoDB中讀取指定數量的資料記錄,可以使用MongoDB的Limit方法,limit()方法接受一個數字引數,該引數指定從MongoDB中讀取的記錄條數。

使用方式

Goods.find({"likes" : {$gt : 100}}).limit(8)
.exec(function(err,result){
//···
})

跳過指定數量的資料skip()

我們除了可以使用limit()方法來讀取指定數量的資料外,還可以使用skip()方法來跳過指定數量的資料,skip方法同樣接受一個數字引數作為跳過的記錄條數。skip()方法預設引數為 0 。

使用方式

Goods.find({"likes" : {$gt : 100}}).limit(8).skip(0)
.exec(function(err,result){
//···
})

路由程式碼詳情

router.get('/list', function(req, res, next) {
let sort = req.query.sort || 1;
let minPrice = req.query.minPrice || null;
let maxPrice = req.query.maxPrice || null;
let price = {};
// 篩選
if (minPrice && maxPrice) {
price = { salePrice: { $gte: minPrice, $lte: maxPrice } }
} else if (minPrice && !maxPrice) {
price = { salePrice: { $gte: minPrice } }
} else if ((!minPrice) && maxPrice) {
price = { salePrice: { $lte: maxPrice } }
} else {
price = {}
}
console.log(price)
// sort()排序, limit()限制查詢數量
Goods.find(price).sort({ 'salePrice': sort }).limit(8)
.exec(function(err, result) {
if (err) {
res.json({
status: 1,
msg: err.message
})
} else {
res.json({
status: 0,
msg: "查詢成功",
data: result
})
}
})
});

2017年10月23日20:57:46
2017年10月24日09:36:36

vue-infinite-scroll 瀑布流載入

vue-infinite-scroll

安裝

npm install vue-infinite-scroll --save

CommonJS使用方式


You can use any build tool which supports commonjs:
// register globally
var infiniteScroll =  require('vue-infinite-scroll');
Vue.use(infiniteScroll)
// or for a single instance
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
directives: {infiniteScroll}
})

ES2015 使用方式

// register globally
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
// or for a single instance
import infiniteScroll from 'vue-infinite-scroll'
new Vue({
directives: {infiniteScroll}
})

在元件中使用

在template中需要的位置插入

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
...
</div>

在script中:

var count = 0;
new Vue({
el: '#app',
data: {
data: [],
busy: false
},
methods: {
loadMore: function() {
this.busy = true;
setTimeout(() => {
for (var i = 0, j = 10; i < j; i  ) {
this.data.push({ name: count   });
}
this.busy = false;
}, 1000);
}
}
});

vue-lazyload 圖片懶載入

vue-lazyload

安裝

$ npm install vue-lazyload

配置

在main.js中匯入

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

使用方式

<script>
export default {
data () {
return {
imgObj: {
src: 'http://xx.com/logo.png',
error: 'http://xx.com/error.png',
loading: 'http://xx.com/loading-spin.svg'
},
imgUrl: 'http://xx.com/logo.png' // String
}
}
}
</script> 
<template>
<div ref="container">
<img v-lazy="imgUrl"/>
<div v-lazy:background-image="imgUrl"></div>
<!-- with customer error and loading -->
<img v-lazy="imgObj"/>
<div v-lazy:background-image="imgObj"></div>
<!-- Customer scrollable element -->
<img v-lazy.container ="imgUrl"/>
<div v-lazy:background-image.container="img"></div>
<!-- srcset -->
<img v-lazy="'img.400px.jpg'" srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
<img v-lazy="imgUrl" :srcset="imgUrl'   '?size=400 400w, '   imgUrl   ' ?size=800 800w, '   imgUrl  '/1200.jpg 1200w'" />
</div>
</template>

父元件呼叫子元件方法$refs 2017年10月27日11:23:37

<template>
<div id="app">
<input type="button" name="" id="" @click="parentCall" value="父調子" />
<hello ref="chil" />//hello元件
</div>
</template>
<script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
          parentCall () {
            this.$refs.chil.chilFn('我是父元素傳過來的')
          }
}
}
</script>
/*Hello.vue  :*/
<template>
<div class="hello"></div>
</template>
<script>
export default {
name: 'hello',
'methods': {
         chilFn (msg) {
         alert(msg)
        }
}
}
</script>

錯誤Can’t set headers after they are sent. 重複呼叫res.json({})

Error: Can't set headers after they are sent.
at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:356:11)
at ServerResponse.header (D:\phpStudy\WWW\myproject\vnshop\server\node_modul                         es\[email protected]@express\lib\response.js:730:10)
at ServerResponse.json (D:\phpStudy\WWW\myproject\vnshop\server\node_modules                         \[email protected]@express\lib\response.js:253:10)
at D:\phpStudy\WWW\myproject\vnshop\server\controller\users\users.controller                         .js:691:36
at Array.forEach (native)
at D:\phpStudy\WWW\myproject\vnshop\server\controller\users\users.controller                         .js:689:34
at Query.<anonymous> (D:\phpStudy\WWW\myproject\vnshop\server\node_modules\_                         [email protected]@mongoose\lib\model.js:3932:16)
at D:\phpStudy\WWW\myproject\vnshop\server\node_modules\[email protected]@kareem                         \index.js:273:21
at D:\phpStudy\WWW\myproject\vnshop\server\node_modules\[email protected]@kareem                         \index.js:131:16
at _combinedTickCallback (internal/process/next_tick.js:67:7)

解決方法

錯誤1

errmsg:"E11000 duplicate key error collection: shop.users index: addressList.addressId_1 dup key: { : null }"

解決方法

先執行 mongo 到 mongodb shell 命令列模式下,執行以下命令:

db.users.getIndexes(); //檢視所有索引
db.users.dropIndex({"addressId":"1"}); 

然後未解決。。。。。。。

最後只能匯入資料庫

介面文件說明

待續····

伺服器配置

購買伺服器

版瓦工
阿里雲

註冊域名

阿里雲

伺服器配置工具

安裝Xshell

使用方式

開啟工具—>新建—>填寫(名稱,主機ip:······,埠號:29007)—>使用者認證(使用者(root)和密碼(自己設定))

開始配置lnmp

apt-get update -y 對系統更新 出現Reading package lists… Done 算是成功

apt-get install zsh git curl -y 載入安裝工具

cat /etc/issue 檢視系統版本,這裡使用Ubuntu 16.04

sh -c “$(curl -fsSL https://raw.github.com/robbyr…)” 安裝zsh

wget -c http://soft.vpser.net/lnmp/ln… && tar zxf lnmp1.4.tar.gz && cd lnmp1.4 && ./install.sh lnmp 安裝lnmp,

選擇資料庫版本預設就可以

輸入資料庫密碼—輸入你的密碼(saigsf)

選擇MySQL資料庫引擎 —-輸入y或直接回車,預設選擇innoDB引擎

PHP引擎選擇,預設5.5.38

選擇預設直接回車

按任意鍵開始安裝,Ctrl c取消安裝.

LNMP指令碼就會自動安裝編譯Nginx、MySQL、PHP、phpMyAdmin、Zend Optimizer這幾個軟體。

安裝完成後,在瀏覽器中通過IP(http://69.171.77.35/)可以看到…

安裝node

採用nvm安裝node:https://github.com/creationix…

安裝nvm指令碼

試用以下兩種方式:

To install or update nvm, you can use the install script using cURL:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash
or Wget:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

配置nvm環境變數

export NVM_DIR="$HOME/.nvm" 
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

command -v nvm

安裝node

To download, compile, and install the latest release of node, do this:

nvm install node

And then in any new shell just use the installed version:

nvm use node

Or you can just run it:

nvm run node --version

Or, you can run any arbitrary command in a subshell with the desired version of node:

nvm exec 4.2 node --version

You can also get the path to the executable to where it was installed:

nvm which 5.0

安裝完成後,檢測

node -v

安裝mongoDB

匯入公鑰

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6

Create a list file for MongoDB

echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

Reload local package database

sudo apt-get update

Install the MongoDB packages

sudo apt-get install -y mongodb-org

Run MongoDB Community Edition

Start MongoDB

sudo service mongod start
or
mongod --dbpath data/ --logpath log/mongodb.log -logappend --fork

Verify that MongoDB has started successfully

[initandlisten] waiting for connections on port <port>

where <port> is the port configured in /etc/mongod.conf, 27017 by default.

Stop MongoDB

sudo service mongod stop

Restart MongoDB

sudo service mongod restart

Begin using MongoDB

Uninstall MongoDB Community Edition

Stop MongoDB

sudo service mongod stop

Remove Packages

sudo apt-get purge mongodb-org*

Remove Data Directories.

sudo rm -r /var/log/mongodb
sudo rm -r /var/lib/mongodb

配置mongod.conf檔案

刪除繫結的IP,就可以在遠端連結。

vim /etc/mongod.conf

vim 命令操作

插入,下方出現insert 就可以編輯上面的資訊

esc 退出編輯

:指令 對檔案操作

:wq 儲存並退出

:wq! 強制儲存並退出

:q 直接退出

dd 刪除一行

10dd 刪除10行

2017年10月31日09:49:36

操作

檢視埠資訊

netstat -anp | grep 27017 

檢視日誌

cat /var/log/mongodb/mongod.log

上傳專案檔案—-方法一

生成dist資料夾,並壓縮為zip格式

npm run build

npm run build是vue生成專案檔案的語句

通過xshell上傳到伺服器
自動安裝lrzsz工具

sudo apt-get install lrzsz

rz,sz是Linux/Unix同Windows進行ZModem檔案傳輸的命令列工具
優點:比ftp命令方便,而且伺服器不用開啟FTP服務。
sz:將選定的檔案傳送(send)到本地機器
rz:執行該命令會彈出一個檔案選擇視窗,從本地選擇檔案上傳到Linux伺服器

執行rz語句,選擇壓縮檔案,開始上傳

rz

在哪裡執行就會上傳到哪裡,選擇/home/wwwroot

解壓

unzip dist.zip

新增虛擬主機 ,詳情見下文,會生成一個資料夾

將解壓後的檔案複製到指定目錄,cp:複製,-r:深度複製,*:所有檔案

cp -r dist/* 目標資料夾

方法二—-從github上拉取專案

建立虛擬主機····

拉取github專案檔案

git clone https://github.com/saigsf/vnshop.git vnshop(資料夾名)

安裝淘寶映象

進入vnshop/client,進行初始化

cnpm i/npm i

執行build語句

npm run build

修改伺服器配置檔案

root 專案檔案所在目錄dist

重啟伺服器···OK

nodejs上線

專案拉取

git clone https://github.com/saigsf/vnshop.git vnshop(資料夾名)

安裝依賴

npm install

啟動測試

npm run start

使用pm2啟動服務

npm i pm2 -g

啟動

pm2 start ./bin/www

配置跨域,在專案檔案中配置好生產環境和開發環境的訪問IP
在 src/config/api.config.js

const isPro = Object.is(process.env.NODE_ENV == 'production');
module.exports = {
baseURl: isPro ? 'http://vnshop.saigsf.com/api/' : 'api/'
}

配置反向代理,nginx配置執行:

vim /usr/local/nginx/conf/vhost/vnshop.saigsf.xyz.conf

然後新增

location /api/ {
proxy_pass http://127.0.0.1:3000/; # 當訪問api的時候預設轉發到 3000埠
}

git webhook使用

webhooks允許外部服務時要通知某些事件發生在你的庫。當指定事件發生時,我們將向您提供的每個URL傳送一個POST請求。瞭解更多我們webhooks指南

在github專案倉庫,點選setting—-點選webhooks—點選add hook,輸入密碼確定

Payload URL 當我們提交程式碼後 git webhook會向這個url傳送一個post請求

Content type 選擇返回型別 (選擇json 型別)

Secret 輸入金鑰 要和程式中的金鑰保持一致

Which events would you like to trigger this webhook? 選擇要監聽的事件

 在一臺伺服器上配置多個網站

使用Nginx虛擬化配置

操作步驟

執行lnmp vhost add,輸入自己要繫結的域名,在此之前要把域名解析到當前主機。

lnmp vhost add

回車繫結,如果輸入錯誤就按Ctrl backspace 刪除

輸入自己域名對應的檔案目錄,如果不更改直接回車,預設在/home/wwwroot/··· 以你的域名資料夾名字建立目錄,如果輸入了名字,要使用全路徑(加/的)。

是否要新增靜態規則 ,根據網站程式配置選擇,一般是url 的訪問格式

是否新增日誌,最好儲存

是否選擇MySQL的表名,不用了謝謝~

end···點選任意鍵開始建立

重複以上操作建立多個網站

虛擬主機配置錯了怎麼改

vim /usr/local/nginx/conf/vhost/···.conf

server_name 域名1 域名2 域名3 ···

首訪問檔案 index index.html ···

修改配置檔案都要重啟

service nginx restart

systemctl status nginx.service #檢視狀態

/etc/init.d/nginx restart # 一般使用這個

相關文章

伺服器 最新文章