xiecp

xiecp 查看完整档案

重庆编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

风吹石岛
我无法说出内心的爱
大海的远和一个人的苍茫
我只能遥望
在潮起潮落中
黎明近在眼前

个人动态

xiecp 发布了文章 · 2019-04-12

Ubuntu_16.04_x64安装mongodb_v4.0.8 - TGZ安装包方式

  1. mongodb官网获取程序的TGZ安装包下载链接

    如:https://fastdl.mongodb.org/li...

  2. 登录服务器,在服务器执行下载命令,下载程序安装包

    wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1604-4.0.8.tgz
  3. 解压安装包

    sudo tar -zxvf mongodb-linux-x86_64-ubuntu1604-4.0.8.tgz
  4. 创建develop、conf、文件夹,并把解压后的程序文件夹移动到develop

    这一步可以不做,我做这个主要是我想把开发用到的软件和配置文件全部放到一起,便于个人管理,以下步骤皆以创建了这个两个文件夹为前提,如果跳过此步骤,后续步骤的命令只需要修改路径即可
    >mkdir develop
    >cd develop
    >mkdir conf
    >cd ~
    >mv mongodb-linux-x86_64-ubuntu1604-4.0.8 develop/
  5. 创建db和log

    >cd ~
    >cd /
    >mkdir data
    >cd l
    >mkdir db
    >mkdir log
    >cd log
    >vim mongodb.log
    >保存 mongodb.log
  6. 在develop/config下创建配置文件mongodb.conf

    >cd ~/develop/conf
    >vim mongodb.conf
    #mongodb.conf
    #开启权限认证
    auth=true
    port=27017
    #开启远程连接
    bind_ip=0.0.0.0
    dbpath=/data/db
    logpath=/data/log/mongodb.log
    logappend=true
    fork=true
  7. 进入程序目录启动数据库

    第一次启动不用配置文件,因为要配置数据的主管理员账号和密码
    如果报错执行./mongod 报错: error while loading shared libraries: libcurl.so.4: cannot open shared object file: No such file or directory
    执行apt-get install libcurl4-openssl-dev之后即可解决
    >cd ~/develop/mongodb-linux-x86_64-ubuntu1604-4.0.8/bin/
    >./mongod
    第一次启动之后,新开一个命令窗口,去创建数据库管理员账号密码
  8. 创建数据库超级管理员账号

    >cd ~/develop/mongodb-linux-x86_64-ubuntu1604-4.0.8/bin/
    >./mongo 
    >use admin
    >db.createUser({user:'bymm',pwd:'xxxxxxx',roles:[{role:'root',db:'admin'}]})
    >exit
  9. 已配置文件启动数据库,以开启远程连接

    >cd ~/develop/mongodb-linux-x86_64-ubuntu1604-4.0.8/bin/
    >./mongod --config ~/develop/conf/mongodb.conf
  10. 安装过程就完成了,并且数据库已启动,远程连接也ok。
查看原文

赞 0 收藏 0 评论 0

xiecp 赞了回答 · 2018-04-15

解决求一个数组按属性分组的方法

arr.reduce(function (pre, current, index) {
  pre[current.city] = pre[current.city] || []
  pre[current.city].push(current.location)
  return pre
}, {})

结果

Object {上海: Array[2], 北京: Array[2], 苏州: Array[1]}

关注 14 回答 6

xiecp 回答了问题 · 2017-06-26

解决使用vue官方脚手架进行单元测试,如何覆盖到watch里的变量?

虽然不知道是不是正确的做法,这样写了之后,就能覆盖到watch的代码了...

it('播放状态切换', () => {
  const Constructor = Vue.extend(Home)
  const vm = new Constructor().$mount()
  vm._watchers[0].cb(true)
  Vue.nextTick( () => {
    expect(vm.playState).to.equal("play")
  })
  vm._watchers[0].cb(false)
  Vue.nextTick( () => {
    expect(vm.playState).to.equal("pause")
    done()
  })
})

关注 1 回答 1

xiecp 提出了问题 · 2017-06-26

解决使用vue官方脚手架进行单元测试,如何覆盖到watch里的变量?

组件中的watch如下:

player(isPlay) {
  if (isPlay) {
    this.playState = 'play'
  } else {
    this.playState = 'pause'
  }
}

测试文件Home.spec.js中的相关用例如下

it('播放状态切换', () => {
  const Constructor = Vue.extend(Home)
  const vm = new Constructor().$mount()
  vm.playerShow = true
  Vue.nextTick( () => {
    expect(vm.playState).to.equal("play")
  })
  vm.playerShow = false
  Vue.nextTick( () => {
    expect(vm.playState).to.equal("pause")
    done()
  })
})

