E-commerce management system

1 Project Requirements

Now there is a set of e-commerce back-end system data with complete functions and supporting interface documents. It is required to write front-end interface according to interface documents and actual requirements of the project to communicate with back-end data to achieve overall functions.

Use technology stack: Vue+VueRouter+Axios

Element UI: UI

Compilation tool: VSCode

Front end preview:

2. Project design and implementation

2.1 the back-end

2.1.1 Downloading dependencies

The backend data folder is vue_API_server, which has complete functions. First, download the dependent package of the project.

npm install
Copy the code

2.1.2 Configuring the Database

Add MySQL database, import SQL file, use small skin panel instead.

  • Problem: An error appears while connecting to the database, indicating that the service cannot be found.
  • Solution: Turn off the MySQL service on your computer and reinstall an integrated version of the database as prompted by the small leather panel. You then proceed to create a new library and import the SQL file.

2.1.3 Running back-end Services

Run the back-end data service using the node command.

node ./app.js
Copy the code

2.2 the front

2.2.1 Creating a Project

Create a new project using the vue command

vue create vue_new_shop
Copy the code

2.2.2 Project structure

The SRC folder contains all the source code.

Index.js in the API folder configures baseURL and request interceptors etc.

The assets file at home is used to configure the common styles of the project.

Components folder to store all components, components are divided into common, goods, Orders, Permission, Reports, user functional modules to use components.

The index.js folder in the router folder is used to configure routes.

Check.js in the utils folder is used to configure all form validation rules.

The files in the views folder are the login interface and the whole page of the whole project.

Main.js is the entry file for the project.

2.2.3 Running the project

Run the entire project using commands.

npm run serve
Copy the code

3 Project Focus

3.1 Configuring Routes

Configure the route in the index.js file under the Router folder.

  1. Importing file components
  2. The path path and component name of the current routing information are specified

3.2 Single-file Components

A file is a component, and a component is a file. The single-file component template consists of three main parts

<template>
	<div>Single file component</div>    
</template>
<script>
export default{}</script>
<style lang="less" scope>

</style>
Copy the code
  1. The template tag is the main display of the file
  2. The script tag is used to introduce other components and write various business logic to process data, including Data, methods, computed, lifecycle hooks, and so on.
  3. In the style tag, you write the CSS styles for the current component page.

3.3 Father-Son Communication

Communication between parent and child components is typically implemented using props and $emit().

For example, data communication between parent component userlist.vue and child component addUser.vue.

  • Objective: Click the “Edit and modify user” button of the parent component, and a dialog box pops up. After filling in the form information in the dialog box, click the “OK” button to complete the operation of the current user information.

  • Specific implementation steps:

    1. Step 1: Click the “Edit and modify user” button to pop up a dialog box and render the form in the dialog box.
    2. Step 2: Enter data to verify that the form is valid.
    3. Step 3: Click “OK” button, the dialog box disappears; User data is re-rendered to display new information about the currently modified user.

  • Code implementation:

    The code is too long and too laborious to read. Imagine A scenario in which the parent component is A math teacher, and the child component, student B, is A math class representative.

    In other words, it was the weekend, teacher A looked up, huo, the weather is clear, the air is fresh, so comfortable ah. I thought I could not live up to the good weather, so I gave the class students a new knowledge point and assigned homework. On behalf of STUDENT B, let the class convey to the students that they will receive the homework on Monday and check the completion of the homework.

    The next problem to solve is: how can Teacher A contact B on the weekend? Weekends off, unlike in the school directly to the class can be found.

    So Teacher A took out the phone book (placeholder for component instance) and found B’s mobile phone number (ref). Student B was playing games at home at this time, and he was also confused when he received teacher A’s phone call. As A result, he told him to set new homework! The classmate stood up on the spot, gnawed teeth also dare not speak, can only be said and will inform the class students to complete homework.

    Hang up the phone, B students suddenly spit fragrance, singing the quintessence of China, WC, SB… But I still had to take out my books and find the props from the teacher. For a long time, brewing good mood, came to the class group, told everyone this unfortunate thing. Student B said he was on the other side of the students, after a chorus, we accepted this fact, although from time to time, lingering music, but helpless, had to give up.

    On Monday, class representative B staggered into the office with the completed homework, put it on teacher A’s desk, asked the teacher to correct the homework. Teacher A is also very kind. While chatting with B students about the ideal while correcting homework, Dally Dally finished correcting, let B students hold the homework back to the students to distribute, also encourage the students to continue to refueling.

    Now review the whole sitcom. The parent group is Teacher A and the child component is student B. Teacher A looked in the phone book for student B’s mobile phone number.

    <! -- Parent component --><template>
	<div>
		<template slot-scope="scope">
            <el-button type="primary" @click="showAddDialog(scope.row.id)"></el-button>
        </template>
        <add-user :user="currentUser" ref="addUser" @updatelist="getUserList"></add-user>
	</div>    
