記小白的一次基於vue+express+mongodb我的站開發

　　學了vue和node一段時間了，折騰了一些零零散散的小東西。立刻大四了要出去找工做了，因此早就想搭一個我的站做爲一次較爲全面的總結。由於沒有設計功底，界面設計使我這種強迫症患者苦不堪言。幸而到最後花了一個星期，慢慢磨仍是作出來能看的。本文章也只是記錄一下小白的學習記錄，而後期待大佬進行指教。好了，開始正題吧。

　　一：先放在線預覽地址吧（http://www.guoaihua.com）

　　　　github：https://github.com/guoaihua/main_project/tree/master/zming

　　　　預覽圖：

　　　　　　　　

                               

 

 　   二：技術棧：

　　　　vue vue-router

　　　　axios 

　　　　express

　　　　mongoose

　　三.項目結構：

　　　　　　前端項目結構： static中存放靜態資源        apis後端項目結構

                        

　　四：環境搭建

　　　　.首先用安裝vue-cli ,安裝項目模版,進入項目安裝依賴

　　　　npm install -g  vue-cli
　　　　vue init webpack project-name
　　　　cd project
　　　　npm install
　　　　npm run dev 

　　當你看到vue頁面自動打開並顯示他的圖標時，頁面算是搭建成功了

　　五：開始編寫前端項目

　　　1.在App.vue裏建好頁面結構，在頭部創建好路由標籤，這個在vue文檔中有很詳細的介紹，並將組件渲染到中間content中

  <div id="app">
    	<div class="container">
    		<div class="header">
    			<h1 class="logoname">ZIming</h1>
    			<ul>    				
    				<li><router-link to='/contact'>聯繫我</router-link></li>
    				<li><router-link to='/article'>我的介紹</router-link></li>
    				<li><router-link to='/project'>項目展現</router-link></li>
    				<li><router-link to='/person'>圖片欣賞</router-link></li>
    				<li><router-link to='/home'>主頁</router-link></li>
    			</ul>
    		</div>
    		<div class="content clear">
    			<router-view></router-view>
    		</div>
    		<div class="footer"></div>
    		<span class="music-fly" @click="stop"> 
				<img src="/static/imgs/music-fly.png" alt="" class="img-responsive">
				<audio :src="src" autoplay="autoplay" id="audio"></audio>
    		</span>
    	</div>
  </div>

　　

　　　2.配置路由：這個項目模版已經建立好了（若是你在建立項目的時候點了vue-router yes的話），因此咱們只須要配置

　　　　　src下的router下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home'
import project from '../components/project'
import article from '../components/article'
import person from '../components/person'
import contact from '../components/contact'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/person',
      name: 'person',
      component: person
    },
        {
      path: '/article',
      name: 'article',
      component: article
    },
        {
      path: '/project',
      name: 'project',
      component: project
    },
        {
      path: '/contact',
      name: 'contact',
      component: contact
    },
    {
        path:'/*',
        redirect:'/home'
    }
  ]
})

 

最後一個重定向網頁到home，方便打開時顯示

3.編寫5個組件

　　這裏的也沒什麼特別的，可能有一個組件之間的通訊問題，我本身的作的比較簡單沒在用到vuex。可是以前碰到過坑，因此了記錄一下。

　　 　1.父子組件通訊

　　　　子組件動態獲取父組件數據

<input v-model="sendmessage"> 
<child :receive="sendmessage"></child>
{
　　props:['receive']
}

 　　　　　2.非父子組件通訊

　　　　爲了利用vue的 $emit() 和 $on() 事件，得先建立一個Vue實例 

　　　　var bus = new Vue() //一般狀況下

 

　　　　此項目中因爲建立的實例沒有名稱，咱們從新建立一個Bus實例，並將他注入到根組件App下，便於其它組件都能訪問到

　　main.js　　　　

　　　　new Vue({
　　　　el: '#app',
　　　　　　store,
　　　　router,
　　　　template: '<App/>',
　　　　components: { App },
　　　　data:{
　　　　Bus:new Vue()
　　　　}
　　　　})

　　而後發送 經過this.$root.Bus訪問到根組件的實例，將它做爲載體傳送數據

        //發送 數據 
