Link source code: https://git.softway.vn/cuongndvn/adayroi_frontend

Các bạn phải có tài khoản và phải có trong tearm của dự án này nhé, nếu chưa có vui lòng tạo tài khoản, sau đó liên hệ với lead để được thêm vào dự án nhé

website https://adayroi.online/ được xây dựng bằng node js sử dụng https://handlebarsjs.com/ làm template và sử node express để xây dựng route

Cấu trúc website đã được xây dựng theo mô hình mvc sử dụng api của https://api.adayroi.online/  cơ chế tạo một view cho ứng dụng rất dễ dàng

Ngoài ra ở chúng ta sử dụng vujs để có thể làm giao diện tương tác với khách hàng, có một số cái đang sử dụng angular

dưới đây là một cấu trúc của hệ thống

Dưới đây là mô tả 

1: là thành phần scop chứa toàn bộ các chức năng của một website thương mại điện tử

2: chứa các control điều khiển vào chuyển hướng website cũng như validate các quyền truy cập dựa trên định nghĩa các route

3. chưa các hàm mà chúng ta có thể khai thác dùng chung

4. models chứa các object mà có khả năng chúng ta sẽ phải làm việc nếu chúng ta muốn gọi api

5. view đây là thành phần quan trọng để hiện website theo từng view, thường thì chúng ta sẽ làm việc với hệ thống view này nhiều nhất

6. là các khối mà chúng ta muốn nó xuất hiện ở nhiều trang khác nhau

7. thư viện chứa các thông tin lõi của hệ thống

Đầu tiên bạn cần phải cấu hình hệ thống api

Mở file templates/default/desktop/index.hbs

Bạn tìm các dòng sau và cấu hình theo hướng dẫn được comment ở kia nhé

Tại thư mục

apps/ecommerce/api_doc

Tạo một file có tên là cars.xml

Nội dung file

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

Như vậy bây giờ bạn có thể truy cập website của mình theo đường dần root/page/cars/list   (Chú ý root là đường dẫn gốc website cảu bạn nhé)
Khi bạn truy cập thì website vẫn còn lỗi nhé bạn phải làm các bước tiếp theo mới có thể truy cập vào mà không lỗi

Tại thư mục

apps/ecommerce/api_doc

Tạo một file có tên là carcategories.xml

Nội dung file

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

Như vậy bây giờ bạn có thể truy cập website của mình theo đường dần root/page/carcategories/list   (Chú ý root là đường dẫn gốc website cảu bạn nhé)
Khi bạn truy cập thì website vẫn còn lỗi nhé bạn phải làm các bước tiếp theo mới có thể truy cập vào mà không lỗi

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

Tất cả các page bắt đầu là 

/page/cars

Tạo file có tên là cars

Nội dung file

const factory = require(`${path_root}/lib/Factory.js`);

const viewfrontend=require(`${path_root}/lib/mvc/views/view`);
class cars extends viewfrontend{

    static async display(view, layout, req, res, next) {
        switch (layout) {
            case "list":
                return {
                    title: 'Cars',
                };
            default:
                return {
                    title: 'Cars',
                };
        }

    };
}
module.exports = cars;

Cơ bản là cars chỉ có một list cars, nếu bạn muốn có thêm các phần khác thì thêm vào cho swich case nhé

Tại thư mục

apps/ecommerce/views/cars/tmpl/desktop (Nhớ tạo các folder nếu chưa có nhé)

tạo file list.bhs

Nội dung file

<div class="view-cars-list">

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Year</th>
                <th>note</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(car,index_car) in cars">
                <td>\car.name</td>
                <td>\car.year</td>
                <td>\car.note</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    jQuery(document).ready(function ($) {

        let view_cars_list = new Vue({
            el: '.view-cars-list',
            props: {},
            components: {
                'modal': {
                    template: `
              <div class="modal-content">
                <div class="modal-header">
                    <slot name="title"></slot>
                </div>
                <div class="modal-body">
                <slot name="body"></slot>
                </div>
                <div class="modal-footer">
                    <slot name="item1"></slot>
                    <slot name="item2"></slot>
                    <slot name="Close"></slot>
                </div>
              </div>
        `
                },
            },
            beforeMount() {

            },
            mounted() {
                this.init();

            },
            data: {
                cars:[
                    {
                        name:"honda",
                        year:2018,
                        note:"xe honda",
                    }
                ]
            },
            computed: {},
            methods: {
                init: function () {
                    //this.GetApiCars();
                },
                temp_func: function () {

                },
                GetApiCars:function (){
                    let CurrentThis=this;
                    $.ajax({
                        type: "GET",
                        url: `${root_url_api}/cars`,
                        data: {

                        },
                        success: function (response) {
                            var response = $.parseJSON(response);
                            if (response.result === "success") {
                                CurrentThis.cars=response.data;
                            } else {

                                //somthing to do
                            }

                        },
                        error: function (request, status, error) {

                        }
                    });
                }

            }


        });
    });


</script>

Ở đây các bạn thấy có sử dụng vujs, hệ thống đã  tích hợp vujs lên rồi, các bạn chỉ việc sử dụng thôi. nếu ai chưa tìm hiểu vujs thì lên google tìm kiếm nhé

Ở trong code có phần ajax, các bạn sẽ cần phải định nghĩa các api, hãy xem kỹ phần xây dựng api phía server nhé