nuxt server rendering technology

Chapter 5 website front desk - activities and recruitment

Learning objectives:

  • Master the basic usage of NUXT framework
  • Complete the construction of the front desk of the 10th power website
  • Complete the function of the front desk activity module of the 10th power website
  • Complete the function of the recruitment module in the front desk of the 10th power website

1 server rendering technology NUXT

1.1 what is server-side rendering

Server side rendering, also known as SSR (server side render), is to complete the content of the page on the server side, rather than to obtain data through AJAX on the client side.

Compared with the Traditional SPA (single page application - single page application), the advantages of server-side rendering (SSR) mainly lie in: better SEO, because the search engine crawler grabbing tool can directly view the fully rendered page.

Note that Google and Bing are good at indexing synchronized JavaScript applications so far. Synchronization is the key here. If your application initially displays the loading chrysanthemum chart, and then obtains the content through Ajax, the grabbing tool does not wait for the asynchronous completion before grabbing the page content. In other words, if SEO is critical to your site and your page is getting content asynchronously, you may need server-side rendering (SSR) to solve this problem.

Faster time to content, especially for slow network conditions or slow running devices. You don't have to wait for all the JavaScript to download and execute to display the server rendered markup, so your users will see the full rendered page more quickly. Generally, better user experience can be generated, and server-side rendering (SSR) is crucial for applications where "time-to-content is directly related to conversion rate".

1.2 what is NUXT

Nuxt.js is a lightweight application framework based on Vue.js, which can be used to create server-side rendering (SSR) applications, and can also be used as a static site engine to generate static site applications, with elegant code structure layering and hot loading features.

Official website:

https://zh.nuxtjs.org/

1.3 NUXT environment construction

(1) We're from the website Download compressed package of template Extract starter-template-master.zip, and modify the name in package.json of the template directory

(2) Enter the template directory under the directory at the command prompt

(3) Installation dependency

cnpm install

(4) Modify package.json

 ......
 "name": "tensquare",
 ......

(5) Modify nuxt.config.js

......
title: 'The ten power'
......

(6) Test run

npm run dev

1.4 NUXT directory structure

(1) Resource directory assets

Use to organize static resources such as LESS, SASS, or JavaScript that are not compiled.

(2) components directory

Vue.js component for organizing applications. Nuxt.js will not extend and enhance the vue.js components in this directory, that is, these components will not have the characteristics of asyncData method like page components.

(3) layouts

Layout components for organizing applications.

(4) Page directory pages

Routes and views for organizing applications. The Nuxt.js framework reads all the. vue files in the directory and automatically generates the corresponding routing configuration.

(5) plugins directory

Used to organize Javascript plug-ins that need to run before the root vue.js application is instantiated.

(6) nuxt.config.js file

The file nuxt.config.js is used to organize the personalized configuration of Nuxt.js application, so as to override the default configuration.

1.5 NUXT quick start

1.5.1 define layout

We usually have the same head and tail of the website. We can extract the head and tail to form a layout page

Modify the default.vue in the layouts directory

<template>
  <div>
      <header>NUXT Small entry Demo</header>
        <nuxt/>
      <footer>--Black horse programmer--</footer>
  </div>
</template>

< nuxt / > is the content area

1.5.2 page routing

Create a folder in the page directory

[failed to transfer the pictures in the external link. The source station may have anti-theft chain mechanism. It is recommended to save the pictures and upload them directly (img-Y8r2LAQ8-1583990044377)(image/5-1.jpg))

Create index.vue from the recruit directory

<template>
  <div>
    //Recruitment list
  </div>
</template>

gathering directory create index.vue

<template>
  <div>
    //Activity list
  </div>
</template>

The route of NUXT is automatically generated according to the directory, and there is no need to write.

Modify default.vue, add navigation link in header

      <router-link to="/">home page</router-link>
      <router-link to="/recruit">recruit</router-link>
      <router-link to="/gathering">activity</router-link>

Click the navigation link to test the routing effect

1.5.3 data rendering

(1) Install axios for asynchronous data acquisition

cnpm install axios --save

(2) Modify the index.vue of the gathering directory

<template>
  <div>
    //Activity list
    <div v-for="(item,index) in items" :key="index" >{{item.name}}</div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
    asyncData () {
        return axios.get('http://192.168.184.133:7300/mock/5af314a4c612520d0d7650c7/gathering/gathering')
           .then( res => {
                return { items: res.data.data }
           })
    }
}
</script>

asyncData is a method for loading data asynchronously

1.5.4 dynamic routing

If we need to query activity details based on ID, we need to use dynamic routing. NUXT's dynamic route is a vue file starting with an underscore, and the parameter name is the file name following the underscore

Create pages/gathering/item/_id.vue

<template>
  <div>
    //Activity details
    {{item.id}}
    <hr>
    {{item.name}}

  </div>
</template>
<script>
import axios from 'axios'
export default {
    asyncData( {params} ){
        //params.id
        return axios.get(`http://192.168.184.133:7300/mock/5af314a4c612520d0d7650c7/gathering/gathering/${params.id}`).then(
            res =>{              
              return {item: res.data.data}
            }
        )
    }
}
</script>

We type in the address field http://localhost:3000/gathering/item/1 You can see the running results

