学习项目-前端-第九课：NUXT

一、preparation

1、prerequisites：node - at least v8.9.0(latest version is recommended)

2、download starter-template-master

3、command line-->cnpm install

4、change "{{ name }}"(package.json) to your project name

5、command line-->npm run dev

6、change title(nuxt.config.js-->head-->title)

二、layout/default.vue

<template>
  <div>
   <header>tensquare Social Plateform

        <router-link to="/">Home Page</router-link>

        <router-link to="/recruit">Recruit</router-link>

        <router-link to="/gathering">Activity</router-link>

      </header>

    <nuxt/><!-- /pages/index.vue -->
    <footer>Predator Copyright</footer>
  </div>
</template>
</script>

三、page route(automatic search by directory architecture)

 四、render

1、install axios-->command line:cnpm install axios --save

2、pages/gathering/index.vue(single)

<template>
  <div>
    Activity List
    <div v-for="(item,index) in items" :key="index">{{item.name}}</div>
<!--

<li v-for="(label,index) in enterprise_item.labels.split(',')" :key="index">{{label}}</li> 

  -->   <!--  按","拆分进行循环  -->

  </div> 
</template>
<script>
import axios from 'axios'
export default {
  asyncData(){
    return axios.get('http://192.168.1.66:7300/mock/5f01a8f3b2b4ff07dd0ca4fc/api/gathering').then(
      res=>{
        console.log(res.data.data)
        return {items: res.data.data}
      });
  }
}
</script>

 3、pages/recruit/index.vue(multiple)

<script>
import '~/assets/css/page-sj-recruit-index.css'
import recruitApi from '@/api/recruit'
import enterpriseApi from '@/api/enterprise'
import axios from 'axios'
export default {    
  asyncData(){
    return axios.all([recruitApi.recommend(), recruitApi.newlist(),enterpriseApi.hotlist() ]).then(
      axios.spread( function( recommendList,newList ,hostList ){
        return {
          recommendList: recommendList.data.data,
          newList: newList.data.data,
          hostList: hostList.data.data
        }
      })
    )
  }
}
</script>

4、pages/recruit/_id.vue(embedded called)

<script>
import '~/assets/css/page-sj-recruit-detail.css'
import recruitApi from '@/api/recruit'
import enterpriseApi from '@/api/enterprise'
export default {
    asyncData({params}){
      return recruitApi.findById(params.id ).then( res =>{        
        return enterpriseApi.findById( res.data.data.eid ).then( 
          res2=>{
            return {
              enterprise_item: res2.data.data,
              item:res.data.data
            }
          }
        )
      })
    }
}
</script>

五、dynamic route

 六、link static resource("~")

 七、<router-link/>

<ul class="sui-nav"> 
    <router-link tag="li" to="/" active-class="active" exact><a>首页</a></router-link>
    <router-link tag="li" to="/qa" active-class="active"><a>问答</a></router-link>
    <router-link tag="li" to="/gathering" active-class="active"><a>活动</a></router-link>
    <router-link tag="li" to="/friend" active-class="active"><a>交友</a></router-link>
    <router-link tag="li" to="/spit" active-class="active"><a>吐槽</a></router-link>
    <router-link tag="li" to="/recruit" active-class="active"><a>招聘</a></router-link>
</ul>

1、tag="li"--><li></li>

2、active-class="active"

 

3、exact-->precise to the link

 八、waterfall flow component(vue-infinite-scroll)

1、install-->command line:cnpm install vue-infinite-scroll --save

2、configured in plugins/vue-infinite-scroll.js

import Vue from 'vue'
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3、configured in nuxt.config.js

