Project home page

Project Description: Recruitment website (easy to spread wings)

For preview, go to new.izhanchi.com/

Project installation

Run create-nuxt-app to ensure that NPX is installed (NPX is installed by default in NPM version 5.2.0).

NPX creation-nuxt-app < project name > or yarn create nuxt-app < project name >Copy the code

My options configuration: Element-UI, Axios, ESLint

Project directory

├─ assets Uncompiled static resources such as CSS and pictures ── images ─ Style CSS, SCSS file ─ Components There's no asyncData method feature like for page components.Datacommon houses the.net/layouts directory, which is used to organize your application's layout component -- the default project master layout -- bingPhone Wechat login binding mobile phone number layout (mainly different from the main layout).Exercises ── Middleware for storing applications.Exercises ── nuxt.config.js For personalizing nuxt.js applications, Json to describe the dependencies and exposed script interface for the application. ├─ pages To organize routes and views for the application. ├─ plugins To store js plugins that need to be run before the root ui.js application instantiates Static for holding static files for your application (not processed by webPack compilation).Vuex state tree for your applicationCopy the code

Project interface encapsulation (Axios)

Summary of questions:

  • The user center login interface is not the same as the interface address of this site

    Do: Came to mind because there are not many user-centric interfaces, so do the switch interface proxy in request interception. Send multiple “hostType” fields when requesting a user-centric interface to identify whether it is a user-centric interface.

    Chestnut:

$axios.get(' XXX ',{params: {... $axios. Post (' XXX ',data,{headers: {... }, hosttype: 'uhost', })Copy the code

Log in to the popover component

  • It’s not a popover, it’s a popover. So consider making the login a global component, calling the component through global function methods.

  • Register global code
  • Check whether to log in. A dialog box is displayed

The problem summary

  • Because the popover is triggered by the user. So it’s not on the server side and then it says there’s no axios, axios, axios, cookies, $store in the component.

    Do: Thought of because global components are introduced in the form of plugins files. So as above, through the participation in the form of ‘axios, axios, axios, cookies, $within the store to the component (I wonder if there are some optimal solution, to probe).

  • Wechat QR code login style modification

    Do: You need to introduce wechat third-party plug-ins to generate QR codes, and then customize the STYLE of QR codes through CSS-Base64.

  • The backend failed to set cookies through the login interface

    Cause: the user center site is inconsistent with this site.

    Do: Add the withCredentials parameter to the request config and set it to true

    Developer.mozilla.org/zh-CN/docs/…

withCredentials: true
Copy the code

Summary of Page Development

  1. Window objects cannot be used in the created life cycle of business components and pages due to nuXT’s life cycle mechanism.

The red box runs on the server, and the yellow box runs both on the server and on the client. The window object is available only to the client.

  1. Avoid individual asyncData asynchronous request failure caused by server error, so that the page can not be normally displayed.

    Do: Add the following to the asynchronous request:

Try {// run code here} catch (err) {// handle error here}Copy the code
  1. Amap was used in the project
  • Install dependencies
    npm install vue-amap --save
Copy the code
  • Write the plugin js and place it in the plugins directory
    import Vue from 'vue'
    import VueAMap from 'vue-amap'
    Vue.use(VueAMap);

    VueAMap.initAMapApiLoader({
      key: 'xxxxxxx',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'Geocoder', 'AMap.CitySearch']
    });
Copy the code
  • Add this js to nuxt.config.js
    { src: '@/plugins/vue-map', ssr: false },
Copy the code

Details: Note that when the plugin is introduced in Nuxt.config.js, SSR is set to false– there is a Widow object operating dome in the Autonamap source code.

Note: references to components are wrapped in client tags. I guess the lifecycle of the component uses the Window object.

Note: If you use multiple maps on the same page, remember that the VID must be different, otherwise it will not be displayed.

eg:

<client-only> <div class="company-map"> <el-amap vid="amap" :center="['116.46','39.92']" class="amap-container" : zoom = "16" > < el - amap - marker: position = "[' 116.46 ', '39.92']" : the visible = "true" : clickable = "false" / > < / el - amap > < / div > </client-only>Copy the code

4. Preview the document using vue-PDF in the project

  • Install dependencies
    npm install --save vue-pdf
Copy the code
  • Write the plugin js and place it in the plugins directory
    import Vue from 'vue'
    import pdf from 'vue-pdf'
    Vue.component('pdf', pdf)
Copy the code
  • Add this js to nuxt.config.js
    { src: '@/plugins/vue-pdf.js', ssr: false }
Copy the code

Also in nuxt.config.js if the js is referenced otherwise, an error will be reported.

Page reference:

    <div v-for="i in numPages" :key="i">
      <pdf :src="pdfSrc" :page="i" style="width: 100%"></pdf>
    </div>
Copy the code
let pdf = require('vue-pdf') this.pdfSrc = pdf.default.createLoadingTask(this.url); Then (PDF => {this.numpages = pdf.numpages; });Copy the code

Project Effect:

Project deployment

① Install the PM2 software on the server (used to manage and run node projects)

Wget ‐ qO ‐ https://getpm2.com/install.sh | bashCopy the code

(2) After the installation is complete, run the command to add the pM2 to boot automatically upon startup

    pm2 startup systemd
    pm2 save
Copy the code

Run the following command to start our express with pm2

Pm2 start /home/node_project/socket/bin/ WWW ‐name"Copy the code

View the list of pM2 management

    pm2 list
Copy the code

Nuxt, static, nuxt.config.js, package.json in the server directory.

⑤ Run NPM install on the server to install the dependency

    npm install
Copy the code

⑥ PM2 managed projects

Pm2 start NPM ‐ start2pm2 start NPM ‐name "my‐nuxt"‐ run startCopy the code

⑦ Access server link. Pm2 Common commands

  1. Pm2 list # Check what processes are currently running
  2. Pm2 start all #
  3. Pm2 restart all # Restart all applications
  4. Pm2 stop all # stop all applications
  5. Pm2 delete all # Close and delete all applications
  6. Pm2 logs # The console displays all logs
  7. Pm2 start 0 # Start the specified application with id 0
  8. Pm2 restart 0 # Restart the specified application with id 0
  9. Pm2 stop 0 # Stop the application with id 0
  10. Pm2 delete 0 # delete the specified application with id 0
  11. Pm2 logs 0 # The console displays logs numbered 0
  12. Pm2 show 0 #
  13. Pm2 monit my-nuxt # Monitors processes named my-nuxt

— END —