lumos

lumos 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

lumos 赞了文章 · 2020-12-22

vue+node支持服务端渲染的博客系统

感悟

历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前后端分离,对于博客类系统seo肯定很重要,索性就自己动手写了这个项目,其中也遇到了不少问题, 因为基于服务端渲染的项目不多,自己能力也有限,所以用了好长时间。这里特别感谢@lincenying,提供了登录功能的解决思路,也是我在开发过程中遇到最难解决的问题,本项目基于vue-hackernews-2.0开发,支持PWA(需升级为https),演示地址:https://www.86886.wang,项目地址:https://github.com/wmui/essay

开发环境和技术栈

操作系统:windows 10 64位
开发工具 :webstrom sublime
前端:vue.js + vue-router + vuex
后端:node.js + mongodb (采用express框架)

特色功能

支持服务端渲染
支持标题动态切换
支持PWA
支持markdown语法,样式采用github风格,代码高亮
支持文章保存为草稿
支持标签和归档功能

pc端效果图

首页效果图

代码高亮效果图

后台发布页面

后台文章列表

修改个人信息

手机端效果图,以chrome浏览器演示

添加到主屏

启动效果

首页效果

文章页效果

更多效果大家可通过线上演示地址查看

本地运行项目

  1. 安装mongodb并启动
  2. 安装git工具
  3. 克隆项目到你的本地
  4. 修改配置项信息,/server/settings.js,你也可以默认不修改,默认用户名:q,默认密码:q
let user = 'q';
let pass = md5('q');
let avatar = 'avatar.jpg';//头像
let intro ='Never too old to learn';
let nickname = 'vueblog';
module.exports = {
    dbUrl:'mongodb://localhost:27017/vueblog',
    user:user,
    pass:pass,
    avatar:avatar,
    intro:intro,
    nickname:nickname
}
  1. 打开本地终端,执行npm run dev ,访问http://localhost:8080

结语

关于如何部署到线上和部署https,后面会更新相关教程。此项目我会长期更新,希望能和大家一起学习,共同进步

更新: 本项目的2.0版本基于Nuxt.js开发,后端用Koa + Mongoose进行了重写。

GitHub: https://github.com/wmui/essay

查看原文

赞 69 收藏 258 评论 35

lumos 关注了用户 · 2020-12-21

wmui @wmui

Blog: https://blog.86886.wang
GitHub: https://github.com/wmui
技术交流群:4882 68810

关注 171

lumos 回答了问题 · 2020-05-25

解决vuejs能否监控localStorage的变化?

如果楼主不想用vuex(比如我需要修改个别小地方,没必要用庞大的vuex),建议这样操作,我也是自己想了很久,亲测可用。
在mounted中,使用监听

mounted() {
//addEventListener中this指向window,所以that指向vue实例

var that=this
window.addEventListener('storage', function(e){
//给要修改的数据加一个id,localstorage发生修改后,直接使用innerHTML方法来修改即可
  that.$refs.adminName.innerHTML=e.newValue
})

},

关注 13 回答 7

lumos 赞了回答 · 2020-05-25

解决vuejs能否监控localStorage的变化?

Vue 仅可以对其管理的数据做响应式处理,可以理解为 data 中的数据,localStorage 并不在 Vue 的管理下,自然不会有响应特性。
要响应 localStorage 的变化,可以尝试 onStorage 事件。

关注 13 回答 7

lumos 赞了回答 · 2020-04-19

解决知道一个纯数字数组,如何去过滤另一个复杂数组?

// => [{"id":101,"name":"监控","children":[{"id":1011,"name":"监控11"}]},{"id":102,"name":"其他","children":[{"id":1021,"name":"其他21"},{"id":102,"name":"其他24"}]}]
getByIds(data, [101, 1011, 102, 1021])
var data = [
  {
    id: 101,
    name: '监控',
    children: [
      {
        id: 1011,
        name: '监控11'
      },
      {
        id: 1012,
        name: '监控12'
      },
      {
        id: 1013,
        name: '监控13'
      }
    ]
  },
  {
    id: 102,
    name: '其他',
    children: [
      {
        id: 1021,
        name: '其他21'
      },
      {
        id: 1022,
        name: '其他22'
      },
      {
        id: 1022,
        name: '其他23'
      },
      {
        id: 102,
        name: '其他24'
      }
    ]
  }
]

function getByIds (list, ids) {
  var tmp;
  return list.filter(item => {
    if(ids.some(id => id === item.id)) {
      if(item.children) {        
        tmp = item.children.filter(c => ids.some(id => id === c.id))
        if(tmp.length) {
          item.children = tmp
        }
      } else {
        item.children = []
      }
      return true
    } else {
      return false
    }
  })
}

关注 4 回答 3

lumos 收藏了问题 · 2020-04-10

