如何把传统写法改成框架形式 es6http://www.expressjs.com.cn/

每天思考的问题: 1.什么是组件 2.什么是插件 3.如何把传统写法改成框架形式 4.前端为什么要使用框架,使用框架的好处是什么?

Image.png

http://www.zhihu.com/question/20888075

http://cn.vuejs.org/guide/components.html#u4EC0_u4E48_u662F_u7EC4_u4EF6_uFF1F

https://coding.net/

阿里的服务器: https://ecs-buy.aliyun.com/#/prepay

https://ecs-buy.aliyun.com/#/prepay

https://www.aliyun.com/price/product/?spm=5176.ecsPrepay.instance.1.tq3O0R#/ecs/calculator

Image.png

怎么样判断上次已经有了就不需要绑定了,只需要数据就行

Image.png

事先准备一个对象,为空判断是否存在;存在,修改数据,不存在,在创建一个。app第一次声明后,第二次就不需要声明,在外面声明的,是全局变量。

Image.png

删除页面结构: 维护项目的时候会非常困难;哪些地方有关联; ================================ 组件component 定义一个元素的名字,用js去解析它;

Image.png

Image.png

把组件拿到凡客的项目里面 哪个标签上的HTML代码不会解析它: 定义好了并不想放到全局里面,只想给自己的实例使用; ========================================== ==========================================

require(["vue"],function(Vue){

                  // 定义
                  // 扩展组件
                  var MyComponent = Vue.extend({
                       data : function(){
                            return {
                                "list" : ["a","b","c"]
                            }
                       },
                       // 定义组件展示的内容
                       template: '<div v-on:click="test_click">'+
                            '<p v-for="item in list">{{item}}</p>'+
                       '</div>',
                       methods : {
                            "test_click" : function(){
                                 alert(11111);
                            }
                       }
                  })
                  
                  // 创建根实例
                  new Vue({
                       el: '#example',
                       //定义为局部组件
                       components : {
                            'first_com' : MyComponent
                       }
                  });
                  
                  new Vue({
                       el : "#demo",
                       //定义为局部组件
                       components : {
                            'first_com' : MyComponent
                       }
                  });
             });

Image.png

解构赋值: 用三个变量来接收三个元素: 根据数组元素的下标对应赋值:

Image.png

三个点是省略的意思,元素,数组

Image.png

对象的解构赋值: es6的新语法:

Image.png

调 用的模块只用其中的一个 方法: 用解构赋值只取其中的一个呗:

=================== 循环: of.js 使用数组的时候不要使用for in?

Image.png

打印了原型链上的奇怪的东西

Image.png

of循环子元素,而不是下标

Image.png

set.js数组: 保存数组的完整性,就不会添加重复的值; 只返回元素,不返回下标

Image.png

三个点,直接变成数组

Image.png

多添加几个数

Image.png

使用解构赋值,将set对象转换为array;

set是数组,map是对象:

Image.png

=======

Image.png

Image.png

Image.png

{
  "name": "node_web",
  "version": "1.0.0",
  "description": "node wechat",
  "main": "server/app.js",
  "scripts": {
    "test": "node server/app.js"
  },
  "author": "svon@svon.org",
  "license": "ISC"
}

Image.png

1.搭建网站的模块:

npm install express --save

Image.png

2.处理node.js里post请求的数据:

npm install body-parser --save

Image.png

3.HTML的高级语法:

npm install swig --save

Image.png

http://www.expressjs.com.cn/

Image.png

//导入express模块:

const express=require("express");

//实例化express:

const app=express();

请求路由地址,如果是post,就会触发:

Image.png

监听什么端口,这里就写什么端口;

Image.png

三个语法:在浏览器中,在node.js中运行:

amd cmd commonjs

Image.png

把一个目录当做一个静态文件的根目录: 访问的路由是配置的路由地址开头的都能访问;

app.use("/view",express.static("./views"));

//监听本机端口号,运行服务

const server

如何测试:

Image.png

Image.png

//导入express模块

const express = require('express');

//实例化express

const app     = express();

//系统模块

const path    = require("path");
const Swig    = require('swig');
const swig    = new Swig.Swig();

//声明get 请求,路由是/

app.get('/',function(req,res){
       res.send('hello world');
})

//声明post 请求是路由是/abc/

app.post("/abc/",function(req,res){
       res.send("hello post");
});
//app.engine('html', swig.renderFile);
//app.set('views',"./views");
//app.set('view engine', 'swig');

//把一个目录当做一个静态文件服务的根目录 //访问的路由是配置的路由地址开头的都能访问

app.use("/views",express.static(path.join(__dirname,"../views")));

//__dirname 系统变量,当前文件路径

//console.log(path.join(__dirname));

//监听本机端口号,运行服务

const server = app.listen(9000,function(){
       var host = server.address().address;
       var port = server.address().port;
       console.log('http://%s:%s',host,port);
});

Image.png

Image.png

不用重启服务,都可以更新了

Swig.setDefaults({
    cache : false //不缓存文件
});

Image.png

ajax有异步,会延迟的:字符块{%header%}

Image.png

Image.png

Image.png

项目重构完成

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阿炬.NET

Less学习笔记

2907
来自专栏C语言及其他语言

C语言中的预处理

1、 宏定义 预处理命令可以改变程序设计环境,提高编程效率,它们并不是 C 语言本身的组成部分,不能直接对 它们进行编译,必须在对程序进行编译之前,先对程序中...

3216
来自专栏PHP在线

WordPress的可拓展性初探(二)

作者:西瓜玩偶(racnil070512 at hotmail dot com) 上一篇文章介绍了如何设计数据库,从而达到可拓展性的目的。下面的篇幅将介绍在P...

33712
来自专栏北京马哥教育

ansible之playbook功能简述

playbooks剧本简介 playbooks是ansible更为强大的配置管理组件,实现基于文本文件编排执行的多个任务,且多次重复执行。其是使用YAML(Ye...

3465
来自专栏HTML5学堂

Javascript解析机制 执行机制

HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助! jav...

2844
来自专栏Astropeak

Python:怎样用线程将任务并行化?

1787
来自专栏程序员互动联盟

【编程基础】聊聊C语言-兵马未动粮草先行(2)

上一篇我们讲了C语言预处理阶段的宏定义,知道了C语言中宏定义的处理和使用。现将上篇关于宏的问题的答案公布如下: 用宏定义一个字符串常量 #define str ...

3074
来自专栏Golang语言社区

GO语言异常处理机制panic和recover分析

Golang 有2个内置的函数 panic() 和 recover(),用以报告和捕获运行时发生的程序错误,与 error 不同,panic-recover 一...

3168
来自专栏程序员同行者

Linux三剑客之sed

1052
来自专栏深度学习之tensorflow实战篇

pycharm 或者其他Python IDE不支持中文编码的解决方案

Python的自带编辑器IDLE或者Python Shell在默认情况下都不支持中文编码,若在脚本程序中出现中文,则会出现一定的错误。 原因: 因为Python...

3024

扫码关注云+社区