current position:Home>How to use element Vue out of the box framework - Summary of test development [test platform] (II)

How to use element Vue out of the box framework - Summary of test development [test platform] (II)

2021-08-25 23:15:46 MRZ Daqi

WeChat search 【 Daqi test open 】, Focus on this guy who insists on sharing test and development dry goods .

The previous article summarized the development of back-end service interfaces , In this article, we mainly summarize the front-end part of front-end and back-end separation development , It mainly introduces the out of the box framework, combs the components in the previous chapters and extends some contents , I hope that through the previous simple product management page, I can share several times and summarize these two times , Can from 0-1 Quickly build a platform , It shows that the development of a sufficient test platform is not as difficult as expected .

Previous recommendation

Technical introduction

stay 【 Test platform 】 In the sharing project , The main framework and progression of front-end technology are Vue -> element ui -> vue-admin-template 


Vue.js  Is a set for building user interfaces   Progressive framework   Simple 、 flexible 、 Efficient , Just intermediate javascript、html、css Knowledge can develop the interface , At the same time, there are many third-party libraries in the community , Rapid integrated development , It has to be mentioned here that at the beginning, there was a “ Especially the rain creek ” Developed by open source , I have to say it's the great God .


Element ui  It's a set of bases Vue Development , Are you hungry , For developers 、 Open source component library prepared by designers and product managers , Designed to quickly build pages . In my opinion, it is a set to further reduce the development threshold , Use a beautiful and unified component library out of the box , The latest update is 3.x Of , This project uses 2.x Version of , No big impact , Just remember enough , At present, there are many similar component library frameworks , For example, Ali. antd etc.


vue-admin-template  It's a back-end front-end solution , It's based on  vue  and  element-ui  Realization , It is further redeveloped , A complete back-end platform out of the box , For example, login. 、 menu 、 route 、 Template 、 Layout ... It's all defined , Use development only needs to use development according to the rules , Of course, it is also based on the first two 2.x Version developed .template  Ecology is a basic branch , its admin It is a set of pages formed by a large number of references , It can be used for reference, learning and direct pasting and copying .


The above goes to the last floor , To be honest, it only takes the simplest js Grammatical knowledge , You can start working on the front end , Of course, for test development, a gadget , A small platform or something , What is more responsible for customization is a professional front-end , After all, industry specializing in surgery .


Expand except vue, At present, front-end technology is particularly popular react、angular, Component framework and antd、iview, The whole set of backstage is andpro, In fact, based on the above front end, both individuals and many large domestic Internet companies have many similar open source projects or internal use secondary development projects .


As for which , There are many comparative articles on the Internet that you can search by yourself , I don't want to worry about this here , Or that sentence , Enough 、 fit , Especially for yourself and the project, it's best to start quickly . At present, the use of testing teams from various companies , And personal introduction , It's still recommended vue Series of , The other is the backstage , Out of the box is antd pro The backstage is also quite recommended , Yes react and vue Two versions , The next project sharing may use .


Framework usage review

Code scaffolding   In the previous article on technology selection, the official structure diagram has been given , Here's a post to review , The directories currently used are all in src Underside , Such as /api  Encapsulate the request back-end interface ,/router  Define menu routing ,/views  page - The core part of the , And here it involves element Component usage and javasript Code logic implementation of .

├── build                      #  Build relevant 
├── mock                       #  project mock  Analog data 
├── plop-templates             #  Basic template 
├── public                     #  Static resources 
│   │── favicon.ico            # favicon Icon 
│   └── index.html             # html Templates 
├── src                        #  Source code 
│   ├── api                    #  All requests 
│   ├── assets                 #  The theme   Static resources such as Fonts 
│   ├── components             #  Global common components 
│   ├── directive              #  Global instructions 
│   ├── filters                #  overall situation  filter
│   ├── icons                  #  Project all  svg icons
│   ├── lang                   #  internationalization  language
│   ├── layout                 #  overall situation  layout
│   ├── router                 #  route 
│   ├── store                  #  overall situation  store management 
│   ├── styles                 #  Global style 
│   ├── utils                  #  Global common method 
│   ├── vendor                 #  public vendor
│   ├── views                  # views  All pages 
│   ├── App.vue                #  Entry page 
│   ├── main.js                #  Entrance file   Load components   Initialization etc. 
│   └── permission.js          #  Rights management 
├── tests                      #  test 
├──                   #  Environment variable configuration 
├── .eslintrc.js               # eslint  Configuration item 
├── .babelrc                   # babel-loader  To configure 
├── .travis.yml                #  automation CI To configure 
├── vue.config.js              # vue-cli  To configure 
├── postcss.config.js          # postcss  To configure 
└── package.json               # package.json


Page implementation   Let's review the birth structure of the next new page , It is mainly divided into three areas , These are the component use areas 、javascript Coding area and Css Style area .

