1、什么是node.js

它是可以运行javascript的服务平台
        可以把它当做一门后端程序，只是它的开发语言是Javascript
2.Python：自己创建的服务
       php:apache
       java:tomcat
      node.js:express

3、安装及使用：
      安装的地址：http://www.nodejs.cn
4、特性：
    （1）：非阻塞IO 模型
    （2）：事件驱动
5、运行的场景：
      高并发低业务

  实时场景

聊天、电子商务、视频直播
6、安装步骤：
     先下载
     在按shift+右键，打开cmd
     npm -v 判断nodejs安装成功
     node -v 检查版本，看是否安装成功
     进入编辑模式：node+回车
可以进行一些运算
    退出编辑模式：ctrl+d ctrl+c（2次）

npm是一个包管理器，使用它来安装：
    首先进行项目的初始化：npm init 或者(快速初始化用 npm init -y)
    npm install 包的名字(express) --save -dev
    npm install express  --save-dev:把依赖包增加到开发环境下

 npm install express
    npm install express --save：把依赖包增加到运行环境下

在引用文件下，在js中加./代表同级目录

登录页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width">

    <title>Title</title>

    <script src="jquery.js"></script>

    <style>

        span{

            color: red;

        }

    </style>

</head>

<body>

<div>

    <form action="" method="post">

        <p>用户名：<input type="text" placeholder="username" id="username"></p>

        <p>密码：<input type="password" placeholder="password" id="password"></p>

        <input type="submit" value="提交" onclick="login()">

        <span></span>

    </form>

</div>

<script>

    function login() {

        var username = $("#username").val();

        var password = $("#password").val();

        var url = "http://localhost:8080/login";

        console.log(username,password);

        $.post(url, {username,password}, function (response) {

            console.log(response);

            if (response){

                $("span").html("登陆成功")

            }else{

                $("span").html("登录失败")

            }

        })

    }

</script>

</body>

</html>

登录

var express = require("express"); //引用包

var query = require("querystring");

var app = express();  //初始化

app.listen("",function () {  //监听

    console.log("服务已经启动，端口是8080")

});

var data2="";

app.post(

  '/login',

  function (request,response) {

      response.header("Access-Control-Allow-Origin", "*");

      request.on("data",function (datas) {   //接收用户发来的数据,里面的data是不变的，就得叫data

          data2 = "";

          // console.log(datas)  ;

                                // >这样打印的结果是Buffer 类型的，所以我们得拼接一下,用querystring这个模块转成字符串

          data2+=datas;

      });

      request.on("end",function () {  //接收用户发来的数据之后开始解析

          console.log(query.parse(data2));  //{ username: 'mqj', password: '' }

          var username = query.parse(data2).username;

          var password = query.parse(data2).password;

          if (username == "mqj" && password == ""){

              response.send(true)//如果登录成功就把数据返回给前端

          }else{

              response.send(false)

          }

      })

  }

);

server.js

7、express框架：
     express:它是基于node.js平台的web应用框架，灵活方便，能够快速创造出服务端应用程序 npm install express --save-dev

8、webpack:它是一个模块管理器
       a、它可以把CSS js图片当做模块来处理
       b、它可以把以上的这些文件

       c、可以安装一些插件，对插件进行打包处理

       d、根据模块之间的依赖关系进行分析，按需加载

9、创建vue的项目
         a、npm install vue-cli -g   全局安装

webpack -v   查看是否安装成功

        a.js

        webpack a.js /test/a2.js    手动打包

            vue init webpack myproject   项目的名字
            cd myproject
            npm install
            npm run dev
      b、 组件：它是可扩展的html
             里面包括：<template></template>
            <script></script>
            <style></style>
10、vue 框架的特性：能够实现热重载
     import和require的区别：
     import一定要放在文件的顶部
         它相当于一个指针引用文件，并没有把文件包含进来，需要调用文件时才引入
     require:
         可以放在文件中的任何位置
         它是把文件直接包含进来
11、设置文件路由的流程：
    a、建立组件（.vue的文件）
    b、配置路由（index.js文件中配置）
    c、<router-link></router-link>
    d、<router-view></router-view>
    e、import包名form"组件路径"
    f、comonents进行注册
vue-resource:实现异步加载数据(已经弃用)
axios:实现异步加载数据
Vue组件的生命周期：
  (1)定义vue对象并实例化
  (2)执行created函数
  (3)编译模板，只会编译template的模板
  (4)把HTML元素渲染到页面当中
   (5)执行mounted函数，（加载）相当于onload

  (6)、如果有元素的更新，就执行update函数

  (7)、销毁实例

