IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

如何在Vue-CLI开发环境中解决跨域问题

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

数据转移bug

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

getBtnMin.addEventListener('click', function() {
   var i = getInputText.value;
   //玩家人数input
   getInputText.value = Number(i) + 1;
   //滑块位置
   getInputRange.value = Number(i) + 1;
   //滑块背景位置
   var n = Number(((i-3.5)/15)*100).toFixed(0) + "%";
   getInputRange.style.backgroundSize = n + ' ' + '100%';
});


   var i = getInputText.value;
   //玩家人数input
   getInputText.value = Number(i) + 1;
   //滑块位置
   getInputRange.value = Number(i) + 1;
   //滑块背景位置

   var m = getInputRange.value;

   var n = Number(((m-3.5)/15)*100).toFixed(0) + "%";
   getInputRange.style.backgroundSize = n + ' ' + '100%';

学员服务器如何使用NGINX跨域

0

1

跨域

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$(document).ready(function () {
    $("#btn").on("click",function () {
        var account = $(".account").val();
        var password = $(".password").val();
    $.post('/carrots-admin-ajax/a/login',
        {
            name: account, pwd: password
        },
        function(data,status) {
        var $data = JSON.parse(data);
            console.log($data);
        if ($data.message === "success") {
            window.location.href = "http://dev.admin.carrots.ptteng.com/";
        }
        else {
            $("#info").text($data.message)
        }
    });
});
});

手风琴的子元素

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<template>
    <div>
        <div class="management">
            <div class="management_top">萝卜多后台管理系统</div>
            <div class="management_bottom" v-for="(item,index) in menu" :key="item.name">
                <div class="m_b_line" v-show="item.show"></div>   
                <button :class="['m_b_menu',{'m_b_active':item.show}]" @click="menuShow(item,index)">
                    {{item.name}}
                    <div>
                        <div :class="[item.show ? 'm_b_pen3':'m_b_pen1']"></div>
                        <div :class="[item.show ? 'm_b_pen4':'m_b_pen2']"></div>
                    </div>
                </button>
                <button :class="['m_b_select',{'m_b_active':select.show}]" v-show="item.show" v-for="(select,index2) in item.content" @click="selectShow(select,index2)" :key="select.name">
                    {{select.name}}
                </button>
           </div>
        </div>
        <div class="account">
            <router-link to="/" replace>
                <button class="a_close"></button>
            </router-link>
            <div class="a_line"></div>
            <div class="a_font">admin</div>
            <div class="a_line"></div>
            <div class="a_font">管理员</div>
        </div>
        <div class="content">
            <router-view/>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menu: [
                {name: '后台管理', content: [{name:'模块管理',show: false}, {name:'角色管理',show: false}, {name:'密码修改',show: false}, {name:'账户管理',show: false}], show: false},
                {name: '信息管理', content: [{name:'公司列表',show: false}, {name:'职位列表',show: false}], show: false},
                {name: '内容管理', content: [{name:'Artucle列表',show: false}], show: false}
            ]
        }
    },
    methods: {
        menuShow(item,index) {
            this.menu.forEach(i => {
                if (i.show !== this.menu[index].show) {
                    i.show = false;
                }
            })
            item.show = !item.show;
        },
        selectShow(select,index2) {
            let menuOne = this.menu[0].show,
                menuTwo = this.menu[1].show,
                menuThree = this.menu[2].show;
            if (menuOne == true) {
                for (let x = 0; x < 3; x++) {
                    this.menu[x].content.forEach(i => {
                        if(i.show !== this.menu[0].content[index2].show) {
                            i.show = false;
                        }
                    })
                }
                this.menu[0].content[index2].show = true;
            }
            else if (menuTwo == true) {
                for (let x = 0; x < 3; x++) {
                    this.menu[x].content.forEach(i => {
                        if(i.show !== this.menu[1].content[index2].show) {
                            i.show = false;
                        }
                    })
                }
                this.menu[1].content[index2].show = true;
            }
            else if (menuThree == true) {
                for (let x = 0; x < 3; x++) {
                    this.menu[x].content.forEach(i => {
                        if(i.show !== this.menu[2].content[index2].show) {
                            i.show = false;
                        }
                    })
                }
                this.menu[2].content[index2].show = true;
                this.$router.push('/backstage/artucle');
            }

        }
    }
}
</script>

<style scoped lang="scss">
.management {
    float: left;
    width: 250px;
    height: 100vh;
    background: #232a3a;
    .management_top {
        margin-bottom: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #4a5f6c;
        width: 100%;
        height: 50px;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        line-height: 49px;
        color: #ffffff;
  }
}

.management_bottom {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    min-height: 40px;
    color: #ffffff;
    .m_b_menu {
        display: flex;
        justify-content: space-between;
        padding: 0 45px 0 60px; 
        width: 100%;
        color: #ffffff;
        line-height: 40px;
        background: url(../assets/img/pen.png) 30px 13px/16px 16px no-repeat;
        cursor: pointer;
        .m_b_pen1 {
            width: 9px;
            height: 1.5px;
            background: #ffffff;
            transform: translatey(23px) rotate(45deg);
        }
        .m_b_pen2 {
            @extend .m_b_pen1;
            transform: translatey(16.2px) rotate(-45deg) ;
        }
        .m_b_pen3 {
            @extend .m_b_pen1;
            transform: translate(0, 21px) rotate(45deg);
        }
        .m_b_pen4 {
            @extend .m_b_pen1;
            transform: translate(5.5px, 20px) rotate(135deg);
        }
        &:hover {
            background-color: #7b7f89;
        }
    }
    .m_b_line {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 40px;
        background: #ffffff;
    }
    .m_b_select {
        box-sizing: border-box;
        width: 100%;
        height: 40px;
        font-size: 14px;
        color: #ffffff;
        background: #232a3a;
        cursor: pointer;
        &:hover {
            background-color: #7b7f89;
        }
    }
}

