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. CSS颜色渐变

    一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...

  2. hdu_1015(dfs)

    题意:根据给出的计算公式,给一个n和一个字符集,问能不能在字符串集中找到不重复的五个字符,让其计算结果等于给定的n,如果有多个解输出字典序最大的一个 题解:dfs直接上代码了 code: #inclu ...

  3. Npm vs Yarn 之备忘大全

    有则笑话,如此讲到:"老丈人爱吃核桃,昨天买了二斤陪妻子送去,老丈人年轻时练过武,用手一拍核桃就碎了,笑着对我说:你还用锤子,你看我用手就成.我嘴一抽,来了句:人和动物最大的区别就是人会使用 ...

  4. App Doc View Frame中指针的获取

    // App中获取其它三项指针 void CSDIApp::OnApp() { // App // Doc CDocument *pDoc = ((CFrameWndEx *)m_pMainWnd)- ...

  5. 空数组在以下三种遍历中均不可更改：forEach、map和for...in

    首先,我们要知道对于forEach.map和for...in三种遍历,在不是空数组的情况下,要想实现更改原数组的方法,代码如下: var list = [1,2,3,4]; var list1 = [ ...

  6. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](六)

    前言 大家好,我是Rector 又是星期五,很兴奋,很高兴,很high...啦啦啦... Rector在图享网又和大家见面啦!!!上一篇<一步一步创建ASP.NET MVC5程序[Reposit ...

  7. WPF 简单的循环GIF播放

    //MVVM要事件绑定,记得项目引用类库“Sysrem.Windows.interactivity”,然后XAML引用 xmlns:i="http://schemas.microsoft.c ...

  8. LNMP安装Let’s Encrypt 免费SSL证书方法:自动安装与手动配置Nginx

    前几天介绍了最新StartSSL免费SSL申请与配置,很多人看到部落介绍SSL证书安装时总是推荐了OneinStack,因为OneinStack提供了一键添加和配置Let's Encrypt 免费SS ...

  9. css cursor属性-显示的光标的类型(形状)的用法和定义

    在网页布局的时候,在特定的地方,光标形状各有区别.这个时候,就需要用到css的cursor属性.根据自身需要选择设置鼠标指针样式. 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属 ...

  10. IOS成长之路-用NSXMLParser实现XML解析

    再次对xml进行解析,又有了些理解,如果有不对的地方,请给小弟指出,谢谢! <?xml version="1.0" encoding="UTF-8"?&g ...