head: {
    title: 'predator',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '{{escape description }}' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  plugins: [

    { src:'~plugins/vue-infinite-scroll.js' ,ssr: false},

    { src:'~plugins/element-ui.js' ,ssr: false}

  ],

  css: [

    'element-ui/lib/theme-chalk/index.css'

  ],

 CSS:("starter-template-master/node_modules/element-ui/lib/theme-chalk/index.css")

4、use(pages/gathering/index.vue)

<div class="activity-list" v-infinite-scroll="loadMore"> 

<template>
<div class="wrapper activities"> 
   <div class="activity-card-list"> 
    <div class="top-title"> 
     <h4 class="latest">最新活动</h4>      
     <div class="clearfix"></div> 
    </div> 
    <div class="activity-list" v-infinite-scroll="loadMore"> 
     <ul class="activity"> 
      <li class="activity-item" v-for="(item,index) in items" :key="index"> 
       <div class="activity-inner"> 
        <a href="http://"></a> 
        <div class="img">
         <a :href="'/gathering/item/'+item.id" target="_blank"><img :src="item.image" alt="" /></a>
        </div> 
        <div class="text"> 
         <p class="title">{{item.name}}</p> 
         <div class="fl goin"> 
          <p>时间：{{item.starttime}}</p> 
          <p>城市：{{item.city}}</p> 
         </div> 
         <div class="fr btn"> 
          <span class="sui-btn btn-bao">立即报名</span> 
         </div> 
         <div class="clearfix"></div> 
        </div> 
       </div> </li> 

     </ul> 
    </div> 
   </div> 
  </div> 
</template>
<script>
import '~/assets/css/page-sj-activity-index.css'
import gatheringApi from '~/api/gathering'

export default {
  data(){
    return {
      pageNo: 1
    }
  },
  asyncData(){
    return gatheringApi.search(1,12,{state: '1'}).then(res => {
      return {items: res.data.data.rows}
    })
  },
  methods: {
    loadMore(){
      this.pageNo++
      gatheringApi.search(this.pageNo,12,{state: '1'}).then(res => {
        this.items = this.items.concat(res.data.data.rows);
      });
    }
  }
}
</script>

 九、Share.js

1、use javascript and css

export default {
    asyncData( {params} ){
        return gatheringApi.findById(params.id).then(res=>{
            return {item: res.data.data}
        })
    },
    head: {
        script: [
            {src: 'https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js'}
        ],
        link: [
            {rel: 'stylesheet',href: 'https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css'}
        ]
    }
}

 2、usage

<div class="social-share" data-sites="weibo,wechat" :data-title="item.name" data-url="https://www.cnblogs.com/DotSDot/"></div>

3、options

 十、js-cookie(save user information at front end)

1、install-->command line:cnpm install js-cookie --save

2、create utils/auth.js

import Cookies from 'js-cookie'

const TokenKey = 'User-Token'
const NameKey = 'User-Name'
const AvatarKey = 'User-Avatar'

export default {
    setUser(token,name,avatar){
        Cookies.set(TokenKey,token),
        Cookies.set(NameKey,name),
        Cookies,set(AvatarKey,avatar)
    }
}

3、use(login.vue)

<script>
import '~/assets/css/page-sj-person-loginsign.css'
import userApi from '@/api/user'
import Auth from '@/utils/auth'
export default {
  data(){
    return {
      pojo: {},
      code: '',
      mobile: '',
      password: ''
    }
  },
  methods: {
    sendsms(){
      userApi.sendsms(this.pojo.mobile).then(res=>{
        this.$message({
          message: res.data.message,
          type: (res.data.flag?'success':'error')
        })
      })
    },
    register(){
      userApi.register(this.pojo,this.code).then(res=>{
        this.$message({
          message: res.data.message,
          type: (res.data.flag?'success':'error')
        })
      })
    },
    login(){
      userApi.login(this.mobile,this.password).then(res=>{
        if(res.data.flag){
          Auth.setUser(res.data.data.token,res.data.data.name,res.data.data.avatar);
          location.href = '/manager'
        } else {
          this.$message({
          message: res.data.message,
          type:'error'
        })
        this.mobile = '',
        this.password = ''
        }
      })
    }
  }
}
</script>