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. Django---->视图(View)

    视图层之路由配置系统(views) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个 ...

  2. CSS3阴影 box-shadow的使用总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  3. Scrum已经俘获中国开发者的心? ——从《2017年开发者调查报告》看真相！

    云栖社区通过为期两个月,对7032份有效调查问卷分析统计,2017年12月发布了首份<2017中国开发者调查报告>.报告显示,37.3%的开发者表示,协作工具主要来自企业内部自研的协作工具 ...

  4. Vue-cli搭建完项目，各文件解释

    脚手架vue-cli搭建完成后,会生成一些文件,总结学习一下这些文件是做什么用的:1.一级目录: build和config文件夹是wbepack配置的文件夹: node_modules是在我npm i ...

  5. UEP-树和表

    Model Select:表格要展示的数据Tree DataSource:树的数据源数据源是自定义java类实现接口:ITreeRetriever创建根节点.判断子节点.创建子节点 --数据源 pac ...

  6. ASP.NET没有魔法——ASP.NET MVC路由

    之前的文章中介绍了My Blog文章维护功能的开发,开发过程中使用Area的方法建立了用于维护文章的Controller.View和Model.但是无论代码怎么变对于浏览器来说都是通过一个url地址去 ...

  7. TypeScript装饰器（decorators）

    装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上,可以修改类的行为. 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被 ...

  8. iOS钉钉远程打卡助手(支持越狱和非越狱)

    前言:本文主要讲述使用hook方式实现钉钉远程打卡功能,涉及到tweak相关知识,如果你不想了解具体实现细节可直接到我的Github地址参考安装(包含越狱和非越狱两种方法)   你是不是像小编一样每个 ...

  9. Map，List，POJO深拷贝(序列化实现)方法与注意事项

    转载请注明出处,谢谢! 方法1: /*jdk >= 1.5*/ @SuppressWarnings("unchecked") public static <T> ...

  10. phpstudy最新版中php5.6版报错