Introduction: Recently I have been doing some small small program projects, small projects although small, but the front and back end and management system are still needed. Under the extremely low budget of Party A, the labor seemed extremely tight, so I probably found out a set of development methods that could use as little code as possible, reduce the workload of a single person as far as possible, and also realize the actual needs. 

Default: You are familiar with Vue and applet development, have NPM installed, and know the basic console instructions. Suggestions: It's a good idea to take a look at the documentation for both WEPY and BMOB and get their demos running.

The content of the small project is basically to maintain the order table, order status, user table and so on, the small program also has to solve WeChat login, WeChat payment and so on WeChat API. If Express+ MySQL is used as the front end, there will be too many things for one person to maintain, which is not conducive to rapid development and later debugging of bugs. Because everything is written by yourself, code dispersion will be very bad to locate the problem, who do not want to change a little bit of things from the database to SQL command to interface to front-end, change a line of code, more than a bug, so control code is very necessary. Without further ado, let’s look at the specific technology stack options:

Development section Select technology/framework Development of language
Small program WEPY js/pug/css
Background services Bmob back-end cloud –
Background management system Vue-Element-Admin js
Backstage management system server Coding Pages service –

This is basically a front-end that can handle itself, but let’s look at the various frameworks:

WEPY, a framework for componentized development of small programs

Official website address:
https://tencent.github.io/wepy/

Weby claims to be one of the most popular small program frameworks, supporting NPM packages, pug, sass, ts, componentize development, easy to install (of course, you have to install NPM first, no NPM can be first check the NPM installation).

npm install wepy-cli -g

Check out the rest of the steps on the WEPY website until you have a Standard project installed and you are ready to work. Wepy also needs to mention the following points separately:

/ Jade grammatical relation

PUG, formerly known as JADE, is a template language, which was chosen because it allows you to type a lot less letters than HTML, which is certainly good for rapid development. To install Pug, of course: under the file wepy.config.js, locate the compilers property and add a Pug configuration as follows:

Module. exports = {compilers: {// do not move, add pug to this object pug: {}}}

Then NPM install can be used by adding lang=’pug’ to the template tag:

<template lang='pug'> view.topinfo //- background image.back(SRC ='.. /assets/rankTopBack.png', Mode =' AspectFill ') //- content view.side text.small rank text.main 91% view.center image.avatar(SRC ='{{userInfo.avatarurl}}') View. UserName {{userInfo. NICKNAME}} View. Side Text. small Text. main 3 </template>

The code above is a part of HTML written in pug. You can see that pug uses indentation instead of tags, which saves us a lot of keyboard. At compile time, the PUG is translated into HTML, and the rules are simple:

<view class="top" id="223" @tap="showDetail"> <view class="top" id="223" @tap="showDetail"> <view class="top" id=" showDetail"> <text>666</text> </view>

There is no need to write an antitag in pug, the compiler will automatically close it by indentation, the contents in parentheses will be placed inside the tag, and the contents behind the tag will become the text inside the tag, “.” The content after this will be class=, and the content after “#” will be id=. PUG has other rules, but we only use it for HTML because it can be written with a lot less typing and it’s easy to read.

Pit: Wepy is here
wepy build --watchPug mode will terminate watch due to compiler error, so it is best to write pug without –watch. Anyway, PUG part is also very simple, write the structure, soon written, more time is actually in the style, not very affect the overall work progress.

Async/Await keywords

ES6 supports keywords that can be applied to applets through Babel. Both back-end cloud and applet APIs can generate a lot of asynchronous code and it is very difficult to write nice code without Await.

BMob back-end cloud, a fully integrated back-end service platform

Official website address:
https://www.bmob.cn/


Document address:
http://doc.bmob.cn/data/wecha…

I often use a back-end cloud platform, encapsulated WeChat login and other a batch of API, the benefit is automatic table building, SDK directly use, do not need to match the server. In fact, there are many cloud platforms, all of which are based on ParseServer. Other Mob Cloud and LeanCloud are similar. When we use it, the only things we can use in a project are table creation and query. In fact, a lot of cloud platform pit, but we only use the most basic add, delete and change check it, what other monitoring functions, socket, are compared pit, if you must use advanced functions, or suggest that you write their own back end, do not use the back end cloud. However, small projects generally only have the need to store data and check data. General back-end cloud every month has a high amount of free, the focus is on this free, small projects often have no budget, only mild demand, the use of back-end cloud is just right. After Party A has money, want to do big project, throw away free again, buy a cow force server oneself write new background is.

Installation and basic operation

Bmob supports NPM installation:

import Bmob from "hydrogen-js-sdk";

Initialization:

Bmob. Initialize (" Your Application ID", "Your REST API Key");

Data manipulation (see the BMoB documentation) :

// Add a new line const Query = bMoB.Query (' TableName '); Query. Set (" name ", "Bmob") query. Set (" cover ", "the back-end cloud") query. The save (). Then (res = > {the console. The log (res)}). The catch (err = > { Console. log(err)}) // Find all data const Query = bMoB.Query (" TableName "); query.find().then(res => { console.log(res) });
Conditions of the query

If you want to query some data from a table, you can set the condition by manipulating the Query object:

const query = Bmob.Query("tableName");
query.equalTo("title","==", "hello");
query.find().then(res => {
    console.log(res)
});

Set the sort:

Query. Order ("-score");
Pit: Don’t use Array objects. Design a proper table structure to avoid multiple requests

A serious mistake that front-end developers who are just starting to use back-end cloud often make is that they do not design proper table structure, and make the mistake of using a large number of Array objects in back-end cloud. Array objects are very difficult to operate and cannot store a large amount of information. When storing ID, they cannot connect the corresponding object contents in the cloud. Relation and Picker Pointers are difficult to operate, which increases the code complexity without reason, directly leading to poor code quality and difficult to maintain. In fact, just need to design the table structure reasonably, use simple query instructions (conditional selection, sort) can complete the vast majority of data operations. If you feel compelled to use Array or Relation, you might want to consider whether your project is the right size for back-end cloud development.

For example, if we have a user table, if we want to save and view the posts of this user, we will assume that he has published three posts with id ‘002’,’004′,’006′. Let’s first look at the less appropriate method: the user table

id name myarticle
asdf The user name [' 002 ', '004', '006')

The article table

id title content
002 Title 1 content
004 Title 2 content
006 Title 3 content

In this case, the user has stored his article in an Array, so you can query the Array and get the three IDs of the article: ‘002’,’004′, and ‘006’, but not the contents of the article. And at that point, the smart students write a “for” loop, look up each article, look up all the articles, and they’ve got everything. Looks ok, but this operation, waiting for the three network request time, just to check the three articles, the user will feel this part of the relatively long some, not enough speed, but every start request consumes part of resources, take some time, from the perspective of the code, how to write a for loop request individually, have to write additional sorting, There are also unnecessary costs for maintenance. Students at the back end should not make this mistake, but if you have experienced drivers at the back end, you do not need to use the back-end cloud. The correct approach is:

The users table

id name
asdf The user name

The article table

id title content user
002 Title 1 content asdf
004 Title 2 content asdf
006 Title 3 content asdf

Mark the article with the user ID, and then use the query statement in the back-end cloud:

// find all data const query = bmob.query ("article"); Query.equalto ('user','==','asdf') // Sort by Reading Query.order (' readCount ') Query.find (). Then (res => {console.log(res)});

This gets all the articles on one request, and they can be sorted in the correct posture.

Vue-element-admin, the background management system

To be constructed, in fact, this part is almost the same as a small program. If you change it, you can use it directly. If you build it, you can throw it to the coding Pages service, and then you can use it for Party A.