Mysql简单基础

进入数据库:

mysql -u root

创建数据库：

CREATE DATABASE mysql_shiyan;

查看数据库：

show databases;

连接数据库：

use mysql_shiyan;

删除数据库:

DROP DATABASE 数据库名字;

查看数据表：

show tables;

新建数据表：

CREATE TABLE 表的名字
(
列名a 数据类型(数据长度),
列名b 数据类型(数据长度)，
列名c 数据类型(数据长度)
)

重命名数据表：

RENAME TABLE 原名 TO 新名字; ALTER TABLE 原名 RENAME 新名; ALTER TABLE 原名 RENAME TO 新名;

删除数据表：

DROP TABLE 表名字;

数据表增加一列：

ALTER TABLE 表名字 ADD 列名字 数据类型 约束;
ALTER TABLE 表名字 ADD 列名字 数据类型 约束 AFTER 列1;(加入到列1后面,FIRST则为加入在第一列)

数据表删除一列：

ALTER TABLE 表名字 DROP 列名字;

数据表重命名一列：

ALTER TABLE 表名字 CHANGE 原列名 新列名 数据类型 约束;

数据表改变数据类型：

ALTER TABLE 表名字 MODIFY 列名字 新数据类型;

数据表修改表中某个值：

UPDATE 表名字 SET 列1=值1,列2=值2 WHERE name=”Tom”;

数据表删除一行记录：

DELETE FROM 表名字 WHERE name=”Tom” ;

数据类型：

数据类型 大小(字节) 用途 格式
INT 4 整数
FLOAT 4 单精度浮点数
DOUBLE 8 双精度浮点数
ENUM 单选,比如性别 ENUM(‘a’,’b’,’c’)
SET 多选 SET(‘1’,’2’,’3’)
DATE 3 日期 YYYY-MM-DD
TIME 3 时间点或持续时间 HH:MM:SS
YEAR 1 年份值 YYYY
CHAR 0~255 定长字符串
VARCHAR 0~255 变长字符串
TEXT 0~65535 长文本数据

插入数据：

INSERT INTO 表的名字( 列名a, 列名b, 列名c) VALUES (值1,值2,值3);

约束分类：

约束类型： 主键 默认值 唯一 外键 非空
关键字： PRIMARY KEY DEFAULT UNIQUE FOREIGN KEY NOT NULL

基本的SELECT语句：

SELECT 要查询的列名(*号为查询全部) FROM 表名字 WHERE 限制条件;

1.数学符号查询：

SELECT name,age FROM employee WHERE age>25; (查出age>25的数据)
SELECT name,age,phone FROM employee WHERE name=’Mary’; (查出一个name=”Mary”的数据)

2.“AND”与“OR”：

SELECT name,age FROM employee WHERE age<25 or="" age="">30;(查出一个小于25或大于30，AND是与)

3. IN 和 NOT IN：

SELECT name,age,phone,in_dpt FROM employee WHERE in_dpt IN (‘dpt3’,’dpt4’); (查询 in_dpt 为 dpt3 或 dpt4的人)
SELECT name,age,phone,in_dpt FROM employee WHERE in_dpt NOT IN (‘dpt1’,’dpt3’); ( 查询 in_dpt 既不是 dpt1 又不是 dpt3 的信息)

4.通配符：

SQL中的通配符是 和 % 。其中 代表一个未指定字符，% 代表不定个未指定字符。
SELECT name,age,phone FROM employee WHERE phone LIKE ‘1101__’;(查询开头为1101,后面两位未定义的数据)
SELECT name,age,phone FROM employee WHERE name LIKE ‘J%’;(查询名字为J开头的)

5.对结果排序：

ORDER BY的结果是升序排列，而使用关键词ASC和DESC可指定升序或降序排序。
SELECT name,age,salary,phone FROM employee ORDER BY salary DESC;(按salary字段降序排列)

6.SQL 内置函数和计算：
函数名： COUNT SUM AVG MAX MIN
作用： 计数 求和 求平均值 最大值 最小值
7.子查询：(嵌套)

SELECT cust_id
FROM orders
WHERE order_num IN (SELECT order_num
FROM orderitems
WHERE prod_id = “TNT2”); (嵌套查询)

8.连接查询：