Click the link on the activity list page to enter the details page

    Activity list
    <div v-for="(item,index) in items" :key="index">
        <nuxt-link :to="'/gathering/item/'+item.id">{{item.name}}</nuxt-link>
    </div>

When v-for 'is used to update the rendered element list, the in place reuse strategy is used by default. When the list data is modified, it will judge whether a value is modified according to the key value. If it is modified, it will be re rendered, otherwise the elements before it will be reused;
The function of nuxt link and router-link Consistent, it is a jump of routing.

2 10 times website front desk construction

2.1 overall layout of the website

(1) Copy static resources: copy the css, img, and plugins directories in the static prototype to the assets directory.

(2) We refer to the activiti index.html page in the static prototype to write the general layout of the website, that is, the head and tail of the website

Modify the default.vue under layouts as follows:

<template>
  <div>
      <header>
        <div class="activity-head">
          <div class="wrapper">
            <div class="sui-navbar">
                <div class="navbar-inner">
                  <a href="index-logined.html" class="sui-brand"><img src="~/assets/img/asset-logo-black.png" alt="Social contact"/></a>
                  <ul class="sui-nav">
                    <li class="active"><a href="~/assets/headline-logined.html">Headlines</a></li>
                    <li><a href="~/assets/qa-logined.html" >Questions and answers</a></li>
                    <li><a href="~/assets/activity-index.html" >activity</a></li>
                    <li><a href="~/assets/makeFriends-index.html" >Make friends</a></li>
                    <li><a href="~/assets/spit-index.html" >Make complaints</a></li>
                    <li><a href="~/assets/recruit-index.html"  >recruit</a></li>
                  </ul>
                  <form class="sui-form sui-form pull-left">
                    <input type="text" placeholder="Enter keywords...">
                    <span class="btn-search fa fa-search"></span>
                  </form>
                  <div class="sui-nav pull-right info">
                      <li><a href="~/assets/other-notice.html" target="_blank" class="notice">notice</a></li>
                      <li class="hover">
                        <span class="fa fa-plus "></span>
                        <ul class="hoverinfo">
                          <li><i class="fa fa-share-alt" aria-hidden="true"></i> <a href="~/assets/headline-submit.html">Share</a></li>
                          <li><i class="fa fa-question-circle" aria-hidden="true"></i> <a href="~/assets/qa-submit.html" target="_blank">Asking questions</a></li>
                          <li><i class="fa fa-comments" aria-hidden="true"></i><a href="~/assets/spit-submit.html" target="_blank">To make complaints about</a></li>
                          <li><i class="fa fa-heartbeat" aria-hidden="true"></i> <a href="~/assets/makeFriends-submit.html" target="_blank">Appointment</a></li>
                        </ul>
                      </li>
                      <li><a href="~/assets/person-homepage.html" target="_blank" class="homego"><img src="~/assets/img/widget-photo.png" alt="User head"></a></li> 
                  </div>
              </div>
            </div>
          </div>
        </div>
      </header>
      <nuxt/>
      <footer>
        <!--Bottom copyright-->
        <div class="footer">
            <div class="wrapper">
                <div class="footer-bottom">
            <div class="link">
              <dl>
                <dt>Website related</dt>
                <dd>About us</dd>
                <dd>Terms of service</dd>
                <dd>Help center</dd>
                <dd>Editor syntax</dd>
              </dl>
              <dl>
                <dt>Frequently used links</dt>
                <dd>Intelligent Podcasting</dd>
                <dd>Wisdom Forum</dd>
              </dl>
              <dl>
                <dt>Contact us</dt>
                <dd>Contact us</dd>
                <dd>Join us</dd>
                <dd>Suggested feedback</dd>
              </dl>
              <dl>
                <dt>Pay attention to us</dt>
                <dd>micro-blog</dd>
                <dd>twitter</dd>
              </dl>

              <div class="xuke">
                <h3>Content permission</h3>
                <p>Unless otherwise specified, the user's content is signed by knowledge sharing-Non commercial use-No deduction 4.0 international licensing agreement (CC BY-NC-ND 4.0) Permit</p>
                <p>The website is updated by the Institute of communication and intelligence</p>
              </div>
            </div>


            <p class="Copyright">Copyright © 2017 Q & a community current version 0.0.1</p>
          </div>
            </div>
        </div>

      </footer>
  </div>
</template>
<script>
import '~/assets/plugins/normalize-css/normalize.css'
import '~/assets/plugins/yui/cssgrids-min.css'
import '~/assets/plugins/sui/sui.min.css'
import '~/assets/plugins/sui/sui-append.min.css'
import '~/assets/plugins/font-awesome/css/font-awesome.min.css'
import '~/assets/css/widget-base.css'
import '~/assets/css/widget-head-foot.css'
export default {
}
</script>

2.2 headline page

Modify pages/index.vue as follows:

