$ npm install -g live-server

  
    
    
    
    
        
    
    
  
  
    

      
JS Issue Tracker by CodingTheSmartWay.com

      

        
Add New Issue:

        

          

            Description
            
          

          

            Severity
             
              Low
              Medium
              High
             
          

          

            Assigned To
            
          
          Add
        
      

      

        

          

          

        

      

      

        
© CodingTheSmartWay.com

      
    

       
        
    
  

element with the Bootstrap CSS class container is used to contain all other HTML elements.

Chúng ta hãy xem việc thực hiện biểu mẫu. Điều quan trọng cần lưu ý là tất cả các phần tử đầu vào và chính phần tử

5 đều được gán id. Bằng cách sử dụng mã định danh đó, sau này chúng ta có thể truy xuất tham chiếu đến phần tử đó trong mã JavaScript

Ngoài ra, điều quan trọng cần lưu ý là mã HTML cần thiết để xuất danh sách các sự cố hiện có không được đưa vào chỉ mục. html. Lý do là rõ ràng. HTML cần thiết cho đầu ra danh sách là mã động và phụ thuộc vào các bản ghi sự cố được truy xuất từ ​​Bộ nhớ cục bộ. Vì vậy, thứ duy nhất bạn có thể tìm thấy ở đây là phần tử

6 với id problemsList. Phần tử này cho chúng ta khả năng tạo mã HTML cần thiết bằng JavaScript và sau đó đặt kết quả vào phần tử đó

Tìm nạp dữ liệu sự cố từ bộ nhớ cục bộ

Hãy chuyển sang chính. js và bắt đầu triển khai phần JavaScript của ứng dụng của chúng tôi. Dữ liệu sự cố phải được lưu trong Bộ nhớ cục bộ của trình duyệt. Điều đầu tiên chúng tôi sẽ triển khai là mã cần thiết để truy xuất các sự cố từ Bộ nhớ cục bộ. Chúng tôi làm điều đó bằng cách thêm hàm fetchIssues()

function fetchIssues () {
  var issues = JSON.parse(localStorage.getItem('issues'));
  var issuesList = document.getElementById('issuesList');
  
  issuesList.innerHTML = '';
  
  for (var i = 0; i < issues.length; i++) {
    var id = issues[i].id;
    var desc = issues[i].description;
    var severity = issues[i].severity;
    var assignedTo = issues[i].assignedTo;
    var status = issues[i].status;
    
    issuesList.innerHTML +=   '
'+
                              '
Issue ID: ' + id + '
'+
                              '
' + status + '
'+
                              '
' + desc + '
'+
                              '
 ' + severity + ' '+
                              ' ' + assignedTo + '
'+
                              'Close '+
                              'Delete'+
                              '
';
  }
}

Dòng mã đầu tiên đang truy xuất các sự cố từ Bộ nhớ cục bộ. Điều này được thực hiện bằng cách thực thi

7 và phân tích kết quả chuỗi thành một đối tượng JSON

Với dòng mã thứ hai, chúng tôi đang truy xuất tham chiếu đến phần tử

6 với id problemsList. Nội dung HTML của phần tử đó có thể được truy cập bởi thuộc tính innerHTML. Trước tiên, chúng tôi đang sử dụng thuộc tính đó để đặt nội dung thành một chuỗi trống. Tiếp theo, chúng tôi sẽ lặp lại các phần tử trong các vấn đề bằng cách sử dụng vòng lặp for và thêm đầu ra HTML cho phần tử đó vào problemsList. bên trongHTML

Lưu dữ liệu vấn đề vào bộ nhớ cục bộ sau khi gửi biểu mẫu

Trước tiên, chúng ta cần đính kèm một trình xử lý sự kiện vào sự kiện gửi biểu mẫu. Điều đó được thực hiện bằng cách sử dụng dòng mã sau

document.getElementById('issueInputForm').addEventListener('submit', saveIssue);

Tham chiếu đến phần tử biểu mẫu được truy xuất bằng cách sử dụng getElementById. Chúng tôi đang chuyển vào chuỗi issueInputForm là id của phần tử

