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 .
Element Vue How to use the out of the box framework - Test Development 【 Test platform 】 Stage summary ( Two ) More articles about
- Java Use POI operation EXCEL And test framework construction 、 Some ideas for test development
Whether it's UI Both automatic testing and interface automatic testing need to be data driven , One of the most common ways is to use excel To manage data , So it involves some code pairs EXCEL The operation of , We introduced the use of CSV To deal with it EXCEL, But its function is still ...
- Web Front end framework and mobile application development chapter 7 ： Two
3. practice 3: Lottery turntable matters needing attention : Need to use Zepto.js, The difference in zepto.min.js Realization effect : The turntable rotates to draw html <!DOCTYPE html><html>< ...
- VUE： Progressive type JavaScript frame （ Xiaobai taught himself ）
VUE: Progressive type JavaScript frame One . Official website english https://vuejs.org/ chinese https://cn.vuejs.org/ Two : Progressive type That is, there is a core library , Add plug-ins gradually when necessary ...
- Progressive framework 、 Bottom up incremental development vue
Official website vue.js It's like this : A set of tools for building user interfaces Progressive framework . Unlike other heavyweight frameworks ,Vue Adopt the design of bottom-up incremental development . So what exactly is a progressive framework . What is bottom-up incremental development ? Actually, I think this ...
- Vue.JS Compared to other frameworks
Angular choice Vue Instead of choosing Angular, There are several reasons , Not for everyone, of course : stay API And design Vue.js All ratio Angular Much simpler , So you can quickly grasp all of it ...
- be based on Vue.js Of uni-app Front end frame combination .net core Develop cross platform project
One . origin Recently, we need to develop a set of public welfare APP project , Therefore, in combination with the given requirements, we finally adopt uni-app This cross platform front-end framework and .netcore Build our project quickly , And can do a set of code across multiple platforms . Of course, in the early Technology ...
- stay vue Use in layui In the framework form.render() Invalid solutions
Here's a brief introduction vue Use in layui In the framework form.render() Invalid solutions . Original address : Small time personal technology blog > http://small.aiweimeng.top/index.php ...
- web front end Vue+Django rest framework  frame   Fresh e-commerce project actual combat video tutorial
web front end Vue+Django rest framework frame Fresh e-commerce project actual combat video tutorial web front end Vue+Django rest framework frame Fresh e-commerce project actual combat video tutorial Study ...
- Use cordova + vue Build mix app frame
Copyright notice : This article is an original blog article , follow CC 4.0 BY-SA Copyright agreement , For reprint, please attach the original source link and this statement . Link to this article :https://blog.csdn.net/zxj0904010228/article ...
- Vue.js front end MVVM Frame practice
I'm sure you're right vue.js This front-end framework has a certain understanding . I must also want to Vue Eager to use in the project , See how attractive it is ? Don't worry. , Today I will meet your ideas . Let's see “Webpack+Vue” Compared with the past ...
Random recommendation
- 【C- data type Constant Variable 】
One . Basic data type 1) integer (int %d) 2) Character (char %c) 3) floating-point %f ①. Single precision floating point (float) ②. Double precision floating point (double) 2. Pointer types void ...
- linux command - alias
linux command - alias Specify aliases for your common command statements , Shortcut $ alias /? Usage: alias [/reload] [/d] [name=full command] /relo ...
- javascript Class understanding and use
It's been months since I last blogged , Now the projects in hand are just over , In my spare time, I began to deal with some problems in the development , This time javascript Class in , Maybe many people are used to writing the effect of the front page coder Come on , about javas ...
- Unity in Use c# Threads
Conditions of use There is no such thing as a free lunch , When I use unity At the moment , I feel uncomfortable , Because of open source, I don't know the underlying implementation , If it's just a simple game , Then it doesn't matter , But when you really use the actual place , You'll find a pit next to a pit ...
- AlgorithmsI Programming Assignment 1: Percolation
3 Two versions of the answer , First use virtual top and bottom site, But there are backwash The problem of , There are two ways to solve this problem : 1. Use 2 individual WQUUF, But it will increase memory. One f ...
- Windows7 Lower installation IIS
1. Click Start → Control panel , Then click program , Don't click uninstall program , Otherwise, we can't get to the target system interface . 2. And then under programs and functions , Click on open and close windows function . 3. Get into Windows Function window , And then see internet ...
- ios And android H5 Interactive bridging
ios Interaction demo1( From the Internet ) <!doctype html> <html> <head> <meta charset="UTF-8" ...
- Scrapy Shell Use
Scrapy A terminal is an interactive terminal , We can do it before it starts spider Try and debug code in the case of , It can also be used to test XPath or CSS expression , See how they work , It's easy for us to crawl the data extracted from the web page . If installed IPyth ...
- 【QT】 Binary read image file test
QDataStream in(&file); int n; in >> n ; file.close(); qDebug() << n<<"en& ...
- JAVA Experimental report
School of information science and technology, Shijiazhuang Railway University Experimental report 2018 year ----2019 year The first semester subject : arithmetic . Generate verification code Course name : JAVA Language programming ...