<template>
<div class="sui-container wrapper">
<div class="sj-content"> 
    <div class="left-nav"> 
     <div class="float-nav" id="float-nav"> 
      <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical"> 
       <li class="active"><a>Popular</a></li> 
       <li><a href="#">Cattle expert area</a></li> 
       <li><a href="#">machine learning</a></li> 
       <li><a href="#">Backend development</a></li> 
       <li><a href="#">Artificial intelligence</a></li> 
       <li><a href="#">virtual reality</a></li> 
       <li><a href="#">Business Forecasting</a></li> 
       <li><a href="#">Front-end development</a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="right-content"> 
     <div class="fl middle"> 
      <div class="carousel"> 
       <div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide"> 
        <ol class="carousel-indicators"> 
         <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
         <li data-target="#myCarousel" data-slide-to="1"></li> 
         <li data-target="#myCarousel" data-slide-to="2"></li> 
        </ol> 
        <div class="carousel-inner"> 
         <div class="active item"> 
          <img src="~/assets/img/widget-banner01.png" /> 
         </div> 
         <div class="item"> 
          <img src="~/assets/img/widget-banner02.png" /> 
         </div> 
         <div class="item"> 
          <img src="~/assets/img/widget-banner01.png" /> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="data-list"> 
       <ul class="headline fixed" id="headline"> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 22, 12:01</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content">Didi and 360 have opened their own plug-in frameworks, VirtualAPK And RePlugin,As a plug-in enthusiast, I can't wait to download it over the weekend Virtualapk Framework for research, this blog brings</p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 12 / 12 13:34</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content">Didi and 360 have opened their own plug-in frameworks, VirtualAPK And RePlugin,As a plug-in enthusiast, I can't wait to download it over the weekend Virtualapk Framework for research, this blog brings</p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="~/assets/img/widget-list01.png" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 12 / 12 13:34</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content"></p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 10:34, July 7</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content">Didi and 360 have opened their own plug-in frameworks, VirtualAPK And RePlugin,As a plug-in enthusiast, I can't wait to download it over the weekend Virtualapk Framework for research, this blog brings</p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="~/assets/img/widget-list02.png" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 12 / 12 13:34</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content"></p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 10:34, July 7</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content">Didi and 360 have opened their own plug-in frameworks, VirtualAPK And RePlugin,As a plug-in enthusiast, I can't wait to download it over the weekend Virtualapk Framework for research, this blog brings</p> </li> 
       </ul> 
       <div class="stop"> 
        <a href="javascript:;">32 See here minutes ago, click refresh <i class="fa fa-refresh" aria-hidden="true"></i></a> 
       </div> 
       <ul id="data-list-down" class="headline loading"> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 22, 12:01</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content">Didi and 360 have opened their own plug-in frameworks, VirtualAPK And RePlugin,As a plug-in enthusiast, I can't wait to download it over the weekend Virtualapk Framework for research, this blog brings</p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 12 / 12 13:34</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content">Didi and 360 have opened their own plug-in frameworks, VirtualAPK And RePlugin,As a plug-in enthusiast, I can't wait to download it over the weekend Virtualapk Framework for research, this blog brings</p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="~/assets/img/widget-list01.png" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 12 / 12 13:34</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content"></p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 10:34, July 7</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content">Didi and 360 have opened their own plug-in frameworks, VirtualAPK And RePlugin,As a plug-in enthusiast, I can't wait to download it over the weekend Virtualapk Framework for research, this blog brings</p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="~/assets/img/widget-list02.png" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 12 / 12 13:34</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content"></p> </li> 
        <li class="headline-item"> 
         <div class="fl indexImg"> 
          <img src="" /> 
         </div> 
         <div class="words"> 
          <h3>Drive.ai Financing 50 million Wu Enda to join the board of directors <span><img src="~/assets/img/widget-vip.png" class="vip" /></span></h3> 
          <h5 class="author"> 
           <div class="fl"> 
            <span class="authorName"> <img src="~/assets/img/widget-photo.png" alt="" /> Glass through </span> 
            <span>6 10:34, July 7</span> 
           </div> 
           <div class="fr attention"> 
            <span class="attentionText">follow</span> 
            <span class="beforeclose"> <i class="fa fa-times delete" aria-hidden="true"></i> <i class="nolike">Uninterested</i> </span> 
           </div> 
           <div class="clearfix"></div> </h5> 
         </div> <p class="content">Didi and 360 have opened their own plug-in frameworks, VirtualAPK And RePlugin,As a plug-in enthusiast, I can't wait to download it over the weekend Virtualapk Framework for research, this blog brings</p> </li> 
       </ul> 
       <ul id="loaded" class="headline"> 
       </ul> 
      </div> 
      <!-- <script src="~/assets/data-list.js" type="text/javascript"></script> --> 
     </div> 
     <div class="fl right"> 
      <div class="activity"> 
       <div class="acti">
        <img src="~/assets/img/widget-activity01.png" alt="Activity 1" />
       </div> 
       <div class="acti">
        <img src="~/assets/img/widget-activity02.png" alt="Activity 1" />
       </div> 
      </div> 
      <div class="block-btn"> 
       <p>Today, is there anything good to share with you?</p> 
       <a class="sui-btn btn-block btn-share" href="~/assets/headline-submit.html" target="_blank">Publish share</a> 
      </div> 
      <div class="question-list"> 
       <h3 class="title">Popular answers</h3> 
       <div class="lists"> 
        <ul> 
         <li class="list-item"> <p class="list-title">What should you pay attention to about system Q & A?</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />Glass tube</span> <span>6 22, 12:01</span> </p> </li> 
         <li class="list-item"> <p class="list-title">Should you pay attention to all the questions and answers about the system?</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />Glass tube</span> <span>6 22, 12:01</span> </p> </li> 
         <li class="list-item"> <p class="list-title">Should you pay attention to all the questions and answers about the system?</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />Glass tube</span> <span>6 22, 12:01</span> </p> </li> 
         <li class="list-item"> <p class="list-title">Should you pay attention to all the questions and answers about the system?</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />Glass tube</span> <span>6 22, 12:01</span> </p> </li> 
         <li class="list-item"> <p class="list-title">Should you pay attention to all the questions and answers about the system?</p> <p class="authorInfo"> <span class="authorName"><img src="~/assets/img/widget-photo.png" alt="" />Glass tube</span> <span>6 22, 12:01</span> </p> </li> 
        </ul> 
        <a class="sui-btn btn-block btn-bordered btn-more">View more</a> 
       </div> 
      </div> 
      <div class="card-list"> 
       <div class="head"> 
        <h3 class="title">meet TA</h3> 
       </div> 
       <div class="list"> 
        <ul> 
         <li class="card-item"> 
          <div class="attention"> 
           <span>Focus on matching:<i class="degree">83%</i></span> 
           <span class="fr"><i class="fa fa-heart-o" aria-hidden="true"></i><i class="fa fa-times close" aria-hidden="true"></i></span> 
          </div> 
          <div class="img"> 
           <img src="~/assets/img/widget-t01be3f1015cf52e1f3.png" alt="" /> 
          </div> 
          <div class="info"> 
           <div class="fl photo">
            <img src="~/assets/img/widget-photo.png" alt="" />
           </div> 
           <div class="fl intro"> 
            <p>[Xiner] has released an invitation to date carving time</p> 
            <p class="name">Glass through <span class="date">6 22, 12:01</span></p> 
           </div> 
           <div class="clearfix"></div> 
          </div> </li> 
         <li class="card-item"> 
          <div class="attention"> 
           <span>Focus on matching:<i class="degree">86%</i></span> 
           <span class="fr"><i class="fa fa-heart-o" aria-hidden="true"></i><i class="fa fa-times close" aria-hidden="true"></i></span> 
          </div> 
          <div class="img"> 
           <img src="~/assets/img/widget-MOG88A60E7ZI.png" alt="" /> 
          </div> 
          <div class="info"> 
           <div class="fl photo">
            <img src="~/assets/img/widget-photo.png" alt="" />
           </div> 
           <div class="fl intro"> 
            <p>[Xiner] has released an invitation to date carving time</p> 
            <p class="name">Glass through <span class="date">6 22, 12:01</span></p> 
           </div> 
           <div class="clearfix"></div> 
          </div> </li> 
         <li class="card-item"> 
          <div class="attention"> 
           <span>Focus on matching:<i class="degree">78%</i></span> 
           <span class="fr"><i class="fa fa-heart-o" aria-hidden="true"></i><i class="fa fa-times close" aria-hidden="true"></i></span> 
          </div> 
          <div class="img"> 
           <img src="~/assets/img/widget-t019e2d84e53580b099.png" alt="" /> 
          </div> 
          <div class="info"> 
           <div class="fl photo">
            <img src="~/assets/img/widget-photo.png" alt="" />
           </div> 
           <div class="fl intro"> 
            <p>[Xin'er] released an invitation to date carving time</p> 
            <p class="name">Glass through <span class="date">6 22, 12:01</span></p> 
           </div> 
           <div class="clearfix"></div> 
          </div> </li> 
        </ul> 
        <a class="sui-btn btn-block btn-bordered btn-more">View more</a> 
       </div> 
      </div> 
      <div class="activity-list"> 
       <h3 class="title">event calendar</h3> 
       <div class="list"> 
        <ul> 
         <li class="list-item"> <p class="list-time"> 2017/06/30 Beijing</p> 
          <div class="list-content clearfix"> 
           <div class="fl img"> 
            <img src="~/assets/img/widget-simple.png" alt="" /> 
           </div> 
           <div> 
            <p>Online Summit | Technical analysis and innovation practice of key and difficult points in front end development</p> 
           </div> 
          </div> </li> 
         <li class="list-item"> <p class="list-time"> 2017/06/30 Beijing</p> 
          <div class="list-content clearfix"> 
           <div class="fl img"> 
            <img src="~/assets/img/widget-simple.png" alt="" /> 
           </div> 
           <div> 
            <p>Online Summit | Technical analysis and innovation practice of key and difficult points in front end development</p> 
           </div> 
          </div> </li> 
         <li class="list-item"> <p class="list-time"> 2017/06/30 Beijing</p> 
          <div class="list-content clearfix"> 
           <div class="fl img"> 
            <img src="~/assets/img/widget-simple.png" alt="" /> 
           </div> 
           <div> 
            <p>Online Summit | Technical analysis and innovation practice of key and difficult points in front end development</p> 
           </div> 
          </div> </li> 
         <li class="list-item"> <p class="list-time"> 2017/06/30 Beijing</p> 
          <div class="list-content clearfix"> 
           <div class="fl img"> 
            <img src="~/assets/img/widget-simple.png" alt="" /> 
           </div> 
           <div> 
            <p>Online Summit | Technical analysis and innovation practice of key and difficult points in front end development</p> 
           </div> 
          </div> </li> 
        </ul> 
        <a class="sui-btn btn-block btn-bordered btn-more">View more</a> 
       </div> 
      </div> 
      <div class="ad-carousel"> 
       <div class="carousel"> 
        <div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide"> 
         <ol class="carousel-indicators"> 
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
          <li data-target="#myCarousel" data-slide-to="1"></li> 
          <li data-target="#myCarousel" data-slide-to="2"></li> 
         </ol> 
         <div class="carousel-inner"> 
          <div class="active item"> 
           <img src="~/assets/img/widget-ad01.png" /> 
          </div> 
          <div class="item"> 
           <img src="~/assets/img/widget-ad01.png" /> 
          </div> 
          <div class="item"> 
           <img src="~/assets/img/widget-ad01.png" /> 
          </div> 
         </div> 
         <span class="adname">Advertisement</span> 
        </div> 
       </div> 
      </div> 
      <!-- <link rel="import" href=".~/assets/.~/assets/modules/ui-modules/footer/footer.html?__inline"> --> 
     </div> 
    </div> 
   </div> 
</div>
</template>

<script>
import '~/assets/css/page-sj-headline-login.css'
</script>

Refer to the header-login.html page for construction, and replace. / batch with ~ / assets after copying the code/

2.4 other channel pages

Build the following pages as described above

(1) Create pages/qa/index.vue

(2) Create pages/gathering/index.vue (activity homepage)

(3) Create pages/friends/index.vue

(4) make complaints about pages/spit/index.vue.

(5) Set up pages/recruit/index.vue (recruitment homepage)

2.5 website navigation

Modify layouts/default.vue

<ul class="sui-nav">
    <router-link to="/" tag="li" active-class="active" exact><a>Headlines</a></router-link>
    <router-link to="/qa" tag="li" active-class="active"><a>Questions and answers</a></router-link>
    <router-link to="/gathering" tag="li" active-class="active"><a>activity</a></router-link>
    <router-link to="/friends" tag="li" active-class="active"><a>Make friends</a></router-link>
    <router-link to="/spit" tag="li" active-class="active"><a>Make complaints</a></router-link>
    <router-link to="/recruit" tag="li" active-class="active"><a>recruit</a></router-link>    </ul>

See official documents for details:

https://router.vuejs.org/zh-cn/api/router-link.html

3 activity module

3.1 activity list page

3.1.1 data rendering

In this step, we will read the simulated dynamic data to complete the data rendering part of the server

(1) Create utils folder, and create request.js under utils to encapsulate axios

import axios from 'axios'
// Create axios instance
const service = axios.create({
    baseURL: 'http://192.168.184.133:7300/mock/5af314a4c612520d0d7650c7', // Base URL of api
    timeout: 30000 // Request timeout
  })
export default service

(2) Create the api folder, copy the api/gathering.js of the management background project to the api folder

(3) Modify pages/gathering/index.vue

<template>
<div class="wrapper activities"> 
   <div class="activity-card-list"> 
    <div class="top-title"> 
     <h4 class="latest">Latest activities</h4>      
     <div class="clearfix"></div> 
    </div> 
    <div class="activity-list"> 
     <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>Time:{{item.starttime}}</p> 
          <p>City:{{item.city}}</p> 
         </div> 
         <div class="fr btn"> 
          <span class="sui-btn btn-bao">Sign up immediately</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 {
    asyncData(){
      return  gatheringApi.search(1,12,{state:'1'}).then( res => {
          return {items: res.data.data.rows }
       })
    }
}
</script>

(4) In order to achieve the perfect test effect, we modify the easyMock interface

URL:/gathering/gathering/search/{page}/{size} (post)

{
  "flag": true,
  "code": 20000,
  "message": "@string",
  "data": {
    "total": "@integer(60, 100)",
    "rows|12": [{
      "id": "@string",
      "name": "@cword(8,12)",
      "summary": "@cword(20,40)",
      "detail": "@cword(20,40)",
      "sponsor": "@string",
      "image": "https://img-ads.csdn.net/2018/201805171739161420.jpg",
      "starttime": "@date",
      "endtime": "@date",
      "address": "@county(true)",
      "enrolltime": "@date",
      "state": "1",
      "city": "@city"
    }]
  }
}

3.1.2 waterfall components

We use the waterfall flow component Vue infinite scroll here to install:

cnpm install vue-infinite-scroll --save

code implementation

(1) Create vue-infinite-scroll.js under plugins

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

(2) Modify nuxt.config.js

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

(3) Modify page pages/gathering/index.vue

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

Add pageNo to record page numbers

  data() {
      return {
        pageNo: 1
      }
  },

Writing method loadMore

    methods: {
      loadMore(){
        this.pageNo++
        gatheringApi.search(this.pageNo,12,{state:'1'}).then( res => {
          this.items = this.items.concat( res.data.data.rows )
        })
      }
    }

3.2 activity details page

3.2.1 activity detail page construction

Modify the content of pages/gathering/item/_id.vue and build it according to the static prototype page activity-detail.html. The code is omitted

3.2.2 data rendering

Modify pages/gathering/item/_id.vue

<template>
  <div class="wrapper activities"> 
   <h1>{{item.name}}</h1> 
   <div class="img-text"> 
    <div class="left-img"> 
     <img :src="item.image" alt="" /> 
    </div> 
    <div class="right-txt"> 
     <p>Start time: {{item.starttime}}</p> 
     <p>End time: {{item.endtime}}</p> 
     <p>Venue: {{item.address}}</p> 
     <p>Sponsor?{{item.sponsor}}</p> 
     <p>Registration deadline:{{item.enrolltime}} 
     <div class="join"> 
      <button class="sui-btn btn-danger">Sign up immediately</button> 
      <span class="will">Registration is about to start</span> 
     </div> 
    </div> 
   </div> 
   <div class="simple-text"> 
    <div class="left-content"> 
     <div class="content-item"> 
      <div class="tit">
       <span>General Assembly introduction</span>
      </div> 
      <div class="text"> 
       <h4></h4> 
       <p>{{item.summary}}</p> 
      </div> 
     </div> 
     <div class="content-item"> 
      <div class="tit">
       <span>Brief introduction</span>
      </div> 
      <div class="text"> 
       <h4></h4> 
       <p>{{item.detail}}</p> 
      </div> 
     </div> 
    </div> 
    <div class="right-intro"> 
     <div class="content-item"> 
      <div class="tit">
       <span>Event organizer</span>
      </div> 
      <div class="text"> 
       <p>Sponsor? {{item.sponsor}}</p> 
      </div> 
     </div> 
     <div class="content-item"> 
      <div class="tit">
       <span>Related links</span>
      </div> 
      <div class="text"> 
       <p>Official website: infoQ.com</p> 
      </div> 
     </div> 
     <div class="content-item"> 
      <div class="tit">
       <span>Sharing diffusion</span>
      </div> 
      <div class="text"> 
       <p><img src="~/assets/img/widget-weibo.png" alt="" width="30" /><img src="~/assets/img/widget-weixin.png" alt="" width="30" /></p> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
</template>
<script>
import "~/assets/css/page-sj-activity-detail.css"
import gatheringApi from '@/api/gathering'
export default {
    asyncData( {params} ){
        return gatheringApi.findById(params.id).then(res=>{
            return {item: res.data.data}
        })
    }
}
</script>

3.2.3 sharing components

Share.js is a one button forwarding tool, which can share with one button to Sina Weibo, wechat, QQ space, QQ friends, Tencent Weibo, Douban, Facebook components, Twitter, Linkedin, Google +, Diandian and other social sites, using font icons.

The following steps can realize the sharing of Weibo and wechat

(1) Modify the script part of pages/gathering/item/_id.vue. The following code is used to import the external js. Our js here uses cdn mode to import the address as follows:

https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js

Required style: https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css

    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) Modify the page section of pages/gathering/_id.vue, and add the share button at the appropriate location

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

