Xây dựng giao diện backend của hệ thống quản lý admin.adayroi.online 10 chương · 33 bài

Tài liệu hướng dẫn

Xây dựng giao diện backend của hệ thống quản lý admin.adayroi.online

10 chương · 33 bài

softway.vn Công ty cổ phần thương mại Vạn Tín Việt

Mục lục

Giới thiệu tổng quan về hệ thống
Cấu hình hệ thống
Tạo link cho menu quản lý cars
Tạo các route 2 bài
Tạo bảng 2 bài
Tạo models 2 bài
Tạo các controller 2 bài
Tạo các file js cho list form phía client 5 bài
Tạo các file less 4 bài
Tạo filter và form 4 bài
Tạo các trường filed 1 bài
Tạo các view 2 bài
Tạo các file layout 4 bài
Cài đặt nhanh
Hoàn thành

Giới thiệu tổng quan về hệ thống

https://admin.adayroi.online/ là một hệ thống backend dùng để quản lý rất nhiều các thông tin liên quan đến ứng dụng adayroi trên google play và website https://adayroi.online/

Tương tự như frontend hệ thống cũng được viết bằng nodejs và sử dụng hbs và vujs để viết

link git: https://git.softway.vn/cuongndvn/admin_adayroi bạn nào chưa có tài khoản vui lòng tạo tài khoản và liên hệ với admin để được thêm vào nhóm nhé

Chú ý là khi các bạn pull code về, khi các bạn viết các bạn nhớ tạo brach riêng nhé.

sau đó các bạn chạy lệnh sau yarn install để hệ thống cài các gói package ra nhé

tiếp theo chạy lệnh pm2 start app.js --name admin_adayroi nhé.

Hệ thống được xây dựng dựa trên mô hình mvc và sử dụng microservices

Mục tiêu của ví dụ này, chúng ta sẽ làm các chức năng sau

Quản lý danh mục car chức năng thêm, sửa xóa

quản lý car chức năng thêm, sửa xóa

Việc xây dựng các chức năng khác cũng tương tự như vậy.

Chi tiết các công việc dưới đây

1.Tạo view cho car categories (Quản lý danh mục car)

2.Tạo view quản lý car kết nối tới api quản lý car

Chú là các bước này chỉ mới làm ở phần admin, bạn cần phải dựng api cho quản lý danh mục car và cars nhấn vào đây để xem cách xây dựng các api

Cấu hình hệ thống

Tại thư mục /config

Tạo file settings-local.json

Nội dung file

{
  "AppTitle": "admin.adayroi.online",
  "backend_template": "default",
  "root_url_api": "http://localhost:1114",
  "root_url": "http://localhost:1116",
  "root_url_frontend": "http://localhost:1112",
  "frontend_template": "Cloth",
  "debug": false,
  "debug_language": true,
  "AppDescription": "demo",
  "api_pexels": "563492ad6f91700001000001992be1b03ff4490db9249df0e7567340",
  "cartLogo": "",
  "port": "1116",
  "baseUrl": "http://localhost",
  "emailHost": "smtp-mail.outlook.com",
  "emailPort": 587,
  "emailSecure": false,
  "emailUser": "hi@markmoffat.com",
  "emailPassword": "this_is_the_smtp_password",
  "emailAddress": "hi@markmoffat.com",
  "menuEnabled": true,
  "productsPerRow": 3,
  "productsPerPage": 6,
  "productsPerRowHomePage": 1,
  "menuTitle": "Menu",
  "footerHtml": "&lt;h4 class=&quot;text-center&quot;&gt;Powered by Retreat.club&lt;/h4&gt;",
  "googleAnalytics": "",
  "injectJs": "",
  "customCss": "",
  "currencySymbol": "đ",
  "paymentGateway": "stripe",
  "databaseConnectionString": "mongodb://127.0.0.1:27017/admin_adayroi",
  "theme": "default",
  "trackStock": false,
  "orderHook": "",
  "availableLanguages": [
    "en",
    "it"
  ],
  "defaultLocale": "en",
  "maxQuantity": 25,
  "twitterHandle": "",
  "facebookAppId": "",
  "modules": {
    "enabled": {
      "shipping": "shipping-basic",
      "discount": "discount-voucher"
    },
    "loaded": {
      "shipping": {},
      "discount": {}
    }
  },
  "secretCookie": "f3d5ac396a14e9d18d952ec703ca7fa8f1d4be8f",
  "secretSession": "6a88584536235218bee6ea985081c78c822f6490",
  "themeViews": "../views/themes/Cloth/",
  "env": "development",
  "secret": "s0me-secr3t-goes-here"
}