5. Phương thức addEventListener được gọi để đính kèm sự kiện gửi biểu mẫu vào hàm xử lý sự kiện saveIssue. Hãy thực hiện chức năng này tiếp theo

function saveIssue(e) {
  var issueId = chance.guid();
  var issueDesc = document.getElementById('issueDescInput').value;
  var issueSeverity = document.getElementById('issueSeverityInput').value;
  var issueAssignedTo = document.getElementById('issueAssignedToInput').value;
  var issueStatus = 'Open';  var issue = {
    id: issueId,
    description: issueDesc,
    severity: issueSeverity,
    assignedTo: issueAssignedTo,
    status: issueStatus
  }
  
  if (localStorage.getItem('issues') === null) {
    var issues = [];
    issues.push(issue);
    localStorage.setItem('issues', JSON.stringify(issues));
  } else {
    var issues = JSON.parse(localStorage.getItem('issues'));
    issues.push(issue);
    localStorage.setItem('issues', JSON.stringify(issues));
  }
  
  document.getElementById('issueInputForm').reset();
 
  fetchIssues();
  
  e.preventDefault(); 
}

Đầu tiên, các giá trị đầu vào từ các điều khiển biểu mẫu được truy xuất và lưu trữ trong các biến cục bộ. issueStatus được đặt thành Open và issueId được tạo bằng cách gọi hàm Chance. hướng dẫn(). Tiếp theo, đối tượng vấn đề mới được chèn vào đối tượng vấn đề trong Bộ nhớ cục bộ

Sau khi chèn đối tượng problems vào Bộ nhớ cục bộ, chúng ta cần làm trống biểu mẫu bằng cách gọi phương thức reset(). Chúng tôi đang gọi lại hàm fetchIssues() để đảm bảo rằng đầu ra danh sách được tạo lại và mục sự cố mới sẽ hiển thị

Cuối cùng, chúng ta cần thực thi e. preventDefault() để tránh việc gửi biểu mẫu mặc định đang diễn ra

Đặt trạng thái đã đóng

Đầu ra HTML được tạo cho từng mục vấn đề trong hàm fetchIssues chứa một nút có thể được sử dụng để đặt trạng thái vấn đề thành Đã đóng

Close

Ở đây, chúng tôi đang đính kèm sự kiện nhấp vào phương thức xử lý sự kiện setStatusClosed. Việc thực hiện phương pháp này có sẵn trong danh sách sau

0

Id của mục vấn đề hiện tại được chuyển vào dưới dạng tham số. Để truy xuất mục tương ứng từ Bộ nhớ cục bộ, trước tiên chúng tôi cần truy xuất các mục sự cố ở định dạng JSON. Điều này được thực hiện bằng cách gọi

7 và chuyển kết quả cho phương thức

1

Xóa một vấn đề

Một nút khác được tạo cho từng mục vấn đề

1

Bằng cách nhấp vào nút này, người dùng sẽ có thể xóa mục sự cố hiện tại khỏi danh sách và khỏi Bộ nhớ cục bộ. Sự kiện nhấp chuột được liên kết với chức năng xử lý sự kiện xóaIssue. Việc thực hiện phương pháp này có thể được nhìn thấy trong những điều sau đây

2

Việc triển khai tương tự như việc triển khai hàm setStatusClosed mà chúng ta đã thấy trước đây. Sự khác biệt chính là chúng tôi đang sử dụng phương thức nối để xóa mục hiện tại khỏi các vấn đề về mảng. Sau khi đã xóa mục vấn đề hiện tại khỏi mảng, chúng tôi đang ghi lại mục đó vào Bộ nhớ cục bộ và thực hiện lại hàm fetchIssues để cập nhật đầu ra danh sách

Làm cách nào để xây dựng một dự án trong JavaScript?

Tôi có thể phát triển JavaScript ở đâu?

Làm cách nào để tạo một dự án JavaScript trong Visual Studio?

Làm cách nào để chạy một dự án JavaScript?