The component area uses  <template><div class="app-container"> ... </div></template>  Fix html The reference of the implementation component in the syntax 、 Data binding 、 Attribute definitions 、 Style definition 、 Method setting, etc ; <script>...</script>  It is mainly the reference of the module , Data definition , Method realization , Logic implementation part ;<style>...</style>  Unify the area for page styles , Because of the simple style, this part is directly in the control style Property defines , Not yet involved in .


Menu configuration   After the new page is implemented, the value needs to refer to the template , Jump can be realized by simply configuring the menu route , It's defined in /src/router/index.js , At present, the first level menu is used , Submenus need to be used internally  children Define the next level , Refer to the figure for configuration fields , Mainly the path 、 Jump address 、 The menu items . picture


A simple new page is added after the above steps , function  npm run dev  The following implementation will be presented


Component phase summary

Review the components used , These follow-up will also be used repeatedly , I hope I can master and use , But there's no need to memorize , Just learn how to make official reference and combination processing , For more details, please refer to the official documents , Of course, the subsequent page development will also involve more content .

Form Forms   In components , Each form field consists of a Form-Item Components , Various types of form controls can be placed in the form field , Such as  Input、Button etc. , The default is vertical , Passing attribute inline  You can turn a form field into a form field within a row ( That is, the horizontal arrangement ) Such as the search area in project sharing , among :model  binding JSON{ } Data sets ,label  Define subitem title ,

label-width Set the title width ,v-model Bind specific data ,style Set additional CSS style ,disabled  Control is not editable ,  give an example :

<el-form :model="product">
   <el-form-item v-if="dialogProductStatus==='UPDATE'" label=" Number " label-width="100px">
      <el-input v-model="" style="width: 80%" disabled></el-input>


<el-form :inline="true" :model="search">
   <el-form-item label=" name ">
       <el-input v-model="search.title" placeholder=" Support fuzzy query " style="width: 200px;" clearable/>


Button Button   Basic controls , adopt type Definition type ,plain Definition of style ,@click binding js Event method . give an example :

<el-button type="primary" plain @click="searchProduct()"> Inquire about </el-button>


Other style references

In addition, a kind of   Link Text links    As tabel The operation button used , Properties are very similar to , I won't take it out and paste it here alone .


Input Input box   Basic components   adopt  v-model Data binding , When the content changes, the variable value will be changed dynamically , Otherwise, it defaults to null , Before sharing, in addition to general input Also used.  type="textarea" Multiline text input box ,clearable  Set clear x key , In addition, it can also be defined as password type, etc .

<el-input v-model="search.keyCode" placeholder=" Support fuzzy query " style="width: 200px;" clearable/>



Table form   Used to display multiple data with similar structure , You can sort the data 、 Screening 、 Contrast or other custom actions , Examples used in the course :

<el-table :data="tableData"><!--:data  binding data() The array value of , Will change dynamically according to its changes -->
      <el-table-column prop="id" label=" Number "/>
      <!--:data prop binding {} Medium key,label List header for custom display -->
      <el-table-column prop="title" label=" name "/>
      <el-table-column prop="keyCode" label=" Code name "/>
      <el-table-column prop="desc" label=" describe " show-overflow-tooltip/>
      <el-table-column prop="operator" label=" Operator "/>
      <el-table-column :formatter="formatDate" prop="update" label=" Operating time "/>
      <el-table-column label=" operation ">
        <template slot-scope="scope">
          <el-link icon="el-icon-edit" @click="dialogProductUpdate(scope.row)"> edit </el-link>
          <el-link icon="el-icon-circle-close" @click="pSoftRemove("> Discontinue use </el-link>
          <el-link icon="el-icon-delete" @click="pHardRemove("> Delete </el-link>

  This component is really convenient , Think back to when I wrote html And use a loop or something , Through here :data  binding [{key:value..}] data , stay el-table-column of use prop Attribute to the key name in the object to fill in the data , use label Property to define the column names of the table . You can get the display of data .

table There are many styles and properties , You can refer to element Official or element-admin Of table Comprehensive page , The daily backstage needs are completely enough .


Dialog Dialog box   While retaining the current page state , Inform the user and carry the relevant operations , All the above components can be nested by itself , Equivalent to a mask page , For example, previous product addition and modification operations , This component is used to complete . The basic settings need to be visible attribute , It receives Boolean, When it comes to true Time display  Dialog.


In addition to the above components , The previous also involved such as v-bind、v-if Wait for sugar , Please refer to the sharing tutorial for usage , If used later, it will involve deeper , Maybe I'll study it alone .


At this stage, the front-end part of the content is also summarized , I hope to make peace through several details 2 Secondary summary , Everyone to flask and vue The separated development of has the basic development ability , We will continue to achieve 《 Test platform 》 Other function points of , There will be more space and progress , So if you're following this sharing tutorial , Be sure to practice your previous sharing , It seems simple, but it is really the cornerstone .


Originality is not easy. , After practice, it is more difficult to summarize and share , If you find it useful , Please click recommend , Welcome to my blog Garden and WeChat official account .

copyright notice
author[MRZ Daqi],Please bring the original link to reprint, thank you.

Random recommended