</template>
<script>
import addUser from './addUser.vue'
export default{
    data(){
        return{
            currentUser: {},
            userlist: []}}components: {
    	addUser
  	},
    methods: {async showAddDialog(uid) {
          const { data: res } = await this.$http.get(`users/${uid}`)
          this.currentUser = res.data
          this.$refs.addUser.showDialog()
        },
    }
}
</script>
Copy the code

    • Import imports the component addUser, registers the addUser, and instantiates the component with the
      tag. Ref =”addUser” holds the phone number of the child B, and user=”currentUser” passes the assignment.

    • Clicking the Edit button triggers the showAddDialog(UID) method and passes the ID of the current item. The method initiates a data request and receives the received data object with currentUser.

    • Call student B and tell him where the assignment is and what to write. $refs.adduser.showdialog () this.$refs.adduser.showdialog ()

    Continue to review: student B informed the students to do homework, after finishing the homework, student B holding the homework to find teacher A correction.

    <template>
	<el-dialog title="Edit user information" :visible.sync="dialogVisible" width="50%">
    <el-form :model="addUserForm" :rules="addUserRules" ref="addUserRef" label-width="100px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="addUserForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="addUserForm.email"></el-input>
      </el-form-item>
      <el-form-item label="Mobile phone Number" prop="mobile">
        <el-input v-model="addUserForm.mobile"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="hideDialog">Take away</el-button>
      <el-button type="primary" @click="saveUserInfo">determine</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default{
    props: ['user'].computed: {
        addUserForm() {
          	return this.user
        }
    },
    data() {
        return {
          dialogVisible: false.addUserRules: {
            username: [{required: true.message: 'Please enter a user name'.trigger: 'blur' },
              { min: 3.max: 10.message: 'Please enter 3 to 10 characters'.trigger: 'blur'}].email: [{required: true.message: 'Please enter email address'.trigger: 'blur' },
              { validator: checkObj.checkeEmail, trigger: 'blur'}].mobile: [{required: true.message: 'Please enter your mobile phone number'.trigger: 'blur' },
              { validator: checkObj.checkeMobile, trigger: 'blur'}]}}},methods: {
        showDialog() {
          this.dialogVisible = true
        },
        hideDialog() {
          this.dialogVisible = false
        },
        saveUserInfo() {
          this.$refs.addUserRef.validate(async valid => {
            if (valid) {
              var flag = true
              for (var key in this.addUserForm) {
                if (this.addUserForm[key] ! = =this.user[key]) {
                  flag = false
                  if (flag) {
                    this.$message.warning('Your content has not been modified, please modify it before submitting')
                    return null}}}// Verify success, request save
              const { data: res } = await this.$http.put(`users/The ${this.user.id}`.this.addUserForm)
              if (res.meta.status === 200) {
                this.$message.success('Update successful')
                this.$emit('updatelist')
                this.hideDialog()
              } else {
                this.$message.error('Update failed')}}else {
              this.$message.error('Verification failed')}})}}}</script>
