1. Basic business of e-commerce projects

1. E-commerce background management system functions

2. The development mode of e-commerce background management system adopts the separation of front and back ends

1. Front-end project technology stack

  • Vue
  • Vue-router
  • Element-UI
  • Axios
  • Echarts

2. Back-end project technology stack (understand the content)

  • Node.js
  • Express
  • Jwt emulates the session login function
  • Mysql
  • Sequelize

3. Initialize the project

1. Install the vue – clireferenceI installed @[email protected]

2. Create projects through vUE scaffolding

  • In the directoryvue ui
  • Note: select vue2. X for configuration

3. Configure routes

4. The configuration Element – the UI

It is important to select vue2. X when creating the project, otherwise element-UI will not be compatible with vue3reference referenceSelect Install in the plug-inelement

5. Configure the AXIOS library

Install in dependenciesaxios

6. Initialize git remote repository & host local project to Github or code cloud

  • Use the code cloud and configure the public key
  • Create a warehouse
  • Follow the prompts to push local files to a remote repository, similar to Git;

7. Configure background data

  • Install phpStudy..
  • But there was an error in importing the data
  • Reinstall the latest version by referring to Installation
  • After the installation is completed, import data, and then test whether the background file is available;D:\web_study\vue_project\vue_api_serverNPM install installs the dependencies and then starts the project Node app.js.
  • Check the e-commerce management background API interface documents;
  • Test whether the interface is available through the Postman software test, as shown in the figure below

3. Login and logout

1. Log in to the service flow

A. The login status remains1) If the server and the client are of the same origin, you are advised to use cookies or session to maintain the login status. 2) If the client and the server cross domains, you are advised to use token to maintain the login status. Tokens are used here because there is a cross-domain, token principle: B. Login logicOn the login page, enter the account and password for login and send the data to the server. The server returns the login result. If the login succeeds, the client obtains the token in the data and saves the token

2. Log in to the technical points related to the service

3. Login page layout

Layout is implemented through the Element-UI component

  • el-form
  • el-form-item
  • el-input
  • el-button
  • The fonts icon

Before starting the project, open the terminal git status under the vue_shop folder to check whether the current working directory is clean; Git checkout -b login create a branch and switch to the login branch.

1. Delete unnecessary components.

After deleting link below otherwise will report an error, are some code format error;

2. Create the login component

Import Login from ‘./components/ login. vue’, {path: ‘/login’, component: login}; Then go under app.vue and write

Type it under the address barhttp://localhost:8080/#/loginCheck page effect

3. Login page layout

Give the login component a background color, give the login component’s template div a class=”login_container” but this will cause an error,

Can't resolve 'less-loader' in 'D:\web_study\vue_project\vue_shop'
Copy the code

So we need to install less-loder and re-run the project after installing less-loder, but we still get an error:

The version of less-Loader installed is too high. ProcedureThen I reboot, but the background color doesn’t fill the full screen, so I set the HTML body style, create a new folder CSS under assets under SRC and then set the global style global.css;

After writing in the entry filemain.jsImport stylesheets in; And then tologin_containerAdd height to support full screen; Then start the detailed layout of the login page (see the code for details);Import the Element UI as neededI forgot to download the Element UI so I had some problems, I created a new project, and now it’s on demand; Import in element.js in pluginsForm FormItem InputThere was an error fixed with Lint;

import { Button, Form, FormItem, Input } from 'element-ui'
Copy the code

Continue to write styles, layouts, and import font ICONS: place a fonts file under assets and follow the instructions. Import ICONS in main.js if == and === rule error reference

4. Log in to some data bindings

Bind the loginForm attribute to the form form, define loginForm in the behavior area data, and bind loginForm. Username loginForm. Passworld to the input field and password field respectively

5. Refer to element UI form authentication for the login section

Element UI form validation

5. Login component implementation form reset refer to the Element UI form reset

Give the form the ref attribute

6. Perform pre-authentication before login

To pre-validate the request before sending it to the server, write to the main.js entry file:

import axios from 'axios'
Vue.prototype.$http = axios;
// Configure the request root path
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Copy the code

$Message = ‘Vue’; $prototype.$Message = ‘Message’

7. Save the login token

  1. After successful login, the token is stored in the sessionStorage, because other API interfaces in the project besides login cannot be accessed without login, and can only be accessed after login. The token should only take effect during the current site opening period so it is stored in sessionStorage.
  2. Jump to the background home page via programmatic navigation, routing address is /home.
  3. The home page can only be seen in the login state. If there is no login, jump to the login page and route navigation guard. Write in the routing file:
// Mount the route navigator
router.beforeEach((to, from, next) = > {
  // to Specifies the path to be accessed
  // from indicates the path from which to jump
  // Next is a function that permits
  if (to.path === '/login') {
    return next()
  } else {
    / / access token
    const tokenStr = window.sessionStorage.getItem('token')
    if(! tokenStr) {return next('/login')}else {
      next()
    }
  }
})
Copy the code

8. Clear the login and logout token

  1. Write to the Home component
<script>
export default {
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>
Copy the code

9. Submit the login function component to the repository

  1. Merge the Login subbranch into the master branch, and then push the master branch to the cloud repository,
  2. Push the Login subbranch to the cloud repository
1. git add .
2. git commit -m "Login submission completed"
3. git checkout master
4. git branch
5. git merge login
6. git push
7. git checkout login
8. git branch
9. git push -u origin login
Copy the code