内容管理项目

项目开发

项目开发流程

技术选型

系统框架

• 使用nunjucks模板渲染的原因

数据库

编码

后端egg 目录结构

路由 server/app/router.js

view 装模板

• admin
  • index.html(vue生成的单页面应用)相应的静态文件（CSS, JS）放置与app/public
• pc
  • .html (pc端的模板文件)
• phone
  • .html（手机端的模板文件）

controller控制器

middleware

• checktoken.js 检测登录（token）的中间件

model 模型目录

• .js 数据模型

public 静态文件目录

前端目录结构

后台管理前端vue程序目录结构

src文件夹

路由

view 存放组件

​ .vue 不同的页面切换

components

​ .vue 详情页

项目启动

1. 启动项目之前，先按下面第四节的内容，在mysql数据库中创建xiaozhoucms数据库。

   1. 启动终端

   2. 输入 mysql -u root -p启动mysql数据库（若找不到命令，需将路径添加到系统环境变量）

      

   3. 创建数据库

      • create database xiaozhoucms default character set utf8mb4 collate utf8mb4_unicode_ci;
      • 进入数据库use xiaozhoucms

2. 在server目录中使用npm install下载依赖，然后执行npm run dev即可启动项目（启动前请先创建数据库）

3. 修改项目配置文件

   • 
     • 找到config/config.default.js
     • 将数据库名database改为自己创建的数据库
     • 设置用户名
     • 设置密码

4. 启动数据库，创建管理员用户

   • 打开可视化界面

     ​

   • 链接创建好的数据库

     

   • 右键选择第一项添加 username; password; created_at; updated_at即可

     所有数据表会自动创建，然后使用下面语句创建管理员用户。
     insert into users (
         username,
         password,
         created_at,
         updated_at
     ) values (
         "admin",
         "e10adc3949ba59abbe56e057f20f883e",
         "2022-08-29",
         "2022-08-29"
     );
     -- 管理员用户名为admin，密码使用md5加密，所以初始值设置为‘123456’的加密字符串。
     

5. 在client目录中使用npm install下载依赖，然后执行npm run serve即可启动项目

6. 访问http://127.0.0.1:8080/#/login可以进入后台登录页面

7. 访问http://127.0.0.1:7001/可以打开前端展示页。

目录结构

• docs：项目开发的相关文档
• server：项目服务器端（基于node，egg，mysql）
• client：项目前端（基于vue）
• example：以项目为基础拆分的小案例，每一个demo都是一个项目，
• example/demo_module_backup：是一个基础项目备份，大家可以直接拷贝过去，然后在此基础上去开发，这样可以省去vue和egg项目初始化的过程。