ThinkJS is a use Node.js MVC framework ES6 / 7 characteristics of a newly developed, which combines the design concepts and ideas of many frameworks, Node.js development projects make use of a more simple and efficient. Node.js is a server side JavaScript can run open source, cross-platform JavaScript runtime environment. Node.js uses V8 to run code developed by Google, event-driven, non-blocking and asynchronous input-output models and other techniques to improve performance.
First, set up the environment
1. Download Source
Open Git Bash, cloning project
git clone https://github.com/livisky/liblog.git
2. Installation Project Dependencies
Ensure that the local has been installed Node.js, Node.js version greater than 4.0-extracting installation package
Node.js Download: http://nodejs.cn/download/
In the project root directory, open the CMD window execute:
npm install #安装依赖
3. Project Configuration
3.1 Import Database
Create a database my_blog, the implementation of the project presentation data liblog.sql
3.2 modify the configuration file
Open src / common / config / db.js, we need to modify the contents: ip address, port, database name, account number and password.
export default {
type: 'mysql',
log_sql: true,
log_connect: true,
adapter:
{
mysql:
{
host: '127.0.0.1', #数据库ip地址
port: '3306', #端口
database: 'my_blog', #数据库名
user: 'root', #账号
password: 'root', #密码
prefix: 'li_',
encoding: 'utf8'
},
mongo: { }
}
};
4. Local Launch
In the project root directory, open the CMD window, execute the command:
npm run dev //运行开发环境代码(未压缩)
npm run app //运行生产环境代码(压缩)
npm run compile
npm run compress //生成生产环境目录
Start to see the log, front-access address is: http://127.0.0.1:8361/
Front landing: [email protected] 123456
Results as shown:
Backend access address: http://127.0.0.1:8361/admin
Manage: admin 123456
Results as shown:
Second, read the source code
1.个人经验总结
工作经验的积累,越多更多的项目源码后,我总结了一套快速掌握源码的方法。
-
让项目运行起来。
-
选择一个小功能,掌握数据是如何流转的。
-
大胆假设和猜想。
-
越多官网文档,资料验证自己的假设。
2.举例说明
我想知道项目中 “大家推荐”这块功能是怎么实现的?
2.1选择前端元素
获取“大家推荐”前端元素的样式:class="most-comment-posts"
2.2代码中查找元素所在位置
找到两个文件 index_index.html,index.css,很明显页面是i ndex_index.html
阅读源码内容可知,“大家推荐 ” 这个板块的数据是 torecomList 数据遍历显示的,所以继续寻找 torecomList 数据是从何而来?
2.3查找 torecomList 的来源
获取数据一般是要和后台交互的,大部分情况返回 torecomList 数据是在 js文件的,所有定位到 tags.js
阅读上面的这段代码,你可能看懂了一些内容,但是还不太清楚。
解释说明:
1.{% article 就类似于,猜想是个自定义标签 。 data,limit, flag是它的属性。
{% article data = "picrecomList",limit= "6",flag="topicrecom"%}
看控制台数据日志可知,limit:查询数据的条数,topicrecom:数据库列名称。
2.global.article = function() 是查询 mysql数据的方法
let article = await think.model('article', think.config("db")).where(where).limit(limit).order(type).select(); #查询数据 context.ctx[data] = article;
这段代码可知,将查询文章的数据几个赋值给data属性,所以 data 属性就是返回的数据集合。
三、最后
个人博客搭建的方式有很多种,本篇提供给你通过 Node.js 项目搭建博客的方式。Node.js 我也不懂,都是“拿来主义”,因为我觉得,学习一个人的优点,能100%的模仿是最快成长的方式。所有文章前半段基本是官方文档,后半段写了我学习别人源码的方式,讲的的有不对的地方大家指正!
附录:
-
liblog简介 :https://www.w3cschool.cn/liblog/liblog-rcw32288.html
-
ThinkJS官方文档:https://thinkjs.org/zh-cn/doc/2.2/model_crud.html
-
Node.js 官方文档:http://nodejs.cn/api/
文章推荐
1. Github + hexo matery 主题搭建免费博客
3. 手把手博客搭建
4. Jekyll + Github Pages 搭建个人免费博客
关注我,"不安分的猿人",一个正在搬砖的码农!