Блог vue plus egg.js

внешний интерфейс Vue.js внешний фреймворк

Раньше я использовал hexo для создания собственного блога, но если я хочу создать блог с фоном, я планирую попробовать его с vue и node, поэтому у меня есть этот блог.адрес проекта

W-Blog

W-Blog — это небольшой блог, основанный на vue и node. Фронтенд с vue, бэкэнд с egg.js

Быстрый старт

стек технологий

  • внешний интерфейс:
    • пользовательский терминал:vue,iview
    • сторона администратора:vue,d2admin,element
  • задняя часть:egg.js,mongodb

Функции

  • Легкий редактор Markdown, загрузчик изображений
  • Поддержка таких функций, как маркировка, классификация, поиск черновиков и т. д.
  • Облако тегов

онлайн-адрес

Блог брата Хуанга

Демонстрация изображения

стойка регистрации

  • Главная Просмотр
    1.gif
  • Просмотр сведений о статье и навигация по каталогам
    2.gif
  • Статьи можно искать по категориям и тегам
    3.gif
  • Введите ключевое слово для поиска
    4.gif
  • Облако тегов и поиск
    5.gif

За кулисами

  • фоновый вход
    6.gif
  • Список статей
    7.gif
  • Поиск статей
    8.gif
  • Редактирование статьи
    9.gif
  • добавить категорию
    10.gif
  • добавить теги
    11.gif
  • Модификация тега (та же классификация)
    12.gif
  • Модификация статьи
    13.gif
  • Удаление статьи, поддержка черновика корзины
    14.gif

Структура каталогов

│  .autod.conf.js
│  .eslintignore
│  .eslintrc
│  .gitignore
│  .travis.yml
│  app.js // 项目启动前执行，比如写入管理员
│  appveyor.yml
│  package.json
│  README.md
│
├─app
│  │  router.js // 服务端路由
│  │
│  ├─controller
│  │      admin.js // 后台相关controller
│  │      client.js // 前台相关controller
│  │      login.js // 登录相关controller
│  │      page.js // 页面相关controller
│  │
│  ├─extend
│  │      helper.js
│  │
│  ├─middleware
│  │      auth.js // 登录验证中间件
│  │
│  ├─model
│  │      Article.js // 文章model
│  │      Category.js // 分类model
│  │      Tag.js // 标签model
│  │      User.js // 用户model
│  │
│  ├─public
│  │  │
│  │  ├─admin // admin端
│  │  │  ├─dist // 打包生成后的目录
│  │  │  └─src // admin端源文件
│  │  │
│  │  └─client // 用户端
│  │      ├─dist // 打包生成后的目录
│  │      └─src // 用户端源文件
│  │
│  └─service // service部分用来执行具体的操作
│          admin.js
│          client.js
│          login.js
│
├─config
│      config.default.js // 项目配置相关
│      plugin.js
│
└─test // 测试相关
    └─app
        └─controller
                home.test.js

Глобальная конфигурация

module.exports = appInfo => {
  return {
    keys: appInfo.name + '_1432030565447_3632',
    mongoose: {
      clients: {
        blog: {
          url: 'mongodb://127.0.0.1/blog',
          options: {
            user: 'test', // 数据库的用户名 
            pass: 'test' // 数据库的密码
          },
        }
      }
    },
    // 初始化管理员信息
    user: {
      userName: 'admin',
      password: 'admin',
    },
    session: {
      maxAge: 3600 * 1000,
    },
    jwt: {
      cert: 'jsonwebtoken' // jwt秘钥
    },
    /**
     * markdown编辑器的图片上传用的是七牛存储
     * 所以需要配置七牛的key
     */
    qiniu: { // 这里填写你七牛的Access Key和Secret Key
      ak: '',
      sk: ''
    }
  }
};

работать локально

УстановитьMongoDBбаза данных иNode.jsокрестности.

# 安装服务端依赖
npm install
# 开启mongodb
mongod --dbpath '你数据库的目录' # --auth 如果开启密码，要加上这个命令
# 运行服务
npm run dev

# 进入前台目录
cd ./app/public/client/src
# 安装前台依赖
npm install
# 运行前台项目
npm run dev

# 进入后台目录
cd ./app/public/admin/src
# 安装后台依赖
npm install
# 运行后台项目
npm run dev

# 即可通过 http://127.0.0.1:8080访问
# 开发阶段直接通过webpack的devserver访问
# 代理请求已经配置好，可在config下配置proxyTable更改

Бэйл

# 在前台和后台目录分别
npm run build
# 在项目根目录
npm install --production
# 启动
npm start
# 打包后可以通过
# http://127.0.0.1:7001/  和 http://127.0.0.1:7001/admin 来访问前台和后台
Категории