Copy the code

    • Sync =”dialogVisible” Specifies that dialogVisible is false by default, indicating that the dialog box is hidden and not displayed. Since the parent component called the showDialog method of the child component, it changed dialogVisible to True to display the dialog box and rendered the form items and buttons in the dialog box.

    • Parent component A uses ref to make A call, passes the data to child component B with :user=”currentUser”, receives it using props: [‘user’], and saves the received data object to addUserForm using the calculation property.

    • Assign data to the form using :model=”addUserForm”.

    • Using V-model =”addUserForm.username” in each entry of the form bidirectionally binds the corresponding property value of the data object passed from the parent component.

    • Element UI provides form validation for the form. In the form, use the prop property to set the name of the field to be verified, and then configure the corresponding verification rule in the addUserRules specified by :rules=”addUserRules”.

    • $refs.addUserRef.validate Validates the whole form. After the validation is correct, the request to save the data will be initiated. $emit(‘updatelist’); this.$emit(‘updatelist’); @updatelist=”getUserList”; The latest user data list is retrieved from the parent component and rendered. Hide the dialog box.

    The teacher left the homework, the students finished, the teacher also to correct.

    A brief overview of the communication process between parent and child components:

    1. Click the edit button of the parent component, the parent component finds the ref attribute value of the child component, calls the showDialog method of the child component through it, and renders the dialog box.

    2. Click the “OK” button of the sub-component, use the corresponding verification rules specified by PROP for verification, and initiate data request after no error. The child component uses $emit() to trigger a custom event to communicate to the parent component, calling the getUserList method in the parent component to retrieve and render the list of user data. Hide the dialog box.

  • The complete source code is as follows

    • The parent component userlist. Vue

      <template>
	<div>
		<template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="showAddDialog(scope.row.id)"></el-button>
        </template>
		<! Edit the user component -->
        <add-user :user="currentUser" ref="addUser" @updatelist="getUserList"></add-user>
	</div>    
</template>
<script>
// Add a user component
import addUser from './addUser.vue'
export default{
    components: {
    	addUser
  	},
    data() {
        return {
          currentUser: {},
          userlist: [], the total:0}},methods: {// 1. Request user data
        async getUserList() {
          const { data: res } = await this.$http.get('users', { params: this.queryInfo })
          if (res.meta.status === 200) {
            this.userlist = res.data.users
            this.total = res.data.total
          } else {
            this.$message.error('Failed to get user data')}},// 2. Display information about the current user to be modified
		async showAddDialog(uid) {
          const { data: res } = await this.$http.get(`users/${uid}`)
          this.currentUser = res.data
          this.$refs.addUser.showDialog()
        },
    }
}
</script>
<style lang="less" scope>

</style>
Copy the code

    • Subcomponents addUser. Vue

      <template>
	<el-dialog title="Edit user information" :visible.sync="dialogVisible" width="50%">
    <el-form :model="addUserForm" :rules="addUserRules" ref="addUserRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="Username" prop="username">
        <el-input v-model="addUserForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="addUserForm.email"></el-input>
      </el-form-item>
      <el-form-item label="Mobile phone Number" prop="mobile">
        <el-input v-model="addUserForm.mobile"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="hideDialog">Take away</el-button>
      <el-button type="primary" @click="saveUserInfo">determine</el-button>
    </span>
  </el-dialog>
</template>
<script>
import checkObj from '@/utils/check.js'
export default{
    props: ['user'].computed: {
        addUserForm() {
          	return this.user
        }
    },
    data() {
        return {
          dialogVisible: false.addUserRules: {
            username: [{required: true.message: 'Please enter a user name'.trigger: 'blur' },
              { min: 3.max: 10.message: 'Please enter 3 to 10 characters'.trigger: 'blur'}].email: [{required: true.message: 'Please enter email address'.trigger: 'blur' },
              { validator: checkObj.checkeEmail, trigger: 'blur'}].mobile: [{required: true.message: 'Please enter your mobile phone number'.trigger: 'blur' },
              { validator: checkObj.checkeMobile, trigger: 'blur'}]}}},methods: {
    showDialog() {
      this.dialogVisible = true
    },
    hideDialog() {
      this.dialogVisible = false
    },
    saveUserInfo() {
      this.$refs.addUserRef.validate(async valid => {
        if (valid) {
          var flag = true
          for (var key in this.addUserForm) {
            if (this.addUserForm[key] ! = =this.user[key]) {
              flag = false
              if (flag) {
                this.$message.warning('Your content has not been modified, please modify it before submitting')
                return null}}}// Verify success, request save
          const { data: res } = await this.$http.put(`users/The ${this.user.id}`.this.addUserForm)
          if (res.meta.status === 200) {
            this.$message.success('Update successful')
            this.$emit('updatelist')
            this.hideDialog()
          } else {
            this.$message.error('Update failed')}}else {
          this.$message.error('Verification failed')}})}}}</script>
<style lang="less" scope>

</style>
Copy the code

4 Project Summary

This e-commerce management system is developed by using Vue+VueRouter+Axios+Element UI. Through the actual practice of this project, I have further understood and mastered the use of Vue and Element UI.

Communication between components is one of the most frequently used, along with other key operations such as introduction between components, known as modularity specification, using the ES6 modularity specification.

  • ES6 modular specification
  • Intercomponent communication
  • Two-way data binding
  • Use of Element UI
  • Flex layout