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

更有效的封装HTTP

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

现在只是把请求封装成一个服务，但是回调函数还是在组件中调用

xshell6 评估期已过解决办法

1

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

手风琴的子元素

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

angular基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

if(res.code === 0){
      alert("登陆成功");
      this.route.navigate(['/list']);
       console.log(res);
     } else{
       alert(res.message);
     }

   });

{
        path:'',component: LogComponent
      },
    {
        path:'list',loadChildren:'../../pages/list/list.module#ListModule'
      } ,
    
];

selsect左下边框都不见

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="addArticle"> 新增Article</div>
        <div class="content">
            <div class="c_font15">标题名称</div>
            <input class="c_input" v-model="titleValue">
            <div class="c_font15">类  型</div>
            <select class="c_select" v-model="typeValue">
                <option>请选择</option>
                <option>首页Banner</option>
                <option>职位Banner</option>
                <option>找精英Banner</option>
                <option>行业大图</option>
            </select>


.addArticle {                      // 新增Article
    margin: 30px auto 0;
    border: 1px solid #dddddd;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 93%;
    height: 39px;
    line-height: 39px;
    font-size: 14px;
    font-weight: 700;
    background: #f5f5f5;
}
.content {                        // 新增Article下的内容
    margin: 0 auto;
    border: 1px solid #dddddd;
    box-sizing: border-box;
    padding: 15px;
    width: 93%;
    min-height: 400px;
    font-size: 14px;
    font-weight: 700;
    background: #ffffff;
    .c_font15 {                   // 内容内竖排字体
        float: left;
        margin-right: 30px;
        margin-bottom: 15px;
        width: 12%;
        height: 34px;
        line-height: 34px;
        text-align: right;
    }
    .c_text {
        float: left;
        margin-right: calc(26% - 32px);
        margin-bottom: 15px;
        width: 62%;
        font-weight: 400;
        min-height: 34px;
    }
    .c_input {                     // 输入框
        // float: left;
        margin-right: calc(26% - 32px);
        margin-bottom: 15px;
        width: 62%;
    }
    .c_select {                    //类型框
        // float: left;
        margin-right: calc(100% - 17% - 12% - 30px);
        margin-bottom: 15px;
        width: 16%;
    }

ui-touter,为什么没有加载小页面

1

angular基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {

     $urlRouterProvider.when("", "/PageTab");

     $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page-1.html"
        })
        .state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page-2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<h3>Users</h3>

<table class="table table-striped">
  <thead>
    <tr>
      <th>编辑</th>
      <th>名</th>
      <th>姓</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>
        <button class="btn" ng-click="editUser(user.id)">
          <span class="glyphicon glyphicon-pencil"></span>编辑
        </button>
      </td>
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
    </tr>
  </tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

</div>

</body>
</html>

设置prototype后，实例读取不到

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 function Dog(name) {//一个叫Dog的构造函数，用来表示狗的原型
     this.name = name;
 }
 var badDog = new Dog("二狗子");


 Dog.prototype={
     like:"money"
 }
 console.log(badDog.like)

这个鼠标右键的Angular Generator是怎么出来的，

0

1

angular model

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

如何配置反向代理以及可以获取到接口的数据

0

1

url传参

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

相同路由跳转并不会刷新

0

1

url传参

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div>
        <div class="navBar">
            <div class="sideBar-title">萝卜多后台管理系统</div>
            <ul class="topNav">
                <li id="character" v-on:click='quit'>
                    <font-awesome-icon :icon="['fas', 'power-off']" class="power" />
                </li><span>|</span>
                <li id="character-name">{{manager}}</li><span>|</span>
                <li>{{role}}</li>
            </ul>
        </div>
        <div class="content">
            <ul class='sideBar'>
                <li v-for="(l,index) in lists" :key="index">
                    <a v-on:click="toggle(l,index)" v-bind:class="{ active: l.show }">
                        <font-awesome-icon :icon="['fas', 'pencil-alt']" class="pencil" />{{l.name}}
                        <font-awesome-icon :icon="['fas', 'angle-down']" v-if="l.show" class="angle" />
                        <font-awesome-icon v-else :icon="['fas', 'angle-left']" class="angle" />
                    </a>
                    <ul class="backstage-manage" v-show="l.show">
                        <li v-for="(item,index) in l.list" :key="index" @click="go($event,index,l)"
                            :class="{active:l.bgc[index]}">
                            <a>{{item}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="main-content">
                <!-- <keep-alive> -->
                <transition>
                    <router-view></router-view>
                </transition>
                <!-- </keep-alive>
                <router-view v-if='!$route.meta.keepAlive'></router-view> -->
            </div>

        </div>