.m_b_active {
    background-color: #7b7f89 !important;
}

.account {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    float: right;
    width: calc(100% - 250px);
    height: 50px;
    background: #ffffff;
    .a_close {
        display: block;
        margin-right: 15px;
        width: 45px;
        height: 50px;
        background: url(../assets/img/close.png) center/14px 13.6px no-repeat;
        cursor: pointer;
        &:hover {
            background-color: #eeeeee;
        }
    }
    .a_line {
        margin: 0 10px;
        width: 1.5px;
        height: 14px;
        background: #e9e9e9;
    }
    .a_font {
        width: 67px;
        height: 100%;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        color: #337ab7;
        &:hover {
            background-color: #eeeeee;
        }
    }
}

.content {
    float: right;
    width: calc(100% - 250px);
    height: calc(100vh - 50px);
    background: #f5f5f5;
}
</style>

无论验证是否正确页面都无法进行跳转。

0

1

Ajax

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$('.log-in').click(function () {
    var username = $('#user').val();
    var password = $('#pwd').val();
    $('#tip').empty();
    if (username === '' || password === '') {
        $('#tip').append('请输入用户名和密码');
    }else{
        $.ajax({
            method: 'POST',
            url: '/carrots-admin-ajax/a/login',
            data:{
                name: username,
                pwd: password
            },
            success: function(response){
                if(response.message === 'success'){
                    location.href = 'http://dev.admin.carrots.ptteng.com';
                }else {
                    $('#tip').append(response.message);
                }
            }
        });
    }
});

设置x=0；函数内设置x=x++； x为什么一直为0，而x=++x；x自增

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var x = 0;
var a = 0;
function myButton1(){
    x = x++;
    a = ++a;
    console.log(x);
    console.log(a);
}

placeholder属性在IOS中存在兼容性的问题

0

1

其他

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

&::placeholder {
            color: #bda969;
            font-size: 5vw;
        }

PC端页面数据改变之后跳转页面，再调回来数据消失

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// 法官日志页面
$('#dialyLog').click(function () {
    location.href = './Task2-6.html';
});
// 法官台本流程状态机
var steps = StateMachine.create({
    initial: 'step1',
    events:[
        {name: 'kill', from: 'step1', to: 'step2'},
        {name: 'dead', from: 'step2', to: 'step3'},
        {name: 'speak', from: 'step3', to: 'step4'},
        {name: 'vote', from: 'step4', to: 'step1'}
    ]});
// 杀人、发言、投票的事件判断
$('.kill').click(function () {
    if (this.style.backgroundColor === "rgb(131, 176, 154)"){    // 判断是否进行过这一步
        alert('请进行游戏下一步活动')
    }else if (steps.is('step1')) {  // 判断是否处在可以执行的状态
        location.href = './Task2-7.html';  //截图中将该页注释掉了
        steps.kill();    // 执行事件
        $(this).next().show();  // 杀人后的提示显示
        $(this).css("background-color","#83b09a").addClass('visited');    // 改变点击过的状态（背景颜色）
    }else {
        alert('请按顺序操作');
    }
});
$('.dead').click(function () {
    if (this.style.backgroundColor === "rgb(131, 176, 154)"){
        alert('请进行游戏下一步活动')
    }else if (steps.is('step2')) {
        alert('请死者亮明身份并且发表遗言');
        steps.dead();
        $(this).css("background-color","#83b09a").addClass('visited');
    }else{
        alert('请按顺序操作');
    }
});
$('.player').click(function () {
    if (this.style.backgroundColor === "rgb(131, 176, 154)"){
        alert('请进行游戏下一步活动')
    }else if (steps.is('step3')) {
        alert('玩家依次发言讨论');
        steps.speak();
        $(this).css("background-color","#83b09a").addClass('visited');
    }else{
        alert('请按顺序操作');
    }
});
$('.vote').click(function () {
    if (this.style.backgroundColor === "rgb(131, 176, 154)"){
        alert('请进行游戏下一步活动')
    }else if (steps.is('step4')) {
        steps.vote();
        location.href = './Task2-8.html';  // 截图中将该页注释掉了
        addDay();  // 是生成新天数的函数
        $(this).css("background-color","#83b09a").addClass('visited').next().show();
        $(this).parent().parent().hide();
    }else{
        alert('请按顺序操作');
    }
});

在杀手杀人时，如何选定，只让一个div的边框变化？

0

1

Jquery操作

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var player = JSON.parse(sessionStorage.getItem("all"));
var num = 1;

function addPlay() {
    for (var i = 0; i < player.length; i++) {
        $('<div class="box-content"></div>').appendTo($("main"))
        $('<div class="box-name"></div>').appendTo($(".box-content")[i])
        $('<div class="box-number"></div>').appendTo($(".box-content")[i])
        $('.box-name')[i].innerHTML = player[i];
        $('.box-number')[i].innerHTML = num;
        num++;
    }
    console.log(player.length)

}
addPlay();

function ensure() {
    window.location.href = '../html/gameFlow.html'
}
var ccc = [{
    name:"平民",death:true
},{
    name:"杀手",death:false
}]
$('.box-content').click(function(i){
    console.log(ccc[0].name)
    for(i = 0; i < player.length; i++){
        $('.box-content').css("border-color","#fff")
    }
    this.index = i;
    $(this).css("border-color","red")
})

页面跳转传参要带上data里面的数据，可以带多个吗

0

1

小程序网络请求

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

-