Options:

url                 : '', // Web address, default to window.location.href
source              : '', // Source (QQ space will be used), read the head tag by default: < meta name = "site" content = "http: / / Overtrue" / >
title               : '', // Title, read document.title or < meta name = "title" content = "share. JS" / >
description         : '', // Description, read the head tag by default: < meta name = "description" content = "PHP weak type implementation principle analysis" / >
image               : '', // Picture, take the first img tag in the web page by default
sites               : ['qzone', 'qq', 'weibo','wechat', 'douban'], // Enabled sites
disabled            : ['google', 'facebook', 'twitter'], // Disabled sites
wechatQrcodeTitle   : 'Wechat scan: Share', // Wechat QR code prompt text
wechatQrcodeHelper  : '<p>Click "discover" in wechat and scan</p><p>QR code can share this article to the circle of friends.</p>'

The above options can be set through the label data XXX

4 recruitment module

4.1 recruitment list page

4.1.1 write API method

(1) Copy the api/recruit.js and api/enterprise.js of the management background to the api folder of the current project

(2) Modify api/recruit.js and add methods

  recommend() {   
    return request({
      url: `/${api_group}/${api_name}/search/recommend`,
      method: 'get'
    })
  },
  newlist() {
    return request({
      url: `/${api_group}/${api_name}/search/newlist`,
      method: 'get'
    })
  }

