Skip to content

基于Egg + Vue + Webpack 开发的多页面和单页面服务端客户端渲染的企业CMS系统

License

Notifications You must be signed in to change notification settings

xLong1029/xlong-website-cms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

93 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

xlong-website-cms

重要通知!!!

我的账号在Github开启2FA设置后,因某种原因丢失恢复码导致账号无法登录,日后该账号下的所有项目在github不再更新,若想查看持续更新的项目请移步到 我的码云仓库

介绍

xlong-website-cms 是一套基于Egg + Vue + Webpack 开发的多页面和单页面服务端客户端渲染的企业CMS系统,可用于企业网站,微信微网站的实现。前台页面可响应式匹配各种移动设备。

项目迭代

  1. V1.0版本

    使用Jq编写侧边栏组件

  2. V2.0版本

    移除jQuery插件,侧边栏组件改用原生JS方法重写,通过路由“siderbarName”来匹配高亮状态;
    添加404页面和“可编辑表格”组件;
    优化项目结构

  3. V3.0版本
    项目 websiteCmsAdmin 改用 vue-cli 4.x 重构;
    UI框架iView至4.x版本(即ViewUI);
    优化侧边栏、可编辑表格组件和权限配置;
    修复一堆功能BUG(详情查看V3.0分支readme);
    优化项目结构

项目说明

1. 前后端分离开发模式

  • 前端
    • 企业网站:Egg + Nunjucks, 服务端渲染,多页面响应式应用开发
    • 管理后台:Vue + Webpack+ iView, 客户端渲染,单页应用开发
  • 后端:Egg + SQLite

2. 项目用到技术、框架与插件

Node.js
Egg.js
Vue.js
Tinymce
webpack
iView
egg-view-nunjucks
egg-cors
node-sqlite3

3. 浏览器兼容性

由于是响应式页面,PC和移动设备都能统一访问,并且用到了部分版本比较高的插件,所以主要兼容浏览器:IE10+、IE Edge、Safai、Firefox、Chrome等。

部分项目运行截图

  • 前台页面

Image text

Image text

Image text

Image text

  • 后台页面

Image text

Image text

Image text

Image text

前台展示的功能列表

  • 首页:轮播图、公司简介、产品服务列表、新闻资讯
  • 关于我们
    • 公司介绍
    • 公司团队
  • 新闻资讯:文章列表
  • 产品服务
    • 服务介绍:信息列表
    • 案例展示:案例列表
  • 联系我们:信息列表

后台管理的功能列表

账户分超级管理、普通管理员和文章管理员,不同角色拥有不同的操作权限

  • 后台账户管理
  • 导航管理
  • Banner管理
    • 首页Banner:首页轮播图
    • 页面顶部Banner:其他页面顶部图片
  • 新闻资讯
  • 产品服务:产品服务信息内容
  • 案例管理
    • 案例分类
    • 案列列表
  • 公司信息
    • 公司介绍:公司介绍页面内容
    • 公司团队:公司团队页面内容
    • 联系我们:联系我们页面内容
  • 单页面管理:单页面内容
  • 站点管理
    • 站点信息:站点LOGO、公司名称、版权信息等
    • 友情链接:页面底部友情链接
    • 底部信息:页面底部信息设置

目录结构

1. websiteCmsClient 服务端,前台项目

│  .autod.conf.js
│  .gitignore
│  .travis.yml
│  app.js // 项目启动配置,连接数据库
│  appveyor.yml
│  package.json
│  README.md
│
├─.vscode // vscode配置,用于配置less
│
├─database
│  websiteCms.db // SQLite数据库
│  数据库设计.docx // 数据库设计文档
│
├─app
│  │  router.js // 路由配置
│  │
│  ├─controller
│  │  │  admin.js // 后台相关controller
│  │  │  home.js // 前台相关controller
│  │  │
│  │  └─api // api服务,主要是为了给后台使用
│  │     accountService.js // 账户管理相关controller
│  │     articleService.js // 文章管理相关controller
│  │     clientService.js // 客户端管理相关controller
│  │     infoService.js // 信息管理相关controller
│  │     productService.js // 产品服务相关controller
│  │     storageService.js // 存储服务controller
│  │     userService.js // 用户信息管理相关controller    
│  │
│  ├─extend
│  │     helper.js // 用来提供一些实用的 utility 函数
│  │
│  ├─public
│  │  │
│  │  ├─admin // 后台项目资源
│  │  │  └─dist // 打包后生成目录文件
│  │  │
│  │  ├─common // 通用模块
│  │  │
│  │  ├─upload // 上传文件存储位置
│  │  │
│  │  └─home // 前台项目静态资源
│  │
│  ├─service // 用来执行具体的操作
│  │    sqliteDB.js // Sqlite查询封装方法
│  │    ccount.js // 账户相关服务 
│  │    article.js // 文章相关服务
│  │    client.js // 客户端相关服务
│  │    common.js // 通用服务 
│  │    home.js // 前台服务
│  │    info.js // 信息相关服务
│  │    product.js // 产品相关服务 
│  │    user.js // 用户相关服务
│  │
│  └─view // 模板文件
│       └─home // 前台模板文件
│
├─config
│     config.default.js // 项目配置相关
│     plugin.js // 插件
│
└─test // 测试相关
    └─app
        └─controller
            home.test.js

