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

angular写router无法跳转或者说url改变了但是页面没变。

1

路由器

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<main class="bg-img">
    <div class="input-wrap">
        <div class="top-img"></div>
        <div class="input-box">
            <div class="user-img"></div>
            <input class="name" type="text" placeholder="输入账号" ngModel="name" />
        </div>
        <div class="input-box">
            <div class="password-img"></div>
            <input class="password" type="password" placeholder="输入密码" ng-model="pass" />
            <p>{{name}}{{pass}}</p>
        </div>
        <button class="btn" [routerLink]="['listpage']">
            登录
<app-popout>
</app-popout>

            <!-- <span *ngIf="name=='user'&&pass=='password'" [routerLink]="['/assa']" routerLinkActive="router-link-active" ></span>
            <span *ngIf="name!='user'||pass!='password'" 弹框错></span> -->
          </button>
    </div>

</main>

请求太长，请求失败怎么破？看资料说和服务端也有关，大佬有没有解答一下的

0

1

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

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%;
    }

v-for报"Elements in iteration expect to h

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

Elements in iteration expect to have 'v-bind:key' directives

列表展示页，改变双数据的page和size的值，页面数据毫变化

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<table class="table table-striped f14">
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>类型</th>
            <th>发布时间</th>
            <th>修改时间</th>
            <th>发布者</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, key) in message" :key="item.id">
            <td>{{ key + 1 }}</td>
            <td>{{ item.title }}</td>
            <td>{{ reset[item.type].type }}</td>
            <td>{{ item.createAt }}</td>
            <td>{{ item.updateAt }}</td>
            <td>{{ item.author }}</td>
            <td>{{ reset[item.status].status }}</td>
            <td><a>上线</a><a>编辑</a><a>删除</a></td>
          </tr>
        </table>

data() {
    return {
      message: [],
      reset: [
        { val: 0, type: "首页Banner" },
        { val: 1, type: "找职位Banner", status: "草稿" },
        { val: 2, type: "找精英Banner", status: "上线" },
        { val: 3, type: "行业大图" }
      ]
    };
  },
  methods: {
    requestData() {
      let data = {
        page: 2,
        size: 8,
        total: 30,
        list: 3
      };
      this.$axios({
        method: "get",
        url: "/carrots-admin-ajax/a/article/search",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: this.qs.stringify(data)
      })
        .then(resp => {
          this.message = resp.data.data.articleList;
          for (var a = 0; a < this.message.length; a++) {
            this.message[a].createAt = new Date(
              this.message[a].createAt
            ).toLocaleString("chinese", { hour12: false });
            this.message[a].updateAt = new Date(
              this.message[a].updateAt
            ).toLocaleString("chinese", { hour12: false });
          }
          console.log(resp);
          console.log(data);
          console.log(this.qs.stringify(data));
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.requestData();
  }

如何使用AngularJS的自定义指令实现手风琴菜单

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>

Vue生命周期中mounted和created的区别

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

Vue生命周期中mounted和created的区别

vue中解决跨域问题

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

因为截图有最小尺寸限制，所以才这么截图，见谅。

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

0

1

angular model

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本