(3) Modify api/enterprise.js and add methods

  hotlist() {   
    return request({
      url: `/${api_group}/${api_name}/search/hotlist`,
      method: 'get'
    })
  }

4.1.2 data rendering of recruitment list page

Modify pages / recruit / index.vue axios.all to allow multiple asynchronous requests to be concurrent. axios.spread is responsible for obtaining the return results of multiple asynchronous requests.

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

Template part code:

<template>
<div class="wrapper tag-item"> 
   <div class="fl left-list"> 

    <div class="job-position"> 
     <div class="job-type reco-job"> 
      <div class="head"> 
       <h4 class="title pull-left">Recommended positions</h4> 
       <span class="more pull-right"><a href="#">More job references&nbsp;&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></a></span> 
       <div class="clearfix"></div> 
      </div> 
      <ul class="yui3-g job-list" style="display:block;"> 
       <li class="yui3-u-1-2 job-item" v-for="(item,index) in recommendList" :key="index"> 
         <p><span class="name">
           <a href="~/assets/recruit-detail.html" target="_blank">{{item.jobname}}</a>
         </span><span class="city"><i class="fa fa-map-marker"></i> Beijing</span></p> <p class="need"><span class="money">{{item.salary}}</span>/{{item.condition}}/{{item.education}}/{{item.type}}</p> <p><span class="company">Baidu &middot; 6 Days ago</span></p> 
      </li> 
       
      </ul> 
     </div> 
     <div class="job-type latest-job"> 
      <div class="head"> 
       <h4 class="title pull-left">Latest position</h4> 
       <span class="more pull-right"><a href="#">More job references&nbsp;&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></a></span> 
       <div class="clearfix"></div> 
      </div> 
      <ul class="yui3-g job-list" style="display:block;"> 
       <li class="yui3-u-1-2 job-item" v-for="(item,index) in newList" :key="index"> <p>
         <span class="name"> <a href="~/assets/recruit-jobDetail.html" target="_blank">{{item.jobname}}</a></span><span class="city"><i class="fa fa-map-marker"></i> Beijing</span></p> <p class="need"><span class="money">{{item.salary}}</span>/{{item.condition}}/{{item.education}}/{{item.type}}</p> <p><span class="company">Baidu &middot; 6 Days ago</span></p> </li> 
      
      </ul> 
     </div> 
    </div> 
   </div> 
   <div class="fl right-tag"> 
    <div class="hot-company"> 
     <p class="mail">Please send email to ccccccc@qq.com</p> 
     <div class="company"> 
      <div class="head"> 
       <h4>Hot business</h4> 
      </div> 
      <ul class="yui3-g company" style="display:block;"> 
       <li class="yui3-u-1-3 company-item" v-for="(item,index) in hostList" :key="index"> 
         <p><img :src="item.logo" alt="" /></p> 
         <p class="title">{{item.name}}</p> <p class="position">
           <a href="~/assets/recruit-company.html" target="_blank">{{item.jobcount}}One position</a></p> </li> 
      
      </ul> 
     </div> 
    </div> 
   </div> 
   <div class="clearfix"></div> 
  </div> 
