快速入门 · 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); } } }; ```