　　　　　this.$root.Bus.$emit('showing',this.b);
　　　　　//接受 
　　　　　this.$root.Bus.$on('showing', (data)=>{
              this.pic=data.pic;
              this.name=data.name;
              this.author=data.author;
              this.src=data.src;
         }
　　　　

 

 　　至此大部分組件通訊能搞定了，涉及到複雜的話，那就要使用vuex了，這裏就再也不談了。

　　4.axios 發送異步請求，獲取數據

　　　1.先安裝

   cnpm i axios -D

 

 　　在main.js中 import axios，而後悲催的發如今其它組件中沒法使用，而它也不支持Vue.use().gg..。一頓瘋狂百度以後發現了簡單的解決方案：改寫原型鏈，爲Vue實例的原型添加axios屬性　

    Vue.prototype.$axios = axios

　　　其餘組件調用

     this.$axios({});

　　　2.好了，愉快的搞定了使用問題。而後在App.vue中發起了第一個ajax請求，這是請求本身寫好的後臺的一個api。

            this.$axios.post('http://www.guoaihua.com:3000/users/saveInfo',{
                ip:returnCitySN.cip,
                adress:returnCitySN.cname,
                time:new Date()
            }).then(function (res) {
                console.log(res);
            })

 

　　　　很不幸返回了一串英文，禁止跨域訪問。

　　　　想到CROS，就跑到服務器上給服務端的express中加了一個頭部

app.all('*',function (req,res,next) {
    res.header("Access-Control-Allow-Origin","*");
 　  res.header("Access-Control-Allow-Headers","Content-Type");
    next();
});

 　　　　然而，事情每每並非那麼簡單的就結束了。當我調用一個搜狐查詢api時，一樣返回了禁止跨域訪問。我去。。開玩笑吧，我總不能去改它服務器吧。那。。那我就用webpack的proxy吧。在config下的index.js中找到了proxyTable

'/cityjson': {
              target: 'http://pv.sohu.com',
 　　　　　　　　pathRewrite: {'^/cityjson' : '/cityjson'}, 
　　　　　　　　　changeOrigin: true }

 

　　　　好，賊溜。故事的最後是上線的時候發現打包後部署到不行，它只適用與開發環境。崩潰了。。。。

　　　　冷靜一大下，想起來了跨域還有一個「」神奇的東西」 script標籤 ，我去這個好，很是愉快的在html.index加上了。

<script src="http://pv.sohu.com/cityjson"></script>

 

 　　5.這些東西搞完以後，頁面也就差很少了，至於樣式佈局啥的就不寫了。

　　六.開始擼後端代碼了

　　1. 首先慣例，建立項目模版 

npm install express-generator -g  // 這要管理員權限
express project               // 建立項目
npm i
npm start   //ok

 

 　　2.這個模版路由啥的已經寫好了，進去配置就ok

　　　　以前有一個音樂獲取的api ：http://www.guoaihua.com:3000/users/001 

　　　　這個001是能夠變化的，對應不一樣的歌曲，因此這裏使用了路由參數，這個：id及對應001，獲取參數須要中間件bodyParser解析

router.use(bodyParser.urlencoded({extended: false}));
router.use(bodyParser.json());

 

　　　　而後在路由中，用req.param.id獲取。這樣就避免了寫無數個。由於這個是要返回music的，因此用了sendFile();並經過path將當前目錄映射到了musics

router.get('/:id', function(req, res, next) {
  res.sendFile(path.join(__dirname,'../musics',req.params.id+'.mp3'));
});

 

　　3.mongodb ，在express框架中用mongoose模塊來控制mongodb

　　Schema ： 一種以文件形式存儲的數據庫模型骨架，不具有數據庫的操做能力

   　   Model ： 由 Schema發佈生成的模型，具備抽象屬性和行爲的數據庫操做對

　　  Entity ： 由 Model建立的實體，他的操做也會影響數據庫

　　　mongodb的安裝就不說了。安裝mongoose

 cnpm i mongoose -D

 

 　　編寫配置文件 mongoose.js

var mongoose=require('mongoose');
var db=mongoose.connect('mongodb://localhost/test');

var DataSchema=new mongoose.Schema({
    ip:{type:String},
    adress:{type:String},
    time:{type:Date,default:Date.now}
});

var MesSchema=new mongoose.Schema({
    name:{type:String},
    qq:{type:Number},
    email:{type:String},
    phone:{type:Number},
    message:{type:String},
    time:{type:Date,default:Date.now}
});

mongoose.model('usersInfo',DataSchema);
mongoose.model('mesInfo',MesSchema);

 

 　　首先建立Schema collections  至關於mysql中的表

　　 而後用mongoose將Schema發佈爲model

　　調用，先經過mongoose.model獲取到發佈的model，再利用這個model建立一個實例，最後save。

      var usersModel=mongoose.model('usersInfo');
      var data=new usersModel({
          ip:req.body.ip,
          adress:req.body.adress,
          time:req.body.time
      });

      data.save(function(err){
          console.log(err);
      });

 

 七.將項目部署到服務端

　　首先打包前端項目

  npm run build

 

 　　而後將dist拷貝到了服務端新建的一個express項目中，並在它上面加上了，並npm start 開啓

　　app.use(express.static(path.join(__dirname,
 'dist')));

 

 　　後端代碼就無論了，不想改不少api接口，因此直接扔到服務端上。在開啓這個以前要先打開服務端的mongodb，而後node ./bin/www

　　好，至此一個完整的從前端界面設計到後端的數據庫項目都搞定了，頁面也很是越快的跑起來了。哈哈哈，然而，還有不少事情去作，性能優化，安全啥的.....

八.結語

　　哈哈，寫的有點亂七八糟的，以往都是看大神們的文章學習，今天激動了，小白本身動了一回手。沒啥技術可言，就是將本身踩的一些坑記錄了下來，方便之後回顧，若是能給其它小夥伴哪怕一點點幫助，我就很開心了0.0.最後項目在github上有發佈，求順手star一下（立刻大四了，要找工做了想着能有點用）