设为首页 收藏本站
查看: 1171|回复: 0

[经验分享] 记小白的一次基于vue+express+mongodb个人站开发

[复制链接]

尚未签到

发表于 2017-12-14 20:58:04 | 显示全部楼层 |阅读模式
  学了vue和node一段时间了,折腾了一些零零散散的小东西。马上大四了要出去找工作了,所以早就想搭一个个人站作为一次较为全面的总结。因为没有设计功底,界面设计使我这种强迫症患者苦不堪言。幸而到最后花了一个星期,慢慢磨还是做出来能看的。本文章也只是记录一下小白的学习记录,然后期待大佬进行指教。好了,开始正题吧。
  一:先放在线预览地址吧(http://www.guoaihua.com)
  github:https://github.com/guoaihua/main_project/tree/master/zming
  预览图:
DSC0000.jpg

DSC0001.jpg

  二:技术栈:
  vue vue-router
  axios
  express
  mongoose
  三.项目结构:
  前端项目结构: static中存放静态资源        apis后端项目结构
DSC0002.png                          DSC0003.png

  四:环境搭建
  .首先用安装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一下(马上大四了,要找工作了想着能有点用)  

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-424158-1-1.html 上篇帖子: 利用Scrapy爬取所有知乎用户详细信息并存至MongoDB 下篇帖子: Redis、Memcache和MongoDB的区别
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表