Project introduction

I took over the project as soon as I came to the company, and it was a redevelopment. I took the lead in the whole process from the project architecture to the final online test. This article is a summary of the whole project, listing the key points and difficulties in the project, as well as the solutions, and a reflection on the improvement of the project

Internal projects signed a non-disclosure agreement without drawings

1. First of all, the overall structure of the project. I think the most important part of a project is the construction of the overall project.

  1. The API project only needs some data operations, and some parameter parts of the request parameter encapsulation, such as the API under the config.js will have some data request after the success of the code code, generally after the success of the server returns 200 parameters
  2. Below base are some common components
  3. Below common are some basic JS, CSS and image. In THE CSS, some public styles will be added, and some basic colors will be defined, which will be very convenient for the color change of the whole project in the future. There is no iconfont here, but ali’s CDN will be introduced. This way you don’t need to download fonts files, and it’s easy to develop
  4. Components are business components
  5. Router route across the entire project, this is a key point, the first is the routing lazy loading, this can be on the first screen optimization has a lot of, then the routing block load due to many projects page, so that the overall project is very clear, good maintenance, also convenient people cooperation development, then the routing hooks, some authentication of the project, attach a routing hook code
router.beforeEach((to, from, next) => {
    if(to.path ! ='index' && getCookie('access_token') == null && to.meta.requiresAuth) {
        next('/denglu')}else{ next(); }})Copy the code
  1. Store, vuex is like a front-end database, storing some public states, or data. I would like to say here, it is better to simplify, do not store every public data or state, it is difficult to maintain in the future.
  2. Views is the code for the project body framework

2. Skeleton development of the project

Put the skeleton of the project together, and the rest is filling in the content

3. Key points and difficulties of the project

1. The biggest problem of single-page application is the optimization of the first screen. Here we talk about the technology used in this project

2. The plug-in CND of the project is introduced, which will speed up multi-threaded loading

3. Skeleton screen Displays the skeleton screen first when the first screen is loaded

4. The Axios interceptor will be used in the project, since the project is doing single sign-on, it needs to attach the code in response to the interceptor

/ / add the response interceptor axios. Interceptors. Response. Use (function(Response) {// Token has expired. Redirect to login pageif (response.data.error == 401) {
        delCookie('access_token');
        router.replace({
            path: '/denglu',
            query: { redirect: router.currentRoute.fullPath }
        })
    }
    return response
})

Copy the code

5 page optimization can also use the image lazy loading vue-lazyload plug-in, so that you do not have to request all the picture request, need that request that page optimization also played a very heavy role

6. Vue pages will be converted into PDF attached codes in the project

// The exported page is in PDF format import html2Canvas from'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        letPageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeight
        let position = 0
        letImgWidth = 595.28letImgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF(' '.'pt'.'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')})}}}Copy the code

4. Pay attention to some details in the project

You can’t directly manipulate arrays in data in VUE

$setThis method.$set(this.arr, index, value to change);Copy the code

5. Problems encountered in mobile terminal projects