</template>

4.2 recruitment details page

4.2.1 build recruitment details page

(1) Build recruitment detail page pages/recruit/item/_id.vue

<template>
      <!--Two column layout-->
    <div class="wrapper tag-item">
        <div class="job-intro">
    <div class="left-img">
        <img src="~/assets/img/widget-company.png" alt="" />
    </div>
    <div class="middle-intro">
       <div class="name">Python Development Engineer · Praise</div>
       <div class="intro">15K-25K / Experience 3-5 year / Bachelor degree or above / Full-time</div>
       <div class="tag">
           <li>Python</li><li>Python</li><li>O2O</li><li>Python</li><li>Python</li>
       </div>
    </div>
    <div class="right-tool">      
        <p class="throw"><button class="sui-btn btn-throw">Resumes</button></p> 
        <button class="sui-btn btn-collect">Collection</button>
        <span>100 Collection</span>
        <span>291 browse</span>
    </div>
    <div style="clear:both"></div>
</div>
        <div class="fl left-list ">
            <div class="tit">
                <span>Job description</span>
            </div>
            <div class="content">
                <p>We provide:</p>
                <p>Competitive salary;</p>
                <p>A set of top-level dream equipment of procedural apes, a top-level CPU+Large memory+SSD Desktop computer+Eye protection display screen, a comfortable ergonomic seat;</p>
                <p>A group of bright and happy friends;</p>
                <p>top-level IT Large platform and rich promotion mechanism provided by start-up companies;</p>
                <p>Provide independent single apartment, air-conditioned hot water.</p>
                <p>Five insurance, double and statutory holidays</p>
            </div>
            <div class="tit">
                <span>Job requirements</span>
            </div>
            <div class="content">
                <p>Curiosity about new technology, Strong learning ability, Good English reading ability</p>
                <p>Familiar with object-oriented programming, Good programming and habits.</p>
                <p>Good team spirit and communication skills, diligent and progressive</p>
                <p>Skilled use PHP, be familiar with symfony/laravel first.</p>
                <p>be familiar with HTML/CSS/JS, understand vuejs first.</p>
                <p>be familiar with Linux/Mac development environment</p>
                <p>be familiar with MySQL Database, master MongoDB, Redis etc. NoSQL</p>
                <p>be familiar with git cooperation</p>
                <p>*We are the domain team,,We are doing something to change the industry,</p>

                <p>If you are passionate, courageous, ambitious and cooperative, join us now!</p>
            </div>
            <div class="time">Published 1 hour ago</div>
        </div>
        <div class="fl right-tag">
            <div class="company-job">
    <div class="intro">
        <img src="~/assets/img/widget-company.png" alt="" />
        <div class="title">Praise App</div>
        <div class="content">"Youzan "provides merchants with free and powerful micro mall system and complete micro e-commerce industry solutions based on cloud service mode, and is committed to building a mobile shopping platform for merchants and consumers through fan marketing, transaction innovation and consumer protection system.</div>
    </div>
    <div class="tag">
        <li>Electronic Commerce</li>
        <li>Mobile Internet</li>
        <li>O2O</li>
        <li>2012 Established in 2003</li>
        <li>11-50 Famous employee</li>
    </div>
    <div class="btns">
        <a class="sui-btn btn-home" href="~/assets/recruit-company.html" target="_blank">Company Pages</a>
        <a class="sui-btn btn-position"  href="~/assets/recruit-job.html" target="_blank">1 One position</a>
    </div>
