記小白的一次基于vue+express+mongodb個人站開發(fā)

quasiceo 2017-08-23

展開全文

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

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

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

　　　　預覽圖：

　二：技術棧：

　　　　vue vue-router

　　　　axios

　　　　express

　　　　mongoose

　　三.項目結構：

　　　　　　前端項目結構： static中存放靜態(tài)資源 apis后端項目結構

　　四：環(huán)境搭建

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

1	`npm install -g vue-cli<br>　　　　vue init webpack project-name<br>　　　　cd project<br>　　　　npm install<br>　　　　npm run dev`

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

　　五：開始編寫前端項目

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

+ View Code

　　　2.配置路由：這個項目模版已經創(chuàng)建好了（如果你在創(chuàng)建項目的時候點了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.父子組件通信

　　　　子組件動態(tài)獲取父組件數(shù)據(jù)

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

　　　　　2.非父子組件通信

　　　　為了利用vue的 $emit() 和 $on() 事件，得先創(chuàng)建一個Vue實例

　　　　var bus = new Vue() //通常情況下

　　　　此項目中由于創(chuàng)建的實例沒有名稱，我們重新創(chuàng)建一個Bus實例，并將他注入到根組件App下，便于其它組件都能訪問到

　　main.js　　　　

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

　　然后發(fā)送通過this.$root.Bus訪問到根組件的實例，將它作為載體傳送數(shù)據(jù)

        //發(fā)送 數(shù)據(jù) 
　　　　　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 發(fā)送異步請求，獲取數(shù)據(jù)

　　　1.先安裝

   cnpm i axios -D

　　在main.js中 import axios，然后悲催的發(fā)現(xiàn)在其它組件中無法使用，而它也不支持Vue.use().gg..。一頓瘋狂百度之后發(fā)現(xiàn)了簡單的解決方案：改寫原型鏈，為Vue實例的原型添加axios屬性　

1	`Vue.prototype.$axios = axios`

　　　其他組件調用

1	`this.$axios({});`

　　　2.好了，愉快的搞定了使用問題。然后在App.vue中發(fā)起了第一個ajax請求，這是請求自己寫好的后臺的一個api。

            this.$axios.post('http://www.: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 }

　　　　好，賊溜。故事的最后是上線的時候發(fā)現(xiàn)打包后部署到不行，它只適用與開發(fā)環(huán)境。崩潰了。。。。

　　　　冷靜一大下，想起來了跨域還有一個“”神奇的東西” script標簽，我去這個好，非常愉快的在html.index加上了。

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

　　5.這些東西搞完之后，頁面也就差不多了，至于樣式布局啥的就不寫了。

　　六.開始擼后端代碼了

　　1. 首先慣例，創(chuàng)建項目模版

npm install express-generator -g  // 這要管理員權限
express project               // 創(chuàng)建項目
npm i
npm start   //ok

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

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

　　　　這個001是可以變化的，對應不同的歌曲，所以這里使用了路由參數(shù)，這個：id及對應001，獲取參數(shù)需要中間件bodyParser解析

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

　　　　然后在路由中，用req.param.id獲取。這樣就避免了寫無數(shù)個。因為這個是要返回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 ：一種以文件形式存儲的數(shù)據(jù)庫模型骨架，不具備數(shù)據(jù)庫的操作能力

　 Model ：由Schema發(fā)布生成的模型，具有抽象屬性和行為的數(shù)據(jù)庫操作對

　　 Entity ：由Model創(chuàng)建的實體，他的操作也會影響數(shù)據(jù)庫

　　　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);

　　首先創(chuàng)建Schema collections 相當于mysql中的表

　　然后用mongoose將Schema發(fā)布為model

　　調用，先通過mongoose.model獲取到發(fā)布的model，再利用這個model創(chuàng)建一個實例，最后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

　　好，至此一個完整的從前端界面設計到后端的數(shù)據(jù)庫項目都搞定了，頁面也非常越快的跑起來了。哈哈哈，然而，還有很多事情去做，性能優(yōu)化，安全啥的.....

八.結語

　　哈哈，寫的有點亂七八糟的，以往都是看大神們的文章學習，今天激動了，小白自己動了一回手。沒啥技術可言，就是將自己踩的一些坑記錄了下來，方便以后回顧，如果能給其它小伙伴哪怕一點點幫助，我就很開心了0.0.最后項目在github上有發(fā)布，求順手star一下（馬上大四了，要找工作了想著能有點用）　　