SELECT id,name,people_num
FROM employee,department
WHERE employee.in_dpt = department.dpt_name
ORDER BY id;

或者使用JOIN ON
SELECT id,name,people_num
FROM employee JOIN department
ON employee.in_dpt = department.dpt_name
ORDER BY id;

视图：

CREATE VIEW 视图名(列a,列b,列c) AS SELECT 列1,列2,列3 FROM 表名字;

导入：

LOAD DATA INFILE ‘文件路径和文件名’ INTO TABLE 表名字;

导出：

SELECT 列1，列2 INTO OUTFILE ‘文件路径和文件名’ FROM 表名字;

备份：

mysqldump -u root mysql_shiyan(数据库名 表名字) > bak.sql(备份文件名);

恢复：

mysql -u root 数据库名 < bak.sql(备份的文件名);

gulp简单笔记

安装

新建配置文件

init ```
1
入口文件``` entry point ``` 为 ``` gulpfile.js

全局安装gulp
安装gulpfile.js require的所有依赖(gulp-imagemin要使用npm安装 防止压缩报错)

gulpfile.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var gulp = require('gulp'),
	less = require('gulp-less'),
	cleanCSS = require('gulp-clean-css'),   //压缩css
	changed = require('gulp-changed'),
	ugLify = require('gulp-uglify'),
	concat = require('gulp-concat'),
	imagemin = require('gulp-imagemin'),//压缩图片  
	pngquant = require('imagemin-pngquant'), // 深度压缩  
	browserSync = require("browser-sync").create();

// 实时编译less
gulp.task('less', function () {
	gulp.src(['src/less/*.less'])
		.pipe(less())
		.pipe(cleanCSS())   //压缩css
		.pipe(gulp.dest('src/css'))
});

// 压缩js
gulp.task("script", function () {
	gulp.src(['js/zepto.min.js', 'js/swiper.jquery.min.js'])
		.pipe(changed('src/js', { hasChanged: changed.compareSha1Digest }))
		.pipe(concat('index.js'))
		.pipe(ugLify())
		.pipe(gulp.dest('src/js'))
		.pipe(browserSync.reload({ stream: true }));
});

// 压缩图片  
gulp.task('images', function () {
	gulp.src('src/images/*.{png,jpg,gif}')
		.pipe(imagemin({
			progressive: true,
			svgoPlugins: [{ removeViewBox: false }],//不要移除svg的viewbox属性
			use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
		}))
		.pipe(gulp.dest('src/img'))
		.pipe(browserSync.reload({ stream: true }));
});

//启动热更新  
gulp.task('serve', function () {
	gulp.start('script', 'less'); //开启没有解压images
	browserSync.init({
		port: 2017,
		server: {
			baseDir: ['src']
		}
	});
	gulp.watch('src/js/*.js', ['script']);         //监控文件变化，自动更新  
	gulp.watch('src/less/*.less', ['less']);
	gulp.watch('src/images/*.{png,jpg}', ['images']);
});

gulp.task('default', ['serve']);

启动

gulp

MongoDB的简单使用

启动

在命令行下进入MongoDB\bin目录(dbpath后面为数据库的位置)

1
mongod --dbpath E:\MongoDB\data

默认地址为： http://localhost:27017/

使用

在node中安装mongoose

1
npm install mongoose --save

引入并连接数据库

1
2
var mongoose = require('mongoose')
var db = mongoose.connect('mongodb://localhost:27017')

Schema

Schema用来定义数据库文档结构，数据库有什么字段、字段是什么类型、默认值、主键之类的信息。

1
2
3
4
5
6
7
8
9
10
var blogSchema = new mongoose.Schema({
    title:  String,
    comments: [{ body: String, date: Date }],
    date: { type: Date, default: Date.now },
    hidden: Boolean,
    meta: {
        votes: Number,
        favs:  Number
  }
})

如需再添加数据，用add方法。

1
blogSchema.add( { author: String, body: String} );

Model

1
var blogModel = mongoose.model(blogSchema);

增

1
2
3
4
5
6
7
blogModel.create({
    title: '增加'
    ...
}, function(err, data){
    if(err) console.log(err)
    console.log(data)
})

增加多条数据：