这样写了之后查看覆盖率报告,发现组件中watch部分代码没有被覆盖(都是红的)
请教下如何写用例才能够把watch的代码覆盖到

关注 1 回答 1

xiecp 发布了文章 · 2017-04-10

vue+express+mongoose项目构建

注(2018-2-12):仅做记录使用,又不舍得删除,推荐使用koa2,koa2相关资料很多的~

1. 运行环境构建(基于macOS Sierra 10.12.4)

  • 全局安装node(v6.9.4)

    安装过程略
  • 配置cnpm(npm的淘宝镜象)

    sudo npm install -g cnpm --registry=https://registry.npm.taobao.org`
  • 全局安装vue官方脚手架工具vue-cli(vue官网文档

    cnpm install --global vue-cli

2. 创建项目

  • 基于 webpack 模板创建

    vue init webpack tifi-music

    创建配置按需,我除了安装router之外其他都选了no

  • 运行与打包测试

    cd tifi-misic
    //安装依赖包
    cnpm i
    //运行
    npm run dev
    //打包
    npm run build

3. 配置express

  • 在项目根目录下创建server.js文件,内容如下

    //用于获取路径
    const path = require('path')
    //用于读写文件流
    const fs = require('fs')
    const express = require('express')
    //无需cnpm安装,因为是express的中间件bodyParser
    //用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.
    //bodyParse可以接受客户端ajax提交的json数据,以及url的处理,不使用这个中间件将导致无法接收客户端的json数据
    const bodyParser = require('body-parser')
    //需要cnpm安装,cookieParser中间件用于获取web浏览器发送的cookie中的内容.
    //在使用了cookieParser中间件后,代表客户端请求的htto.IncomingMessage对象就具有了一个cookies属性
    //该属性之为一个对象的数组,其中存放了所有web浏览器发送的cookie,每一个cookie为cookies属性值数组中的一个对象.
    const cookieParser = require('cookie-parser')
    //serve-favicon中间件用于请求网站的icon用法如下
    //express().use(favicon(__dirname + '/public/images/favicon.ico'))
    const favicon = require('serve-favicon')
    //morgan中间件是日志中间件,用于node的日志输出
    //进阶用法见http://www.cnblogs.com/chyingp/p/node-learning-guide-express-morgan.html
    const logger = require('morgan')
    //获取后端路由.我设置在根目录下的server文件,读取下面的index.js
    const routes = require('./server/router')
    //用于管理配置的插件.统一管理后端服务端口和数据库连接地址等,默认配置在config目录下的default.js中
    const config = require('config-lite')
    //compression 中间件用于压缩和处理静态内容
    //例子:app.use(express.static(path.join(__dirname, 'public')))
    const compression = require('compression')
    //实例化express对象,用于连接中间件
    const app = express()
    
    
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    
    app.use(compression({ threshold: 0 }))
    app.use('/api', routes)
    
    
    app.use(express.static(path.resolve(__dirname, './dist')))
    // 因为是单页应用 所有请求都走/dist/index.html
    app.get('*', function(req, res) {
        const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
        res.send(html)
    })
    app.listen(config.port, function () {
        console.log(`Server running in port ${config.port}`)
    })
    
  • 解决npm run dev时即开发模式下跨域问题
    打开根目录下的config目录下的index文件,配置proxyTable如下:

    proxyTable: {
        '/api': {
            //这里的target填服务端的端口的接口地址
            target: 'http://localhost:3000/api/',
            changeOrigin: true,
            pathRewrite: {
                '/api': ''
            }
        }
    }
  • 创建router
    server.js文件中写了const routes = require('./server/router')
    这里require的路径就是我们需要创建router的路径
    在根目录下创建server文件夹,并在其目录下创建router.js文件,内容如下:

    //express的路由中间件,引入等待从controller中添加路由
    const router = require('express').Router()
    //引入node的文件路径模块path和文件处理模块fs
    const path = require('path')
    const fs = require('fs')
    //读取controller文件下的所有控制器,为了实现动态读取控制器,有空再研究更好的写法
    const controllers = fs.readdirSync(path.resolve(__dirname, './controller'))
    //遍历获取到的文件,动态添加express的路由信息:url、type、response即请求路径、请求方式、响应处理函数
    controllers.forEach((file) => {
        //获取到具体到控制器
      let controller = require('./controller/' + file)
        //遍历控制器携带的信息
      for (let o in controller) {
            //获取请求路径,未取到则取默认路径 为'/'+文件名(不包括后缀)
        let url = controller[o].url ? controller[o].url : ('/' + o)
            //获取请求方式,未取到则取默认方式 为'get'
        let type = controller[o].type ? controller[o].type : 'get'
            //响应处理函数,未取到则使用默认的处理
        let response = controller[o].response ? controller[o].response : (req, res) => {
          res.json({
            success: false,
            info: '没有处理响应的无效路由'
          })
        }
            //设置路由信息
        router[type](url, response)
      }
    })
    //使用动态设置好的路由
    router.use(router)
    //输出路由
    module.exports = router
    
  • 创建controller
    router.js文件中写了获取同级目录controller下的所有文件
    所以我们只需要在server文件夹下的controller中创建一个user的控制器
    即创建user.js文件,内容如下:

    const userName = [{
        name: '测试用户名0'
      },
      {
        name: '测试用户名1'
      }
    ]
    //'输出待添加的路由信息对象
    //每个对象中可设置三个属性:url、type、response(不设置的话均做了默认处理)
    module.exports = {
      users: {
        response: (req, res) => {
          res.json(userName)
        }
      },
      reg: {
        type: 'post',
        response: (req, res) => {
          res.json('reg')
        }
      }
    }
  • 运行express

    • 前面文件创建完成之后,要运行express首先安装依赖包

      cnpm i cookie-parser morgan serve-favicon morgan config-lite –save-dev
    • 另外修改文件时需要频繁的重启服务器,全局安装nodemon可以实现自动重启

      cnpm install -g nodemon 
    • 然后配置package.json中的scripts添加start命令

      "scripts": {
          "dev": "node build/dev-server.js",
          "build": "node build/build.js",
          "start": "nodemon server.js"
      }
    • 执行npm run build打包项目用于生产环境
    • 最后命令行里输入node start就可以运行了,命令行输出Server running in port 3000表示express成功启动了,浏览器访问http://localhost:3000/api/users看到输出的测试数据就是成功配置好express了

配置mongoose

  • 安装mongodb并启动(过程省略)
  • 安装mongoose

    cnpm install mongoose --save-dev
  • 连接mongodb

    • 编写入口:在server文件下新建一个文件夹名为db,并在其下新建一个文件db.js,内容如下:

      //引入node的文件路径模块path和文件处理模块fs
      const path = require('path')
      const fs = require('fs')
      const mongoose = require('mongoose')
      
      
      // mongodb 连接?
      mongoose.connect('mongodb://localhost/tifi-music')
      // 此处防止 node.js - Mongoose: mpromise 错误
      mongoose.Promise = global.Promise;
      let db = mongoose.connection;
      db.on('error', console.error.bind(console, 'Connect error'))
      db.once('open', function() {
          console.log('Mongodb started successfully')
      })
      //声明待添加的model对象
      let model = {}
      //读取方式和router一样
      const schemas = fs.readdirSync(path.resolve(__dirname, './model'))
      schemas.forEach((file) => {
          //设置数据库表名为读取到的文件名(去除后缀名)
          let name = file.substring(0,file.lastIndexOf("."))
          //获取到的对象就是数据库字段
          let schema = require('./model/' + file)
          //使用mongoose.Schema和mongoose.model完成对数据库表和字段的创建
          model[name] = mongoose.model(name, mongoose.Schema(schema))
      })
      //输出model对象
      module.exports = model
    • 编写model:也在db文件夹下新建一个文件夹名为model,并在其下新建user.js,内容如下:

      module.exports = {
        //设计数据库字段,先简单的设置一些常用的字段
        name: String,
        phone: String,
        email: String,
        password: String,
        createTime: Date
      }
      
    • 修改controller:修改controller文件下单user.js为:

      //'引入mongoose的model
      const model = require('../db/db')
      //加密用户的密码
      const sha1 = require('sha1')
      //mogodb会自动的为我们添加_id字段,类型为objectid,我们要把它转换成创建该用户的时间
      const objectIdToTimestamp = require('objectid-to-timestamp')
      
      
      module.exports = {
        //获取所有用户
        users: {
          response: (req, res) => {
            model.User.find({}, (err, doc) => {
              if (err) console.log(err)
              res.send(doc)
            })
          }
        },
        //用户注册
        reg: {
          type: 'post',
          response: (req, res) => {
            console.log(req.body);
            let userRegister = new model.User({
              email: req.body.email,
              password: sha1(req.body.password),
            })
            // 将 objectid转换为用户创建时间,使用是的UTC国际标准时间
            userRegister.createTime = objectIdToTimestamp(userRegister._id)
      
            //查询邮箱是否已存在于数据库
            model.User.findOne({
              email: (userRegister.email)
                .toLowerCase()
            }, (err, doc) => {
              if (err) console.log(err)
              if (doc) {
                res.json({
                  success: false,
                  info: '该邮箱已被注册'
                })
              } else {
                userRegister.save(err => {
                  if (err) console.log(err)
                  console.log(new Date(), 'register success')
                  res.json({
                    success: true,
                    data: {
                      email: userRegister.email
                    }
                  })
                })
              }
            })
          }
        }
      }
      
  • 运行mongoose与测试查询与插入

    • 确定连接mongod成功,如果之前配置好nodemon的话,控制台会有Mongodb started successfully
    • 测试插入数据,打开postman进行post请求,成功之后如下图:
![图片描述][3]
- 测试查询数据,打开[postman][2]进行get请求,成功之后如下图:
![图片描述][5]
- 如果前面都成功了,说明已经成功的连接了mongoose,说明全部的基础建设已经搞好了,可以进行下一步的开发了!

查看原文

赞 3 收藏 16 评论 5

xiecp 提出了问题 · 2017-04-08

解决使用nuxt.js服务端渲染框架,引入iview2后,使用任何组件都会报错,而且打包之后组件样式都消失

我做毕设项目遇到的一个问题

使用nuxt框架的Nuxt.js + Express构建了一个项目

引入iview2后,组件在dev模式下都可以正常显示,但是控制台会报错

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 

我想着报错还正常显示就忍一下...

然后npm run build之后,再npm start发现组件的样式都没了,想知道怎么解决这个问题

在iView github上发现一个关闭的issues,跟我遇到的一样,但是关闭了,也没解决,就一起贴上来了,原issues:https://github.com/iview/ivie...
(没解决怎么关闭了...)

iView 版本号

2.0.0-rc.5

操作系统/浏览器 版本号

window10/Chrome 56

Vue 版本号

2.2.4

能够复现问题的在线示例(重要)

这个服务渲染的在线demo不好整,大致步骤是:

vue init nuxt/starter myapp
cd myapp
yarn

npm run dev
启动后,创建插件:

import Vue from 'vue'

if (process.BROWSER_BUILD) {
  Vue.use(require('iview'))
}
在nuxt.config.js引入

plugins: ['~plugins/vue-iview'],
css: ['iview/dist/styles/iview.css'],
此时一切正常。iview组件样式都能正常引入,然后在index.vue里加入如下代码:

<div style="background:#eee;padding: 20px">
        <Card :bordered="false">
            <p slot="title">无边框标题</p>
            <p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
        </Card>
    </div>

使用四五个组件浏览器都会出现警告:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 

复现步骤

问题现象,以及你期望的结果是怎样的?

不要出现警告

关注 4 回答 3

xiecp 提出了问题 · 2016-12-26

echarts3如何实现对markLine的拖动 且拖动过程中不能超出坐标轴

我试过用原生的js写.
鼠标单击markLine的时候触发document的onmousemove事件.
再计算坐标轴两端到容器之间的距离.
然后移动过程中,换算x轴坐标,触发setoption重新设置markLine的值.
但是有多条markLine的时候,处理不相互碰撞问题很麻烦.
虽然搞出来了但是很麻烦.
想知道如何结合echarts3的各种神奇配置,特别是上个月更新的graphic,得到优雅的做法!

关注 3 回答 2

xiecp 提出了问题 · 2016-10-27

使用vue2.0的v-for渲染一个div,v-for数组变化时,重绘性能很低,页面很卡,如何改善呢?

我使用v-for渲染一个div,然后改变渲染的数组,那么div的内容会重绘,但是页面很卡

//content是组件数组,用作v-for

this.content = ['com1','com2','com3','com4']

<div id="test">
    <div :is="item" v-for="(item,index) in content"></div>
</div>

如果我改变content数组的内容,比如改成:

this.content = ['new1','new2','new3','new4','new5','new6','new7']

那么这时候id为test的div里面的内容会重绘,由于我的组件内容很多,重绘的时候,页面会卡顿,请问有什么好的解决方案吗?

关注 5 回答 2

xiecp 回答了问题 · 2016-10-25

解决使用html2canvas截取一个div,设置放大两倍,对div截图不完整

问题已经解决,使用canvas的translate方法可以解决,谢谢留心了但是还没时间回答的各位!

关注 4 回答 2

xiecp 提出了问题 · 2016-10-24

解决使用html2canvas截取一个div,设置放大两倍,对div截图不完整

使用html2canvas截取一个div,设置放大两倍
div定位方式是absolute,width是60%,left设置了20%
截取出来的图片是这样的:
图片描述

而我不设置left的话截取出来就是我想要的,有什么办法可以解决设置了left再截图还能保证如下图的截取效果吗?
图片描述

关注 4 回答 2

认证与成就

  • 获得 9 次点赞
  • 获得 24 枚徽章 获得 3 枚金徽章, 获得 7 枚银徽章, 获得 14 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-10-12
个人主页被 445 人浏览