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

该问题已被官方收录

写了ngRoute，不可以跳转页面

0

1

angular router

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<body>
<div ng-controller="myCtrl">
    <ul>
        <li><a href="#/a">信息管理</a></li>
        <li><a href="#/b">用户管理</a></li>
        <li><a href="#/a">信息管理</a></li>
        <li><a href="#/b">用户管理</a></li>
        <li><a href="#/a">信息管理</a></li>
        <li><a href="#/b">用户管理</a></li>
        <li><a href="#/a">信息管理</a></li>
        <li><a href="#/b">用户管理</a></li>
    </ul>

    <ng-view></ng-view>
    <!-- <div ng-view ></div> -->
</div>
<script type="text/javascript">
    angular.module("myApp",["ngRoute"])
        .controller("aController",function($scope,$route){
            $scope.hello = "hello,a!";
        })
        .controller("bController",function($scope){
            $scope.hello = "hello,b!";
        })
        .controller("myCtrl",function($scope,$location){

            $scope.$on("$viewContentLoaded",function(){
                console.log("ng-view content loaded!");
            });

            $scope.$on("$routeChangeStart",function(event,next,current){
                //event.preventDefault(); //cancel url change
                console.log("route change start!");
            });
        })
        .config(function($routeProvider, $locationProvider) {
            $routeProvider
                .when('/a', {
                    templateUrl: 'index.html',
                    controller: 'aController'
                })
                .when('/b', {
                    templateUrl: 'index.html',
                    controller: 'bController',
                    resolve: {
                        // I will cause a 1 second delay
                        delay: function($q, $timeout) {
                            var delay = $q.defer();
                            $timeout(delay.resolve, 3000);
                            return delay.promise;
                        }
                    }
                })
                .otherwise({
                    redirectTo: '/a'
                });
        });
</script>
</body>

该问题已被官方收录

怎么用nginx配置跨域

0

1

js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

该问题已被官方收录

for循环没有进入函数内部进行赋值

0

1

控制流程语句变量

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

for(;i>=0;i--){
    console.log("选择元素下角标"+i);
    $(".titleDate").eq(i).click(function(){  /*i的赋值到这里就结束了*/
        $(".content").eq(i).toggle();          /*没有对子函数进行循环赋值*/
        console.log("被控制元素的序号i="+i)
    });
}

该问题已被官方收录

怎么根据人数制作盒子

3

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">

    <title>杀手杀人</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../task2/scss/Homicide.css" />
    <script src="../task2/js/Homicide.js"></script>
    <script src="../task2/js/kill.js"></script>
</head>

<body>
    <header>
        <img src="./img/12.png" class="Tabulation">
        <div>杀手杀人</div><img src="./img/13.png" class="off">
    </header>
    <nav>
        <p class="nav_Published">杀手请睁眼，请选择要杀的对象</p>

        <p class="nav_tip">点击下方玩家头像，对被杀的玩家进行标记</p>
    </nav>

    <main>
        <div class="first">
            <div class="main_square">
                <p class="upbox"></p>
                <p class="bottombox"></p>
            </div>
            <div class="main_icon">
                <img src="./img/7.png">
                <img src="./img/8.png">
                <img src="./img/9.png">
                <img src="./img/10.png">
            </div>
        </div>
    </main>

    <footer><button class="button">确定</button></footer>




</body>

</html>

该问题已被官方收录

事件代理，怎么能访问到target的子节点上？

0

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/page7.css">
    <title>杀人页面</title>
</head>
<body>
<header>
    <img class="h-i1" id="back" src="img/2-back.png" >
    杀手杀人
    <img class="h-i2" id="close" src="img/4-close.png" >
</header>
<main>
    <div class=main-t>
        <p class="mtt"></p>
        <p class="mtb"></p>
    </div>
    <div class="play-box" id="play-box" >
    </div>   
</main>
<footer>
    <button id="playgame" >
        确定
    </button>
</footer>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/page7.js"></script>
</body>
</html>

console.log("js文件");

var Num = sessionStorage.getItem("Num"); //上一页面输入人数
var playArr = JSON.parse(sessionStorage.getItem("playArr")); //上一页面身份数组
var x = sessionStorage.getItem('x'); //判断杀人页面还是投票页面
console.log('页面状态：' + x + "页面");
var kiNum = sessionStorage.getItem('kiNum'); //杀手人数
var ciNum = sessionStorage.getItem('ciNum'); //平民人数
var deadArr = new Array; //死亡玩家数组    这里换个页面寸 这里要取出数组
var identity; //选中身份
var n; //选中的玩家数组角标

$('#back').on('click', function () {
    alert('上了贼船你还想跑？');
}); //左上角返回按钮
$('#close').on('click', close); //右上角关闭按钮
function close() {
    var message = confirm("是否结束本轮游戏？"); //是否确定
    if (message) {
        location.replace('page2.html'); //返回首页
    }
}

