Vue练手项目技术总结
源码已上传到gitee,如果感到对你有帮助,欢迎star一下~
通过css3实现的反转盒子登陆、注册界面
首先定义一个父盒子,两个子盒子,设置相同的尺寸、位置,使之重叠。
然后将登录盒子默认设置在上层,并将注册盒子沿y轴旋转90度
然后定义父盒子的透视属性,以及动画效果。
再定义一个vue中的数据isRotate,使其初始数据为false。
再定义一个旋转的css属性,使整个盒子沿y轴旋转负90度,并将其是否生效绑定给isRotate
最后再定义一个方法,使isRotate=!isRotate,将这个方法绑定在旋转按钮上,设置点击触发即可。
使用vuex保存登录状态
首先使用 npm install vuex --save-dev
全局安装vuex,定义一个store.js文件,在其中定义token,email,phone,name等属性以其读取和写入的方法,并将store.js引入main.js中,之后即可在组件中使用啦。
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
export default new Vuex.Store({
state:{
// 自定义的全局变量
token:"",
user_name:"",
user_phone:"",
user_email:""
},
getters:{
// 通过计算属性的方式,取得变量
getToken(state){
return state.token;
},
getName(state){
return state.user_name;
},
getPhone(state){
return state.user_phone;
},
getEmail(state){
return state.user_email;
}
},
mutations:{
// 方法,设置各种全局变量
setToken(state,currToken){
state.token = currToken;
},
setName(state,currUserName){
state.user_name = currUserName;
},
setEmail(state,currEmailNumber){
state.user_email = currEmailNumber;
},
setPhone(state,currPhoneNumber){
state.user_phone = currPhoneNumber;
},
clear(state){
state.token = "";
state.user_name = "";
state.user_password = "";
state.user_phone = "";
state.user_email = "";
}
}
})
常见使用方法:在登陆成功后,将后台返回的数据保存在store中。
login: function () {
if(this.loginVerify() == false) return;
axios.post("/WebApps/loginServlet",this.loginForm)
.then(response => {
if(response.data.code !== 200) {
//console.log(response);
this.$message.error('登陆失败!');
return;
}
this.$message.success("登陆成功!");
this.$store.commit('setName',this.loginForm.userName);
this.$store.commit('setPhone',response.data.data.phone);
this.$store.commit('setEmail',response.data.data.email);
this.$store.commit('setToken',response.data.data.token);
this.$router.push('/detail');
if(this.keepLogin != false){
sessionStorage.setItem('store', JSON.stringify(this.$store.state));
}
},
function(err) {
console.log(err);
}
);
},
解决跨域拦截
修改config文件夹下的index.js中的proxyTable属性,使用代理即可。
proxyTable: {
// 每当识别到javaweb时,会自动将其解析成http://123.57.143.40:8080/javaweb
'/javaweb':{
target:"http://123.57.143.40:8080/",
changeOrigin: true,
},
'/WebApps':{
target:"http://39.103.225.4:8080/",
changeOrigin: true,
}
},
大坑:在浏览器的开发者模式中,不能识别代理属性,浏览器会将’/javaweb’解析成’localhost:8088/WebAppps’,但实际代理访问的是’http://39.103.225.4:8080//WebAppps’,只不过浏览器不能识别而已,整整坑了我两天
前端md5加密
axios请求拦截器
每次使用axios发送请求前,都先判断store中是存有token,如果有的话,则先讲token写入请求头中。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if (store.state.token) {
config.headers.Authorization["token"] = store.state.token;
}
// console.log(store.state.token);
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
});
导航守卫
当用户想要跳转到登录界面以外的界面时,先验证store中是否存有用户的token,如果有则允许跳转,否则,跳转到登陆页面。
// 导航守卫
router.beforeEach((to,from,next) => {
// console.log(to);
// console.log(store.getters.gettoken());
// console.log(next);
// 如果有token值,放行
if(store.getters.gettoken() || to.path === '/'){
next();
}else{
// 如果没有token,则跳转到登陆页面
next({
path:'',
})
}
next();
})
后端接口使用
一般json、text返回值接口的使用
// 基本用法:
axios.get(地址,key=value&key2=value2)
.then(response => {
console.log(response);// 对response执行相应操作
},err => {
console.log(err);// 输出错误码
})
axios.post(地址,{key:value,key2:value2})
.then(response =>{
console.log(response);
},err => {
console.log(response);
})
当此类接口调用返回错误500时,一般是传入数据的json字段命名与后端获取的字段命名不相同。
验证码的接口使用
// 直接将img的src绑定到接口上
<img :src="WebApps/getCode" alt="验证码" title="点击图片切换验证码"
width="120px" height="50px" @click="getCheckCode"/>
// 图片切换函数
getCheckCode: function () {
const num = Math.ceil(Math.random()*10);
this.checkNodeNet = "WebApps/getCode" + "?" + num;
}
表格接口的使用
基本思路是:先定义一个与表格传给数据相同的空数组,然后将response的值赋给数组即可
data() {
return {
netData:[{
email:"",
id:"",
phone:"",
userName:""
}],
},
methods: {
//得到表格里的所有数据
getData:function () {
var that = this;
axios.post("WebApps/allInformation",{
token :that.$store.state.token
}).then(
function (response) {
that.netData = response.data.data;
},
function (err) {
console.log(err);
}
);
},
常用正则表达式
- ip地址:
/^\b((25[0-5]))|2[0-4]\d|[01]?\d\d)\.{3}(25[0-5])|[0-4]\d|[01]?\d\d?)\b$/
- 手机号:
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
- 邮箱:
/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9-.]+$/
- 用户名:
/^[\u4e00-\u9fa5a-zA-Z0-9]{5,30}$/
(5-30位中文、英文和数字字符)
其实根本用不到手写,elementUI自带强大的表单验证