简介

因为使用vue-cli构建项目的时候接触了一点express，所以现在参照官网认真看一下比较简单的功能，之后再深入学习。

开始使用

Express官网

安装

1
2
3
4

mkdir express //创建目录
cd express //进入目录
npm init //生成package.json文件
npm install express --save 或 npm install express

简介

不管是在学习vue，还是在学习微信小程序的时候，我都接触到了flex布局。所以今天打算认真学一下。

Flex

flex是css3的样式，意为“弹性布局”。通过display:block使用。行内元素通过display:inline-block使用。
使用了flex布局，子元素的float、clear和vertical-align属性将失效。

概念

为了方便学习，我们称采用了flex布局的父元素为容器。它的子元素称为项目。容器默认有两根轴，水平方向的称为主轴，垂直方向的称为交叉轴。

微信小程序之数据传递

特定元素上的数据获取

这种情况最常见于点击某个对象，通过获取该对象的id请求api获取该对象的详细数据。我们来看一下如何获取点击对象的数据。

事先准备：先建两个页面hello和world，通过点击hello页面上的按钮跳转到world页面。

数据获取步骤：

• 对组件通过data-xxx="xxx"赋值
• 通过event.currentTarget.dataset.xxx或event.target.dataset.xxx获值

今天继续介绍接触到的内容。

新建文件

上次说到了手动新建四种类型文件，然后在app.json里注册。其实小程序提供给我们一种快捷的新建文件的方式——直接在app.json里注册完保存，就能直接生成文件。
优点：快；
缺点：一不小心写错保存后需要删除重建或重命名。

简介

微信小程序，是一种不需要下载安装即可使用的应用。理论上是不需要下载，但实际还是会下载的，只是因为它的体积太小了（限制在1m），跟我们平时浏览大网页没什么区别，因此我们感觉不到而已。

入门

安装

1. 首先去官网中的工具页面下载开发者工具。

2. 打开开发者工具，选择“本地小程序项目”,创建项目，本人无AppID，选“无AppID”选项，没有id的话，很多东西会受限制。个人也申请不了id，想哭。

3. 填写完项目信息，可以选择勾不勾选quick start选项，选了它会帮你自动创建，没选就需要自己手动创建文件。我先不选。

生成项目文件

首先使用vue-cli生成一个项目，假设项目名为hello

1

vue init webpack hello

注意！本来使用eslint来检查代码格式是挺好的，但我发现使用了之后，安装jq插件会出现一堆问题，所以我们先不安装eslint，当然先安装也可以，后面也还可以设置。这里我们先添加。

最近安装一些npm包的时候，有些需要添加--save-dev，二有些需要添加--save，而有些呢则直接npm install。这些到底有什么区别呢？

举个例子，我用vue-cli构建了一个webpack项目，项目目录下有个package.json文件，我们打开这个文件看一下。
可以看到文件中有dependencies和devDependencies这两个字段。通过网上查阅资料，知道了devDependencies里的是用于开发环境的，即我们平时开发时用的，dependencies里的是用于生产环境的，即我们开发完上线时需要的。

好，接下来我们就来说一下npm install不同的结果。
假设我们有个npm包名字叫hello吧。

1. npm install hello

• 会把hello包安装到node_modules目录中
• 不会修改package.json
• 之后运行npm install命令时，不会自动安装hello

2. npm install hello –save

• 会把hello包安装到node_modules目录中
• 会在package.json的dependencies属性下添加hello
• 之后运行npm install命令时，会自动安装hello到node_modules目录中

3. npm install hello –save-dev

• 会把hello包安装到node_modules目录中
• 会在package.json的devDependencies属性下添加hello
• 之后运行npm install命令时，会自动安装hello到node_modules目录中

总结

只是开发时需要用到的就--save-dev，比如eslint等，而上线后仍然需要用到的就--save，比如jquery等。

最近几天想把毕设的基本工作做好。因为我和Parter做的是一个网购比价网站，他使用的是mongodb作为数据库，而我也不用怎么操作数据。我打算使用前后端分离来完成项目，后端获取数据，传递json数据到前端，前端展示这些数据就ok了。所以我的第一步当然是尝试从后端获取数据。Parter给我提供了一个远程mongdb的地址，工作开始。

Mongodb

数据库的安装

官网，找到下载页，选择合适的版本下载。安装时，自定义路径，我使用的是D:\mongodb。

创建文件

数据库安装完，需要自己手动建几个文件。在数据库根目录下，建两个目录data、logs，并在data下建db目录，在logs下建mongod.log文件。结构如下

1
2
3
4
5
6

-mongodb
    -bin
    -data
        -db
    -logs
        mongod.log

因为学习vue的视频讲解使用的是1.x的版本，而vue-cli当初默认下载的是vue2.0的版本，所以在学习过程中，会发现有许多东西都发生了改变，今天我就写一下我遇到的问题以及如何解决。

模板

1.x允许

1
2
3
4

<template>
  <div class="one"></div>
  <div class="two"></div>
</template>

但2.0会报错，它只允许只有一个父元素，所以应该

1
2
3
4
5
6

<template>
  <div>
    <div class="one"></div>
    <div class="two"></div>
  </div>
</template>

接触git有一段时间了。关于学习git，我主要是看廖雪峰老师的官网git教程。

Git:分布式
SVN:集中式