Question

我正在使用Gordon Zhu（wwww.watchandcode.com）的实用JS。我不明白为什么按钮会出现在浏览器/ UI /客户端中，但是由于某些原因，当我单击它时，该按钮会制作动画，但什么也不做。您知道，有点像某些公司和工作委员会使用的旧软件程序之一。

我得到了

VM3950：1未捕获的ReferenceError：未定义todoList 在：1：1

在通过displayTodos.addTodo（'first'）;定义todoList时；

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().antMatchers("/login").permitAll()
                .antMatchers("/listTodo").hasAnyRole("USER","ADMIN")
                .anyRequest().authenticated()
                .and().formLogin().loginPage("/login").permitAll().and()
                .logout().permitAll();
}
    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication().withUser("Sudhakar").password("qwe123").roles("USER","ADMIN");
    }
}

I would need to login with user name and get the todo details of the user who logged in. But I am not able to get to next page, after trying many times I am getting below error

java.lang.IllegalArgumentException: There is no PasswordEncoder mapped for the id "null"

Below is my controller
package com.example.SpringLogin.Controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.SessionAttributes;

import com.example.SpringLogin.service.loginService;

@Controller
@SessionAttributes("name")
public class LoginController {
    @Autowired
    loginService service;

    @RequestMapping(value="/login",method = RequestMethod.POST)
    public String loginMessage(ModelMap model,@RequestParam String name,@RequestParam String password) {
        boolean isValidUser=service.validateUser(name, password);

        if(!isValidUser) {
            model.put("message", "Invalid Credentials");
            return"Room";
        }
        model.put("name", name);
        model.put("password",password);

        return "redirect:/todoList";
    }
    @RequestMapping(value="/login",method = RequestMethod.GET)
    public String roomLogin(ModelMap model, String error) {
        //model.put("name", name);
        if(error!=null) {
            model.addAttribute("errorMsg","UserName or Password is invalid");
        }
        return "Room";
    }
    /*@RequestMapping(value="/login",method = RequestMethod.GET)
    public String showLogin(ModelMap model) {
        //model.put("name", name);
        return "Welcome";
    }*/
    @RequestMapping(value = "/welcome")
    public String showWelcome(ModelMap model) {
        return "login";
    }
}

My login page

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<c:set var="contextPath" value=""/>
<!DOCTYPE html>
<html>
<head>

<link href="webjars/bootstrap/3.3.6/css/bootstrap.min.css"
    rel="stylesheet">
<title>Todo Application</title>
</head>
<body>
    <div class="container">
        <font color="red">${message}</font>
        <form:form method="post" action="/login">
            <fieldset class="form-group">
                Name : <input type="text" name="username" class="form-control" placeholder="Username"
                   autofocus="true"/>
                Password: <input type="password" name="password"
                    class="form-control" placeholder="Password" />
            </fieldset>
            <button type="submit" class="btn btn-success">Submit</button>
        </form:form>
    </div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

After successful login it should go to below page

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<c:set var="contextPath" value=""/>
<!DOCTYPE html>
<html>
<head>

<link href="webjars/bootstrap/3.3.6/css/bootstrap.min.css"
    rel="stylesheet">
<title>Todo Application</title>
</head>
<body>
    <div class="container">

    <table class="table table-striped">
        <H1>Name : ${pageContext.request.userPrincipal.name}</H1>

        <thead>
            <tr>
                <th>Id</th>
                <th>Course</th>
                <th>End Date</th>
                <th>Is it Done</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${todo}" var="item">
                <tr>
                    <td>${item.id}</td>
                    <td>${item.course}</td>
                    <td><fmt:formatDate value="${item.date}" pattern="MM/dd/yyyy" /></td>
                    <td>${item.isdone?'Yes':'No'}</td>
                    <td><a type="button" class="btn btn-success"
                        href="/update-Todo?id=${item.id}">Update</a></td>
                    <td><a type="button" class="btn btn-warning"
                        href="/delete-Todo?id=${item.id}">Delete</a></td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

    <div>
        <a type="button" href="/add-Todo" class="btn btn-success">Add a
            Todo</a>
    </div>
</div>

<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Service class

package com.example.SpringLogin.service;

import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;

import org.springframework.stereotype.Service;

import com.example.SpringLogin.model.todoList;

@Service
public class TodoService {

    public static List<todoList> todos=new ArrayList<todoList>();
    public static int todoCount=5;

