background

The background Java API services of crUDAPI interface system are all available, and a set of background management UI is needed. The main users are developers or staff with a certain understanding of computers. Metadata is configured and business data is processed through UI. Open the browser can be very easy to use.

Technology selection

Vue

The three main front-end frameworks are Angular, React, and Vue. While Angular is suitable for large projects, React’s JSX syntax is not very good. Because the project wasn’t too complicated, and because it avoided Typescript and focused on generic native Javascript (avoid blindly pursuing new technologies and master native Javascript, just like C++ will never go out of style), I chose Vue and developed with native js.

Quasar

After selecting Vue, you also need to choose a UI library. Domestic mainstream ones include Element UI, iView, Ant Design, etc., while foreign ones are more popularQuasar, 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, Quasar was finally chosen for three main reasons:

  1. Control is very rich, Google Material Design style, basically can meet most of the scene.
  2. The scaffolding is very powerful. It is integrated with SPA, PWA, Cordova, Electron, SSR and so on by default. You don’t need to build the environment.
  3. Non-kpi product, complete documentation, full-time author maintenance, so far, Github Star count is 17.8k

Environment set up

Install nodejs

The nodeJS version must be greater than or equal to 10. It is recommended that the nodeJS version be no larger than 14. Verify that version 12 is acceptable.

Node - v v12.16.1Copy the code

Install @ quasar/cli

The scaffold needs to be installed globally. If you directly download the created project, you can not install it, but for the convenience of subsequent development, it is recommended to install it.

npm install -g @quasar/cli
Copy the code

Create a project

You can run the quasar create command to create a template named crudapi-admin-web

quasar create crudapi-admin-web
Copy the code

Select the following parameters:

Run the project

cd crudapi-admin-web
npm install
quasar dev
Copy the code

You can add scripts to package.json

"scripts": {
    "dev": "quasar dev"."build": "quasar build"
}
Copy the code

You can then debug it with the NPM run dev command

npm run dev
Copy the code

The effect

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

Open source

Currently open is the front-end code crudAPI-admin-Web, the course is all free, the target user is mainly aimed at front-end developers, of course, any interested in CrudAPI friends are welcome to learn together.

Code warehouse

Making address github.com/crudapi/cru…

Gitee.com/crudapi/cru gitee address…

Github may be slow due to network reasons. Instead, access Gitee and the code will be updated synchronously.

Git Common Commands

Set the user and email address

git config user.name "crudapi"
git config user.email "[email protected]"
Copy the code

Creating a Git Repository

mkdir crudapi-admin-web
cd crudapi-admin-web
git init
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin [email protected]:crudapi/crudapi-admin-web.git
git push -u origin master
Copy the code

Push an existing warehouse

cd existing_git_repo
git remote add origin [email protected]:crudapi/crudapi-admin-web.git
git push -u origin master
Copy the code

summary

This paper mainly introduces the project background and technology selection. The project was created by Quasar scaffold, and the local operation was successful. Next, the implementation of the code will be explained in detail according to the actual function, and gradually push the code. I will not commit all the code at once, mainly for two reasons: first, the development work is complete, but the code needs to be cleaned up. Second, there is a gradual learning process.

Attached the demo presentation

Crudapi background management page, the framework is Vue, the control library is Quasar, and the form is SPA single page application. Main knowledge: Vue basic knowledge, custom components, axios network request, Vuex state management, Router routing, LocalStorage, Session, Cookie, login, local debugging, docker packaging, etc. Main functions: metadata management, serial number management, table relationship setting, cruD add, delete, modify and check service data, etc.

Forms correspond to different objects

Table diagrams show the relationships between different objects

Service Data Operation

Website address: crudapi. Cn test address: demo. Crudapi. Cn/crudapi/log…