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
- 【 Test platform 】 Share 3- Formally develop product requirements & Project initialization
- 【 Test platform 】 Share 4- Realize the functions of database binding and product line display
- 【 Test platform 】 Share 5- Realize the addition of product line
- 【 Test platform 】 Share 6- Product line modification and software and hardware deletion functions
- 【 Test platform 】 Share 7- Realize product search and optimization time display
- Python Flask API Implementation method - Test Development 【 Test platform 】 Stage summary ( One )
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 ├── .env.xxx # 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 .
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="product.id" style="width: 80%" disabled></el-input>
</el-form-item>
</el-form>
<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/>
</el-form-item>
</el-form>
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(scope.row.id)"> Discontinue use </el-link>
<el-link icon="el-icon-delete" @click="pHardRemove(scope.row.id)"> Delete </el-link>
</template>
</el-table-column>
</el-table>
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 .
