{"id":15480148,"url":"https://github.com/andycall/thinkjs-react-server-render-example","last_synced_at":"2026-01-07T11:49:44.946Z","repository":{"id":69962072,"uuid":"56088512","full_name":"andycall/thinkjs-react-server-render-example","owner":"andycall","description":"基于thinkjs的react后端渲染方案，集成了react-router","archived":false,"fork":false,"pushed_at":"2016-05-30T13:50:13.000Z","size":657,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-19T04:30:39.485Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andycall.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-12T18:38:30.000Z","updated_at":"2017-09-03T13:36:56.000Z","dependencies_parsed_at":"2023-02-22T04:31:13.815Z","dependency_job_id":null,"html_url":"https://github.com/andycall/thinkjs-react-server-render-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andycall%2Fthinkjs-react-server-render-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andycall%2Fthinkjs-react-server-render-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andycall%2Fthinkjs-react-server-render-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andycall%2Fthinkjs-react-server-render-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andycall","download_url":"https://codeload.github.com/andycall/thinkjs-react-server-render-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246045364,"owners_count":20714763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T04:41:00.059Z","updated_at":"2026-01-07T11:49:44.904Z","avatar_url":"https://github.com/andycall.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# thinkjs-react-server-render-example\n\n基于thinkjs的react后端渲染方案，采用webpack编译, 同时集成了react-router\n\n## 如何安装\n\n```\nnpm install\n```\n\n```\nnpm start\n```\n\n## 如何使用\n\n添加一个叫做admin的模块\n```\nthinkjs module admin\n```\n再添加一个新的控制器\n\n```\nthinkjs controller admin/login\n```\n\n在`www/client` 新建一个`admin`文件夹, 粘贴`www/client/home`文件夹的所有文件\n依照示例,将routes里面的路径依照thinkjs的路由解析填写\n删除多余的模块和页面.\n但是一定要保留client.js和server.js以及root.js\n\n在`pages.js`里为`pages`对象添加如下的配置\n\n```\nadmin: {\n    client: path.join(__dirname, './www/client/admin/client'),\n    server: path.join(__dirname, './www/client/admin/server')\n}\n```\n到`src/admin/controller/base.js`文件下, 现在顶部添加代码\n\n```\nimport path from 'path'\nimport AdminBundle from '../../../share/home.bundle'\n```\n\n再给当前文件的`init`方法下面添加如下的代码\n\n```\ninit (http) {\n    super.init(http);\n\n    this.templateFile = path.join(__dirname, '../../../view/admin/index_index.html');\n    this.reactBody = AdminBundle(http);\n    this.assign('html', this.reactBody);\n  }\n```\n\n修改`view/admin/index_index.html` 删除内部所有的css和html标签, 替换成下面的样子\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset=\"UTF-8\"\u003e\n\u003ctitle\u003eNew ThinkJS Application\u003c/title\u003e\n  \u003clink rel=\"stylesheet\" href=\"/static/admin.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"react-dom\"\u003e\u003c%- html %\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003cscript src=\"/static/admin.bundle.js\"\u003e\u003c/script\u003e\n\u003c/html\u003e\n```\n\n运行`npm start`\n\n## 细节阐释\n\n#### 目录划分\n\n前端的所有资源依然按照模块进行划分, 根目录是 `www/client` , 目录划分结构和thinkjs划分module一致\n如果有一个module为`home`, 那么 `www/client` 目录下就应该 具有 `home` 文件夹.\n\n所有的组件和路由建议都放在同一个文件夹下面,\n\n路由模块建议放在`route`文件夹\n共享的组件放在`components`文件夹\n\n对于每一个分页里的资源都用一个文件夹表示, 例如\n\n+ '/'    : 文件夹名是index,\n+ '/test': 文件夹名是test\n\n每一个页面的文件夹存放改页面的所有资源,包含js,css,image等. 文件夹内的目录划分可以自由发挥\n\n\n#### 模块的入口\n\n在`www/client`下面的每一个模块文件夹内, 都必须有一个浏览器端和服务区端的入口文件\n建议分别命名为 `client.js` 和 `server.js`\n\n在根目录的 `pages.js` 里面添加`client.js`和 `server.js`的路径, 这样就可以让webpack对客户端和服务器端分别进行编译\n\n`pages.js` 编辑 `module.exports` 里面暴露的对象, 按照以下的格式进行编辑\n\n```\nmodule.exports = {\n    模块名: {\n        client: 'client.js文件的路径',\n        server: 'server.js文件的路径'\n    }\n}\n```\n\n#### 编译产出\n\n执行客户端编译的`webpack` 会依照依赖将产出放在`www/static`目录下, 同时所有的css文件会合并成一个整体的css\n执行服务端编译的`webpack` 会剔除所有的依赖, 同时兼容node引入的方式, 并过滤掉代码中引入的css样式, 将产出放在`share`文件夹下面\n\n执行服务端webpack产出的文件将作为`thinkjs`进行后端渲染的入口\n同时react-router也将在thinkjs的路由解析之后运行.\n\n#### 路由解析\n前端路由需和后端的路由相对应, 才能实现完美切换.\n\n一个模块的的所有controller 都必须display同一个视图模板文件.\n\n每个控制器返回视图应该是\n\n```\nthis.display(this.templateFile);\n```\n\ntemplateFile 在每一个module的base.js里定义\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandycall%2Fthinkjs-react-server-render-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandycall%2Fthinkjs-react-server-render-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandycall%2Fthinkjs-react-server-render-example/lists"}