极客观点
项目管理
HarmonyOS
此为注册界面
此为登陆界面
div样式我只在注册界面设置了，但是登录界面也莫名引用了
import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import axios from "axios";
import router from './router';
import qs from "qs";
import VueResource from 'vue-resource';
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd);
Vue.use(VueResource);
Vue.config.productionTip = false;
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
new Vue({
render: h => h(App),
router
}).$mount('#app')
router.beforeEach((to, from, next) => {
//var _this = this;
console.log(to);
console.log(from);
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if(localStorage.getItem('access_token')){ //判断本地是否存在access_token
next();
}else {
if(to.path === '/login'){
next();
}else {
next({
path:'/login'
})
//_this.$message.error('需要进行登录或者注册才能继续访问');
}
}
}
else {
next();
}
/*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
if(to.fullPath === "/login"){
if(localStorage.getItem('access_token')){
next({
path:from.fullPath
});
}else {
next();
}
}
});此为main.js代码
<template>
<div id="app">
<!-- <router-view></router-view>-->
<router-view v-if="isRouterAlive" />
<!-- 给<router-view v-if="routerAlive"></router-view>增加一个不同v-if值，
来先摧毁<router-link>，然后再重新创建<router-link>起到刷新页面的效果,
可以搭配provide、inject使用-->
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods: {
reload() {
this.isRouterAlive=false
this.$nextTick(function(){
this.isRouterAlive=true
})
}
}
}
</script>
<style>
html, body, #app {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>此为App.vue代码
<template>
<div id="login">
<div id="container">
<div id="row">
<div id="welcome">
<p id="weltext1">欢迎光临</p>
<p id="weltext2">登录你的账号，与我们一起开始旅程吧</p>
</div>
<div id="loginBox">
<p id="loginText"> 登 录</p>
<a-form-model ref="form" :model="form" :rules="rules">
<a-form-model-item prop="email">
<label for="email">邮箱</label>
<input type="email" id="email" v-model="form.uEmail" placeholder="请输入登录的邮箱" autocomplete="off">
<a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
</a-form-model-item>
<a-form-model-item prop="password">
<label for="password">密码</label>
<input type="password" v-model="form.uPwd" id="password" placeholder="请输入密码" autocomplete="off">
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
</a-form-model-item>
<div>
<div style="margin:10px">
<a-checkbox
v-decorator="[
'remember',
{
valuePropName: 'checked',
initialValue: true,
},
]"
style="text-align: center;display: inline;" >
记住我
</a-checkbox>
</div>
<button class="login" type="button" @click="login()" html-type="submit">登录</button>
<a class="login-form-forgot" href="" style="position:absolute;text-decoration:underline;color:white;left:-20px; bottom: -20px; width: 200px; height: 50px;">
忘记密码
</a>
<a>
<router-link to="/register" style="position:absolute; text-decoration:underline;color:white;right:-20px; bottom:-20px; width: 200px; height: 50px;">现在注册!</router-link>
</a>
</div>
</a-form-model>
</div>
</div>
</div>
</div>
</template>
<script>
import {setCookie,getCookie} from "../cookie.js";
export default {
name: 'login',
data () {
return {
form:{
uEmail:'',
uPwd:'',
},
rules: {
uEmail: { required: true, message: '请输入邮箱', trigger: 'blur' },
uPwd: { required: true, message: '请输入登录密码', trigger: 'blur' }
},
captcha:'',
id:'',
img:'',
token:'',
}
},
methods: {
login() {
//e.preventDefault();
var _this = this;
console.log(_this.form.uEmail);
console.log(_this.form.uPwd);
_this.$axios.post('/api/user/login',
_this.$qs.stringify({
uEmail:_this.form.uEmail,
uPwd:_this.form.uPwd,
}),
{ headers: { access_token: _this.token } }
).then(function (response) {
console.log('请求成功');
console.log(response);
console.log(response.data.data.token);
console.log(response.data.data.user_id);
_this.id = response.data.data.user_id;
_this.token = response.data.data.token;
localStorage.setItem('access_token',_this.token);
//_this.select();
setCookie(response.data.token);
console.log(_this.img);
_this.$router.push({
path:'/',
name:'home',//路由命名
params:{
id: response.data.data.user_id,
//img:_this.img,
token:response.data.data.token,
}
})
_this.$message.success('恭喜您，登录成功');
}).catch(function (error) {
console.log(error);
_this.$message.error('对不起，登录失败');
})
//}
//}); },
tokenConfirm(token){
// var _this = this;
var _token = getCookie(token);
this.axios.get('http://localhost:8080/tokenConfirm',{
params:{
token:_token
}
}).then(function(response){
var obj = response.data;
console.log(obj);
}).catch(function(error){
console.log(error);
});
},
},
}
</script>
<style scoped>
@import "../assets/login.css";
</style>此为login.vue代码
.login {
height: 40px;
width: 200px;
border-radius: 40px;
font-size: 20px;
margin-left: 5%;
margin-top: 10px;
background: lightblue;
left: 100px;
position: absolute;
}
button:hover{
font-weight: bold;
color: #020002ab;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
button:active {
transform: translateY(4px);
}
#container{
position: absolute;
width: 1000px;
top: 80px;
height: 400px;
}
#row{
position: absolute;
left: 300px;
width: 80%;
}
#weltext2{
font-size: 20pt;
font-family: 宋体, serif;
font-weight: bolder;
position: absolute;
top: 150px;
padding: 0 30px;
}
#loginBox{
background-color: rgba(0, 0, 0, 0.4);
color: white;
text-align: center;
width: 400px;
height: 400px;
padding-bottom: 10px;
-webkit-box-shadow: 2px 2px 10px #444;
box-shadow: 2px 2px 10px #444;
top: 0px;
position: absolute;
left: 46%;
}
#welcome{
position: absolute;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
text-align: center;
width: 430px;
height: 400px;
padding-bottom: 20px;
-webkit-box-shadow: inset 1px 1px 10px #444;
box-shadow: inset 1px 1px 10px #444;
right: 435px;
}
label{
display: inline-block;
width: 50px;
text-align: left;
font-size: 45px;
color:white;
font-weight: bold;
}
input{
width:250px;
height:40px;
/*display: block;*//*设置成块级元素，独占一行*/
margin: 5px auto;/*外边距30px，输入框居中*/
padding: 8px;/*设置内边距*/
text-align: center;/*文字居中*/
border: 1px solid #EBEBEB;/*把输入框包起来，变成长方形*/
border-radius: 10px;/*让长方形的4个角弯一点，*/
font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
font-size: 18px;/*字体大小*/
outline: none;
color:black;
}
#loginText{
margin-top:18px;
padding-bottom: 18px;
border-bottom: 1px solid rgb(240, 240, 245);
font-size:40px;
}
#weltext1{
color: black;
font-size: 35pt;
font-family: 微软雅黑,serif;
font-weight: bolder;
position: absolute;
top: 50px;
left: 30%;
transform: translate(-50%);
}
#login
{
height:100%;
width:100%;
background-image: linear-gradient(lightskyblue, lightblue);
background-size: cover;
background-attachment: fixed;
}此为login.css代码
<template>
<div id="register">
<div id="registerBox">
<div id="registerText">注册</div>
<!-- <form name="signupForm" id="signupForm">-->
<a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
<a-form-model-item has-feedback label="昵称" prop="username" style="margin-top: 15px">
<a-input type="text" v-model="ruleForm.username"/>
</a-form-model-item>
<a-form-model-item has-feedback label="密码" prop="pass">
<a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
</a-form-model-item>
<a-form-model-item has-feedback label="确认密码" prop="checkPass">
<a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
</a-form-model-item>
<a-form-model-item has-feedback label="邮箱" prop="email" style="margin-bottom: 10px">
<a-input v-model="ruleForm.email" type="email" />
</a-form-model-item>
<!-- <a-form-model-item label="邮箱验证码" prop="captcha">-->
<!-- <a-input v-model="ruleForm.captcha" style="width: 150px" type="text" autocomplete="off" />-->
<!-- <a-button style="margin-left: 10px">获取验证码</a-button>-->
<!-- </a-form-model-item>-->
<div style="display: inline-block;">
<button type="button" id="submit" @click="submitForm">提交</button>
<button type="reset" id="reset">重置</button>
</div>
<br>
<br>
<router-link to="/" style="position:absolute; right:-20px; bottom:-20px; width: 200px; height: 50px;">有账号，立即登录!</router-link>
</a-form-model>
<!-- </form>-->
</div>
</div>
</template>
<script>
export default {
name:"register",
data() {
let checkEmail = (rule,value,callback) =>{
let reg = /^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/;
if(value && !reg.test(value)){
callback('输入的邮箱无效！');
}else{
callback();
}
};
let checkUsername = (rule,value,callback) =>{
let reg = /^[A-Za-z]+$/;
if(value && !reg.test(value)){
callback('输入的用户名无效！（用户名必须由英文字母组成）');
}else{
callback();
}
};
let validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
let validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error("两次输入的密码不同!"));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
email:'',
username:'',
captcha:''
},
rules: {
pass: [
{required: true,message:'请输入密码',trigger: 'change'},
{min: 6,message: '请输入六位数及以上的密码',trigger: 'change'},
{ validator: validatePass, trigger: 'change' }
],
checkPass: [
{required: true,message:'请再次输入密码',trigger: 'change'},
{ validator: validatePass2, trigger: 'change' }
],
email:[
{ required: true, message: '请输入邮箱', trigger: 'change' },
{ validator: checkEmail,trigger: 'change'},
],
username:[
{required: true, message:'请输入昵称', trigger: 'change'},
{validator: checkUsername, trigger: 'change'}
],
captcha:[
{required: true, message:'请输入邮箱验证码', trigger:'change'},
]
},
layout: {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 13 },
},
},
};
},
methods: {
submitForm(formName) {
var _this = this;
console.log(this.ruleForm);
console.log(formName);
this.$refs[formName].validate(valid => {
if (valid) {
//this.$message.success('恭喜您，注册成功');
this.$axios.post('/api/user/register',
this.$qs.stringify({
uName: this.ruleForm.username,
uEmail: this.ruleForm.email,
uPwd: this.ruleForm.pass,
})
).then(function (response) {
console.log(response.data);
//alert('注册成功');
if(response.data.ok)
{
_this.$message.success('注册成功');
_this.$router.push({
path:'/login',
name:'login',//路由命名
params:{}
})
}
else
{
_this.$message.error(response.data.msg);
}
}).catch(function (error) {
console.log(error);
_this.$message.error('对不起，注册失败');
})
} else {
console.log('注册失败!!');
//this.$message.error('对不起，注册失败');
return false;
}
});
},
},
};
</script>
<style scoped>
@import "../assets/register.css";
</style>此为register.vue代码
button {
height:15px;
width: 10px;
margin:35px; /*margin是四个边距，所有四个边距都是 10px*/ border-radius: 10px;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
float: right;
border: 1px solid #269ABC;
outline: none; /*设置元素周围的轮廓*/
margin-left: 18%;
}
button:hover{
font-weight: bold;
color: #020002ab;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
button:active {
transform: translateY(4px);
}
#register
{
height:100%;
width:100%;
background-image: linear-gradient(lightskyblue, lightblue);
background-size: cover;
background-attachment: fixed;
}
#registerBox{
background-color: rgba(215, 223, 226, 0.7);
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
text-align: center;
width:400px;
padding-bottom: 2px;
border-radius: 15px;
height: 420px;
}
/*
@keyframes myfirst
{
0% {left:0px; top:0px;} 25% {left:200px; top:0px;}}
*/
form{
padding:0px 20px;
}
label{
display:inline-block;
width:80px;
text-align:left;
font-size: 20px;
/* font-weight: bold;*/
}
input{
width:250px;
height:40px;
/*display: block;*//*设置成块级元素，独占一行*/
margin: 5px auto;/*外边距30px，输入框居中*/
padding: 8px;/*设置内边距*/
text-align: center;/*文字居中*/
border: 1px solid #EBEBEB;/*把输入框包起来，变成长方形*/
border-radius: 10px;/*让长方形的4个角弯一点，*/
font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
font-size: 18px;/*字体大小*/
outline: none;
}
#submit,#reset{
margin:10px;
background-color: #fff;
width:80px;
height:30px;
}
#registerText{
text-align: center;
margin-top: 10px;
padding-bottom: 18px;
border-bottom: 1px solid rgb(240, 240, 245);
font-size: 20px;
text-shadow: 5px 5px 5px skyblue;
}
/*hover 鼠标移动到div上时*/
div:hover {
-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
/*鼠标移动是过渡*/
box-shadow: 0px 0px 100px #FFFFFF/*四边出现阴影，效果发光*/
}此为register.css代码
该怎么实现div发光的样式只在register界面应用呢，求助。
这样写是引入外部样式的一种方式。但是这种方式是在页面加载完成之后才加载的。
VUE中scoped的编译原理是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位，造就了所谓的局部css。
css-loader对@import的文件会当做外部资源，是把import的css文件单独提取出来，并没有把其中的样式放在<style scoped>中解析，而是最后把<style>中计算结果和import的css文件混合后，交由style-loader最后解析为style标签加载在页面里。
换句话说，也就是@import引入的样式其实引入全局的样式，不管有没有scoped。
如果要让样式局部起作用，需要使用style引入