node day2 vue read html
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的更多相关文章
- 使用Node，Vue和ElasticSearch构建实时搜索引擎
(译者注:相关阅读:node.js,vue.js,Elasticsearch) 介绍 Elasticsearch是一个分布式的RESTful搜索和分析引擎,能够解决越来越多的用例. Elasticse ...
- Node.js/Vue环境搭配安装
http://blog.sina.com.cn/s/blog_497ff1a70102x0sw.html 第一次接触Node.js,想创建自己的服务就须配置好Node.js环境 安装Node.js 下 ...
- 用node+webpack+vue新建vue项目步骤
1. 安装node,命令行输入node-v命令查看是否安装成功. 2. 安装vue:npm install vue-cli -g(全局安装). 3. 在想要创建vue项目的目录下,按住shift+右键 ...
- node,npm,vue的全局升级
pc环境:windows 10, OS:win32, Arch:x64 1.升级node.js到最新 ⑴.别人成功的方法: . 第一步 npm -g install n //此处可以加上 --forc ...
- Vue笔记：使用node开发vue入门实例
安装NPM 首先在命令终端输入 npm -v 检测是否安装 npm.如果没有,按照下面教程进行安装. 下载地址: nodejs中文网 到官网下载自己系统对应的版本,这里我们下载Windows系统的64 ...
- node与vue结合的前后端分离跨域问题
第一点:node作为服务端提供数据接口,vue使用axios访问接口, 安装axios npm install axios --save 安装完成后在main.js中增加一下配置: import ax ...
- Linux下Jenkins与GitHub自动构建Node项目(Vue)
根据上篇文章<Linux下Jenkins与GitHub自动构建NetCore与部署>,我们知道了Jenkins的强大功能,自动构建,部署了一个NetCore的Web,让开发人员专注于开发, ...
- node+mysql+vue+express项目搭建
第一步:项目搭建之前首先需要安装node环境和MySQL数据库. 在已经完成上述的条件下开始进行以下操作: npm install @vue/cli -g (-g 代表全局安装) 初始化项目 v ...
- wangeditor富编辑器在node和vue前后台分离的使用
本来是想用百度的ueditor编辑器来达到想要的功能的,但在使用中,感觉前后台分离上,需要引入的东西过多,不轻量:然后就去尝试用wangeditor(这个名字听着感觉有点太随意的感觉....但功能上还 ...
随机推荐
- 一: DRF web应用框架基础,及序列化器的使用
---恢复内容开始--- 一: web 应用模式(有两种) 1: 前后端不分离(前端从后端直接获取数据) 2: 前后端分离 二: api 接口 原因一: 为了在团队内部形成共识.防止个人习惯差异引起的 ...
- leecode第一百六十题（相交链表）
/** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...
- Yahoo Programming Contest 2019 F - Pass
F - Pass 思路: dp[i][j] 表示到第 i 个球为止放了 j 个蓝球的方案数 第 i 个球来自的位置的最右边是min(i, n) 转移方程看代码 代码: #pragma GCC opti ...
- h5设计图尺寸
640 标准的话 设计图: 640*1136 body,html 背景图的话需要640*1008的 这样才能整屏刚刚好 750 标准的话 设计图: 750*1334 body,html背景图的话,75 ...
- (17)线程队列---queue LifoQueue PriorityQueue
线程常用队列有: queue LifoQueue PriorityQueue 语法: 大致和进程队列语法一致 put 往队列当中放值,超过队列长度,直接加阻塞 get 如果获取不到加阻塞 put_no ...
- double 类型转化为Integer
(1)把double先转化成int类型 Double reseve3=Double.parseDouble(bddet[0].getReserve3()); int b=reseve3.intValu ...
- python-html基础操作
介绍: HTML 是网页内容的载体.包括文字,图片,信息等用户浏览的信息CSS 样式是改变内容外观表现.像字体,颜色,背景,边框等JavaScript 是实现网页上的特效效果.如鼠标滑过背景 ...
- SWUST OJ(963)
小偷的背包 #include<stdio.h> #include<stdlib.h> int s, flag, n, *a; //主函数之外定义的变量为全局变量 void df ...
- 通用Mapper环境下，mapper接口无法注入问题
写了一个mapper接口 package com.nyist.mapper; import com.nyist.entity.User; import tk.mybatis.mapper.common ...
- 使用VMware新建一个Linux系统虚拟机（全）
我们将其分为两步,1:新建虚拟机:2:安装Red Hat Enterprse Linux 6操作系统 1.首先我们新建一个虚拟机,先不安装操作系统,稍后再对其安装Linux系统. 新建虚拟机步骤如下: ...