Tạo link cho menu quản lý cars

Mở file blocks/block_left_sidenav/default.hbs

cauhinhlink

Sau khi bạn thêm xong menu quản lý cars sẽ xuất hiện như hình dưới đây

xemlink

Bây giờ bạn nhấn vô đây thì sẽ mở được trang, nhưng sẽ bị lỗi do chúng ta chưa xây dựng view cho nó, bạn cần hoàn thành các bước tiếp theo nữa nhé

Tạo các route

Tạo một route cars

Hệ thống backend cars dùng để quản lý, thêm sửa xóa, khi sử dụng trên web

tại thư mục apps/ecommerce/api_doc

tạo file cars.xml

Nội dung file

<?xml version="1.0" encoding="utf-8"?>
<list_api>
    <scope type="get"  >
        <content summary="get list car" description="get list car" type="list">

        </content>
    </scope>
    <scope type="get" route="/form/{id}"  >
        <content summary="get car by id" description="get car by id" type="form">
        </content>
    </scope>
    <scope type="get" route="/form"  >
        <content summary="create new car" description="create new car" type="form">
        </content>
    </scope>

    <scope type="get" route="/{id}"  >
        <content summary="get car by id" description="get car by id" type="item">
        </content>
    </scope>
    <scope type="put"  route="/{id}">
        <content summary="update car"  description="update car">
        </content>
    </scope>

</list_api>

Tại đây bạn sẽ thấy có rất nhiều các route liên quan đến car, nhưng thêm sửa, xóa

Bây giờ bạn có thể truy cập vào website theo đường dẫn root/cars (Luôn nhớ là root là website gốc của bạn nhé)
Hiện tại website vân chưa chạy được để chạy được bạn cần phải làm các bước tiếp theo nhé

Tạo các route

Tạo route cho carcategories

Tạo thư mục

apps/ecommerce/api_doc

Tạo file carcategories.xml

Nội dung file

<?xml version="1.0" encoding="utf-8"?>
<list_api>
    <scope type="get"  >
        <content summary="get list carcategory" description="get list carcategory" type="list">

        </content>
    </scope>
    <scope type="get" route="/form/{id}"  >
        <content summary="get carcategory by id" description="get carcategory by id" type="form">
        </content>
    </scope>
    <scope type="get" route="/form"  >
        <content summary="create new carcategory" description="create new carcategory" type="form">
        </content>
    </scope>

    <scope type="get" route="/{id}"  >
        <content summary="get carcategory by id" description="get carcategory by id" type="item">
        </content>
    </scope>
    <scope type="put"  route="/{id}">
        <content summary="update carcategory"  description="update carcategory">
        </content>
    </scope>

</list_api>

Tạo bảng

Tạo table cars

Tại thư mục apps/ecommerce/tables

Tạo file cars.js

Nội dung file

var table = require(`${path_root}/lib/mvc/tables/Table`);
class cars  extends table{
    constructor(req, res, next){
        super(req, res, next);
        this._id="";
        this.name="";
        this.year=0;
        this.image="";
        this.category_id="";
        this.status="";
        this.is_feature=0;
        this.note="";
        this.start_date=new Date();
        this.end_date=new Date();
    }
}
module.exports = cars;

Tạo bảng

Tạo bảng carcategories

Tại thư mục apps/ecommerce/tables

Tạo file carcategories.js

Nội dung file

