记小白的一次基于vue+express+mongodb个人站开发

zjxhx

　　学了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>　　<div>
　　<div>
　　<h1>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>
　　<router-view></router-view>
　　</div>
　　<div></div>
　　<span @click="stop">

　　<img src="/static/imgs/music-fly.png">　　<audio :src="src" autoplay="autoplay"></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一下（马上大四了，要找工作了想着能有点用）