</div>
        </div>
    </div>
</template>
<script>
import '~/assets/css/page-sj-recruit-detail.css'
export default {
  
}
</script>

(2) Modify pages/recruit/index.vue link

 <nuxt-link :to="'/recruit/item/'+item.id">{{item.jobname}}</nuxt-link>

4.2.2 recruitment details page - rendering Recruitment Information

Modify pages / accept / item / _id.vue

<template>
      <div class="wrapper tag-item"> 
   <div class="job-intro"> 
    <div class="left-img"> 
     <img src="~/assets/img/widget-company.png" alt="" /> 
    </div> 
    <div class="middle-intro"> 
     <div class="name">
      {{item.jobname}} &middot; Praise
     </div> 
     <div class="intro">
      {{item.salary}} / {{item.condition}} / {{item.education}} / {{item.type}}
     </div> 
     <div class="tag"> 
      <li>Python</li>
      <li>Python</li>
      <li>O2O</li>
      <li>Python</li>
      <li>Python</li> 
     </div> 
    </div> 
    <div class="right-tool"> 
     <p class="throw"><button class="sui-btn btn-throw">Resumes</button></p> 
     <button class="sui-btn btn-collect">Collection</button> 
     <span>100 Collection</span> 
     <span>291 browse</span> 
    </div> 
    <div style="clear:both"></div> 
   </div> 
   <div class="fl left-list "> 
    <div class="tit"> 
     <span>Job description</span> 
    </div> 
    <div class="content"> 
     <p>{{item.content1}}</p>      
    </div> 
    <div class="tit"> 
     <span>Job requirements</span> 
    </div> 
    <div class="content"> 
     <p>{{item.content2}}</p>      
    </div> 
    <div class="time">
     Published 1 hour ago
    </div> 
   </div> 
   <div class="fl right-tag"> 
    <div class="company-job"> 
     <div class="intro"> 
      <img src="~/assets/img/widget-company.png" alt="" /> 
      <div class="title">
       Praise App
      </div> 
      <div class="content">
       "Youzan "provides merchants with free and powerful micro mall system and complete micro e-commerce industry solutions based on cloud service mode, and is committed to building a mobile shopping platform for merchants and consumers through fan marketing, transaction innovation and consumer protection system.
      </div> 
     </div> 
     <div class="tag"> 
      <li>Electronic Commerce</li> 
      <li>Mobile Internet</li> 
      <li>O2O</li> 
      <li>2012 Established in 2003</li> 
      <li>11-50 Famous employee</li> 
     </div> 
     <div class="btns"> 
      <a class="sui-btn btn-home" href="~/assets/recruit-company.html" target="_blank">Company Pages</a> 
      <a class="sui-btn btn-position" href="~/assets/recruit-job.html" target="_blank">1 One position</a> 
     </div> 
    </div> 
   </div> 
  </div> 
