学了vue和node豆蔻梢头段时间了,折腾了有的零零碎碎的小东西。马上大四了要出来找专门的职业了,所以已经想搭二个个人站作为三回相比完备的计算。因为尚未规划底工,界面设计使小编这种精神分裂症病者有苦说不出。幸好到结尾花了二个星期,逐步磨仍旧做出来能看的。本小说也只是记录一下小白的求学记录,然后希望大佬实行指教。好了,带头正题吧。

  蓬蓬勃勃:先放在线预览地址吧(

    github:

    预览图:

        官网地址 1

官网地址,                             
 官网地址 2

 

     二:技术栈:

    vue vue-router

    axios 

    express

    mongoose

  三.项目布局:

      前端项目布局: static中存放静态财富        apis后端项目组织

官网地址 3                     
  官网地址 4

  四:情况搭建

    .首先用安装vue-cli ,安装项目模版,走入项目安装信赖

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

  当您看见vue页面自动张开并显示他的Logo时,页面算是搭建形成功了

  五:先导工编织制前端项目

   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>

                <img src="/static/imgs/music-fly.png" alt="官网地址 5" class="img-responsive">
                <audio :src="src" autoplay="autoplay" id="audio"></audio>

        </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(卡塔尔(英语:State of Qatar) 和 $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
: 

    这些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一下(马上大四了,要找职业了想着能有一点用)  

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图