VUE-node.js的更多相关文章

  1. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  2. 小白学习VUE第二课：环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  3. mongodb & vue & node.js

    mongodb mongodb & vue & node.js https://docs.mongodb.com/manual/tutorial/install-mongodb-on- ...

  4. 基于Vue+node.js的个人博客

    前言 作为一个年轻的程序员,而且是作为一个未来的前端工程师,怎么能没有一个属于自己的博客呢,于是乎在暑假咸鱼了一个多月后开始了我的博客的编写. 技术栈 前端 vue.js+scss  因为当时没学vu ...

  5. Vue+node.js+express+mysql实例---对图书信息进行管理

    一个简单的 CURD 实例 ---对图书信息进行管理 目录 1 开发环境 1.1 前端开发环境 1.2 后端开发环境 2 数据库设计和创建 2.1 数据库和表设计 2.2 book 表设计 2.3 s ...

  6. Vue node.js商城-购物车模块

      一.渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){   return {      car ...

  7. Vue+node.js实现一个简洁的个人博客系统

    本项目是一个用vue和node以及mysql实现的一个简单的个人博客系统,整体逻辑比较简单.但是可以我们完整的了解一个项目从数据库到后端到前端的实现过程,适合不太懂这一块的朋友们拿来练手. 本项目所用 ...

  8. vue+node.js+webpack开发微信公众号功能填坑——组件按需引入

    初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...

  9. 对www.518shengmao.com站资源打包，采用vue Node.js

    最近闲游时间比较多,于是想搞个网站练练手,首先选域名在godday里选了个518shengmao.com,买了个1元的阿里云服务器,接下来程序了. 采用vue+nodejs来开发的 一.NodeJs环 ...

  10. element-ui + vue + node.js 与 服务器 Python 应用的跨域问题

    跨越问题解决的两种办法: 1. 在 config => index.js 中配置 proxyTable 代理: proxyTable: { '/charts': { target: 'http: ...

随机推荐

  1. Spring+SpringMVC+MyBatis+easyUI整合优化篇

    优化篇 Spring+SpringMVC+MyBatis+easyUI整合优化篇(一)System.out.print与Log Spring+SpringMVC+MyBatis+easyUI整合优化篇 ...

  2. 在实战中使用Sass和Compass

    第三章 无需计算玩转CSS网格布局 3.1 网格布局介绍 3.2 使用网格布局 3.2.1 术语 1 术语名 定义 是否涉及HTML标签 2 列 内容度量的垂直单位 否 3 容器 构成一个网格布局的H ...

  3. 学习笔记-express路径问题

    在页面渲染成功之后,报错出现静态文件css样式引用路径出错,于是我就根据express api文档,托管静态文件作出修改,最后全是徒劳.于是我又从引用开始找起,<link rel="s ...

  4. 【Java学习笔记之十四】Java中this用法小节

    用类名定义一个变量的时候,定义的只是一个引用,外面可以通过这个引用来访问这个类里面的属性和方法. 那们类里面是够也应该有一个引用来访问自己的属性和方法纳? 呵呵,JAVA提供了一个很好的东西,就是 t ...

  5. 一步一步从原理跟我学邮件收取及发送 3.telnet命令行发一封信

    首先要感谢博客园管理员的及时回复,本系列的第二篇文章得以恢复到首页,这是对作者的莫大鼓励.说实在的本来我真的挺受打击的.好在管理员说只是排版上有些问题,要用代码块修饰下相关的信息.说来惭愧因为常年编码 ...

  6. Logstash+Kibana部署配置

    Logstash是一个接收,处理,转发日志的工具.支持系统日志,webserver日志,错误日志,应用日志,总之包括所有可以抛出来的日志类型. 典型的使用场景下(ELK): 用Elasticsearc ...

  7. android组件化方案、二维码扫码、Kotlin新闻客户端、动画特效等源码

    Android精选源码 CalendarView日历选择器 android下拉刷新动画效果代码 一个非常方便的fragment页面框架 android组件化方案源码 Zxing实现二维码条形码的扫描和 ...

  8. 解决Perhaps you are running on a JRE rather than a JDK?问题

    Maven-No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JD ...

  9. cesium编程入门（三）开始使用cesium开发

    搭建最简的开发环境 这一节来搭建一个最简单的能运行的helloworld,以后的代码也会在这一节的基础上慢慢增加 创建文件夹 mkdir cesium-test cd cesium-test 引入编译 ...

  10. ItemCF_基于物品的协同过滤_MapReduceJava代码实现思路

    ItemCF_基于物品的协同过滤 1.    概念 2.    原理 如何给用户推荐? 给用户推荐他没有买过的物品--103 3.    java代码实现思路 数据集: 第一步:构建物品的同现矩阵 第 ...