    static {
        todos.add(new todoList(1, "Sudhakar", "Study history", new Date(), false));
        todos.add(new todoList(2,"Sudhakar","Study geography",new Date(),false));
        todos.add(new todoList(3,"Sudhakar","Study GK",new Date(),false));
        todos.add(new todoList(4,"Mani","Study Java",new Date(),false));
        todos.add(new todoList(5,"Mani","Study script",new Date(),false));
    }

    public List<todoList> retrievetodos(String name){
        List<todoList> retrieved=new ArrayList<todoList>();
        for (todoList todo : todos) {

            if(todo.getName().equalsIgnoreCase(name)) {
                retrieved.add(todo);
            }
        }
        return retrieved;
    }

    public void addTodo(String name,String Course,Date date,boolean isDone) {
        todos.add(new todoList(++todoCount,name,Course,date,isDone));
    }

    public todoList retrieveTodo(int id){

        for (todoList todo : todos) {
            if(todo.getId()==id) {
                return todo;
            }
        }
        return null;        
    }

    public List<todoList> UpdateTodo(todoList todo){
        /*for (todoList td : todos) {
            if(td.getId()==todo.getId()) {
                td.setCourse(todo.getCourse());
                td.setDate(todo.getDate());
            }
        }*/

        todos.remove(todo);
        todos.add(todo);
        return todos;
    }
     //it will delete the todo
    public void deleteTodo(int id) {
        Iterator<todoList> it = todos.iterator();
        while(it.hasNext()){
            todoList td=it.next();
            if(td.getId()==id) {
                it.remove();
            }
        }
    }
}

Answer 1

与其他语言相比，

this关键字在Javascript中的工作方式有所不同，this由函数的调用方式（运行时绑定）决定。在处理程序中，您可以调用todoList.displayTodos()，也可以更新以使用箭头函数，因为在箭头函数中，这保留了封闭词法上下文的this的值，请参见下面的代码：

var todoList = {
    todos: [],
    displayTodos: function() {
        if (this.todos.length === 0) {
            console.log('Your todo list is empty!');
        } else {
            console.log('My todos:');
            for (var i = 0; i < this.todos.length; i++) {
                if (this.todos[i].completed === true) {
                    console.log('(x)', this.todos[i].todoText);
                } else {
                    console.log('( )', this.todos[i].todoText);
                }
            }
        }
    },
  
    addTodo: function(todoText) {
        this.todos.push({
            todoText: todoText,
            completed: false
        });
        
        this.displayTodos();
    },
    changeTodo: function(position, todoText) {
        this.todos[position].todoText = todoText;
        this.displayTodos();
    },
    deleteTodo: function(position) {
        this.todos.splice(position, 1)
        this.displayTodos();
    },
    toggleCompleted: function(position) {
        var todo = this.todos[position];
        todo.completed = !todo.completed;
        this.displayTodos();
    },
    toggleAll: function() {
        var totalTodos = this.todos.length;
        var completedTodos = 0;

        for (var i = 0; i < totalTodos; i++) {
            if (this.todos[i].completed === true) {
                completedTodos++;
            }
        }
    
    
        if (completedTodos === totalTodos) {
            for (var i = 0; i < totalTodos; i++) {
                this.todos[i].completed = false;
            }

        } else {
            for (var i = 0; i < totalTodos; i++); {
            this.todos[i].completed = true;
            }
        }

        this.displayTodos();
    }
};

var displayTodosButton = document.getElementById('displayTodosButton');
var toggleAllButton = document.getElementById('toggleAllButton');

displayTodosButton.addEventListener('click', () => {
  this.todoList.displayTodos();
});

toggleAllButton.addEventListener('click', () => {
  this.todoList.toggleAll();
});

<h1>Todo List</h1>
<button id = "displayTodosButton">Display Todos</button>
<button id = "toggleAllButton">Toggle All</button>

Answer 2

错误显示为：未捕获ReferenceError：未定义todoList 这恰好意味着，当从 this 上下文引用 todoList对象时，由于 this 是您的 html，因此不会被定义元素而不是窗口对象，因此，如果您要引用对象，则必须删除全部的此关键字（ javascript 此关键字的行为与许多其他语言不同）。最后，如果您想了解有关Java脚本中此行为的更多信息，可以访问：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Javascript：按下“点击”按钮不起作用？

2 个答案: