Vue Project 1: E-commerce Background Management Project PC (Part 1)

Project renderings

1: source repository address – welcome to download! (Passed the test, the source code combined with the article can be completed step by step project construction)

2: API interface and database warehouse address – welcome to download! (Note: backend management project – Web server and database, ‘both are indispensable!)

"export 'default' (imported as 'ECharts') was not found in 'echarts/lib/echarts.js'Correct way to import:

1- Project initialization

Technology selection

Start formally through the VUE UI scaffolding to create the project, through the background API interface, the returned data render pageCopy the code

Project basic business overview

Today we are mainly doing background management projectsCopy the code

The function division of e-commerce background management system

Of the background project6Large block User Login/Login Page User management: user list Permission management: Role list + permission list Commodity management: commodity list + Category management + Parameter management Order management: order list Data statistics: data reportCopy the code

Project development mode and technology selection

The main techniques used in the pattern of development using front and back end separation are Vue + VueRouter + element-UI + Axios + EchartsCopy the code

The front-end project is initialized

Create a project with vUE UI scaffoldingCopy the code

Create a code cloud account and configure an SSH public key

Because the domestic code cloud is fast and in Chinese, we use the code cloud1However, after logging in to the code cloud, you need to configure the public key to create a new database and connect to a remote repository2: According to public key management: which is the official tutorial, with screenshot analysis together. The public key is added.Copy the code

Host local projects in the code cloud

Create a remote warehouse, host the local project to the remote warehouse, complete the local warehouse to submit the remote warehouse.1: Build the warehouse first. Configure your name and email globally in CMD2: Open the Pwoershell window in the project, and it is impossible to enter the login password to connect the remote warehouse. Complete the local warehouse through push, push the remote warehouse, and refresh the page to see that the warehouse is refreshed successfully.Copy the code

MySQL installation

Import the local database into PHPStudy to start mysql and database services.1: Because you have the data files ready, you can import them directly into PHPStudy2: Check whether the imported database is successfully imported. If the newly named database exists in the database directory, the database is successfully imported.Copy the code

Configure the API interface server and use the PostMan debugging interface

Test whether the data and interface can return data normally, because vue_API_server prepared in the startup background can not be started successfully, and I have solved the problem of looking at the picture. Local database import phpstudy hosting run and start the mysql data services, start your own web server, the node app. / js, can be managed postman test login interface, if the login is successful, the mysql database and server connection is normalCopy the code

2- Login and logout functions

Analyze the login process and token principle

In the future, all background requests need to carry tokensCopy the code

Analyze the layout structure of the login page and create a login subbranch

After the local repository is clean, it is created and switched to the development branch Login for project developmentCopy the code

Organize the project structure

Since scaffolding created the welcome page, we cleaned out the head and unwanted components, cleaned up the work area and started new development. Specific cleaning can be viewed picturesCopy the code

Render the Login component and implement route redirection

Create + mount + and space render login component into App root component1: Creates a login component2: Mount the component to the router, configure the routing request address and the routing component to be used in the newRouter, and export the component3<router-view> in app. vue, the App root component renders the routing component4: page effect, App root component page, rendered login componentCopy the code

Sets the background color and draws the login box in the center of the screen

Install less-Loader, define global styles, and your own page base layout.1-2-3Note: Because the login component style lang=less, but there is no global download and configuration package using less syntax, so the package compiler error. You need to download the development dependency plug-in in the visual plug-in. The error can be resolved.4-5: Because the App component page does not have height, it is the elements that make the page height open, but we are developing a single page application, which needs to be full, common CSS style code, we have to write SRC /assets/global.css, import in main.js entry file, global effect, subsequent background pages have height.6: Start writing your own login page style, height100%, the same height as the current page, full page. The box is centered relative to the page left50%, and then transform:translate(-50%, -50%), go half of itself to center the box7: The page box is centered on the pageCopy the code

Draw the default avatar

Avatars use basic CSS3 style Settings and write in your own styleCopy the code

Draws the login form area

Import the Form component to complete the layout of the Form component1-2-3Use the form component from element-UI. Copy the component to your template, but destruct it in element.js and mount it globally to use it4To make changes to our form, we used a C3 box model, flex layout for the buttons, and context-content :flex-end, aligned to the bottom right by default.5: Page effectCopy the code

Draws an input field with an icon

How do you use third-party ICONS in your own projects because sometimes you don't have enough ICONS in the Element-UI, you have to download third-party ICONS and it's pretty easy to use third-party ICONS, right1: -2-3-4: Refer to the way element UI uses ICONS, and import the downloaded ICONS in main.js. This is the global import, which page can use their own ICONS. After importing the file, use the icon on your own page. The inConfot icon is fixed in the front and the specific icon name is behind.5: page effect, each input box in front of this iconCopy the code

Implement data binding for forms

See mimicking the binding of form data1: Reference the data binding method of forms in Element-UI and emulate it in your own project2: : Model receives the form object, and the form object receives the value of the input field through v-Model two-way data binding, thus receiving the contents of the form object. : Model receives the form object, and the contents of the input field are two-way data binding3: page effect, because the V-Model receives the attributes in data, the values in the data will be automatically filled into the input fieldCopy the code

Implement form data validation

Reference emulation implements form validation rules1: The input box must be bound to its parent item, not to the input box2: : rules ="Form validation object", prpo ="Validation rule"A validation rule can have multiple attribute validation objects3Validation rules are used in the: element and defined in data. Start submitting tests to verify that they pass4: Indicates that authentication rules can be triggeredCopy the code

Implement the form reset function

Use the resetFields method to reset and restore the data in the form. If the content is incorrectly entered or the verification fails, click reset to restore the content in the input box with one key1-2-3-4$refs:loginFormRef = ref (); $refs:loginFormRef ()this$refs.loginFormRef this object, which is equivalent to the form object, can be called naturally. ResetFields () to reset the contents of the form5: Test, click to reset the contents of the formCopy the code

Implement pre-validation of form data before login

Clicking the Login button triggers a validation object that validates the contents of the form1-2: triggers the click login event, as abovethis$refs.loginFormRef implements form validation. Vaild returns a Boolean value indicating whether the validation has passed3: tests that trigger validation rules to print login status to the console as Boolean valuesCopy the code

Configure AXIos to initiate a login request

After the authentication passes, call AXIos to send a request, get the data returned by the server, and print the login information1: Mount AXIos globally, set the root path according to the interface, and mount AXIos as the $HTTP method on the VUE prototype so that you can make data requests using $HTTP.2: If the verification is successful, call $HTTP to request the data of the login interface, carry the content in the form, and determine whether the return value of the data is correct200.Print the login information on the console, and the return value result is a promise that passesawaitWe can return a result object, we can deconstruct the data:res object and rename it res, which is the data object,Copy the code

Configure the Message global pop-up component

Because the printed login information is invisible to users, the message dialog box is used to prompt users1-2-3: in its own functionthis.$message.error displays a failure message, and SUCCESS displays a success message. Because Message is already mounted to the app prototype in element.js, it passes anywherethis.$message Displays the message in a pop-up box4: Tests that the login status can be displayed.Copy the code

Improve post-login operations

After a successful login, each user needs to issue a token to access the background page, redirect the home page, and generate token information1: In the data we can see the token property returned,2Note: Token is used for cross-domain storage. It is recommended that you do not store personal information across domains for a long timelocalStorageLocal sessions, temporary sessions are stored in sessionStorage3: Complete the login redirection to the Home page, create a home component, import it in router.js China, and configure the routing address and components. Click to jump to the home page, and also generate a tokenCopy the code

The routing navigator controls page access

Without a token, users are not allowed to access the background through the URL address. The navigation guard prevents others from accessing the background and redirects them to the login page.1-2: cannot be direct in roter.jsexport defaultAfter exporting all routes, you need to define beforeEach navigation guard to determine whether the login page is allowed to pass before others want to access it, but to obtain a token, if the user does not have a token, it cannot access the background and returns to the login page. Otherwise, if there is a token, it is allowed to pass.3After the token is cleared, typing /home will be CDX to the /login page. Because there is no token.Copy the code

Implement exit function

After logging in to the home page, click the Exit button to clear the token and redirect to the login page1-2-3: Click exit in the event functionwindow.sessionStorage.clear() clears the tokenb in the temporary session and redirects the route to the /login page throughthis.$router.push('/login'Redirects you back to the login page4: test, click to exit, and clear the token information in sessionStorage, redirect back to login pageCopy the code

Handle ESLint syntax errors in projects

Eslint will save and validate the code.1-2The problem is that vscode's built-in formatting tool automatically fills it up; Semicolon, and autohandle""the' 'I've replaced it,3The problem is that ESLint is too strict and expects Spaces between functions (). Prettierrc, eslintrc.js does not allow whitespaceCopy the code

Modify the on-demand import form of the Element-UI component

We used to deconstruct the components on a line break, but now we can deconstruct all the components on a single line. Simplified code volumeCopy the code

Commit native code to the code cloud

After the development of the login function is completed and the verification is qualified, the local submission warehouse is started, and then the branches are merged and pushed to the remote warehouse, and the branches are switched and pushed to the branch.Copy the code

3- Home page layout and function implementation

Implement the basic home page layout

Go to the elemental-UI website and copy the layout container and change it to your own page layout. Because you have logged in to the background page, use the Elemental-UI layout container to quickly implement the page layout1: Analyze the page layout2Go to the Element-UI website and copy the layout container to your own page3: Copy to your own page4Set container, Header,Aside,Main to app.use()5The newly initialized layout container has no width and height. You need to set the width and height and the background color to see the basic layout. The container layout of the page is completeCopy the code

Beautify the header area of the home page

Implement the layout of the header1Flexi-content :space-between, align-items: center, cSS3 layout2: Page effectCopy the code

Implement the basic structure of the navigation menu

Go to element-UI and copy the navigation bar to achieve the layout of the navigation menu on the left:1: Go to the Element-UI website and copy the navigation menu2: Copy to your own page, leaving only a navigation bar,3: Deconstruct the navigation components from element-UI, menu navigation bar, sunMenu navigation bar inner parent container, menu-Item secondary menu navigation, note that they all start in uppercase, and omit el4: Page effectCopy the code

Add token authentication through the AXIos interceptor

After the welcome background page is added, all other pages require tokens. Before sending a request, we set the token after successful login in headers.Authoriaztion, so that the token will be generated when route switching occurs in the background. The token authentication succeeds in switching pages.1: Because subsequent apis require Authorization, tokens need to be provided in Authorization2: Flow diagram3: In the main. Set the token information in js, axios. Interceptors. Request. Use request header, can see through print is not in the headers Authoriation this property, We will give the config. Headers. Authorization, access towindow.sessionStorage.getItem('token'), get the token into the property set to headersAuthoriztion, and thenreturnGo out, so that every time you send a request it will fire, and set the Authoriaztion field in Headers, although it currently isnullBecause it will be used to click other menu bars later, the default is empty. At present, only login to the background, Authoriaztion property is generated, the subsequent TAB switch will generate token. After the click confirmed my statement is correct4: After successful login, set the Authoriaztion field in the request header, default is empty, only click to switch the TAB page, will generate token, will not benulltheCopy the code

Get left menu data

In the CREATE hook function, the trigger function pops the data it's holding into data and prints it1: View interface requirements2: create In a Vue instance, when the vue instance is successfully created, it is called immediately, usually to obtain data.3The menulist:[] in: data is an empty array, and when a created hook function is called, it immediately starts the function and gets the data in the left navigation.3.1In:asyncThe asynchronous function initiates the request, obtains the data of menus, solves the obtained data into data, and renames it as RES. If the data fails to be obtained, an error message is displayed. If the data is successfully obtained, the data is assigned to menulist in data to realize data filling. Note that this is just getting the data and printing it.Copy the code

Render the left menu through a double-layer for loop

Take the navigation data, according to the printed data, render their own navigation bar menu1Key =item.id to improve performance, and index is also item.id, complete1Level menu data rendering2: starts traversal. Itme. children, same as above attribute binding item.children.id. Achieve two - level menu data rendering. Note that the previous icon has not changed.Copy the code

Sets the font color for the selected item and adds the category icon

Set the icon in the navigation menu bar,2The level ICONS are inherent in element-UI,1Level is more troublesome and is rendered according to id1: Set iconObj object in data set: ID is based on the ID in the data, the incon icon class name behind, is the class name of their downloaded icon. throughclass="inconsObj[item.id]"Render the corresponding properties in the object to the menu bar according to the ID order.2: Level 2 ICONS are simple and do not explain3: Page effects, done1-2Level of data renderingCopy the code

You can only open one menu item at a time and resolve the border issue

Resolve all navigation bars can be expanded, completion can only be expanded simultaneously1A menu bar1: unike-opened keeps a menu open, written in the form: :uniique-opened="true"We used shorthand2: There is also a problem with the second level with a single right border. According to the debugging panel, find the corresponding element and cancel the border. Complete the menu expansion and2Level menu right border problem3: Page effectCopy the code

Fold and expand the sidebar

Achieve side menu bar expansion and folding effect1: Add above1An element, set the elements of the basic shape, complete fold button style, pay attention to can't give width, and through the letter - spacing Settings | | | the interval width of the vertical bar.2: : the collapse - the transition ="false"Close collapse animation, :collapse="isCollapse"The property inside is the default value of whether or not to fold in data, because clicking on the fold event reverses this value to make a fold switch.3: Effect before folding.4: Effect after folding [default folding is not enabled, requiredtrueTurn on the folding effect4.1:   :width="isCollapse ? '64', '240'. ""If fortrueIt's folded. The width is64, the opposite is expansion, width is240.Very wonderful!Copy the code

Realize the redirection effect of home route

By default, the welcome page is displayed in the background.1It is also possible to create the Welcome page and just write template2: Import the component in router.js, set it as a child of /home, and set redirection to /welcome. Route redirection is implemented3Note that since he wants to display the route on the home page, even though he has created the component and configured the route, he needs to display the route placeholder in home with <router-view>. Mount and display the component on the home page4: Page effect. After successful login, the /welcome page is automatically displayedCopy the code

Realize the transformation of the sidebar routing link

Click the navigation menu on the left to jump to different pages. Click to jump to different routing pages1Router router router router router router router router router2: : index ="'/ + subItem.path'"Note :index is a dynamic address. The path in the data is not preceded by /, so it needs to be added to realize route jump3; Page effect, click the left menu, you can jump to the corresponding routing pageCopy the code

4- User list layout and function implementation

Display the user list component in the form of a route

Click on the User List to display the user list component. Complete the list component creation and rendering1Create a component2Js is configured as a subcomponent of /home. Configure the route address and component. The route address must be the same as the route address that you click to switch to3: Page Effect - Click to jump to - user list pageCopy the code

Save the activation status of the left menu in sessionStorage

Click to make the current secondary menu highlight, refresh page highlight still exists, because the state is saved to sessionStorage1: The click triggers its own event function, carrying the requested address of the click'/' + subItem.path, 
2The activePath property in the token is the value of the request address passed in.3The activePath in the: data data is null by default and only passes through the hook functionwindow.sessionStorage.getItem('activePath') route the request to get, then assign the value tothisActivePath, realize the data filling. However:default-active='activePath'This is the property that is currently highlighted4: page effect, click the secondary menu highlight, refresh the page highlight still exists, because the transition has been stored in sessionStorage5: Implementation process; Click on the event to give the path request address in the data to the event function, which callswindowCreate hook function (activePath); create hook function (activePath);default-active="activePath"Bound to this property, the refresh is still highlighted.Copy the code

Draws the basic layout structure of the user list component

Add breadcrumb component + card component + input box component + button to complete one1-2Row style layout1: Copy components2: Modifies the global style of the component3: import the5A component4-5: Above is the breadcrumb component, below is the card component, the slot number in the card can be removed, tested. Gutter the space between each element, how wide is the sapn element. Complete the layout of the page6Page effect: Completes the breadcrumb and card style layout for the first lineCopy the code

Get user list data

Initiate a request to get the user list data, the user list data print view1: Interface document to view the parameters that must be carried2The: parameter is defined separately in queryInfo of data, which contains: query parameter + current page number + display number of data per page2.1Call getUserLsit in the Created hook function to get the data.2.2: encapsulates asynchronous functions, sends requests for data, writes queryInfo to params parameters, and passes it to the background. The error message pops up, and the data obtained from the users userList is assigned to the userList attribute in the data to achieve data filling. And total number of data items.3: Print the data to view, successfully obtain the user list of data.Copy the code

Use the el-Table component to render the basic user list

Complete the page layout and data filling of the Table1: Sets the global style2: Copy the table component, :data="userlist"Take the data, border add border, stripe add interlaced color,2.1Note that label is the header information and PRPO is the data information for each item in the table3: Imports table+tableColum4: Page effects: Complete table layout, and data renderingCopy the code

Add index columns to the table

Set the index number of the first row in the table. Add a row el-table-column, type=index, and set the index number.Copy the code

Customize the display of status columns

Use the state valueswitchInstead of switching, turning on and off lights can be modified by clicking,1: copy switch2{{scope. Row}} insert tempalte slot into table-column, slot-scope=scopeswitchTwo-way data binding Scope.row. mg_state State conversion binding of root data, can render switch according to the state, can also click the switch, complete data modification. The status of the refreshed page is still saved.3: importswitchSwitch components4: -5: page effect, click the switch to complete data state modificationCopy the code

Render action columns through scope slots

Render the most in one3Button to add a mouse-over hint to the last button1: Copy style2: Map prompt component3: set width =180Set the width of the table. The last button needs to be wrapped around the toopTip element to display the prompt message over the mouse: Enterable =falseThe mouse passed as not passed. To complete the3Button rendering4: Page effectCopy the code

Implement paging effect

Paging component rendering, and click to achieve the various functions of paging1: Copies the paging component2: Importing components3: Sets the global style for paging4Page-size =[page-size=[page-size=[page-size=[page-size=[page-size=[page-size=[page-size=[page-size=[page-size=[page-size=[page-size=[page-size=[page-size=[page-size=]1.2.5.10] Number of data items per page in the drop-down box :page-size="queryInfo.pagesize"Number of items displayed on each page layout= Total Number of items displayed on each component5: The current default is the first page and each page is displayed2The data.5.1Select time in the handleSizeChange drop-down box: Render data according to the number of data items in the newSize drop-down box5.2: handleCurrentChange, the current page number, note that every time you make a pagination change, you need to call getUserList to refresh the data. Implement changes to paging dataCopy the code

Modifying user Status

Using switches to call the background server to achieve data state modification1:switchTo get the status of the switch2In the event function triggered by: @change event, this line of data is carried and printed to check the state of MG_state. It can be seen that the interface is called to initiate data modification, and the userinfo.mg_state in the data is given to the server. Click the switch to complete the modification function, and a prompt box pops up to prompt the completion of the modification function.3-4Note that the interface needs to use template syntax to carry data concatenation to the background`user/${userinfo.id}/state/${userinfo.mg_state}`. This carries the ID and status of the row to the background5: Click the switch to modify the status of the button.Copy the code

Implement the search function

Search for the keyword user name in the input field to render the user's data, and click x to restore the data1Clear =getUserList: v-model=queryInfo.query bind the query parameters, clearable appears the close button, @clear=getUserList, click the clear button in the database will call getUserInfo again, get the number of render page again2: Click the search button, because two-way data binding v-Model, queryInfo is passed as params parameter by default in the function, so clicking search also renders the page based on the content in the input box for the user's data.Copy the code

5- User add, modify, delete functions

Render the dialog box to add a user

The user list is completed, and the specific functions of the user list begin to be completed. Click Add User to pop up the Diglog dialog box1: Copy it to your project and import it2: Click cancel and ok both with @click="addDialogVisible=false"Close the dialog box. Because addDialogVisible in data:false@click=:addDialogVisible= when you click to add a usertrue:, a dialog box is displayed3-4-5: Page effect - click the pop-up dialog box, click elsewhere to close the dialog box.Copy the code

Render the form to add a user

Add form controls to pop-ups, and form validation rules to validate the content in the form1: Copy form validation into your own project2: Adds the form form, :model="addForm"Listen for the addForm object in Data, which contains multiple property values, each of which is the form control V-modle ="addForm.username"Two-way data binds this property, and the contents of the input field go to addForm. :rules="addForRules"Bind form validation rules, each of which is an array, each of which is required:true.message:'Please enter'.triggerBlur, the second group of validation rules is min, Max, message, trigger. There are2Cen which validation rules.3-4As mentioned above, the attributes in addForm are already bidirectional data bound, and there are validation rules in data. Each validation rule is an array, and each array is an object. Object has a2Layer verification rule5: page effect, added form validation rules, each validation rule can be triggered correctly.Copy the code

You can define verification rules for email addresses and mobile phone numbers

You need to customize authentication rules for email addresses and mobile phone numbers1: View custom validation rules in element-UI2Since the form controls have v-model bound data, we can just define validation rules, each of which accepts an ES6 function, parameter, as a variable1, verification rules, parameters2: Values and parameters in the input box3: callback function. The callback function defines a regular expression that validates the contents of the form by judgingif(regemail.test (value)) Verifies the content in the input box and returns the verification result through CB. If the verification fails, an error message is also returned3.1: Invokes the user-defined verification rule: Validator :checkEmail. The Validator triggers the verification rule and only modifies the verification rule2.
4· Can correctly trigger the verification of email and mobile phone numbersCopy the code

Implement a reset operation to add a form

When closing the add user frame, open it again to empty the input field1: Click through the eventthis. $refs, addFormRef. RessetFields to empty the contents of the input box1.1: because ref= is in the form"addFormref"Bind the reference object, which is equivalent to taking the form object and calling it resetFields to empty the contents2-3: Close the dialog box, open the dialog box again, the input box has been cleared. Complete the clearing functionCopy the code

Implement the form pre-check before adding users

Complete the verification and form clearing functions, and start to complete. Click OK to trigger the pre-verification function of the form1: Triggers the click eventthis$refs.adFormRef.validate calls to this function to implement pre-validation of the form, and valid is the result of validation. If it passes, it returnstrue.2: After verification, click OK to printtrue
Copy the code

The user is added by invoking the API interface

Complete the form pre-validation and start calling the interface to actually add users and render users1: Interface document2: Because addForm is the content of the form, it can replace the data needed to carry in the interface. The calling interface carries data, if the return status =201A failure message will pop up, or a success message will pop up. In the close dialog box, call getUserList to get data again and render the page again3After completing the pre-validation, click add New User and re-render the page.Copy the code

Displays the modify user dialog box

Click modify, add dialog box, pop-up dialog box1: Copy components2: Click OK and cancel to close the dialog box, and only click Modify to open the dialog box, because editDialogVisible:false", click Modifytrue. :visible.sync does the same thing as @cllick, just with a different name3: Click Modify to pop up the basic appearance dialog boxCopy the code

Query user information based on the Id

I'm going to call the interface and get the user information, and I'm going to store that information in my editForm,1If it fails to get the user data, a dialog box will pop up indicating that the user failed. If it is correct, the data will be assigned to editForm to achieve the user data acquisition, just to get the data, and there is no control added, rendering the data to the controlCopy the code

Render modifies the user's form

Completed the modification of user data acquisition, add form controls, add custom email and mobile phone number verification1: Adds a form validation control2: Binding form object: Model =editForm, :rules=editFormRules binding validation object, ref=editFromRef binding form reference object, v-Model = in the form control"editForm.username"Bind the contents of the form2.1The editForm form object is created in: data and defined in data2A custom validation object, note the object2Validator in :checkEnmail uses the custom validation rules in global data. The V-model in each form must match the attribute name of the returned value in the data response3: Click Modify, and the modify box pops up, verifying the content in the input box.Copy the code

Implement a reset operation that modifies the user form

Close the dialog box, open the dialog box again, and reset the content in the dialog box back1: In the shutdown event,this. $refs. EditFormRef. ResetFields call the reference object, data reset function is realized2-3: After closing the dialog box and opening it again, the contents of the input box are resetCopy the code

Complete form pre-validation before submitting changes

After completing the reset function, start to complete the form and click OK to implement the pre-verification function for the content1: @close Closes the event, triggers the event function,this. $refs. EditFormRef. Vaildate calls the function of prospective validation, the valid printed to the console, it can print the result of the form validation a Boolean value2: Click to complete the modification, verify the pass, click OK, print the Boolean value in the consoleCopy the code

Submit the form to modify the user information

After completing the form pre-validation function, the interface is called to complete the user modification function1: After the pre-authentication is successful, axiso request is initiated, using put to modify the parameter1Carries id, parameter2{email+moblie} sends the mailbox and mobile phone number to the background to complete the user modification function. If the modification fails, an error message will pop up. If the modification succeeds, the dialog box will be closed and getuserList will be called to refresh the page data.Copy the code

A dialog box is displayed asking the user whether to delete data

Click delete, pop up delete dialog box, will delete confirm and cancel printing, to the console1: Copy components2: How to use the component3$confirm: Destruct the component, call messageBox. confirm, assign this method to vue.prototype. $confirm, and mount it as a method on Vue prototype so it can be used in JSthis. $confirm this form object.4: Click delete, the deletion dialog box pops up, the event function carries the ID, throughthis.$confirm A dialog box is displayed. Confirm indicates the object2is2ConfirmButtonText: confirm; cancelButtonText: cancel; Type :warning After the text layout of the pop-up box is completed, if the return value of the form is not Confirm cancel, it means do not delete, the pop-up has canceled deletion, otherwise, it means really delete, print the deletion information to the console5-6-7: Click delete, cancel will pop up prompt, if yes, just print text message, no subsequent operation...Copy the code

The user is deleted by invoking the API

Complete the layout of the delete box, call the interface to complete the real delete function, re-render the page1: Interface document, which must carry an ID2: Click the pop-up deletion dialog box, confirm the deletion, call the interface, carry the ID, if the deletion fails, the deletion failure prompt message will pop up, if the deletion succeeds, it will show the success of tea tree, call getUserList to re-render the pageCopy the code

Create the user subbranch and push the code into the code cloud repository

Because the code is written on the master branch by mistake, don't be afraid to create and switch branches, the code will automatically pass,1Create a switch branch, and the code will pass all over the branch2: Completes code updates in the local repository3: Creates a remote branch4: Merge branches5: Updates the master branchCopy the code

Create the rights subbranch and push it to the code cloud

Create and switch to the development branch and push the branch to the remote branch to complete the creation of the remote branch.Copy the code

6- Permission list

Display permission list components by route

After completing the function of the user list page, the permission list page component of the permission management starts to be created. Click to jump to the permission list page1Create a component2: Configure the route in router.js, import the permission list component, and configure it as a child route in the home page3: Page Effect - Click to jump to the permission list pageCopy the code

Draws breadcrumb navigation and card views

After clicking to jump to the Permission list page, finish rendering the base shapes of the breadcrumbs and card components1: because it2The components have been constructed before, so just copy them and modify them.2: Page effect, complete the layout rendering of the breadcrumbs and card components of the page effectCopy the code

Call API to get permission list data

After rendering the breadcrumbs and cards, the interface is called to print the data for the permission list1Rights /:type ===> get('rights/list'), 
2: Creates an empty array in data to receive data. The create hook function calls the function to retrieve the data. In methods, the wrapping function and asynchronous function, the data request is initiated and the request type is specified. If the permission list data fails to be obtained, a failure message will pop up. If the data succeeds, it will be assigned to the array in data, and the data has been obtained successfully by printingCopy the code

Render permission list UI structure

Complete the permission list to obtain the data print, create the table, render the data to the table1: Copy components2: Importing components3: Table component :data="rightsList"Bind empty array data, add border and interlaced color, add type=index,3.1: label is the header name, prop="Properties in data Response"For each specific information in the table,3.2Template slot-scope=scope receives data from this row, and passesifJudge the value of level, render the level of the element according to the value, and complete the rendering of the level button4The information in prop must be consistent with that in the interface5Page effects - Complete rendering of tabular data, and hierarchy on demandCopy the code

This section describes the relationship among users, roles, and rights

After finishing the layout and rendering of the permission list page, we started to analyze the roles: each role has different permissions, so the roles have different permissions according to different usersCopy the code

7- Role list

Display the role list component by route

16: Completed the function of the permission class table, switch to the development of the role list page, click to switch to the role list component1Create a component2: Imports the component and registers it as a child component under the /home route3: Click the role list to switch to the role list pageCopy the code

Draws the basic layout structure and gets the list data

17Complete the page component creation, analyze the character list layout, and add breadcrumbs and card components1: Analyze the interface document, the last layer of data, is not contains children, that is the number3Data for layer roles.2Create () : creates an empty array in data, calls a function in create, encapsulates a request, and carries nothing. If the request fails, a prompt is displayed, and the correct value is assigned to the empty array. Print data viewing has been obtained3-4: Requested data for the character list, and completed rendering of the breadcrumb and card viewsCopy the code

Render the character list data

18Finish rendering the breadcrumb and card views, and get the data for the character list, add the table and render the data1: Adds components with ICONS2Each row is a table-column. Expand is the expanded row, index is the sequence number, label is the header name, and prop is the bound data. The value must be consistent with the returned data. Width = fixed width; sloy-scope=scope3Color size of a button icon.3: page effect, complete the data rendering of the table in the cardCopy the code

This section describes the function modules to be completed in the role list

19: Completed the table data creation and rendering which3These functions are the same as those in the user list. You can complete them independently. This section only does the following2A function of1Function:1Render the data and styles in the collapse menu2Function:2: Click assign permission, complete the rendering of the permission dialog box, and the function of assign permissionCopy the code

Analysis of the role of authority rendering implementation ideas

20: Do features first1Render the data rendering in the folding menu. First get the row data and print the data for analysis1: Add slot to template in expand column, print scope.row data to view,2The first id is the role name of the row, the second is the role name of the row1Level data, decreasing in order. The last data does not have the children attribute. The data analysis is completed3: Look at the picture and analyze. Each row in the fold corresponds to the data in the red boxCopy the code

Render level 1 permissions through the first level for loop

21: The corresponding relationship of data was analyzed and the first layer of data was rendered1: Row traverses the data, filling the data into the tag, rendering the first layer of data, a row total24Grid system, : SAPn =5The first row takes up5A wide2: page effect, rendering the first layer of dataCopy the code

Beautify the UI structure of level 1 permissions

22: Finished rendering the first level of data, beautifying the style,1: added a top and bottom border, :class= ['bbbottom', i1 === 0 ? 'bdtop' : ' '], the first bottom border is added directly, while the second one needs to be loaded on demand. If it is the first one in the array red, the top border is not loaded. I1 is equivalent to index=1Note: Calss requires dynamic binding. All class names need to be written in [] arrays separated by commas3Meta-expressions are added as needed2: Add a small icon, a small triangle, to the first menu3: page effect, added a small icon, and added a top and bottom border.Copy the code

Render secondary permissions through the second layer for loop

23: Menu is complete1To start rendering2Level menu data1Item1. Children: a row row that iterates through item1. Children and displays the iterated data in the child's tag, whose borders are rendered as required by the ternary expression2: Completed the data rendering of the page and added small triangular arrows3: Data analysis, total3Layer data, also total3A children attributeCopy the code

Render the third level permissions through the third level for loop

24: apply colours to a drawing2Level data, start rendering3Level data,1Item2.children = item2.children = item2.children = item2.children = item2.children = item2.children = Item2.children = Item2.children2Finished:3Level data renderingCopy the code

Beautify the UI structure of permissions for roles

25Finished:3Level of data rendering now solves the problem of confusing minimum page width layouts, and vertically centered elements1In:globalAdd min-width:1366px to the body of the.css2: Use flex layout with align-items: Center to center the elements vertically up and down. Place this element in:class=[array], to achieve vertical center up and down3: Page effect: Complete the vertical center up and down and page layout is too small chaosCopy the code

Click the delete permission button to pop up the confirmation prompt box

26Finished:3Level collapse data rendering, start to complete click on the small menu, remove this menu from the data1Because the $confirm method was previously mounted globally in element.js, it can be used directly in JSthis$confirm will pop up the deletion dialog box. If the user cancels the deletion, the deletion prompt box will pop up. If it is deleted, it will print the deletion in the console. Because the interface has not been called to complete data deletion. Note that @close can trigger a close event,2: page effect, click cancel will prompt, but click delete will only print.Copy the code

The role permission is deleted

After the deletion is completed, it can trigger the printing of the deletion result and call the interface to formally complete the data deletion1The: interface document, :roleId is equivalent to what line of data, and :rightId is the child of what line of data, which also has its own ID, combined with the parameters1That's dad's ID, parameter2Is the ID of the son to be deleted. Delete son according to father2: Add a close icon to each icon, and call the close event function, to remove the (parent line, child ID) to the background, in the request address replacement` `Template syntax, put parameters2Pass. The deletion function is complete. -- Note that it cannot be called directlythis.getrolesList, so that when a piece of data is deleted, the page is automatically refreshed and folding is closed. Role-.children needs to receive the data returned by the delete so that a data can be deleted without closing the dialog box.3: Completes the function of deleting a menu without closing the fold. Implements a local deletion of the child elements of the row.Copy the code

8- Assign rights and roles

A dialog box is displayed asking for permission data

28: Completed the rendering and folding menu of the user list rendering and delete, start to complete click popup assign permissions dialog box and print permissions list data1: Importing components2: interface document, need to accept a tree control,3: the page have been added to assign permissions dialog box, click assign permissions to the pop-up dialog box, send the request, if the data failure will prompt failure information, will get all the access data, add an empty array entirely, the forwarder will add a tree control, will obtain the data to display in the tree control, now only the pop-up dialog box, through the interface to get the data4-5: Click to bring up the dialog box, and print the data in the consoleCopy the code

Initial configuration and use of the El-tree tree control

29After clicking the popup dialog and obtaining the permission list data, add the tree component and render the data onto the component1: Add component + Import component2The: component is added to the page with :data=rightslist, an empty array that contains all the permission data. :props specifies the fields that the data binding is to display, label is the name of the display, and children are the child objects in each of their data.3: Click the pop-up dialog box to display the data in the tree control.Copy the code

Optimize the display effect of tree controls

30: Completes the data rendering of the tree control in the pop-up dialog box, and begins to complete the beautification of the tree control style1: Add show-checkbox to the component to display checkboxes, node-key="id", each node is bound to a unique identifier. Note that id is an ID, a unique identifier, in the returned data.2: Complete the data before adding a check box, and add a unique identifierCopy the code

Analyze the implementation roadmap of default selection of existing permissions

31: Completed the optimization of click-popup property components and components, and started testing to get data checked in each node1: :default-checked-keys="defKeys", it can display each checked node, and it can accept an array of arrays, whose ids are each3Level data id, there are several, the page will be checked a few2: page effect, through:default-checkbox tests the checked checkboxes displayedCopy the code

Example Load the permissions of the current role

32: Tested the render condition checked by the checkbox, and started rendering the character that had been checked. Render and check all checked1: Trigger the event function when clicking the allocation right, store the data obtained by the interface with Rightslist, use a recursive function to pick out all the checked data, and then call the function when clicking the popup dialog box, call the recursive function and display the checked data to the page1.1Ndoe receives a set of data from scope.row. Arr is the empty array of data used to store the checked data.1.2: Explanation of recursive process: By calling the function, we get the object and the empty array, call the encapsulation function and the outer forEach to traverse the children property in the object, and the function calls itself to form a loop, and push all the objects found in the loop that do not contain children into the defKeys empty array, at this time the data in the array are3Level object, node this is every one123It has all the data. Arr is every checked data in defKeys.2: Gets the checked ID recursively and adds it to defKeys. Clicking on it renders all checked data in the tree control to the pageCopy the code

Reset the defKeys array when closing the dialog box

33: complete data in a tree control rendering, but each time the distribution of the different permissions per click, it will accumulate in the other assigned permissions [is the people were full, click on the other, also be future generations], every time need to assign permissions per click to close the dialog, to empty the array, you will not achieve the pollution problem1: Bind the click close event to the pop-up dialog2: Close the event function, the data to the null, to achieve independent non-pollution added to allocate permissionsCopy the code

Call the API to complete the function of assigning permissions

34: to solve the problem of clearing the array each time the assignment is completed, data accumulation, pollution to other role assignment permissions, call the interface to complete the modification of the real role assignment permissions1: Data interface2: property control method3: When clicking the pop-up dialog box, get the id of the level 1 role4: receive1ID of level data5-6: Click assign permission event, called in functionthis. $refs. TreeRef. GetCheckedKeys access to all the state of the button,this. $refs. TreeRef getHalfCheckedKeys, access to all half selected state of the menu, they are2Keys will be combined into an array, returned to keys, returned as an array, call the interface to initiate permission data modification, the1Level menu ID and he inside the full selection and half selection of the button, sent to the background, if the allocation of failure to pop up the failure of the information, if the success of the pop-up successful prompt information. Close the dialog box, re-render the page data, complete the modification of assigned permissions, and refresh the page7Click the popup line, click modify permission, click OK to complete the modification of permission, in the close dialog box, refresh the page data. The function of the assignment is realizedCopy the code

Renders the dialog to assign roles and requests the role list data

35: Go back to complete the user management - User list - role assignment function, click the pop-up dialog box to render the user and role information to the page1: Interface document2: Click the pop-up dialog box,3Render the user's name and role to the page4: Click the popup dialog box to initiate a data request and store the obtained data in rolesList for data rendering in the subsequent drop-down box5: page effect, click popup dialog box, complete the click popup dialog box and data rendering within the boxCopy the code

Render the select drop-down menu for the character list

36: Completed the display of click to Assign role dialog box and the acquisition of all role data, and began to complete the data rendering of the drop-down box1: Copy components2: Importing components3: v - model ="selectedRoleId"RoleName: : Label =item.roleName: : Value =item.id :value=item.id :value=item.4: After clicking the data in the drop-down box, render it into the drop-down boxCopy the code

The role assignment function is complete

37: Completes the data rendering of the drop-down menu of classification roles, and starts to invoke the interface to complete the function of assigning user roles1: Interface document2: Click OK to trigger the saveRoleInfo function. If no data is selected, click OK to pop up a prompt message, which must be selected. Call the interface to initiate data request, carry the id of the object to the background, realize the data modification.2.1: When closed, the selected drop - down box and the selected user are cleared. Not only realized the modification, re-open and realize the reset function of the data, is a new form for users to modify, complete the modification function of the assignment roleCopy the code

Commit native code to Git repository and push it to the code cloud

38: I just went back to finish assigning roles to other pages. I returned to the warehouse update of the role list page because I had finished the feature development1: Local update2Since the remote branch is already created and is now on the branch itself, a direct push will update the remote branch with the local branch3: Complete the remote primary branch update,1: Switch to primary branch, merge branch, and update remote primary branch.Copy the code

9- Commodity classification

This section describes the function of product classification

01: Front page and background management page logic is actually the sameCopy the code

Create a goods_cate subbranch and push it into the code cloud

02: Creates a local branch and a remote branchCopy the code

Load the goods classification component through routing

03: Creates an item category component and configates a sub-route page as /home in the Router to redirect to the item category page.Copy the code

Draw the basic page layout of the commodity classification component

04: Complete the basic page layout by clicking to jump to the component page to implement the breadcrumb and card viewsCopy the code

Call API to get item category list data

05: Realized the basic layout of the page, started to call the interface to obtain the interface data, and printed the commodity classification data for viewing1: Interface document2: Define query conditions in data, including type is the level of the query data, pagenum is the current page number value, pagesize how many data to display per page.2.1: defines an empty array to receive the category list data. Total counts the total number of items.2.2: Calls a function in create to retrieve data. Encapsulate functions, initiate data requests, params:this.QueryInfo query parameter, is just defined initialization query object, if the data fails to obtain, pop up a prompt, the success of the data stored in an empty array, and the total number of stores in total, achieve page data access3: Prints the obtained classification list dataCopy the code

Vue-table-with-tree-grid tree table components were initially used

06: Completed the data acquisition, began to use third-party dependencies, layout tree tables, data rendering1: Download third-party run dependencies in the visual panel2: Import the downloaded plug-in into your own main entry file so that all child pages can use it. And register it as a global component. vue.component('tree-table', TreeTable), and you can use the tree-table plugin later3: To use the plug-in in a VUE page, see the user manual for each attribute3.1: :data=catelist Contains a list of names in a commodity category3.2: :cloumns= Cloumns defines the data for the column. Label is the name of the table header and cat_anme is the bound data name.3.3: : selection - type =falseClose the dialog box at the front of the table: expander-type =falseClose the table collapse,3.4: show-index Displays the index number3.5: index-text Specifies the title name of the serial number3.6: border adds a vertical border, :show-row-hover: disables mouse-over background color highlighting4: Adds initial data to set the table data5Method: the API6Attributes: the Attribute7: code examples and data returned by the interface8: page effect temporarily rendered1Level data.Copy the code

Render table data using custom template columns

07: used a third party form and put1Level data according to the document to render the data, now render is valid1: How to customize the slot and insert your own icon.2: Indicates the response data of the interface3: defines the template slot, slot: isok receives the template in data, if yesfalseOn the render tick, if not on the render X, to achieve the render on demand icon4: page effect, render the icon of whether or not the data is valid, and render on demandCopy the code

Render the UI structure for sorting and operations

08After rendering the first custom template, start rendering the second custom template, render sort.1: Defines slot rules and data2: defines a sort, also render ICONS on demand, the second is to directly render buttons with ICONS, both using custom templates3: Interface document4: page effect, rendered2Level and3Level data is rendered according to the value of scope.row.cate_level=Copy the code

Implement paging

09- apply colours to a drawing123Level of menu data, and custom template data, to start rendering paging function1: inserts a component, @size-change listens for page number changes1.2: @current-change Listens for data page changes1.3: :current-page= queryInfo.pagenum renders data from the first page by default1.4: : page - size = [1.2.5.10], how many pieces of data to display on a page1.5: :page-size="queryInfo.pagenum"Displays several pieces of data on a page1.6: Layout Layout of all paging components on a page1.7: handleSizeChange and handleCurrentChange both listen for changes in page numbers and data, and re-render the page to achieve the function of data paging2: page effect, realize the paging functionCopy the code

Render the dialog box and form to add categories

10: Completed the paging function, began to complete the classification function, click to pop up the dialog box, and added the form verification rules1: added the dialog box, bound the form data object, the object has the name of the classification, and the id of the classification, classification level.1.2: Binds authentication rules1.3: binds the reference object1.4: prop specifies the validation object1.5: Bidirectional V-model binds data of data enclosures1.6: Lable header title1.7Form data objects and validation rule objects are defined in data2: interface document,3The value is mandatory, including the parent class ID, category name, and category level3Click the popup dialog, render the input box, and add the validation ruleCopy the code

Gets the list of parent classification data

11: Completed the click to add classification pop-up dialog box and added form validation rules, began to call to print the data of the drop-down menu1: interface document,2When you click the popup dialog box, call the function that gets the classification data, call the interface in the function, carrying the params parameter type:2"Means to get2Level of data because no3The level of data is user-selected, not rendered by us3: Prints the obtained data to the console without rendering the hierarchy list dataCopy the code

Render the cascade selector

12: Just got it2Level of data and print, now render the dropdown menu based on the data1: props specifies the rendering data, value of the rendering2Level ID, label rendering2Level data, children is the render item with Chuildren,2Render data in a cascade selector, : Options specifies the data source, :props specifies the configuration object for cascading rendering, V-model specifies the ID of the parent class, @change prints the selected data, clearable adds the close button, and change-on-select allows any level to be selected3: code examples and data returned by the interface4: Click Finish2Level of data rendering and selection.Copy the code

Process the data in the form according to changes in the parent category

13; Render the cascade selection box and begin to finish rendering the category names1: @change raises its own event function, which assigns the id of the last selected item to cat_pid if data is selected3Cat_level is3.2: The data rendering of the classification name is completed, and the interface is used to complete the data modification laterCopy the code

Reset the form data in the close event of the dialog box

14After completing the logic for adding data to the form, clear the data box when you click close1The function resets the form, empties the array, returns the id and level, and implements the real initialization2: realize the return of adding classified data0.The reset functionCopy the code

The category is added

15: The data reset function is complete, and the interface is invoked to complete the classification modification function1: Indicates the response data2: Edit and delete the same function as before, students need to complete, call the interface to complete the addition of points, and refresh the page3: page effect, complete the addition of classification, and re-render the page data4-5: this2These functions need to be completed by students after classCopy the code

Commit the code on the Goods_cate branch to the Git repository

16: The category function is added. The local branch is updated, the remote branch is updated, the merged branch is updated, and the remote primary branch is updatedCopy the code

Create the Goods_params branch

17: Creates, switches branches, and remotely creates branches with the same nameCopy the code

10- Classification parameters

This section describes the function of category parameters

18: The logic of background and foreground classification parameters is the sameCopy the code

Load the class parameter component page by route

19: Create a category parameter component to redirect to the page and mount the route in router and JS.Copy the code

Render the basic UI structure of the classification parameter page

20Click to jump to the classification parameter page and start to create the basic layout of the page1: Introduces the alert component,2Deconstruct the component in element.js3: page effect, showing breadcrumbs and alertCopy the code

Call API to get item category list data

21: After completing the basic outline layout of the commodity page, call the interface to obtain the classified data list1: Defines an empty array in data1.2: Calls the event function in created to get data1.3: encapsulates an asynchronous function that initiates a request, notifies it if the data acquisition fails, and prints the data to the console if it succeeds2: interface document, do not need to carry parameters, direct request can return data3: Successfully requested dataCopy the code

Render a cascading selection box for an item category

22: Obtained the data of the classification list, and imported the data in the cascade selector to set the cascade1: cascading selector :options receives a list of items, :props specifies the data in the cascading box, and V-Model specifies the data in the cascading selector box. This function is triggered when a change occurs in the @change cascade selection, which takes the selected data and displays it in the cascade selector2: Completes the data rendering and data fetching in the cascade selectorCopy the code

Controls the selection range of the cascade selection box

23: After rendering the data of the cascade selector, also get the selected intermediate link data and print it, if only selected2Item that cannot allow data to be selected in a cascade1: Check in @change that the length of the returned array is not sufficient if the selected cascade is selected3, the cascade is not allowed to be selected. Empty the cascade selected array to achieve unselected data,returnPrevents the program from continuing down2: page effect if the selected data does not exist3Level, the selected array to empty, to achieve the array of data emptyCopy the code

Render the Tabs TAB for the classification parameters

24: Completed Unselected3Level data, clear the data in the cascade, start to complete the TAB TAB page rendering1: Imports the TAB component2: Deconstruct TAB page components3In tabs, configure the v-model bidirectional binding activeName to indicate which TAB is currently clicked. The default value is the TAB selected value4-5: page effect, complete TAB page rendering and selected data printingCopy the code

Render adds a parameter button and controls the disabled status of the button

25: Complete data rendering in TAB, start implementation, if not selected in cascade3Level data, let the Add parameter button disabled1: allows dynamic and static parameters to be added2To disable the function, use :disabled to dynamically bind the return result in the event function if the selected length does not exist3Level, and returntrueDisable, otherwise returnfalseCan't help. Note: Disabled can accept a functionreturnThe return value2: -3: Page effect, not checked3Level data on the disable buttonCopy the code

Gets parameter list data

26: Cascading is complete3Level data, let the Add parameter button disabled. Now finish fetching and printing the parameter list data1In the TAB TAB, name is the label name of the TAB, and label is the title title.2: Click TAB to print only or many in the console3Tab1: The name in the TAB TAB is bound to activeName in data, which is bound to many, so the TAB TAB displays tab1.4: cateId function that returns the selected category ID, if selected3Item data, returns the selected one3Item ID, which is returned to cateId5: In the cascade select event function, the trigger handleChange function, if is selected3Level data on the start of the request will be selected3CateId: static or dynamic params: sel:thisActibeName is sent to the background server and the server knows where it is3Cascaded ID and selected are static and dynamic, and will return data belonging to the parameter list. If the data fails to return, a message will pop up. If the data is returned successfully, the data will be printed in the console for subsequent operations6: Got the parameter list data from the consoleCopy the code

Switch the Tabs panel and retrieve the parameter list data again

27Error: the @change event returns the requested background data, but no data is returned when you click TAB, because TAB did not bind the previous event, so you cannot retrieve the data1: Click TAB. No data is available. Click TAB to obtain the data in the parameter list2: Cut all the code you just wrote in the handleChange event function into the getParamsData event function, which is the clipped data request code. Call this function in both handleTabClick and handleChange.2You can get the parameter list data3: Click the cascade and TAB to get the background data backCopy the code

Mount the obtained parameter data to different data sources

28: Solve the cascade and TAB can get data, distinguish dynamic and static data, store them in their own data1: Click TAB yes to get the data, and store the data sorted into dynamic and static parameters2: Saves the data of the currently selected TAB page in the obtain parameterCopy the code

Renders the Table for dynamic parameters and static attributes

29: The requested data is distinguished between static and static for subsequent operations. Now render the split data in the table1: In table: Data is bound to manyTableData, and the static table is bound to onlyTableData. The obtained data will be treated separately and the data in the table will be rendered2In the cloumn row in the table, label is the header, prop is the specified render data item, and template slot is used in the last row to render the button in the operation3Table in the static parameters panel of the page effects, rendered on demandCopy the code

Render the dialog box for adding parameters

30Finish rendering the table data in the Action TAB page and start to complete2Users share a dialog box, distinguish different data, and pass form validation1-2: Click add button, the dialog dialog box pops up, : Model binding form data object, :rules validation rule, ref form reference object, : Label dynamic display text, prop specifies the name of the classification. V-mdeol binds the category name in the add form2.1: When you click Close, the close event function is triggered. When you close the dialog box, the data in the form is reset.2.2: titleText The name of the title is wrapped in a function that returns different text information depending on the currently highlighted item being clicked. So the input field title can render different data3: Click the add button in the panel, actually sharing a dialog box, but the data in the dialog box is differentCopy the code

Dynamic parameters and static attributes are added

31: Finished clicking the popup to share a dialog box, the box shows different data only, began to complete the function of adding parameters1: When clicking "OK", the event function will be triggered to verify the data in the form, call the interface to obtain the data, and carry it3The id of the cascade, and the name added and which panel is currently clicked. The total is: click which panel, is not selected3Cascade, and selected content, to give background data 】2: interface document: parameters to carry, parameters1Is the cascaded array ID, parameter2It's what to add, and what to click on3-4: Click Add to complete the function of adding parameters. The added parameters will render data in the tableCopy the code

Render modify parameter dialog box

32: After adding parameters, click modify and a dialog box pops up1: add dialog dialog to the page, :model binds the form's data object, :rules binds the validation rule, ref forms reference object, :label header title, V-mdeol bidirectional is the input content,1.1: Click the button in the different modify panel, the modify pop-up dialog box will pop up2-3: page effect, click to pop up the modification dialog boxCopy the code

The parameter modification is complete

33: Click the popup modify dialog box to complete the function of modifying parameters1: interface document, according to the ID query parameter interface, Xu Tao carry3The id of the level, and the ID that you clicked. Edit submit parameter interface to complete data modification to be carried3The id of the cascade, the ID that you click to modify, and the parameters carried are the data in the panel that you modify and the content you modify2-3: Click the display modification dialog box, initiate a data request, render the requested data to its own input box, and display the dialog box. Complete the click display modify dialog and render the requested data into the input boxA: Click the "modify" button, B: trigger the modify event, verify the content in the form in the function, initiate the interface request, if the data request fails, it will be prompted, and call getParamsData to refresh the page data C: Page effect: Click the pop-up modification dialog box and render the content in the dialog box. Click "Modify" to initiate data request, complete the modification of data parameters, refresh the page table and render the page data againCopy the code

The service logic for deleting parameters is complete

34: The parameter modification function is complete and the parameter deletion function is implemented1If confirm is displayed, the deletion is cancelled; otherwise, the interface carries the cascading ID and its own ID to implement the deletion function. If the data deletion fails, a message is displayed indicating that the data deletion succeeds, and getParamsData is called to refresh the page data again2: Interface document3: Page effect: Click Delete, the deletion dialog box will pop up. Click ok to delete, the deletion prompt will pop up, and refresh the page data again to complete the deletion parameter functionCopy the code

Optional under render parameters

01: Completes the parameter deletion function, starts rendering the data in the fold box, converts the data into an array and presents it as a label1-2-3Attr_vals returns a string separated by Spaces, traverses the data with forEach, splits the Spaces with split, and returns an array separated by commas forEach entry4-5; Loop the delimited array through the tag and display it. The page renders the tag tag.Copy the code

Fixed a bug with attr_VALS being an empty string

02: Completed the display of tag data in the form of tags, but when the empty folded line, there will be an empty label inexplicable, solve the automatic generation of blank labels1GetParams transforms the data in forEach. If there is data in forEach, split the data into an array. If there is no data in forEach, it is an empty array2: page effect, in fact, is [' '] there is an empty string in the array, so render the blank label, use3The meta representation renders the label as neededCopy the code

Control button and text box switch display

03: Complete the solution to generate a blank label, start double-clicking to change the label into an input field1: Use dynamic edit tabs on the page2The v-model in the input is the value in the input box, ref is the reference object of the input, @keyup.enter.native is the event function triggered when the keyboard is lost, @blur is the event triggered when the input box loses focus3: Triggers the event function when the input box loses focus, or when the keyboard is up. The function prints OK, indicating that the event can be fired. When you click the Button, it switches to the input field4: page effect, click the button will switch to the input boxCopy the code

Provide separate inputVisible and inputValue for each row of data

04: Completed the edit switch between input fields and buttons, and began to solve the problems caused by sharing data1: An input box is clicked, but all rows have an extra input box because they share the same data object and value. Make them independent, so they don't affect each other2: Delete light data, text box toggle, and text box input3In the forEach traversal of getParamsData, the loop generates its own input field display and input field values forEach data, since the data is independent and does not affect each other.4-5: Clicking only changes the button in its own row to an input box, and does not change the data in other rows.Copy the code

Let the text box get focus automatically

05: Solved the problem of data sharing and started to complete the function of the input box to automatically get focus1-2:this.$nextTick() => {this$refs.savetagInput.$refs.input.focus3: Automatically gets focus after it becomes an input boxCopy the code

Realizes the text box and the button switch display

06: Complete the input box automatically get focus function, start to complete the input box if the input is very pair of Spaces, lose focus, restore the empty input box1: Event function triggered by the event that the input field loses focus or the keyboard is up. If the trim in the input field is blank after removing the space, the trim will clear the input field and hide the input field2-3: Resets the contents of the input boxCopy the code

The optional parameters are added

07: Completes the blank resetting function of the input box content, and starts to complete the parameter adding function1: interface document. The parameters to be carried are attr_name in the entry box, attr_sel TAB panel, attr_VALS property value, and modified3Level ID + Change the id of the row,2: The event function that fires when the focus is lost, initiates a data request, and carries3Level ID and its own ID, and parameters2The name of the new attribute is still the same panel type and the value of the attribute, complete the content modification in the TAB TAB, modify failure, pop up the failure message, pop up the success of the modification.3: Click tag to complete the data modificationCopy the code

Delete optional parameters

08: After modifying the parameters in the tag, click to delete the tag1: Adds the closeable close icon to the tag element, and the @close event function that is triggered when close is clicked2: In the function, an item of data was deleted from the array according to the I serial number. The saveAttrVals function was implemented to save the data and delete the data. Note that the delete function did not need to call getParamsData to refresh the page data, and the page data could be re-rendered3: page effect, to achieve the click data to achieve the click to delete the tag tag functionCopy the code

Clearing table data

10If the data is not selected, the page cannot render the table data1-2: In the getParamsData function, empty the data in the panel to achieve the page table data situation. In time manyTableMenu and onlyTableData=[], the data clearing function is realized3-4: If the data is not selected in the cascade selector, the data in the table is not renderedCopy the code

Completes the expanded row effect in the static property table

11: Completed the function of not rendering the table if the data in the cascade is not selected, and started to complete the expanded row of the table in the listening table panel1: Directly copy the table-column of his panel directly, because the data and processing function are shared, so it realizes the function of code reuse2: Click the static properties panel, expand the fold, which can display the tag data, and click to delete the function. Code reuseCopy the code

Submit and push code from the local Goods_params branch to the code cloud

12: Completed the table data rendering in the static and static panel, added and deleted parameters, and modified and deleted the tag rendering in the folding, completed the function development of the classification list page, and started to complete the warehouse update1: Local update --> Remote Branch update --> Merge branch, update remote primary branch2The branch and main branch in the remote repository have been updatedCopy the code

Create the goods_list subbranch and push it to the code cloud

13: Completed the development of the classification list page, updated the warehouse, and started to create branches to complete the development of the commodity list page1: Create and switch branches --> Create remote branches with the same name2: More remote branches with the same nameCopy the code

Due to the word limit, the article is divided into two parts

Vue Project 1: E-commerce Background Management Project PC (Part 2)