GitHub address: Campus errand system front desk

Project background

In the second semester of sophomore year, our group project was the campus errand system, which was divided into two parts: front desk (for users) and back desk (for administrators). The front desk system is the system entrance of all users (including the administrator), mainly for ordinary users to release, browse and accept errand orders; The background system is for administrators to help them master system operation information.

Since our group adopts the development mode of separating the front and back ends, and I am responsible for the front-end development of the front part of the system, this project only covers the front-end code of the front part of the campus errand system (for users).

This is the first time for me to use Vue3 to do a project. It can be said that there are many imperfections in this project that need to be improved. However, compared with Vue2, Vue3 has much less experience for reference.

Review what I have learned from this project, sum up some methodology, and then determine the direction I need to learn from the shortcomings. This is what I think is important, and also the original intention of writing this document.

This document as a copy, will only be some summary, specific project details in the source code contains a lot of notes, please eat together. Front-end novice, hope to have big guy to guide the maze ~

Technology stack

  • Programming language: JavaScript
  • Front-end framework: vue3.x
  • Routing tool: Vue Router 4.x
  • Status management: Vuex 4.x
  • UI component library: Element Plus
  • HTTP library: axios

Projects show

Since our group only completed the front-end deployment, we could not preview the system online, and the project demonstration part could only be updated later.

Here is a brief overview of the front desk page functions:

  • Home page: show six random orders (provide a group of functions), search orders, personal center entrance, release orders
  • Personal Center page: modify personal information, modify password, submit complaints and feedback, view my published/accepted/history browsing orders
  • Order details page: Receiving orders, modifying order status, modifying order information (display different information according to the status of orders and users)

Not realized: my complaint, online payment.

How to plan the project structure

| | - resources/assets folder icon - | - / CSS/fonts font | - / images stored web design related pictures folder | | - / components reusable components - / common storage can be other project | - reusable components / content for this project in the reuse of components | | - / router routing configuration - index. Js | - / plugins plugins folder | | - / utils tools - / store vuex configuration, Project so there is no simple points module configuration | - index. Js | - getter. Js | - mutations. Js | - actions. Js | - / views page components folder, internal secondary folder to the page, Deposits subcomponents again | - | / network encapsulation network request - request. Js general configuration, network request catalog following documents are to be imported | - home. Js/cart. Js... Partition the network request profile by moduleCopy the code

The preparatory work

Basic style

  1. Normalize.css was introduced to make styles compatible with different browsers
  2. completebase.css, define some basic common styles and introduce themmain.jsorApp.vue
  3. Introduce theme styles for component libraries, if any

The related configuration

Webpack configuration

  1. So far only the alias configuration has been touched: you can specify the alias of the folder in the Webpack configuration to make it easy to change the path.

Axios configuration

  1. throughaxios.create({... })To create a new axiOS instance and configure itbaseURLAnd other attributes to encapsulate network requests through instances
  2. throughinstance.interceptors.request/response.use(config =>{... }To configure the request/response interceptor
    • The request interceptor can determine the user’s login permission and process it. If the user has login permission, the request header carries the token
    • The response interceptor can determine the response firststatus200 indicates that the interface is successfully invokedcodeTo check whether the logic of layer 1 services is valid, you can prompt error messages returned by the back-end

The routing configuration

  1. Define a global front-guard to determine whether a user has permission to jump to a route (skip to the login page without logging in)

    Notice the distinction between checking the user’s login permissions here and in AXIOS, where one is the permission to jump to a page and the other is the permission to send a network request

  2. Define a global backend guard that can be used to change the title of a document. Note that the backend guard does not have a then method

Define Vuex global status management data

  1. Store some global public data, such as order type, order status object, and so on
  2. Caution Refreshing user information may cause the information in the Vuex to be lost

Cross-domain agent

  1. invue.config.jsTo resolve cross-domain problems by passing requests to back-end proxies using proxy objects

How to divide page logic

At the beginning of the project, there is always a feeling that I don’t know where to start when I open a page. After I finish, I have a little bit of my own caution, so I will summarize my experience here.

  1. Step one, in<template>Map out the page blocks and make each part of the page clear with comments.

    This step is very important, in the early stage can quickly clarify the page structure, figure out ** “what is this page do **, by which several pieces”; In the testing and later review period can help oneself to quickly locate a certain part.

  2. The second step is to identify the data the page needs.

    Once you know what the page does, you need to figure out what data is needed to achieve the purpose of the page, and then determine how to get that data.

    For example, the Order component, whose purpose is to simply display the Order information, has a page structure of two parts: sending the person information and the Order information. We can determine from this that the data required for this component is a User object and an Order object.

    So what are the sources of these two figures? The sources of data are usually passed from parent to child, retrieved via network requests, retrieved from Vuex, and so on. As the Order component is reused in multiple places as a child component, I chose to receive the Order object from the parent component through props, and then use the publisherId attribute value in the Order object to send a network request to obtain the publisher data (i.e. the user object).

  3. Third, figure out what interactions the user has with the data.

    In many cases, users expect to be able to manipulate data, such as modifying order information, modifying personal information, and so on. There are interactions that cause changes to the data, so specifying interactions is really specifying how to manipulate the data, including listening, modifying, and so on.

    Once you know how to do it, be sure to go over the logic of the method you’ve written.

  4. Fourth, carefully examine the data displayed and used on the page.

Matters needing attention

  1. Always remember to annotate! Otherwise, it is not conducive to team cooperation to test and modify what is very crematorium.
  2. If Vuex is a global state management mode, thensetupThe definition ofstateObject uses the idea of single-page state management,stateAn attribute in an object can be a variable or object whose state needs to be managed.
  3. Note the component lifecycle order when retrieving data, and note that network requests are sent asynchronously to avoid errors if data is used before retrieving data.
  4. When using an open source component library, read the API carefully.

conclusion

What did I learn

Compared with the optional API of Vue2, THE combined API of Vue3 is closer to my previous programming habits, and it is a great gain for me to further understand its ideas in the process of writing projects. Before this project, I have been learning the theoretical knowledge of Vue. This small actual combat project of the novice village helps me to practice the theory and make me more comfortable with the use of Vue. Many pits I have stepped on also give me a lot of experience.

Most importantly, I learned what the process of doing a project is and summed up what I should do better.

My shortcomings

Here is a summary of the following learning direction:

  • Webpack to learn
  • JS asynchronous
  • ES6 to learn
  • Vue asynchronous components (no further study of Vue without further solid JS foundation)
  • Axios went deep
  • The HTTP protocol
  • Use Git to keep track of project development progress