{"id":15138707,"url":"https://github.com/xlong1029/xlong-website-cms","last_synced_at":"2025-10-23T15:31:39.297Z","repository":{"id":126671336,"uuid":"178309240","full_name":"xLong1029/xlong-website-cms","owner":"xLong1029","description":"基于Egg + Vue + Webpack 开发的多页面和单页面服务端客户端渲染的企业CMS系统","archived":false,"fork":false,"pushed_at":"2023-10-08T04:03:13.000Z","size":59315,"stargazers_count":65,"open_issues_count":1,"forks_count":37,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-01-30T19:11:35.963Z","etag":null,"topics":["cms","egg","html5","iview2","nunjucks","responsive-mode","sqlite3","vue","webpack"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xLong1029.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-03-29T01:26:51.000Z","updated_at":"2024-12-06T15:20:02.000Z","dependencies_parsed_at":"2024-09-16T12:49:48.057Z","dependency_job_id":null,"html_url":"https://github.com/xLong1029/xlong-website-cms","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/xLong1029%2Fxlong-website-cms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xLong1029%2Fxlong-website-cms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xLong1029%2Fxlong-website-cms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xLong1029%2Fxlong-website-cms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xLong1029","download_url":"https://codeload.github.com/xLong1029/xlong-website-cms/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237852273,"owners_count":19376645,"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":["cms","egg","html5","iview2","nunjucks","responsive-mode","sqlite3","vue","webpack"],"created_at":"2024-09-26T07:43:48.596Z","updated_at":"2025-10-23T15:31:29.493Z","avatar_url":"https://github.com/xLong1029.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# xlong-website-cms\n\n## 重要通知！！！ \n我的账号在Github开启2FA设置后，因某种原因丢失恢复码导致账号无法登录，日后该账号下的所有项目在github不再更新，若想查看持续更新的项目请移步到 [我的码云仓库](https://gitee.com/xlong1029)\n\n## 介绍\n\nxlong-website-cms 是一套基于Egg + Vue + Webpack 开发的多页面和单页面服务端客户端渲染的企业CMS系统，可用于企业网站，微信微网站的实现。前台页面可响应式匹配各种移动设备。\n\n## 项目迭代\n\n1. V1.0版本\n\n    使用Jq编写侧边栏组件\n\n2. V2.0版本\n\n    移除jQuery插件，侧边栏组件改用原生JS方法重写，通过路由“siderbarName”来匹配高亮状态；  \n    添加404页面和“可编辑表格”组件；  \n    优化项目结构  \n\n3. V3.0版本  \n   项目 websiteCmsAdmin 改用 vue-cli 4.x 重构;  \n   UI框架iView至4.x版本(即ViewUI);  \n   优化侧边栏、可编辑表格组件和权限配置;  \n   修复一堆功能BUG（详情查看V3.0分支readme）;  \n   优化项目结构  \n\n## 项目说明\n\n#### 1. 前后端分离开发模式\n- **前端**\n    - **企业网站**：Egg + Nunjucks, 服务端渲染，多页面响应式应用开发\n    - **管理后台**：Vue + Webpack+ iView, 客户端渲染，单页应用开发\n- **后端**：Egg + SQLite\n\n#### 2. 项目用到技术、框架与插件\n[Node.js](https://github.com/nodejs)  \n[Egg.js](https://github.com/eggjs)  \n[Vue.js](https://github.com/vuejs)  \n[Tinymce](https://github.com/tinymce/tinymce)  \n[webpack](https://github.com/webpack)  \n[iView](https://github.com/iview/iview)  \n[egg-view-nunjucks](https://github.com/eggjs/egg-view-nunjucks)  \n[egg-cors](https://github.com/eggjs/egg-cors)  \n[node-sqlite3](https://github.com/mapbox/node-sqlite3)  \n\n#### 3. 浏览器兼容性\n由于是响应式页面，PC和移动设备都能统一访问，并且用到了部分版本比较高的插件，所以主要兼容浏览器：IE10+、IE Edge、Safai、Firefox、Chrome等。\n\n## 部分项目运行截图\n* 前台页面\n\n![Image text](static/images/screen-1.gif)\n\n![Image text](static/images/screen-2.gif)\n\n![Image text](static/images/screen-3.gif)\n\n![Image text](static/images/screen-4.gif)\n\n* 后台页面\n\n![Image text](static/images/screen-5.gif)\n\n![Image text](static/images/screen-6.gif)\n\n![Image text](static/images/screen-7.gif)\n\n![Image text](static/images/screen-8.gif)\n\n## 前台展示的功能列表\n\n- **首页**：轮播图、公司简介、产品服务列表、新闻资讯\n- **关于我们**\n  - **公司介绍**\n  - **公司团队**\n- **新闻资讯**：文章列表\n- **产品服务**\n    - **服务介绍**：信息列表\n    - **案例展示**：案例列表\n- **联系我们**：信息列表\n\n## 后台管理的功能列表\n\n账户分超级管理、普通管理员和文章管理员，不同角色拥有不同的操作权限\n\n- **后台账户管理**\n- **导航管理**\n- **Banner管理**\n  - **首页Banner**：首页轮播图\n  - **页面顶部Banner**：其他页面顶部图片\n- **新闻资讯**\n- **产品服务**：产品服务信息内容\n- **案例管理**\n  - **案例分类**\n  - **案列列表**\n- **公司信息**\n  - **公司介绍**：公司介绍页面内容\n  - **公司团队**：公司团队页面内容\n  - **联系我们**：联系我们页面内容\n- **单页面管理**：单页面内容\n- **站点管理**\n  - **站点信息**：站点LOGO、公司名称、版权信息等\n  - **友情链接**：页面底部友情链接\n  - **底部信息**：页面底部信息设置\n\n## 目录结构\n#### 1. websiteCmsClient 服务端，前台项目\n\n```\n│  .autod.conf.js\n│  .gitignore\n│  .travis.yml\n│  app.js // 项目启动配置，连接数据库\n│  appveyor.yml\n│  package.json\n│  README.md\n│\n├─.vscode // vscode配置，用于配置less\n│\n├─database\n│  websiteCms.db // SQLite数据库\n│  数据库设计.docx // 数据库设计文档\n│\n├─app\n│  │  router.js // 路由配置\n│  │\n│  ├─controller\n│  │  │  admin.js // 后台相关controller\n│  │  │  home.js // 前台相关controller\n│  │  │\n│  │  └─api // api服务，主要是为了给后台使用\n│  │     accountService.js // 账户管理相关controller\n│  │     articleService.js // 文章管理相关controller\n│  │     clientService.js // 客户端管理相关controller\n│  │     infoService.js // 信息管理相关controller\n│  │     productService.js // 产品服务相关controller\n│  │     storageService.js // 存储服务controller\n│  │     userService.js // 用户信息管理相关controller    \n│  │\n│  ├─extend\n│  │     helper.js // 用来提供一些实用的 utility 函数\n│  │\n│  ├─public\n│  │  │\n│  │  ├─admin // 后台项目资源\n│  │  │  └─dist // 打包后生成目录文件\n│  │  │\n│  │  ├─common // 通用模块\n│  │  │\n│  │  ├─upload // 上传文件存储位置\n│  │  │\n│  │  └─home // 前台项目静态资源\n│  │\n│  ├─service // 用来执行具体的操作\n│  │    sqliteDB.js // Sqlite查询封装方法\n│  │    ccount.js // 账户相关服务 \n│  │    article.js // 文章相关服务\n│  │    client.js // 客户端相关服务\n│  │    common.js // 通用服务 \n│  │    home.js // 前台服务\n│  │    info.js // 信息相关服务\n│  │    product.js // 产品相关服务 \n│  │    user.js // 用户相关服务\n│  │\n│  └─view // 模板文件\n│       └─home // 前台模板文件\n│\n├─config\n│     config.default.js // 项目配置相关\n│     plugin.js // 插件\n│\n└─test // 测试相关\n    └─app\n        └─controller\n            home.test.js\n```\n\n#### 2. websiteCmsAdmin 后台项目\n\n```\n│  .browserslistrc\n│  .eslintrc.js\n│  .gitignore\n│  babel.config.js\n│  vue.config.js // 配置文件\n│  package.json\n│  README.md\n│\n├─public\n│  │ index.html // 首页入口文件\n│  │\n│  └─static // 静态资源\n│\n├─.vscode // vscode配置，用于配置less\n│\n├─src\n│  │  main.js // 项目入口js\n│  │  permission.js // 权限配置（路由守卫）\n│  │  app.js // 根组件\n│  │\n│  ├─assets // 资源目录，这里的资源会被wabpack构建\n│  ├─api // api接口文件\n│  ├─theme // iView主题样式\n│  ├─store  应用级数据（state） \n│  │\n│  ├─mock // 测试数据\n│  │    city.json // 省市数据\n│  │\n│  ├─components // 功能组件\n│  │  |\n│  │  ├─Common // 通用组件\n│  │  ├─Table // 表格相关组件\n│  │  └─Image // 图片相关组件\n│  │\n│  ├─views // 页面组件\n│  │    AccoutnManage.vue // 账户管理\n│  │    ArticleManage.vue // 文章管理\n│  │    ...\n│  │    SecondPane.vue // 用来显示三级路由的容器\n│  │    Main.vue // 主框架\n│  │\n│  ├─mixins // 混合模块\n│  │    city_select.js // 城市联级选择\n│  │    email_complete.js // 文章管理\n│  │    keyword_model.js // 关键词弹窗\n│  │    page.js // 页码配置\n│  │    store_model.js // 存储弹窗\n│  │    table_operate.js // 表格操作\n│  │    table_query.js // 表格查询\n│  │    upload_img.js // 上传图片\n│  │\n│  ├─utils \n│  │    index.js // 封装一些工具函数\n│  │    request.js// 封装axios请求等工具  \n│  │    common.js // 通用常量\n│  │    table_setting.js // 封装一些iView表格按钮渲染\n│  │    validate.js // 封装一些iView表单验证方法\n│  │\n│  └─router // 路由配置\n│       index.js\n│\n├─static // 静态资源\n│\n├─config // 配置目录，包括端口号\n│\n└─build // 项目构建(webpack)相关代码\n```\n\n## 本地运行\n需要安装SqLite数据库和Node.js环境，建议先启动前台项目再启动后台项目。\n\n#### SQLite安装：\n1. 访问 [SQLite下载](https://www.sqlite.org/download.html)  下载页面，从 Windows 区下载预编译的二进制文件。\n2. 您需要下载 sqlite-tools-win32-*.zip 和 sqlite-dll-win32-*.zip 压缩文件。\n3. 创建文件夹 C:\\sqlite，并在此文件夹下解压上面两个压缩文件，将得到 sqlite3.def、sqlite3.dll 和 sqlite3.exe 文件。\n4. 添加 C:\\sqlite 到 PATH 环境变量，最后在命令提示符下，使用 sqlite3 命令，将显示如下结果。\n\u003e C:\\\u003esqlite3  \n\u003e SQLite version 3.33.0 2020-08-14 13:23:32  \n\u003e Enter \".help\" for usage hints.  \n\u003e Connected to a transient in-memory database.  \n\u003e Use \".open FILENAME\" to reopen on a persistent database. \n\u003e sqlite\u003e\n\n若sqlite3依赖安装失败，可尝试安装windows-build-tools后再安装sqlite3依赖包：\n\u003e npm install --global --production windows-build-tools\n\n若运行时报错 Cannot find module 'xxxx\\node_modules\\_sqlite3@4.2.0@sqlite3\\lib\\binding\\node-v93-win32-x64\\node_sqlite3.node'\n删除 node_modules 目录，先安装sqlite3再装所有依赖：\n\u003e npm install sqlite3 --save  \n\u003e npm install\n\n#### 前台项目\n1. 进入前台目录\n\u003e cd ./websiteCmsClient\n2. 安装前台依赖\n\u003e npm install\n3. 运行前台项目\n\u003e npm run dev\n4. 访问地址：http://localhost:6060/index\n\n#### 后台项目\n1. 进入后台目录\n\u003e cd ./websiteCmsAdmin \n2. 安装后台依赖  \n\u003e npm install \n3. 运行后台项目  \n\u003e npm run serve\n4. 访问地址：http://localhost:6061/admin\n\n* 代理请求已经配置好，可在config下配置proxyTable更改\n\n## 打包前台项目到后台中运行\n1. 在 websiteCmsAdmin 项目下  \n\u003e npm run build\n2. 将打包好的dist文件下所有内容复制到'websiteCmsClient\\app\\public\\admin'目录下  \n3. 在 websiteCmsClient 项目启动  \n\u003e npm run dev\n\n* 打包后再启动 websiteCmsClient：  \n前台地址：http://127.0.0.1:6060/index  \n后台地址：http://127.0.0.1:6060/admin 或 http://127.0.0.1:6060/public/admin\n\n## 应用部署\n\n#### 构建\n\n\u003e cd ./websiteCmsClient  \n\u003e npm install --production  \n\u003e tar -zcvf ../release.tgz .  \n\n构建完成后打包成 tgz 文件，部署的时候解压启动就可以了。\n\n#### 部署\nEgg框架内置了 egg-cluster 来启动 Master 进程，Master 有足够的稳定性，不再需要使用 pm2 等进程守护模块。\n\n同时，框架也提供了 egg-scripts 来支持线上环境的运行和停止。\n\n启动命令：\n\u003e egg-scripts start --port=7001 --daemon --title=egg-server-showcase\n\n## 作者联系方式\nQQ：381612175\nTEL: 18376686974\n\ngithub：https://github.com/xLong1029/\n\n站酷主页：http://xlong.zcool.com.cn/\n\nUI中国：http://i.ui.cn/ucenter/358591.html\n\n* 此项目做学习Egg.js测试使用，有什么问题可联系我讨论","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxlong1029%2Fxlong-website-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxlong1029%2Fxlong-website-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxlong1029%2Fxlong-website-cms/lists"}