var table = require(`${path_root}/lib/mvc/tables/Table`);
class carcategories  extends table{
    constructor(req, res, next){
        super(req, res, next);
        this._id="";
        this.name="";
        this.year=0;
        this.image="";
        this.category_id="";
        this.status="";
        this.is_feature=0;
        this.note="";
        this.start_date=new Date();
        this.end_date=new Date();
    }
}
module.exports = carcategories;

Tạo models

Tạo model cars

apps/ecommerce/models/cars.js

var modelbackendlist = require(`${path_root}/lib/mvc/models/modelbackendlist`);
const model = require(`${path_root}/lib/mvc/models/model.js`);
class cars extends modelbackendlist {
    constructor() {
        super();

    }
    tableName() {
        return "cars";
    }
    async getList(req, res, next){
        let list_car= await super.getList(req, res, next);
        let imageModel=model.getInstance('image',req, res, next);
        for await (const car of list_car) {
            car.default_photo=await imageModel.getImageByParentId(req, res, next,car._id,'car');
            if(car.default_photo!==null && typeof car.default_photo !=="undefined")
                car.image=car.default_photo.img_path;
        }
        return  list_car
    }

}

module.exports = cars;

Tạo models

Tạo model car

Tại thư mục apps/ecommerce/models
tạo file car.js
Nội dung file

var modelbackenditem = require(`${path_root}/lib/mvc/models/modelbackenditem`);
const callApi = require(`${path_root}/lib/CallApi`);
class car extends modelbackenditem {
    getSelectField(){
        return {

        };
    }
    tableName() {
        return "cars";
    }
    formXmlName() {
        return "car";
    }




    async getItem(req, res, next,id) {
        let response=await callApi.ApiCallFunctionInModel(req,req.app_name,"car.getItem","post",{
            id:id
        });
        return  response.data;
    }


    async save(data) {
        let car=await super.save(data);
        let image_intro=await this.save_image_to_table_field_in_s3(car.data,"image_intro","car-image");
        car.data.image = image_intro;
        return  car;
    }


}
module.exports = car;

Tạo các controller

Tạo controller carcategory.js

Tạo thư mục apps/ecommerce/controllers

tạo file carcategory.js

Nội dung file

var controllerbackenditem = require('../../../lib/mvc/controllers/controllerbackenditem');
var model = require('../../../lib/mvc/models/model');
const factory = require(`${path_root}/lib/Factory.js`);
class carcategory extends controllerbackenditem {
    getListViewName(){
        return "carcategories";
    }
    getFormViewName(){
        return "carcategories";
    }
    async apply(data) {

        const input=factory.getInput(this.req);
        let a_return=input.getString('return',"");
        let model=this.getModel();
        if( typeof  data==="undefined"){
            data=input.getData();
        }
        let form_name=this.getFormViewName();
        let form_layout=this.getFormLayoutName();
        let carcategory=await model.save(data);

        let id=carcategory.data._id;
        if(a_return!=="")
        {
            this.res.redirect(`/${form_name}/${form_layout}/${id}?return=${a_return}`);
        }else{
            this.res.redirect(`/${form_name}/${form_layout}/${id}`);
        }

    }

}
module.exports = carcategory;

Tạo các controller

Tạo controller car.js

Tại thư mục apps/ecommerce/controllers

Tạo file car.js

Nội dung file

var controllerbackenditem = require('../../../lib/mvc/controllers/controllerbackenditem');
var model = require('../../../lib/mvc/models/model');
const factory = require(`${path_root}/lib/Factory.js`);
class car extends controllerbackenditem {
    getListViewName(){
        return "cars";
    }
    getFormViewName(){
        return "cars";
    }
    async apply(data) {

        const input=factory.getInput(this.req);
        let a_return=input.getString('return',"");
        let model=this.getModel();
        if( typeof  data==="undefined"){
            data=input.getData();
        }
        let form_name=this.getFormViewName();
        let form_layout=this.getFormLayoutName();
        let car=await model.save(data);
        let id=car.data._id;
        if(a_return!=="")
        {
            this.res.redirect(`/${form_name}/${form_layout}/${id}?return=${a_return}`);
        }else{
            this.res.redirect(`/${form_name}/${form_layout}/${id}`);
        }

    }

}
module.exports = car;