</template>
<script>
import '~/assets/css/page-sj-recruit-detail.css'
import recruitApi from '@/api/recruit'
export default {
    asyncData({params}){
      return recruitApi.findById(params.id ).then( res =>{
        return {item:res.data.data}
      })
    }
}
</script>

4.2.3 recruitment details page - rendering enterprise information

Modify pages / accept / item / _id.vue to load enterprise information in a nested way

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

Modify the pages / accept / item / _id.vue page template section

LOGO

 <img :src="enterprise_item.logo" alt="" /> 

Company name:

{{enterprise_item.name}}

Company profile:

 {{enterprise_item.summary}}

Enterprise label:

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

Home page and number of positions:

<div class="btns"> 
      <a class="sui-btn btn-home" :href="enterprise_item.url" target="_blank">Company Pages</a> 
      <a class="sui-btn btn-position" href="~/assets/recruit-job.html" target="_blank">{{enterprise_item.jobcount}}One position</a> 
</div>

In order to achieve good test results, it is recommended to modify the following easyMock data

/recruit/enterprise/{enterpriseId} (GET)

{
  "code": "20000",
  "flag": true,
  "message": "@string",
  "data": {
    "id": "@string",
    "name": "Intelligent Podcasting",
    "summary": "Wisdom spreading podcast is a high-end IT Education and training institutions",
    "address": "@string",
    "labels": "IT Education and training,High-end,New third board listed enterprises",
    "coordinate": "@string",
    "ishot": "@string",
    "logo": "http://www.itcast.cn/2018czgw/images/logo.png",
    "jobcount": "132",
    "url": "http://www.itcast.cn"
  }
}
Published 10 original articles, praised 0, visited 76
Private letter follow

Tags: Vue axios Python Javascript

Posted on Thu, 12 Mar 2020 02:17:29 -0400 by gokhul