app.js

var http = require("http");

var fs = require('fs');

var url = require('url');

http.createServer(function(request, response) {

    // 解析请求，包括文件名

    var pathname = url.parse(request.url).pathname;

    // 输出请求的文件名

    console.log("Request for " + pathname + " received.");

    // 从文件系统中读取请求的文件内容

    fs.readFile(pathname.substr(), function(err, data) {

        if (err) {

            console.log(err);

            // HTTP 状态码: 404 : NOT FOUND

            // Content Type: text/plain

            response.writeHead(, { 'Content-Type': 'text/html' });

        } else {

            // HTTP 状态码: 200 : OK

            // Content Type: text/plain

            response.writeHead(, { 'Content-Type': 'text/html' });

            // 响应文件内容

            response.write(data.toString());

        }

        //  发送响应数据

        response.end();

    });

}).listen();

console.log('Server running at http://127.0.0.1:8888/index.html');

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--这是我们的View-->

        <div id="app">

            <p>{{ message }}</p>

            <input type="text" v-model="message" />

        <h1>Hello, Vue.js!</h1>

        <h1 v-if="yes">Yes!</h1>

        <h1 v-if="no">No!</h1>

        <h1 v-if="age >= 25">Age: {{ age }}</h1>

        <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>

    </div>

</body>

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

<script>

    // 这是我们的Model

    var exampleData = {

        message: 'Hello World!',

        yes: true,

        no: false,

        age: ,

        name: 'keepfooljack'

    }

    // 创建一个 Vue 实例或 "ViewModel"

    // 它连接 View 与 Model

    new Vue({

        el: '#app',

        data: exampleData

    })

</script>

</html>

node day2 vue read html的更多相关文章

  1. 使用Node，Vue和ElasticSearch构建实时搜索引擎

    (译者注:相关阅读:node.js,vue.js,Elasticsearch) 介绍 Elasticsearch是一个分布式的RESTful搜索和分析引擎,能够解决越来越多的用例. Elasticse ...

  2. Node.js/Vue环境搭配安装

    http://blog.sina.com.cn/s/blog_497ff1a70102x0sw.html 第一次接触Node.js,想创建自己的服务就须配置好Node.js环境 安装Node.js 下 ...

  3. 用node+webpack+vue新建vue项目步骤

    1. 安装node,命令行输入node-v命令查看是否安装成功. 2. 安装vue:npm install vue-cli -g(全局安装). 3. 在想要创建vue项目的目录下,按住shift+右键 ...

  4. node,npm,vue的全局升级

    pc环境:windows 10, OS:win32, Arch:x64 1.升级node.js到最新 ⑴.别人成功的方法: . 第一步 npm -g install n //此处可以加上 --forc ...

  5. Vue笔记：使用node开发vue入门实例

    安装NPM 首先在命令终端输入 npm -v 检测是否安装 npm.如果没有,按照下面教程进行安装. 下载地址: nodejs中文网 到官网下载自己系统对应的版本,这里我们下载Windows系统的64 ...

  6. node与vue结合的前后端分离跨域问题

    第一点:node作为服务端提供数据接口,vue使用axios访问接口, 安装axios npm install axios --save 安装完成后在main.js中增加一下配置: import ax ...

  7. Linux下Jenkins与GitHub自动构建Node项目(Vue)

    根据上篇文章<Linux下Jenkins与GitHub自动构建NetCore与部署>,我们知道了Jenkins的强大功能,自动构建,部署了一个NetCore的Web,让开发人员专注于开发, ...

  8. node+mysql+vue+express项目搭建

    第一步:项目搭建之前首先需要安装node环境和MySQL数据库. 在已经完成上述的条件下开始进行以下操作: npm install @vue/cli -g   (-g 代表全局安装) 初始化项目  v ...

  9. wangeditor富编辑器在node和vue前后台分离的使用

    本来是想用百度的ueditor编辑器来达到想要的功能的,但在使用中,感觉前后台分离上,需要引入的东西过多,不轻量:然后就去尝试用wangeditor(这个名字听着感觉有点太随意的感觉....但功能上还 ...

随机推荐

  1. 【BZOJ2301】Problem B

    Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. Input 第一行一个整数 ...

  2. 【CentOS 7】CentOS7与CentOS6 的区别

    前言 centos7与6之间最大的差别就是初始化技术的不同,7采用的初始化技术是Systemd,并行的运行方式,除了这一点之外,服务启动.开机启动文件.网络命令方面等等,都说6有所不同. 一.系统初始 ...

  3. UVA11019 Matrix Matcher

    思路 AC自动机匹配二维模式串的题目 因为如果矩形匹配,则每一行都必须匹配,考虑对于一个点,设count[i][j]记录以它为左上角的与模式矩形大小相同的矩形中有多少行和模式矩形匹配 然后把模式矩形的 ...

  4. 解决Intellij IDEA中console窗口中文乱码的问题

    配置完tomcat之后,测试运行时,中文是乱码,如下图(自己忘截图了,图源网络,看水印) 网上其他的修改方法我就不说了,至少我试了一个都没用. 下面两个方法也是网上的,在此总结一下: 1.在idea. ...

  5. js Array​.prototype​.reduce()

    例子: , , , ]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 ...

  6. Java GC机制中Minor GC/Full GC

    Minor GC Young GC Full GC Major GC https://blog.csdn.net/chenleixing/article/details/46706039 内存划分为 ...

  7. Asp.net core 学习笔记 (AutoMapper)

    参考 : http://www.cnblogs.com/xishuai/p/3700052.html http://www.cnblogs.com/xishuai/p/3704435.html htt ...

  8. fastDfs V5.02 升级到 V5.08版本后，启动报错：symbol lookup error: /usr/bin/fdfs_trackerd: undefined symbol: g_current_time

    /libfastcommon-1.0.36 # ./make.sh cc -Wall -D_FILE_OFFSET_BITS=64 -D_GNU_SOURCE -g -O3 -c -o hash.o ...

  9. 基于Xshell使用密钥方式连接远程主机

    基于Xshell使用密钥方式连接远程主机 连接远程主机,就验证身份而言,一般有两种方式,一种是通过用户密码:另一种通过公钥的方式(Public Key). 图1 xshell支持验证登录用户的方式 下 ...

  10. [spring源码] 小白级别的源码解析ioc（二）

    之前一篇,整体描述了一下 Spring的整体概况和 jar包的介绍. 现在开始进入具体的源码解析,从本篇开始,先介绍spring的ioc容器.之前也看过一些介绍spring源码的, 有的是只讲整体的接 ...