1
2
3
4
5
6
7
blogModel.insertMany([
    {title: "mongoose1", author: "L"}, 
    {title: "mongoose2", author: "L"}
    ], function(err, data){
        if(err) console.log(err);
        console.log(data);
});

返回一条数据：

1
[Model.findOne([conditions], [projection], [options], [callback])]

查

1
2
3
4
blogModel.find({title: "Mongoose"}, {title: 1}, function(err, data){
    if(err) console.log(err);
    console.log(data);
})

查找title为Mongoose的数据，仅返回字段为title的值

改

1
2
3
4
blogModel.update({title: "Mongoose"}, {author: "L"}, {multi: true}, function(err, docs){
    if(err) console.log(err);
    console.log('更改成功：' + docs);
})

查找title为Mongoose的数据，把author数据该为L，支持多行修改

一次更新多条：

1
[Model.updateMany(conditions, doc, [options], [callback])]

一次更新一条：

1
[Model.updateOne(conditions, doc, [options], [callback])]

删

1
2
3
4
blogModel.remove({author: "L"}, function(err, data){
    if(err) console.log(err);
    console.log(data);
})

删除author为L的数据

(简书笔记搬运 写于2017.09.12 23:36)

webpack的简单配置(一)

开始

首先生成一个项目 npm init
安装webpack以及webpack-dev-server

1
npm install webpack webpack-dev-server --save-dev

(由于使用了之前的老静态页面做练习,只是简单的打包了css,js以及一些静态文件)
需要安装的依赖有:css-loader、style-loader、extract-text-webpack-plugin(该插件可以使散落的css文件打包成一个css,在首页使用link引入)、file-loader、url-loader、webpack-merge、html-webpack-plugin(用于生成html模板)

然后在package.json文件的script中配置开启以及打包的内容

1
2
"dev": "webpack-dev-server  --open  --config  webpack.config.js"
"build": "webpack --progress --hide-modules --config build.js"

在这里需要创建两个文件:一个是webpack.config.js以及build.js

在webpack.config.js文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
    entry: {
        main: './main'
    },
    output: {
        path: path.join(__dirname, './distdoc'),
        publicPath: '/distdoc/',
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                	publicPath: './',
                    use: 'css-loader?minimize',
                    fallback: 'style-loader'
                })
            },
            {
		test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
		loader:'url-loader?limit=1024&name=distdoc/[hash].[ext]'
	     }
        ]
    },
    plugins: [
        new ExtractTextPlugin('main.css')
    ]
};

module.exports = config;

在这里需要在配置css中加上publicPath: ‘./‘ 让css中的资源地址为相对路径，css-loader后面加上minimize使打包后的css代码压缩，入口文件为当下的main.js，需要配置main.js，出口文件则配置为distdoc文件夹下面的main.js(自动生成)

在main.js中 把我们需要打包编译的文件加上

1
2
3
4
5
6
import './css/reset.css'
import './css/index.css'
import func from './js/func.js'
import JSONdate from './js/JSONdate.js'
func();
JSONdate();

后面的js文件 我们使用export default function …()的方法将其导出

最后在需要打包的build.js文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.config')

webpackBaseConfig.plugins = []

module.exports = merge(webpackBaseConfig, {
	output: {
		publicPath: '/distdoc/',
		filename: '[name].js'
	},
	plugins: [
		new ExtractTextPlugin({
			filename: '[name].css',
			allChunks: true
		}),
		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: '"production"'
			}
		}),
		new webpack.optimize.UglifyJsPlugin({ 
			compress: {
				warnings: false
			}
		}),
		new HtmlWebpackPlugin({
			filename: '../index_pro.html',
            template: './index.html',
            inject: false
		})
	]

})

我们将其打包的文件为index_pro.html，模板为index.html，配置webpack.optimize.UglifyJsPlugin让打包后的js代码压缩
(简书笔记搬运 写于2017.09.03 01:48)

Vue组件学习笔记

Vue父组件向子组件传递数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="app">
    <my-component :init-count="count"></my-component>
</div>
<script>
    const Child = {
    props: {
          initCount: Number
    },
    template: '<div>{{ count }}</div>',
    data () {
         return {
             count: this.initCount
         }
     },
     methods: {
          change () {
              this.count = 2;
          }
      }
    };
    new Vue({
        el: '#app',
        components: {
            'my-component': Child
        },
        data: {
            count: 1
        }
    });
