VUE-node.js

2018-06-18 00:59:57来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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("8080",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: '123' }
          var username = query.parse(data2).username;
          var password = query.parse(data2).password;
          if (username == "mqj" && password == "123"){
              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)、销毁实例

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Python3 的字典

下一篇:【Python—windows 下 virtualEnv 使用】