V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
wadejs
V2EX  ›  问与答

一个 vue 加 egg.js 的博客

  •  
  •   wadejs · 2018-08-25 12:54:04 +08:00 · 1331 次点击
    这是一个创建于 2261 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前自己的博客是用 hexo 做的,后面想做一个有后台的博客就打算用 vue 加 node 来试试,于是就有了这个博客。 项目地址

    W-Blog

    W-Blog 是一个基于 vue 和 node 的小小小博客 前端用 vue,后端用 egg.js

    快速入门

    技术栈

    功能特性

    • 轻量级 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 来访问前台和后台
    
    3 条回复    2020-04-15 11:05:10 +08:00
    xiaoz
        1
    xiaoz  
       2018-08-25 13:58:13 +08:00
    Vue 来渲染页面搜索引擎是无法获取到内容的吧
    wadejs
        2
    wadejs  
    OP
       2018-08-25 21:53:28 +08:00
    @xiaoz 是啊 ,之后想改成 ssr 的
    pecopeco
        3
    pecopeco  
       2020-04-15 11:05:10 +08:00
    @wadejs 可以使用预渲染 prerender-spa-plugin
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   959 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 20:25 · PVG 04:25 · LAX 13:25 · JFK 16:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.