1、axios下载
2、controller设置返回视图，通过http可以使用，但当请求使用的axios或ajax，axios是需要对返回值做处理的，不管controller返回什么值或什么视图，ajax拿到的都是数据，需要自行在success加上页面处理。即axios的跳转需要在返回值处理。
then(res => {
if(res.data.status==200){
window.location.href='index.html';
}else if(res.data.status=404){
this.msg='用户名或密码错误';
}
3、axios的post请求：
<div id="login">
用户名<input v-model="username"><br> 密码<input
v-model="password"><br>
<button v-on:click="login">登陆</button>
</div>
<script>
var app = new Vue({
el : '#login',
data : {
username : '',
password : ''
},
methods:{
login:function(event){
axios({
url: '/otr/login',
method: 'post',
data: {
username:this.username,
password:this.password
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
})
</script>
后端：
@PostMapping("/login")
@ResponseBody
public ResponseObj login(@RequestBody User user) {
ResponseObj resp = ResponseObj.batchSuccess();
return resp;
}
要点：
一，在new Vue({})中用axios访问controller，在axios中的data取new Vue({})中的data数据用this；
二，axiox中如果用get请求则用params存参数，如果用post请求则用data存放参数；
三，axiox默认Content-Type为application/json，controller用实体类接收，类名前还要加上@RequestBody注解。实体类可自定义，也可用JSONObject：
public String index(@RequestBody JSONObject params) {
String id=params.getString("id");
String date=params.getString("date");
｝
四、axios访问接口返回的对象在res.data里
参考：axios
4、访问上下文应直接到login.html页面，可设置接口：
@GetMapping("/")
public String toLogin() {
return "login.html";
}
5、为防止通过url跳过login访问其他页面，应设置拦截器，参考Springboot 拦截器配置，编写拦截器配置文件类并继承 WebMvcConfigurer类，并重写其中的方法 addInterceptors并且在主类上加上注解 @Configuration。
6、methods多个方法之间加逗号
7、mounted的使用
场景，对页面上的时间显示，需要每秒更新，需要对一个methods每秒执行一次，使用mounted
data : {
time:'',
date:''
},
mounted() {
this.$nextTick(() => {
setInterval(this.time_show, 1000);
})
},
methods:{
time_show:function(event){
var d = new Date();
var vYear = d.getFullYear();
var vMon = d.getMonth() + 1;
var vDay = d.getDate();
var h = d.getHours();
var m = d.getMinutes();
var se = d.getSeconds();
this.time=h+':'+m;
this.date=vYear+'/'+vMon+'/'+vDay;
}
}
8、在标签上使用v-if属性能控制标签的显示
<p v-if="test">test</p>
new Vue({
data:{
test:false
}
})
v-if 指令将根据表达式 test 的值(true 或 false )来决定是否插入 p 元素
注意data中的属性名不能带-
9、v-bind的缩写是：
10、在methods的方法中遍历data中的数组
data:{
options:[
{
value : 'v1',
label : 'l1'
},
{
value : 'v2',
label : 'l2'
}
]
},
methods:{
f1:function(e){
this.options.forEach(option => {
option.value;
option.label;
}
}
}
9、methods内的方法调用其他方法，使用this.方法名()
10、vue-router
场景：点击导航栏的一项时，在右侧显示相应的页面
引入：vue-router.js
使用：感谢vue-router使用1
感谢vue-router使用2
<router-link to="/welcome">welcome</router-link>
<router-view></router-view>
<script type="text/javascript">
var welcome=Vue.component('welcome', {
data(){
return{
title:'welcome'
}
},
methods:{},
template:'<div>ok</div>'
})
const routes=[
{path:'/welcome',component:welcome}
]
const router=new VueRouter({
routes
})
var app=new Vue({
el:'#all',
router
})
</script>
注意，路由出的组件，如果绑定了方法或者数据，应在子组件中定义，即在welcome中定义，而不是在app中定义
11、对于未登录就访问其他页面的请求进行拦截，转向登录页面
element-ui
1、使用element-ui需引入js与css文件，下载：
element-ui.js
element-ui.css
引入在html的head引入，
<head>
<script type="text/javascript" src="js/element-ui.js"></script>
<link rel="stylesheet" href="css/element-ui.css">
</head>
2、组件不生效
组件需要被Vue实例化，即需要将html部分用div包裹，并new Vue({el:’#id’})实例化div
3、必须有el-的结尾，即使input这类的不需要结尾的也要加上
<el-input v-model="username"></el-input>
4、两个new Vue的el不能是父子级关系
5、背景动态变色
body{
margin: 0;
padding: 0;
font-family: "Microsoft YaHei";
background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
background-size: 400%;
animation: bganimation 15s infinite;
}
@keyframes bganimation {
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
6、背景色透明度，仅背景透明，其他组件如输入框、按钮不透明
background-color:rgba(255,255,255,0.4);
/*前三个是rgb，最后一个0.4是透明度*/
7、使用图标组件不显示
F12提示/css/fonts/element-icons.woff net::ERR_ABORTED 404
答：下载两个icons文件，放在/css/fonts下即可
8、分组下拉选择框
<div id="app">
<el-select v-model="value" placeholder="请选择"> <el-option-group
v-for="group in options" :key="group.label" :label="group.label">
<el-option v-for="item in group.options" :key="item.value"
:label="item.label" :value="item.value"> </el-option> </el-option-group> </el-select>
</div>
new Vue({
el : '#app',
data : {
options : [ {
label : '热门城市',
options : [ {
value : 'Shanghai',
label : '上海'
}, {
value : 'Beijing',
label : '北京'
} ]
}, {
label : '城市名',
options : [ {
value : 'Chengdu',
label : '成都'
}, {
value : 'Shenzhen',
label : '深圳'
}, {
value : 'Guangzhou',
label : '广州'
}, {
value : 'Dalian',
label : '大连'
} ]
} ],
value : ''
}
})
注意<el-select>的v-model="value"以及data绑定的value不能舍去
9、<el-select>显示的是label，@change方法的event是value
methods:{
selected:function(event){
console.log(event)
}
}
10、使用DatePicker 日期选择器时，绑定的值默认格式：
Date Mon Feb 01 2021 00:00:00 GMT+0800 (中国标准时间)
需要yyyy-MM的格式，则在<el-date-picker>加上属性value-format，当选择器type="date"时，value-format="yyyy-MM-dd"，当选择器type="month"时，value-format="yyyy-MM"
11、el-container的el-aside默认width: 600px，且无法在css中设置，只能在标签上更改
<el-aside width="188px" id="leftMenu">侧边</el-aside>
CSS
1、设置背景图片
background-image:url(image/top_bg.png)
2、整体与网页边框的边距
body{
margin:0px;
}
3、背景图片过小导致重复
解决：background-repeat:no-repeat;
4、背景图片设置
background-image:url(../image/logo_xia.png);
background-repeat:no-repeat;/*图片不重复填充*/
background-position:98% 50%;/*图片位置，水平与垂直*/
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
