With the development of informatization, intelligence and precision of modern agriculture, i.e. there is a need for the integration of artificial intelligence (AI) with Internet of Things (IoT) systems, which is called AIoT (AI + IoT) systems. In this paper, we design an AIoT system for the smart agriculture based on the concept of front-rear end separation and the framework of MVVM (Model-View-View Model), through which it is possible to handle complex business logic and makes the integrating the AI algorithms much easier. Specifically, the system consists of a remote data service platform, the data collection terminals build on Raspberry Pi and the wireless data transmission using narrow-band Internet of Things (NB-IoT) modules. The data service platform is designed with the separated front-end and rear-end. The front-end is a web page constructed by the Vue.js and Element, while the rear-end business logic processing is constructed using the Python Django framework. The data interaction between the front and rear ends is realized through Axios. In such a way, the data in the front-end and the rear-end are decoupled, which makes it possible to improve the capability in dealing with complex data and makes it easy to carry out add-on development and extend new functions. Based on the data service platform, a series of basic application functions are integrated, including real-time data monitoring, historical data query, data visualization and abnormal data alerting, etc. Moreover, we integrate a deep-learning-based plant disease and pest detection algorithm in the propose system to show its scalability. In addition, the system also combines edge computing technology to improve the overall response efficiency of the system. The system has a convenient expansion interface and can be used as a basic development platform for various agricultural IoT applications, such as the soil environmental monitoring system and the intelligent disease and pest monitoring system, etc.