</script>

这里子组件里的:init-count指的是props中的initCount，其对应的值是count(父组件中的count)，指定是Number类型。

Vue的is特性

包括自定义元素和特殊标签，如、

使用v-model进行组件通讯

子组件接受一个value属性，在有新的value时触发input事件，在子组件接受父组件的方法时，使用watch来监听接收的value的变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div id="app">
    {{ value }}
    <my-com v-model="value"></my-com>
    <button @click="handleMinus">-1</button>
</div>
<script>
    Vue.component('my-com', {
        props: {
            value: {
                type: Number
            }
        },
        template: '<div>{{ currentValue }}<button @click="handleClick">+1</button></div>',
        data () {
            return {
                currentValue: this.value
            }
        },
        watch: {
            value (val) {
                this.currentValue = val;
            }
        },
        methods: {
            handleClick () {
                this.currentValue ++;
                this.$emit('input', this.currentValue);
            }
        }
    });
    new Vue({
        el: '#app',
        data: {
            value: 1
        },
        methods: {
            handleMinus () {
                this.value --;
            }
        }
    });
</script>

slot用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
    <app>
        {{ message }}
    </app>
</div>
<script>
    Vue.component('app', {
        template: '<div>Hello<slot>来自子组件的slot默认内容</slot></div>',
        data () {
            return {
                message: '你好'
            }
        }
    });
    new Vue({
        el: '#app',
        data: {
            message: 'world'
        },
        mounted(){
            this.$slots.default;
        }
    });
</script>

原本app的message为world，我们需要在子组件中使用slot标签显示父组件中的message，当app中没有内容的时候，就会显示slot标签中的默认内容。
多个slot用法：使用具名方法，在app标签中则对应显示

里面的内容。
访问slot：在vue2.0中，使用$slots来访问，单个slot时default为默认，使用具名时则填写对应的具名。

内联模板
1
2
3
<com1 inline-template>
    <!-- 内容 -->
</com1>

当组件使用了inline-template后，内容 将不再是 slot ，而是这个 com1 组件的 template ，也就是会渲染出内容。

手动挂载
1
2
3
4
5
6
7
8
9
<div id="app">
    Hello Vue
</div>
<script>
    const myComponent = Vue.extend({
        template: '<div>from extend</div>'
    });
    new myComponent().$mount('#app');
</script>

使用$.mount()手动挂载到div中

vue-router技巧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const router = new Router({
    mode: 'history',
    routes : [
    {
        path: '/index',
        meta: {
            title: '首页'
        },
        component: (resolve) => require(['./index.vue'], resolve)
    },
    {
        path: '*',
        redirect: '/index'
    },
    {
         path: '/',
         component: {
             default: Defaultvue, //这里是默认路由
             title: Title
         } 
     }]
});
router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
});
router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
});

1.这里设置了history模式,官方上给出的介绍是:vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
2.设置path:’*’,没有匹配到的路由,将跳转到’/index’中
3.使用router.beforeEach改变其网页的title,使用next();进入到下一个钩子当中
4.使用router.afterEach让跳转后的回到页面顶部
5.component里的default:默认路由写法对应视图中同时有两个 其中一个为 没有则为默认

新版vue-cli本地服务器加载本地资源

1.在webpack.dev.conf.js文件

portfinder 
1
2
3
4
5
6
```
const express = require('express')
const app = express()
var appData = require('../mock/goods.json')
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

2.在

``` 对象中写入传输地址
1
2
3
4
5
6
```
    before(apiRoutes) {
      apiRoutes.get('/api/goods', function(req, res, next) {
        res.json(appData)
      })
    }

使用过滤器以及计算属性

1
{{ text | filterA }}

通过Vue实例添加选项filters来设置:

1
2
3
4
5
filter: {
	filterA: function (value) {
		return value++  //返回过滤后的数据
	}
}

计算属性:

1
{{ reversedText }}

在Vue实例computed选项中:

1
2
3
4
5
computed: {
  reversedText: function () {
    return this.text.split(',').reverse().join(',') //返回data内text属性修改后的内容
  }
}

(简书笔记搬运 写于2017.06.29 13:45)