var playbox = $('.play-box');
for (var i = 0; i < Num; i++) {
    playbox.append(
        `<div class="player">
            <div class="play-t">` +
        playArr[i] +
        `</div>
            <div class="play-b">` +
        (i + 1) +
        `号</div>
        </div>`);
} //生成角色模块

var playerArr = $('.play-t'); //角色盒子数组

var outbox = document.getElementById('play-box');

$('#playgame').on('click', function () {
    switch (x) {
        case '杀人':
            ciNum = ciNum - 1; //平民减少一人         
            break;
        case "投票":
            if (identity == "杀手") {
                kiNum = kiNum - 1; //杀手减少一人             
            } else if (identity == "平民") {
                ciNum = ciNum - 1; //平民减少一人
            }
            break;
    }
    deadArr.push(n);
    sessionStorage.playArr=JSON.stringify(deadArr);
    sessionStorage.ciNum = ciNum;
    sessionStorage.kiNum = kiNum;
    gameover();
});

html{
    font-size: 100px;
}
body{
    min-width:0;
}
header,footer{
    position:fixed;
    z-index: 1;
    width: 100%;
    max-width: 640px;
}
header{
    top: 0;
    border-bottom: 1px solid #74e4db; 
}
main,footer{
    background: #29bde0;
    line-height: 0;   
}
main{
    min-height:100vh;
    margin: 0 auto;
    padding: 45px 0 1rem;
    overflow: hidden;
}
.main-t{
    line-height: 0;
}
.mtt{
    display: flex;
    align-items: center;
    height: 0.45rem;
    margin: 0;
    padding-left: 25px;
    font-size: 0.13rem;
    line-height: 1.5;
    background: #b9e9f5;
}
.mtb{
    position: relative;
    margin: 0;
    padding: 15px 0;
    font-size: 0.12rem;
    color: #fff;
    padding-left: 40px;
    line-height: 1.5;
}
.jiao{
    position: absolute;
    top: 0;
    left: 30px;
    width:0;
    height:0;
    border-width: 10px 10px 0 10px ;
    border-style: solid;
    border-color: #b9e9f5 transparent transparent transparent;/*透明 兰 透明 透明 */
} 
.play-box{
    overflow: hidden;
}
.player{
    float: left;
    width: 20vw;
    max-width: 128px;
    height: 20vw;
    max-height: 128px;
    margin-left: 10%;
    margin-bottom: 10%;
    border: 3px solid #fff;
    box-sizing: border-box;
}
.play-t,.play-b{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.play-t{
    height: 70%;
    font-size: .15rem;
    background: #fbb435;
}
.play-b{
    height: 30%;
    font-size: .11rem;
    color: #fff;
    background: #83b09a;
}
footer{
    bottom: 0;
    text-align: center;
}
footer button{
    width: 80%;
    height: 0.4rem;
    margin: 0.2rem auto ;
    font-size: 0.2rem;
    color: #fff;
    background: #fbb435;
    border: none;
    outline: none;
}

该问题已被官方收录

首次进入页面input框是只读模式，不能输入文本

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="col-md-4 p-bottom">
                    <div class="form-group">
                        <label class="col-md-3 control-label v-center-l">标  题</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" ng-model="param.title">
                        </div>
                    </div>
                </div>

    //获取列表
    ArticleService.getArticleList($stateParams)
    .then(function(res){
        console.log(res);
        $scope.list=res.data.data;
        $scope.totalItems=res.data.total;
        $scope.param=$stateParams;
    });
//重置搜索条件
    $scope.clear=function(){
        $scope.param={};   
    };
    //搜索列表
    $scope.select=function(param){
        $state.go('backstage.articleList',$scope.param);
    };

该问题已被官方收录

如何将http请求后的数据传递到分页指令中

0

1

angular 插件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

console.log(this)
        $scope.params = $state.params;
        //console.log($scope.params)//获取路由参数
        //获取文章分类
        let params = $scope.params
        var getACSuccess = function successCallback(res) {
            var  code = res.data.code;
            console.log(res)
            if(code==200) {
                var data = res.data.data
                $scope.articleList = data.articleList;
                $scope.articleCount = data.articleCount; 
                $scope.count = data.articleCount;
                $scope.all = Math.ceil(60/ 10);
                $scope.listSize = 10
                $scope.total = 123
            };  
        };
        // console.log($state.params)
        console.log($state)
        let getACErr = function successCallback(res) {
            let code = res.data.code;
            console.log(res)
        };
        //判断size&Num是否为null
        $scope.params.pageSize ? $scope.params.pageSize: $scope.params.pageSize = 10;
        $scope.params.pageNum ? $scope.params.pageNum: $scope.params.pageNum = 1;
        //数据请求
       
        ajaxService.getArtcileList(params).then(getACSuccess,getACErr);

该问题已被官方收录

关于使用富文本编辑器

0

1

富文本编辑器

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

--------------------------------------------------------------------------------HTML部分------------------------------------------------------
<template>
    <el-row>
        <!-- 右边新增列表 -->
      <div style="margin-left: 2%;margin-top: 2%;width: 73.7%;box-shadow: -1px 0px 7px #888888;">
        <p class="newArticle">新增Article</p>
        <!-- 新增下面盒子 -->
        <div class="parameter">
          <div style="margin-left: 12%;margin-bottom: 2%;padding-top: 3%;">
            <span>标题名称</span>
            <input style="width: 80%;margin-left: 3%;" type="text" v-model="xd.title">
          </div>
          <div style="margin-left: 12%;margin-bottom: 2%;">
            <span>类       型</span>
            <select style="margin-left: 3%;" v-model="xd.type">
              <option value="">请选择</option>
              <option value="0">首页Banner</option>
              <option value="1">找职位Banner</option>
              <option value="2">找精英Banner</option>
              <option value="3">行业大图</option>
            </select>
          </div>
          <div style="margin-left: 12%;margin-bottom: 2%;">
            <span>说       明</span>
             <quill-editor style="width: 80%;float: right;margin-right: 11%;"  v-model="content"
               :options="editorOption"
               @blur="onEditorBlur($event)"
               @focus="onEditorFocus($event)"
               @change="onEditorChange($event)">
            </quill-editor>
          </div>
          <div style="margin-left: 12%;margin-bottom: 2%;margin-top: 14%;">
            <span>跳转链接</span>
            <input v-model="xd.url" style="width: 80%;margin-left: 3%;" type="text">
          </div> 
          <div style="margin-left: 12%;margin-bottom: 2%;">
            <span>配       图</span>
            <label class="uupfile" for="upfile">选择文件</label>
            <input id="upfile"  style="margin-left: 3%;width: 70px;display: none;" type="file" @change="upfileFile">
            <img ref="nam" :src="xd.imgurl" alt="配图预览" style="display: block;margin-left: 9.5%;margin-bottom: 2%;width: 42vw;">
            <table class="image">
              <thead>
                <tr>
                  <th>图片名</th>
                  <th>文件大小</th>
                  <th>进度</th>
                  <th>操作</th>
                  <th>操作</th>
                </tr>
                <tr v-if="imgData">
                  <td>{{imgName}}</td>
                  <td>{{imgSize}}</td>
                  <td class="con">
                    <span class="bar" :style="{width:proBar+'%'}">{{proBar}}%</span>
                  </td>
                  <td>{{imgStatus}}</td>
                  <td>
                    <button @click="upload" style="margin-left: 10%;">上传</button>
                    <button @click="deletee" style="margin-left: 10%;">删除</button>
                  </td>
                </tr>
              </thead>
            </table>
          </div>
          <div style="padding-bottom: 3%;">
            <el-row>
            <el-button type="success" :disabled="btn" @click="goOnline(2)" class="online">立即上线</el-button>
            <el-button type="success" :disabled="btn" @click="goOnline(1)" class="draft">存为草稿</el-button>
            <el-button @click="cancell" class="cancel">取消 </el-button>
            </el-row>
          </div>
        </div>
      </div>
      </el-row>
</template>
-------------------------------------------------------------------------JS部分------------------------------------------------------------
<script>
  import axios from "axios";
  import {
    article
  } from "@/http/article.js";
  import qs from 'qs';
  export default {
    data() {
      return {
        files: null,
        jobShow: false,
        job: "",
        proBar: 0,
        titleee: "", //新增或编辑
        imgName: "", //图片预览名称
        imgSize: "", //图片预览大小
        imgData: false, //未上传图片隐藏图片属性
        imgStatus: "", //图片预览状态
        url: '',
        uurl: '',
        newUrl: '',
        xd: {
          title: "",
          type: "",
          url: "",
          imgurl: ""
        },
        background: false,
        CompanyLocation: false,
        Article: false,
        listt: [],
        reader: {},
        contentt: '',
        btn: true
      }
    },
    methods: {
      // 图片上床东西
      clear() {
        this.imgName = "",
          this.imgSize = "",
          this.imgStatus = "",
          this.proBar = 0,
          this.imgStatus = "未选择图片"
      },
      //上线 草稿确认按钮
      goOnline(status) {
        if (this.newUrl == "") {
          this.uurl = this.oldUrl;
        } else if (this.newUrl != "") {
          this.uurl = this.newUrl;
        }
        console.log(this.uurl)
        if (this.uurl === "") {
          alert("请上传图片");
          return;
        }
        let params = {
          content: this.content,
          title: this.xd.title,
          status: status,
          img: this.uurl,
          url: this.xd.url,
          createAt: this.createAt,
          type: this.xd.type,
        }
        let paramss = {
          content: this.content,
          title: this.xd.title,
          status: status,
          img: this.uurl,
          url: this.xd.url,
          type: this.xd.type,
        }
          console.log(paramss)
          article.addArticle(paramss)
            .then(res => {
              console.log(res)
              this.$router.push({
                path: "personal"
              });
              // alert("新增成功")
            })
          console.log(this.btn)
        // }
      },
      cancell() {
        this.$router.push({
          path: "personal"
        });
      },
      //上传
      upload() {
        this.imgStatus = "上传中";
        let that = this;
        let config = {
          //动态改变上传进度条
          onUploadProgress(progressEvent) {
            //    console.log(onUploadProgress)
            console.log(this)
            that.proBar =
              ((progressEvent.loaded / progressEvent.total) * 100) | 0;
            console.log(this.proBar)
          }
        };
        console.log(this.proBar)
        article.uploadImg(this.fileDataa, config)
          .then(res => {
            this.imgStatus = "上传成功";
            let url = res.data.data.url;
            this.newUrl = url;
          })
          .catch(error => {
            this.imgStatus = "上传失败";
          })
        console.log('成功否')
      },

该问题已被官方收录

有限状态机方法不执行的BUG

0

1

事件有限状态机

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="state-machine.js"></script>
    <style>
        button {
            display: block;
            margin: 30px 0;
            width: 50px;
            height: 20px;
        }
    </style>
</head>
<body>
<button id="one">one</button>
<button id="two">two</button>
<button id="three">three</button>
<button id="four">four</button>
<script>
    $(document).ready(function () {
        var fsm = new StateMachine({
            init: 'test1',
            transitions: [
                {name: 'kill', from: 'test1', to: 'test2'},
                {name: 'ghost', from: 'test2', to: 'test3'},
                {name: 'speak', from: 'test3', to: 'test4'},
                {name: 'vote', from: 'test4', to: 'test1'}
            ],
            methods: {
                onAfterKill: function (lifecycle) {
                    console.log("状态: "+ fsm.state);
                    sessionStorage.setItem('stateOne',fsm.state);
                    $('#one').css('background-color', 'orange');
                },
                onGhost: function (lifecycle) {
                    console.log("状态: "+ fsm.state);
                    sessionStorage.setItem('stateTwo',fsm.state);
                    $('#two').css('background-color', 'orange');
                },
                onSpeak: function (lifecycle) {
                    console.log("状态: "+ fsm.state);
                    sessionStorage.setItem('stateThree',fsm.state);
                    $('#three').css('background-color', 'orange');
                },
                onAfterVote: function (lifecycle) {
                    console.log("状态: "+ fsm.state);
                    sessionStorage.setItem('stateFour',fsm.state);
                    sessionStorage.removeItem('stateOne');
                    sessionStorage.removeItem('stateTwo');
                    sessionStorage.removeItem('stateThree');
                }
            }
        });
        var One = sessionStorage.getItem('stateOne');
        var Two = sessionStorage.getItem('stateTwo');
        var Three = sessionStorage.getItem('stateThree');
        function test() {
            if(One === "test2"){
                $('#one').css('background-color', 'orange');
            }
            if(Two === "test3"){
                $('#two').css('background-color', 'orange');
            }
            if(Three === "test4"){
                $('#three').css('background-color', 'orange');
            }
        }
        $('#one').click(function () {
            if(One === "test2"){
                alert("请按步骤来!");
            }else {
                fsm.kill();
                alert("点击了one按钮");
            }
        });
        $('#two').click(function () {
            if(One !== "test2"){
                alert("请按步骤来!");
            }else {
                fsm.kill();
                if(Two !== "test3"){
                    fsm.ghost();
                    alert("点击了two按钮");
                }
            }
        });
        $('#three').click(function () {
            if(One !== "test2"){
                alert("请按步骤来!");
            }else {
                if(Three === "test4"){
                    alert("请按步骤来!");
                }else {
                    fsm.speak();
                    alert("点击了three按钮");
                }
            }
        });
        $('#four').click(function () {
            if(One !== "test2"){
                alert("请按步骤来!");
            }else {
                fsm.vote();
                alert("点击了four按钮");
            }
        });
    })
</script>
</body>
</html>

该问题已被官方收录

angular配置路由文件能不能有多个

0

1

angular router

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var ourApp = angular.module("ourApp",["ui.router"]);
ourApp.config(function ($stateProvider,$urlRouterProvider) {
    $urlRouterProvider.when("",'/login');
    $stateProvider
.state