快速入門 · uni-app跨平臺移動應用開發

# 安裝 ThinkJS 命令 ~~~ $ npm install -g think-cli ~~~ 安裝完成后，系統中會有`thinkjs`命令（可以通過`thinkjs -V`查看 think-cli 的版本號）。 # 卸載舊版本命令 ~~~ $ npm uninstall -g thinkjs ~~~ # 創建項目執行`thinkjs new [project_name]`來創建項目，如： ~~~ $ thinkjs new quickstart $ cd quickstart $ npm install $ npm start ~~~ > 現在的Node的版本>8，創建過程中在詢問時，不啟用Babel轉義，開啟轉義很難調試執行完成后，控制臺下會看到類似下面的日志： ~~~ [2019-04-25 15:21:35.408] [INFO] - Server running at http://127.0.0.1:8360 [2019-04-25 15:21:35.412] [INFO] - ThinkJS version: 3.2.10 [2019-04-25 15:21:35.413] [INFO] - Enviroment: development [2019-04-25 15:21:35.413] [INFO] - Workers: 8 ~~~ 打開瀏覽器訪問`http://127.0.0.1:8360/`，如果是在遠程機器上創建的項目，需要把 IP 換成對應的地址。 # 數據訪問的例子 ## 修改配置文件修改`/src/config/adapter.js`，設置數據庫連接 ```js /** * model adapter config * @type {Object} */ exports.model = { type: 'mysql', common: { logConnect: isDev, logSql: isDev, logger: msg => think.logger.info(msg) }, mysql: { handle: mysql, database: 'quickstart', prefix: 'think_', encoding: 'utf8', host: '127.0.0.1', port: '3306', user: 'quickstart', password: 'quickstart', dateStrings: true } }; ``` ## 創建數據庫使用工具創建數據庫quickstart，增加一個用戶quickstart，設置密碼為quickstart,創建一張表think_school ```sql use quickstart; DROP TABLE IF EXISTS `think_school`; CREATE TABLE `think_school` ( `id` int(11) AUTO_INCREMENT PRIMARY KEY NOT NULL, `school_code` varchar(10) NOT NULL COMMENT '學校代碼', `title` varchar(50) NOT NULL COMMENT '公司名稱', `cover_image_id` int(11) DEFAULT 0 COMMENT '學校的LOGO', `city` varchar(50) DEFAULT NULL COMMENT '所在城市', `type` varchar(50) DEFAULT NULL COMMENT '學校類型', `tags` varchar(500) DEFAULT NULL COMMENT 'tags', `address` varchar(500) DEFAULT NULL COMMENT '學校地址', `description` TEXT DEFAULT NULL COMMENT 'description' ) ENGINE = MyISAM DEFAULT CHARSET = utf8 COMMENT ='高校基礎信息'; ``` ## 修改控制器增加一個addAction ```js //增加數據，使用POST請求 //http://127.0.0.1:8360/index/add async addAction() { if (this.isPost) { // { // "school_code": "12046", // "title": "廣州番禺職業技術學院" // } const data = this.post(); think.logger.debug(data); let ret = await this.model('school').where({ 'school_code': '12046' }).thenAdd(data); think.logger.debug(ret); } } ``` 使用調試工具發起POST請求，向數據庫增加一條記錄請求鏈接：http://localhost:8360/index/add 方法：POST 請求數據： ``` { "school_code": "12046", "title": "廣州番禺職業技術學院" } ``` ![](../images/screenshot_1557108001759.png) ## 檢索記錄修改/src/controller/index.js，增加helloAction ```js //模版文件index_hello.html //http://127.0.0.1:8360/index/hello async helloAction() { //分頁查找 let schoolList = await this.model('school').page(1,10).countSelect(); think.logger.debug(schoolList); //假設數據庫中存在一條記錄 let school = await this.model('school').find({ 'school_code': '12046' }) //將變量傳遞個模版文件 this.assign('school', school) return this.display(); } ``` 增加模版文件，將變量顯示出來 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ThinkJS Application</title> </style> </head> <body> <h1>{{school.title}}</h1> <h1>ThinkJS Application</h1> </body> </html> ``` 控制臺輸出日志信息 ``` [2019-05-06T10:17:44.838] [9628] [INFO] - Server running at http://127.0.0.1:8360 [2019-05-06T10:17:44.847] [9628] [INFO] - ThinkJS version: 3.2.10 [2019-05-06T10:17:44.848] [9628] [INFO] - Environment: development [2019-05-06T10:17:44.848] [9628] [INFO] - Workers: 1 logic deprecated logic's __after method is deprecated, it will be discarded in the next version node_modules\koa-compose\index.js:42:32 [2019-05-06T10:17:48.971] [10612] [INFO] - mysql://quickstart:quickstart@127.0.0.1:3306/quickstart [2019-05-06T10:17:49.002] [10612] [INFO] - SQL: SELECT COUNT(think_school.id) AS think_count FROM `think_school` LIMIT 1, Time: 30ms [2019-05-06T10:17:49.010] [10612] [INFO] - SQL: SELECT * FROM `think_school` LIMIT 0,10, Time: 5ms [2019-05-06T10:17:49.011] [10612] [DEBUG] - { count: 2, totalPages: 1, pageSize: 10, currentPage: 1, data: [ { id: 1, school_code: '12046', title: '廣州番禺職業技術學院', cover_image_id: 0, city: '廣州', type: null, tags: null, address: null, description: null }, { id: 2, school_code: '12047', title: '廣州番禺職業技術學院1', cover_image_id: 0, city: null, type: null, tags: null, address: null, description: null } ] } [2019-05-06T10:17:49.014] [10612] [INFO] - SQL: SELECT * FROM `think_school` LIMIT 1, Time: 1ms [2019-05-06T10:17:49.037] [10612] [INFO] - GET /index/hello 200 188ms ``` ## 完整的控制器文件 ```js const Base = require('./base.js'); module.exports = class extends Base { indexAction() { return this.display(); } //模版文件index_hello.html //http://127.0.0.1:8360/index/hello async helloAction() { let schoolList = await this.model('school').page(1,10).countSelect(); think.logger.debug(schoolList); //假設數據庫中存在一條記錄 let school = await this.model('school').find({ 'school_code': '12046' }) //將變量傳遞個模版文件 this.assign('school', school) return this.display(); } //增加數據，使用POST請求 //http://127.0.0.1:8360/index/add async addAction() { if (this.isPost) { // { // "school_code": "12046", // "title": "廣州番禺職業技術學院" // } const data = this.post(); think.logger.debug(data); let ret = await this.model('school').where({ 'school_code': '12046' }).thenAdd(data); think.logger.debug(ret); } } }; ```