一、VUE生命周期
Created--->Vue： 对象创建完成触发的函数
二、缩写
v-bind---给属性赋值，缩写为 ：
v-on---事件绑定，缩写为@
缩写：
三、计算属性
computed中定义，以匿名函数形式实现数据的操作（计算），返回的值为计算的结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2></h2>
<button @click="addrow()">添加</button>
<p v-for="(s,i) in list">
名称: <input v-model="s.sname" placeholder="输入商品名称" />
价格: <input v-model="s.sprice" />
数量: <input v-model="s.snum" />
小计: <input v-model="s.smoney" readonly="readonly" />
</p>
</div>
</body>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
list: [],
},
methods: {
},
computed: {
//计算属性
/* smoney: function(){
return this.sprice*this.snum;
} */
}
})
</script>
</html>
四、统计购物车信息
总价格、总数量、添加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2></h2>
<button @click="addrow()">添加</button>
<p v-for="(s,i) in list">
名称: <input v-model="s.sname" placeholder="输入商品名称" />
价格: <input v-model="s.sprice" />
数量: <input v-model="s.snum" />
小计: <input :value="s.sprice*s.snum" readonly="readonly" />
<button @click="delrow(i)">删除</button>
</p>
总计: {{total}}￥ 共: {{count}}件
</div>
</body>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
list: [],
},
methods: {
//增加方法
addrow: function() {
/* 添加一个对象 */
this.list.push({
sprice: 0,
snum: 1
})
},
//删除方法
delrow(i) {
this.list.splice(i, 1)
},
},
computed: {
//计算属性
/* smoney: function(){
return this.sprice*this.snum;
} */
total() {
var sum = 0;
this.list.forEach(function(v, i) {
sum += v.sprice * v.snum
})
return sum;
},
count() {
var sum = 0;
this.list.forEach(function(v,i) {
sum += v.snum * 1;
})
return sum;
}
}
})
</script>
</html>
五、观察者---监听机制----实现复选框全选操作
监听数据的变化，从而执行的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input v-model="sprice" />
<hr >
<!-- 复选框全选 绑定单个值真和假 -->
<!-- 全选把数组内容交给爱好 -->
<input type="checkbox" v-model="qx" />全选
<p v-for="h in list">
<!-- 绑定数组 数据绑定-->
<input type="checkbox" v-model="hobby" :value="h" />{{h}}
</p>
{{hobby}}
</div>
</body>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
sprice: 0,
list: [
'游戏',
'音乐',
'书籍',
],
//默认不选
qx: false,
hobby: [],
},
watch: {
//观察谁写谁
sprice(newval,oldval){
//观察者监听模式
console.log(newval,oldval)
},
qx(newval){
//全选
if(newval){
this.hobby=this.list
}else{ //全不选
this.hobby=[]
}
}
}
})
</script>
</html>
六、axios实现ajax
跨越问题：ajax请求不同源---ip地址、端口、项目路径，不允许处理ajax请求
No 'Access-Control-Allow-Origin' header
原理：response设置安全的响应头
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
/** 设置响应头允许ajax跨域访问 **/
HttpServletResponse rp=(HttpServletResponse)response;
HttpServletRequest req=(HttpServletRequest) request;
rp.setCharacterEncoding("utf-8");
rp.setContentType("text/json;charset=utf-8");
req.setCharacterEncoding("utf-8");
String origin="*";
if(req.getHeader("Origin")!=null){
origin=req.getHeader("Origin");
}
rp.setHeader("Access-Control-Allow-Origin", origin);
rp.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
rp.setHeader("Access-Control-Max-Age", "3600");
rp.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, token");
rp.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(request, rp);
}sprintboot解决方案：
（1）实现跨域过滤器
在项目的主程序中增加以下代码：
@Bean
public CorsFilter corsFilter() {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true); // 允许cookies跨域
config.addAllowedOrigin("*");// 允许向该服务器提交请求的URI，*表示全部允许。。这里尽量限制来源域，比如http://xxxx:8080 ,以降低安全风险。。
config.addAllowedHeader("*");// 允许访问的头信息,*表示全部
config.setMaxAge(18000L);// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了
config.addAllowedMethod("*");// 允许提交请求的方法，*表示全部允许，也可以单独设置GET、PUT等
// config.addAllowedMethod("HEAD");
// config.addAllowedMethod("GET");// 允许Get的请求方法
// config.addAllowedMethod("PUT");
// config.addAllowedMethod("POST");
// config.addAllowedMethod("DELETE");
// config.addAllowedMethod("PATCH");
source.registerCorsConfiguration("/**", config);
System.out.println("----------跨域处理------------");
return new CorsFilter(source);
}（2）实现跨域拦截器
新建CrossInterceptor
@Configuration
public class CrossInterceptor implements WebMvcConfigurer {
//允许跨域请求
public void addCorsMappings(CorsRegistry registry) {
System.out.println("......跨域执行......");
registry.addMapping("/**")
.allowedHeaders("*")
.allowedOrigins("*")
.allowedMethods("GET","POST","PUT","OPTIONS")
.allowCredentials(true)
.maxAge(5000);
}
}七、axios多种参数传递方式
1、接收axios传递的json数据，必须加@RequestBody，单值无法接收
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
axios.post("http://localhost:9090/admin/insert",{aid:4,aname:4,apwd:4}).then(function(res){
if(res.data=="1"){
console.log("ok")
}else{
console.log("fail")
}
})
</script>
</body>
</html>
controller
@RequestMapping("/insert")
//json转换
public String insert(@RequestBody Admin a){
try {
System.out.println(a);
as.save(a);
return "1";
} catch (Exception e){
e.printStackTrace();
}
return "0";
}2、单值传递-----实现删除操作
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
axios.post("http://localhost:9090/admin/delete","aid=4").then(function(res){
if(res.data=="1"){
console.log("ok")
}else{
console.log("fail")
}
})
</script>
</body>
</html>
controller
@RequestMapping("/delete")
//单值获取
public String delete(String aid){
try {
System.out.println(aid);
as.removeById(aid);
return "1";
} catch (Exception e){
e.printStackTrace();
}
return "0";
}3、URLSearchParams方式传递单值和多值
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//URLSearchParams方式传参,不传json
/* var param = new URLSearchParams();
param.append("aid","1");
param.append("aname","任柏熙");
axios.post("http://localhost:9090/admin/selectOne",param).then(function(res){
console.log(res.data);
}) */
//批量删除
var param = new URLSearchParams();
param.append("aid",['5','6']);
axios.post("http://localhost:9090/admin/deleteList",param).then(function(res){
console.log(res.data);
})
</script>
</body>
</html>
controller
@RequestMapping("/selectOne")
public Admin selectOne(String aid){
return as.getById(aid);
}
@RequestMapping("/deleteList")
//批量删除
public String deleteList(String[] aid){
try {
as.removeByIds(Arrays.asList(aid));
return "1";
} catch (Exception e) {
e.printStackTrace();
}
return "0";
}