Node.js入门
概述
服务端程序：可以实现spring,springmvc,servlet这些服务端代码。环境：下载–>安装–>配置环境变量(自动配置)验证：cmd打开–>输入node -v–>回车，如果出现以下图片，则安装成功。
简单使用一(一般不用)如下图：
退出：Ctrl+C按两下
简单使用二
找目录新建hello.js文件输入以下代码：
console
.log(1+2);
测试：cmd进入当前目录：输入：nonde hello.js–>回车，出现以下结果：
函数使用：
上述步骤，输入代码：
var result
=add(1,2);
console
.log(result
);
function add(a
,b
){
return a
+b
;
}
测试：cmd进入当前目录：输入 node hello1.js–>回车，出现以下结果：
模块化编程示例
test1.js里是函数，test2.js中调用test1.js中的add函数
test1.js代码
exports
.add=function(a
,b
){
return a
+b
;
}
test2.js中代码：
var func
=require('./test1');
var result
= func
.add(1,2);
console
.log(result
);
测试：输入node test2.js–>回车，有以下结果则正确：
node.js开发服务端代码：
参考官网说明文档：新建server.js文件，代码如下：
var http
=require('http');
http
.createServer(function(request
,response
){
for(var i
=0;i
<10;i
++){
response
.write("hello word....+i");
}
response
.end("end...");
}).listen(9999);
console
.log('服务已经开启，请在浏览器输入:ip:9999');
测试：浏览器地址输入：localhost:9999 回车，如果看到以下图片，则正确
关闭服务：Ctrl+C再次访问localhost:9999，无法访问(因为已经关闭)
node.js开发服务端代码传参数：
server1.js文件代码：
var http
=require('http');
var url
=require('url');
http
.createServer(function(request
,response
){
for(var i
=0;i
<10;i
++){
response
.write("hello word....+i");
}
response
.write("\n");
var params
=url
.parse(request
.url
,true).query
;
response
.write(params
.name
);
response
.write("\n");
response
.write(params
.age
);
response
.end("end...");
}).listen(9999);
console
.log('服务已经开启，请在浏览器输入:ip:9999?name=张三&age=23');
开启服务：node server1.js测试：输入：http://localhost:9999/?name=张三&age=23 回车
NPM与webpack
NPM使用
NPM使用： 一.找个目录，打开cnd进入该目录–>输入npm init -->一路回车–>生成package.json(相当于pom.xml) 二.package.json中内容如下：
{
"name": "test1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
npm下载包
安装
当前目录输入：npm install express如果上述比较慢：输入npm install expressnpm install -g cnpm -registry=http://registry.npm.taobao.org然后输入：cnpm install express本计算机全局下载：cnpm install jquery -g
webpack使用
概述：将js css等静态资源压缩，提高效率。
安装webpack:cnpm install webpack -gcnpm install webpack-cli -g测试：webpack -v
打包测试
配置文件：ewbpack.config.js:
var path
=require('path');
moudle
.exports
={
entry
:'.test/test1.js',
output
:{
path
:path
.resolve(__dirname
,'.dist'),
filename
:'bundle.js'
}
}
VUE使用
v-model:实现数据双向绑定
网站：https://cdn.staticfile.org/vue/2.2.2/vue.min.js
示例：
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8" />
<title
></title
>
</head
>
<body
>
<div id
="fir">
用户名：
<input type
="text" v
-model
="name" />
<h1
>{{name
}}</h1
>
</div
>
<script type
="text/javascript" src
="js/vue.min.js"></script
>
<script
>
new Vue({
el
: '#fir',
data
:{
name
:'zs'
}
})
</script
>
</body
>
</html
>
DomListener:数据监听(绑定)
v-html=" "v-text=" "v-bind:src=" “等价于：:src=” "(给标签绑定数据)v-on:click=“method(‘zs’)”@click=“test(’'ls)”
vue结构
结构内容
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
></title
>
</head
>
<body
>
<div id
="test">
用户名：
<input type
="text" v
-model
="username" /> 地址：
<input type
="text" v
-model
="useraddress" />
<input type
="text" v
-model
="info" />
<button v
-on
:click
="show()">点击测试
</button
>
</div
>
<script type
="text/javascript" src
="js/vue.min.js"></script
>
<script
>
var vm
= new Vue({
el
: "#test",
data
: {
username
: "张三",
useraddress
: "宝鸡"
},
methods
: {
show() {
alert(1);
}
},
computed
: {
info() {
return this.username
+ "," + this.useraddress
;
}
},
watch
: {
username
: function(value
) {
this.username
= value
;
}
}
});
vm
.$watch('username', function(value
) {
this.username
= value
;
});
</script
>
</body
>
</html
>
样式绑定
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
></title
>
<style
>
.ba
{
background
-color
: red
;
}
</style
>
</head
>
<body
>
<div id
="test">
<div
:class="css1">vue样式绑定
</div
>
</div
>
<script type
="text/javascript" src
="js/vue.min.js"></script
>
<script
>
new Vue({
el
: "#test",
data
: {
css1
: "ba"
}
});
</script
>
</body
>
</html
>
v-for循环显示并删除/需改
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
></title
>
</head
>
<body
>
<div id
="test">
<ul
>
<!--在js中data的数据user中循环，循环的每一项是u，他的下标是index，序号是index
-->
<li v
-for="(u,index) in user" :key
="index">
{{u
.name
}}----{{u
.address
}}-----<input type
="button" value
="删除" @click
="deleteById(index)" />----<input type
="button" value
="修改" @click
="updateUserById(index,{name:'zs',address:'bj'})" />
</li
>
</ul
>
</div
>
<script type
="text/javascript" src
="js/vue.min.js"></script
>
<script
>
new Vue({
el
: "#test",
data
: {
user
: [{ name
: '张三', address
: '宝鸡' }, { name
: '李四', address
: '西安' }, { name
: '赵六', address
: '上海' }, { name
: '钱起', address
: '北京' }, { name
: '张三', address
: '宝鸡' }]
},
methods
: {
deleteById(index
) {
this.user
.splice(index
, 1);
},
updateUserById(index
,user
){
this.user
.splice(index
,1,user
);
}
}
});
</script
>
</body
>
</html
>
事件与传播行为
事件获取value的值
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
></title
>
</head
>
<body
>
<div id
="test">
<input type
="button" value
="按钮1" @click
="show"/>
<!--event：vue内置对象
-->
<input type
="button" value
="按钮2" @click
="show1($event)"/>
</div
>
<script type
="text/javascript" src
="js/vue.min.js" ></script
>
<script
>
new Vue({
el
:"#test",
data
:{
},
methods
:{
show(event
){
alert(event
.target
.value
);
},
show1(event
){
alert(event
.target
.value
);
}
}
});
</script
>
</body
>
</html
>
propogation事件的传播行为 阻止：@click.stop=" "
<a href
="https://www.baidu.com" @click
.prevent
>百度
</a
>
使用vue绑定表单输入与vue声明周期
意义：如果前端向后端传递form表单，不用一个一个获取表单中的数据，而一次性的将表单作为一个对象传递到后台。
使用vue绑定表单
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
></title
>
</head
>
<body
>
<div id
="test">
<form action
="" @submit
.prevent
="mysubmit">
用户名：
<input type
="text" v
-model
="user.name" /><br
/> 密码：
<input type
="text" v
-model
="user.pwd" /><br
/> 性别：
<input type
="radio" value
="男" v
-model
="user.sex" />男
<input type
="radio" value
="女" v
-model
="user.sex" />女
<br
/> 住址：
<select v
-model
="user.address">
<!--循环遍历vue中optionCities定义好的地址
-->
<option
:value
="c.id" v
-for="c in optionCities">{{c
.name
}}</option
>
</select
><br
/> 爱好：
<input type
="checkbox" value
="羽毛球" v
-model
="user.hobby" /> 羽毛球
<input type
="checkbox" value
="篮球" v
-model
="user.hobby" />篮球
<input type
="checkbox" value
="乒乓球" v
-model
="user.hobby" /> 乒乓球
<br
/>
<input type
="submit" value
="注册" />
</form
>
</div
>
<script type
="text/javascript" src
="js/vue.min.js"></script
>
<script
>
new Vue({
el
: "#test",
data
: {
user
: {
name
: '',
pwd
: '',
sex
: '男',
address
: '',
hobby
: ''
},
optionCities
: [{ id
: 1, name
: '西安' }, { id
: 2, name
: '上海' }, { id
: 3, name
: '广州' }]
},
methods
: {
mysubmit() {
alert(JSON.stringify(this.user
));
}
}
});
</script
>
</body
>
</html
>
过滤器：过滤日期
例如：将一个日期过滤成另一个日期(事件格式化)
引入：moment.js
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
></title
>
</head
>
<body
>
<div id
="test">
{{now
| dataFilter
}}
</div
>
<script type
="text/javascript" src
="js/vue.min.js" ></script
>
<script type
="text/javascript" src
="js/moment.js" ></script
>
<script
>
Vue
.filter('dataFilter',function(value
,dateFormat
='YYYY-MM-DD HH:mm:ss'){
return moment(value
).format(dateFormat
);
});
new Vue({
el
:"#test",
data
:{
now
:new Date()
}
});
</script
>
</body
>
</html
>
自定义指令
注意：比如：v-text-upper:定义时只需写text-upper。使用时v-test-upper 指令分为：局部指令和全局指令
自定义全局指令(在整个js代码域注册)
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="UTF-8">
<title
></title
>
</head
>
<body
>
<div id
="test">
<!--myText：从vue中的data中获取数据
-->
<p v
-text
-upper
="myText"></p
>
</div
>
<script type
="text/javascript" src
="js/vue.min.js" ></script
>
<script
>
Vue
.directive('text-upper',function(el
,binding
){
el
.innerHTML
=binding
.value
.toUpperCase();
});
new Vue({
el
:"#test",
data
:{
myText
:'hello word'
}
});
</script
>
</body
>
</html
>
自定义局部指令(在一个vue对象内部定义)
vue脚手架vuecli的安装与启动
脚手架：模板/客户端
安装脚手架
找一个目录—>打开cmd进入该目录—>执行：npm install -g vue-cli下载模板：vue init webpack my_vue_cli(my_vue_cli为默认工程名，不能有大写字母)cmd进入工程根目录文件夹—>执行：npm run dev(启动服务)这时会看到： 浏览器输入：http://localhost:8080会看到以下，说明成功
关闭服务：Ctrl+C
vue项目开发完成后
静态服务 概述：当开发人员开发完毕后，进行打包（生成dist），交给实施人员
运行：npm run buile（相当于java—>war）进行打包—>dist dist给实施人员时：实施人员需要安装服务组件：npm install -g server 然后运行指令：server dist
动态服务：tomcat 1.在vue项目中的webpack.prod.conf.js中output配置：publicpath:/myvue/ 2.进行打包 3.将dist拷贝到tomcat中webapps目录下，修改dist文件名为myvue。 4.启动tomcat
