Background introduction and environment construction


crudapi Add, delete, change and check the background of the interface system Java API Services are all available , Need a set of back office management UI, The main users are developers or staff who have a certain understanding of computers , adopt UI Configure metadata and process business data , After investigation, we finally decided to pass Vue Realization SPA Single page Web application , Open the browser and it's easy to use .

Technology selection


At present, the three main front-end frameworks are Angular、React、Vue. among Angular Suitable for large projects ,React Of JSX I don't think grammar is very good . Because this project is not very complicated , And avoid introducing Typescript, Focus on generic native Javascript( Avoid blind pursuit of new technology , Master the original Javascript Is king , It's like C++ Never out of date ), So I finally chose Vue, And adopt native js Development .


Choose good Vue after , You need to choose one more UI library , The domestic mainstream is Element UI,iView,Ant Design etc. , What is more popular abroad is Quasar, The introduction of the official website is as follows :One source code for all platforms simultaneously through Quasar CLI with all the latest and greatest best practices out of the box. Focus only on your app’s features and forget about the boilerplate around it.

After comparison , Finally, I chose Quasar, There are three main reasons :

  1. Controls are very rich , Google material design style , Basically, it can satisfy most scenes .
  2. Scaffolding is powerful , and SPA,PWA,Cordova,Electron,*** And so on , It doesn't take much effort to build the environment , One click debugging package .
  3. Not KPI product , The documentation is complete , The author maintains , So far, ,github Of Star The number of 17.8K


Environment building

install nodejs

Official website Download and install , requirement nodejs Version greater than or equal to 10, But the suggestion is not to be greater than 14,
Certified version 12 Yes. .

node -v

install @quasar/cli

Scaffolding needs to be installed globally , If you are downloading the created project directly , Can not be installed , But for the convenience of subsequent development , It is recommended to install .

npm install -g @quasar/cli

Create project

Through the command quasar create establish , The name is crudapi-admin-web

quasar create crudapi-admin-web

The parameter selection is as follows :
 establish Quasar

Run the project

cd crudapi-admin-webnpm installquasar dev

Can be in package.json Add inside scripts Script

"scripts": {"dev": "quasar dev","build": "quasar build"}

And then you can also order npm run dev Debugging operation

npm run dev


After success , The default http://localhost:8080, The renderings are as follows : On the left is the menu bar , On the right is the main part

Quasar Default page

Open source

What's open now is the front-end code crudapi-admin-web, Courses are all free , Target users are mainly for front-end developers , Of course, any right crudapi Interested friends are welcome to exchange and study together .

Code warehouse

github Address

gitee Address

Because of the Internet ,github Maybe it's slow , Instead, visit gitee that will do , Code synchronization update .

Git Common commands

Set up users and email

git config "crudapi"git config ""

establish git Warehouse

mkdir crudapi-admin-webcd crudapi-admin-webgit inittouch README.mdgit add README.mdgit commit -m "first commit"git remote add origin push -u origin master

Push existing warehouse

cd existing_git_repogit remote add origin push -u origin master


This paper mainly introduces the project background and technology selection , adopt Quasar Scaffolding creates project engineering , And the local operation is successful . Next, we will explain the implementation of the code in detail according to the actual function , And gradually push Code . You don't submit the code all at once , There are two main considerations :
One 、 Although the development work is completed , But the code needs to be sorted out .
Two 、 There is a gradual learning process .

attach demo demonstration

crudapi Background management page , Frame adoption Vue, The control library is Quasar, In the form of SPA Single page application .
Main knowledge points :Vue Basic knowledge , Custom components ,axios Network request ,Vuex State management ,Router route , The local store LocalStorage、Session、Cookie, Sign in , Local debugging ,docker Packing, etc .
The main function : Metadata management , Serial number management , Table relation settings , Business data crud Add, delete, change, check, etc .

Forms correspond to different objects

Table diagrams show the relationships between different objects

Business data operation