個人のブログサイトを構築ThinkJS

免責事項:この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。
このリンク: https://blog.csdn.net/huaairen/article/details/102771353

 

ThinkJSは、多くのフレームワークの設計コンセプトやアイデアを組み合わせて新たに開発されたの使用Node.jsのMVCフレームワークES6 / 7の特性であり、Node.jsの開発プロジェクトは、より簡単かつ効率的に利用します。Node.jsのにはJavaScriptを有効にし、オープンソース、クロスプラットフォームのJavaScriptランタイム環境を実行することができ、サーバー側です。Node.jsのは、パフォーマンスを向上させるためにGoogleが開発したコード、イベント駆動型、非ブロックと非同期入出力モデルや他の技術を実行するために、V8を使用しています。

 

まず、環境を設定

1.ダウンロード元

オープンGitのバッシュ、クローニングプロジェクト

git clone https://github.com/livisky/liblog.git

2.インストールプロジェクトの依存関係

4.0解凍型のインストールパッケージを上回るローカルがインストールされていることを確認のNode.js、Node.jsのバージョン

Node.jsのダウンロード:http://nodejs.cn/download/

 

プロジェクトのルートディレクトリには、実行CMDウィンドウを開きます。

npm install #安装依赖

3.プロジェクトの構成

3.1データベースのインポート

データベースmy_blog、プロジェクトのプレゼンテーションデータの実装を作成しますliblog.sql

3.2設定ファイルを変更します

オープンはsrc /共通/設定/ db.jsは、私たちは内容を変更する必要があります:IPアドレス、ポート、データベース名、口座番号とパスワードを。

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.ローカルからの起動

プロジェクトのルートディレクトリでは、コマンドを実行し、CMDウィンドウを開きます。

npm run dev //运行开发环境代码(未压缩) 
npm run app //运行生产环境代码(压缩) 
npm run compile 
npm run compress //生成生产环境目录

 

ログを見て起動し、フロントアクセスアドレスは次のとおりです。http://127.0.0.1:8361/

フロント着陸:[email protected] 123456

示すように、結果:

バックエンドのアクセスアドレス:http://127.0.0.1:8361/admin

管理:管理者123456

示すように、結果:

 

第二に、ソースコードを読みます

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%的模仿是最快成长的方式。所有文章前半段基本是官方文档,后半段写了我学习别人源码的方式,讲的的有不对的地方大家指正!

 

附录:

  1. liblog简介 :https://www.w3cschool.cn/liblog/liblog-rcw32288.html

  2. ThinkJS官方文档:https://thinkjs.org/zh-cn/doc/2.2/model_crud.html

  3. Node.js 官方文档:http://nodejs.cn/api/

 

文章推荐

1. Github + hexo matery 主题搭建免费博客

2. 5分钟搭建私人Java博客系统

3. 手把手博客搭建

4. Jekyll + Github Pages 搭建个人免费博客

关注我,"不安分的猿人",一个正在搬砖的码农!

おすすめ

転載: blog.csdn.net/huaairen/article/details/102771353