1. 初始化

1. npm init -y
2. 安装express npm install express --save
3. 安装Express 应用生成器
   • npm install express-generator -g，安装在全局的话，可以直接express调用
   • npm install express-generator --save-dev，这样只安装在了当前目录，可以这样调用./node_modules/express-generator/bin/express-cli.js
4. ./node_modules/express-generator/bin/express-cli.js -h，查看express的功能
5. ./node_modules/express-generator/bin/express-cli.js -f -e，创建一个模版
6. npm install，安装依赖（就是package.json里的dependencies下的东西）
7. npm start（就是执行package.json下的start），访问http://localhost:3000/，也可以PROT=4000 npm start这样端口号就是4000
8. bin目录里的www是网站的入口，它会调用app.js(入口 )，app.js通过中间件(app.use())设置路由，路由放在routes目录下，路由可以通过req.query得到查询参数

2. MVC

• C:routes

router.get('/', function(req, res, next) {
  console.log(req.query)  //url的查询参数
  res.render('index', { title: 'Express' });
  //渲染到views里的东西
});

• V:views

3. 中间件

var app = express();

// 没有挂载路径的中间件，应用的每个请求都会执行该中间件
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();  //进入下一个中间件
});

// 挂载至 /user/:id 的中间件，任何指向 /user/:id 的请求都会执行它
app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 路由和句柄函数(中间件系统)，处理指向 /user/:id 的 GET 请求
app.get('/user/:id', function (req, res, next) {
  res.send('USER');  //发送请求，中间件执行结束
  //若没有next，则请求不会再往下传了
});  

可以用中间件进行页面跳转

var usersRouter = require('./routes/users');
app.use('/users', usersRouter);

4. 路由

若你请求的是文件，例如css：/stylesheets/style.css，则在app.js里有static方法，从而得到文件，app.js不会再往下执行

app.use(express.static(path.join(__dirname, 'public')));

这一句会把请求的路径和目录和文件匹配，若有这个文件则返回文件

5. 配置webpack

1. 去官网看配置，在根目录创建webpack.config.js文件，并在package.json的scripts里加上"webpack": "webpack --config=webpack.config.js"，在命令行运行npm run webpack看webpack是否配置成功
2. webpack配置成功后，安装onchange，npm install --save-dev onchange，在scripts里添加"watch": "onchange 'src/**/*.js' 'src/**/*.less' -- npm run webpack"，在命令行运行npm run watch，这样会监听src目录下所有js和less文件，改变了之后会自动运行npm run webpack

6. toast

用到jQuery的fadeIn()、fadeOut()

toast.prototype = {
    createToast() {
        let tpl = '<div class="toast">'+ this.msg +'</div>'
        this.$toast = $(tpl)
        $('body').append(this.$toast)
    },
    showToast(){
        let self = this;
        this.$toast.fadeIn(300,function () {
            setTimeout(function () {
                self.$toast.fadeOut(300,function () {
                    self.$toast.remove()
                })
            },self.dismissTime)
        })
    }
}

7. Less

@color: black  //自定义一个叫@color的颜色

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

//嵌套
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { 
    &:hover { border-width: 1px }
    //&代表自己
  }
}

//还可以计算
h1{
  @fontSize * 2
}

8. 在全局引入jQuery

在webpack.config.js里添加一个resolve属性和plugins属性

module.exports = {
  resolve: {
     alias: {
      jquery: path.join(__dirname, "src/js/lib/jquery.js"),   
      //若以jquery开头，则会引用这个路径的东西
      mod: path.join(__dirname, "src/js/mod"),    
      //若以mod开头，则会引用这个路径的东西
      less: path.join(__dirname, "src/less")  
      //若以less开头，则会引用这个路径的东西
      //引用时`require('less/toast.less')`
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery"
    }),  //相当于在每个文件写了个let $ = require('jquery')
  ]
}

1. $(selector).fadeIn(300,function(){} )

2. $(selector).fadeOut(300,function(){})

这两个jquery的API，淡入和淡出，第一个参数是时间，第二个参数是淡入淡出执行完后执行的函数

3. $(selector).outerWidth()

1. width()方法用于获得元素宽度；
2. innerWidth()方法用于获得包括padding的元素宽度
3. outerWidth()方法用于获得包括padding和border的元素宽度
4. outerWidth(true)方法用于获得包括padding、border和margin的元素宽度

4. $(selector).each(function(index){})

$('li').each(function( index ) {
    console.log( index + ": " + $(this).text() );
});

5. $.each()

$.each([52, 97], function(index, value) {
  alert(index + ': ' + value);
});

//0: 52 
//1: 97

6. $("body").data()

我们可以在一个元素上设置不同的值，之后获取这些值：

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
 
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

7. done和fail

相当于promise.then里的resolve和reject

$.post().done(function(){
    console.log('执行完成');
})
.fail(function(){
    console.log('执行失败');
});

8. $.extend()

var object1 = {
    apple: 0,
    banana: { weight: 52, price: 100 },
    cherry: 97
};
var object2 = {
    banana: { price: 200 },
    durian: 100
};

// Merge object2 into object1
let a = $.extend( object1, object2 );

将object2的属性都合并到object1，并返回object1，和Object.assign是一样的？

9. 安装less-loader、css-loader、less、less-loader

1. npm install --save-dev css-loader
2. npm install style-loader --save-dev
3. npm install less-loader --save-dev
4. npm install less --save-dev
5. 在webpack.config.js里配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      }
    ]
},

10. 配置api

在app.js里写

var api = require('./routes/api');
app.use('/api', api);

然后在routes目录创建api.js

router.get('/notes',function(req,res,next){
    Note.findAll({raw: true}).then(function(notes){
        console.log(notes)
        res.send({status: 0, data: notes})
    })
})

这样发送get请求，url写'/notes'，相当于'/api/notes'，因为在app.js里配置了app.use('/api', api);，所以在api.js里写的所有路径前都会加上一个/api/

11. 数据库

1. 创建model目录，在model目录下安装
2. 安装sequelize：sudo cnpm install --save sequelize
3. 安装sqlite3：sudo npm install --save sqlite3
4. 在model目录下创建一个note.js文件，写上sequelize官网的配置然后导出note
5. 相关api

//找到所有备忘录
Note.findAll({raw: true}).then(function(notes){
        res.send({status: 0, data: notes})
    })

6. 配置好note.js文件后，在model目录下执行node note.js，创建数据库
7. 在api.js里导入note，用note里的api操作数据库

12. path

用path这个模块来包装路径，在需要用到路径的文件里写

let path = require('path')
path.join(__dirname, '../database/database.sqlite')
//dirname就是当前的路径
//相当于当前路径加上后面的路径

这样使用路径更安全

未完待续...