VUE-node.js
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的更多相关文章
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板
环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...
- mongodb & vue & node.js
mongodb mongodb & vue & node.js https://docs.mongodb.com/manual/tutorial/install-mongodb-on- ...
- 基于Vue+node.js的个人博客
前言 作为一个年轻的程序员,而且是作为一个未来的前端工程师,怎么能没有一个属于自己的博客呢,于是乎在暑假咸鱼了一个多月后开始了我的博客的编写. 技术栈 前端 vue.js+scss 因为当时没学vu ...
- Vue+node.js+express+mysql实例---对图书信息进行管理
一个简单的 CURD 实例 ---对图书信息进行管理 目录 1 开发环境 1.1 前端开发环境 1.2 后端开发环境 2 数据库设计和创建 2.1 数据库和表设计 2.2 book 表设计 2.3 s ...
- Vue node.js商城-购物车模块
一.渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){ return { car ...
- Vue+node.js实现一个简洁的个人博客系统
本项目是一个用vue和node以及mysql实现的一个简单的个人博客系统,整体逻辑比较简单.但是可以我们完整的了解一个项目从数据库到后端到前端的实现过程,适合不太懂这一块的朋友们拿来练手. 本项目所用 ...
- vue+node.js+webpack开发微信公众号功能填坑——组件按需引入
初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...
- 对www.518shengmao.com站资源打包,采用vue Node.js
最近闲游时间比较多,于是想搞个网站练练手,首先选域名在godday里选了个518shengmao.com,买了个1元的阿里云服务器,接下来程序了. 采用vue+nodejs来开发的 一.NodeJs环 ...
- element-ui + vue + node.js 与 服务器 Python 应用的跨域问题
跨越问题解决的两种办法: 1. 在 config => index.js 中配置 proxyTable 代理: proxyTable: { '/charts': { target: 'http: ...
随机推荐
- 385cc412a70eb9c6578a82ac58fce14c 教大家破解md5验证值
Md5密文破解(解密)可以说是网络攻击中的一个必不可少的环节,是工具中的一个重要"辅助工具".md5解密主要用于网络攻击,在对网站等进行入侵过程,有可能获得管理员或者其他用户的账号 ...
- 栈的存储结构的实现(C/C++实现)
存档 #include "iostream.h" #include <stdlib.h> #define max 20 typedef char elemtype; # ...
- Vijos P1786 质因数分解【暴力】
质因数分解 背景 NOIP2012普及组第一题 描述 已知正整数n是两个不同的质数的乘积试求出较大的那个质数. 格式 输入格式 输入只有一行包含一个正整数n. 输出格式 输出只有一行包含一个正整数p, ...
- Spider_Man_5.1 の Mongodb_安装
先安装: 环境Mac OS X 我是直接用brew来安装的,感觉这个包管理工具,很省心. 安装Homebrew:ruby -e "$(curl -fsSL https://raw.githu ...
- TP传输的两种模式
主动模式(active): 我们知道,FTP是由TCP封包的模式连接,TCP 这种封包由于需要经过 Server 端与 Client 端两边的『三次握手』之后,才能确定联机,也就是需要执行AC ...
- destoon 默认广告位代码
<img src="http://www.testinstrument.cn/skin/default/jiurong/img/banner.png" alt="& ...
- iOS 极光推送 如何点击推送消息跳转页面
假如你已经集成完了极光,恰好有这个问题不知如何解决,可以看看这篇文章,这篇是针对远程通知的,本地通知大同小异吧. 根据我项目的要求,极光推送跳转指定页面分为两种情况:app在后台情况和app在杀死的情 ...
- J.U.C JMM. pipeline.指令重排序,happen-before
pipeline: 现在的CPU一般采用流水线方式来执行指令.一个指令执行周期被分成:取值,译码,执行,访存,写会,更新PC若干阶段.然后,多条指令可以同时存在于流水线中,同时被执行,来提高系统的吞吐 ...
- windows安装xampp时出现,unable to realloc xxxxxxxx bytes
摘录自:http://blog.csdn.net/lz610756247/article/details/70842166 Windows虚拟内存的设置 问题描述:由于开启虚拟内存会导致硬盘IO性能下 ...
- c语言一个处理文本文件的例子
功能 读取一个文本文件,将其中的文本按规则转换为int数据,然后对数据进行处理.文本的格式类似36 565 233... 代码 #include <stdio.h> #include &l ...