2. websiteCmsAdmin 后台项目

│  .browserslistrc
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  vue.config.js // 配置文件
│  package.json
│  README.md
│
├─public
│  │ index.html // 首页入口文件
│  │
│  └─static // 静态资源
│
├─.vscode // vscode配置,用于配置less
│
├─src
│  │  main.js // 项目入口js
│  │  permission.js // 权限配置(路由守卫)
│  │  app.js // 根组件
│  │
│  ├─assets // 资源目录,这里的资源会被wabpack构建
│  ├─api // api接口文件
│  ├─theme // iView主题样式
│  ├─store  应用级数据(state) 
│  │
│  ├─mock // 测试数据
│  │    city.json // 省市数据
│  │
│  ├─components // 功能组件
│  │  |
│  │  ├─Common // 通用组件
│  │  ├─Table // 表格相关组件
│  │  └─Image // 图片相关组件
│  │
│  ├─views // 页面组件
│  │    AccoutnManage.vue // 账户管理
│  │    ArticleManage.vue // 文章管理
│  │    ...
│  │    SecondPane.vue // 用来显示三级路由的容器
│  │    Main.vue // 主框架
│  │
│  ├─mixins // 混合模块
│  │    city_select.js // 城市联级选择
│  │    email_complete.js // 文章管理
│  │    keyword_model.js // 关键词弹窗
│  │    page.js // 页码配置
│  │    store_model.js // 存储弹窗
│  │    table_operate.js // 表格操作
│  │    table_query.js // 表格查询
│  │    upload_img.js // 上传图片
│  │
│  ├─utils 
│  │    index.js // 封装一些工具函数
│  │    request.js// 封装axios请求等工具  
│  │    common.js // 通用常量
│  │    table_setting.js // 封装一些iView表格按钮渲染
│  │    validate.js // 封装一些iView表单验证方法
│  │
│  └─router // 路由配置
│       index.js
│
├─static // 静态资源
│
├─config // 配置目录,包括端口号
│
└─build // 项目构建(webpack)相关代码

本地运行

需要安装SqLite数据库和Node.js环境,建议先启动前台项目再启动后台项目。

SQLite安装:

  1. 访问 SQLite下载 下载页面,从 Windows 区下载预编译的二进制文件。
  2. 您需要下载 sqlite-tools-win32-.zip 和 sqlite-dll-win32-.zip 压缩文件。
  3. 创建文件夹 C:\sqlite,并在此文件夹下解压上面两个压缩文件,将得到 sqlite3.def、sqlite3.dll 和 sqlite3.exe 文件。
  4. 添加 C:\sqlite 到 PATH 环境变量,最后在命令提示符下,使用 sqlite3 命令,将显示如下结果。

C:>sqlite3
SQLite version 3.33.0 2020-08-14 13:23:32
Enter ".help" for usage hints.
Connected to a transient in-memory database.
Use ".open FILENAME" to reopen on a persistent database. sqlite>

若sqlite3依赖安装失败,可尝试安装windows-build-tools后再安装sqlite3依赖包:

npm install --global --production windows-build-tools

若运行时报错 Cannot find module 'xxxx\[email protected]@sqlite3\lib\binding\node-v93-win32-x64\node_sqlite3.node' 删除 node_modules 目录,先安装sqlite3再装所有依赖:

npm install sqlite3 --save
npm install

前台项目

  1. 进入前台目录

cd ./websiteCmsClient

  1. 安装前台依赖

npm install

  1. 运行前台项目

npm run dev

  1. 访问地址:http://localhost:6060/index

后台项目

  1. 进入后台目录

cd ./websiteCmsAdmin

  1. 安装后台依赖

npm install

  1. 运行后台项目

npm run serve

  1. 访问地址:http://localhost:6061/admin
  • 代理请求已经配置好,可在config下配置proxyTable更改

打包前台项目到后台中运行

  1. 在 websiteCmsAdmin 项目下

npm run build

  1. 将打包好的dist文件下所有内容复制到'websiteCmsClient\app\public\admin'目录下
  2. 在 websiteCmsClient 项目启动

npm run dev

应用部署

构建

cd ./websiteCmsClient
npm install --production
tar -zcvf ../release.tgz .

构建完成后打包成 tgz 文件,部署的时候解压启动就可以了。

部署

Egg框架内置了 egg-cluster 来启动 Master 进程,Master 有足够的稳定性,不再需要使用 pm2 等进程守护模块。

同时,框架也提供了 egg-scripts 来支持线上环境的运行和停止。

启动命令:

egg-scripts start --port=7001 --daemon --title=egg-server-showcase

作者联系方式

QQ:381612175 TEL: 18376686974

github:https://github.com/xLong1029/

站酷主页:http://xlong.zcool.com.cn/

UI中国:http://i.ui.cn/ucenter/358591.html

  • 此项目做学习Egg.js测试使用,有什么问题可联系我讨论

About

基于Egg + Vue + Webpack 开发的多页面和单页面服务端客户端渲染的企业CMS系统

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published