如何过滤一个数组对象数组并使用Javascript返回一个过滤的数组?

题目描述

如题

相关代码

checkObjList: [
    {   
       name:'第一项',
       arr:[
                { id: 0, name: "李" },
                { id: 1, name: "赵" },
                { id: 2, name: "王" },
                { id: 3, name: "张" }
            ]
    },
    {
        name:'第二项',
        arr:[
                { id: 4, name: "李1" },
                { id: 5, name: "赵1" },
                { id: 6, name: "王1" },
                { id: 7, name: "张1" }
             ]
     },
     {
         name:'第三项',
         arr:[
                { id: 8, name: "李2" },
                { id: 9, name: "赵2" },
                { id: 10, name: "王2" },
                { id: 11, name: "张2" }
              ]
      }
  ]

输入id的数组

newArr:[1,5,8]
newArr:[1,5,8,9]
newArr:[1,5]

返回 对应的对象

输入第一个数组
checkObjList1:[
    {
        name:'第一项',
        arr:[
            { id:1,name:'李'}
        ]
    },
    {
        name:'第二项',
        arr:[
            {id:5,name:'赵1'}
        ]
    },
    {
        name:'第二项',
        arr:[
            {id:8,name:'李2'}
        ]
    }
]

其余的输入也是遵从这样的方法,写着写着饶晕了。

lumos 提出了问题 · 2020-04-10

解决知道一个纯数字数组,如何去过滤另一个复杂数组?

var a = [101, 1011, 102, 1021]

var b = [
            {
                id: 101, name: '监控',
                children: [{ id: 1011, name: '监控11' }, { id: 1012, name: '监控12' }, { id: 1013, name: '监控13' }]
            },

            {
                id: 102, name: '其他',
                children: [{ id: 1021, name: '其他21' }, { id: 1022, name: '其他22' }, { id: 1022, name: '其他23' }, { id: 102, name: '其他24' }]
            }

        ]

请问各位大神,这俩个数组,a中的数字是实际返回的,要根据a的数字筛选b数组中的元素,新数组只要ID中包含a的,结构也不能改变,因为要拿来渲染动态菜单的,请问各位大神有什么好的主意吗?谢谢啦

关注 4 回答 3

lumos 赞了回答 · 2019-09-11

如何在v-charts中的环状图添加占比信息?

楼上的给出答案根本没起作用

关注 5 回答 3

lumos 提出了问题 · 2019-07-28

解决post请求不会传这种格式的参数,vue中使用axios这种参数怎么传?没遇到过

图片描述

这个参数是要求保存某个人的权限,别的我都会,就是不知道这种参数怎么写,才能往后端正常请求到?
我平时自己封装了一个axios,请求的参数都是这么写:

图片描述

上面那种格式的参数,我传了好多次都没正确请求过去,

那位大神可以帮我指点一下,我主要是之前没遇到过这种格式的,不知道要怎么处理?
下面这个是我平时最常用的请求参数的一个axios方法了,跟第二个图片是一样的,万分感谢

axios() {
      let params = {
        token: this.getCookie("token"),
        companyId: 4904
      };
      this.postFN({
        data: params,
        url: "/api/user/filiale-workers-listInfo"
      }).then((data) => {
        if (data.code == "0") {
          this.tableData = data.data.records;
          this.recCount = data.data.recCount;
          console.log("初始化:请求到农民工列表全部数据ok");
          console.log(data);
          
        }
      });
    },

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

你期待的结果是什么?实际看到的错误信息又是什么?

关注 3 回答 2

lumos 提出了问题 · 2019-07-28

解决post请求不会传这种格式的参数,vue中使用axios这种参数怎么传?没遇到过

图片描述

这个参数是要求保存某个人的权限,别的我都会,就是不知道这种参数怎么写,才能往后端正常请求到?
我平时自己封装了一个axios,请求的参数都是这么写:

图片描述

上面那种格式的参数,我传了好多次都没正确请求过去,

那位大神可以帮我指点一下,我主要是之前没遇到过这种格式的,不知道要怎么处理?
下面这个是我平时最常用的请求参数的一个axios方法了,跟第二个图片是一样的,万分感谢

axios() {
      let params = {
        token: this.getCookie("token"),
        companyId: 4904
      };
      this.postFN({
        data: params,
        url: "/api/user/filiale-workers-listInfo"
      }).then((data) => {
        if (data.code == "0") {
          this.tableData = data.data.records;
          this.recCount = data.data.recCount;
          console.log("初始化:请求到农民工列表全部数据ok");
          console.log(data);
          
        }
      });
    },

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

你期待的结果是什么?实际看到的错误信息又是什么?

关注 3 回答 2

认证与成就

  • 获得 2 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-09-10
个人主页被 298 人浏览