Background introduction and environment construction

background

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

Vue

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 .

Quasar

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.
Quasar

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

github

Environment building

install nodejs

Official website https://nodejs.org 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
v12.16.1


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


effect

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
https://github.com/crudapi/crudapi-admin-web

gitee Address
https://gitee.com/crudapi/crudapi-admin-web

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 user.name "crudapi"git config user.email "admin@crudapi.cn"


establish git Warehouse

mkdir crudapi-admin-webcd crudapi-admin-webgit inittouch README.mdgit add README.mdgit commit -m "first commit"git remote add origin git@github.com:crudapi/crudapi-admin-web.gitgit push -u origin master


Push existing warehouse

cd existing_git_repogit remote add origin git@github.com:crudapi/crudapi-admin-web.gitgit push -u origin master


Summary

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 .

table
Forms correspond to different objects

table
Table diagrams show the relationships between different objects

customer
Business data operation