todoList案例
頁面布局書寫（自己寫）
模擬數據
db.json
{
"todos":[
{
"userId": 1,"
id": 1,"
title": "王者榮耀",
"completed": false
},
{
"userId": 1,
"id": 2,
"title": "吃飯",
"completed": false
},
{
"userId": 1,
"id": 3,
"title": "寫代碼",
"completed": false
},
{
"userId": 1,
"id": 4,
"title": "學李丹看女主播",
"completed": true
},
{
"userId": 1,
"id": 5,
"title": "刷抖音",
"completed": false
}
]
}
啟動json-server服務
json-server -w 文件名 -p 端口號 -H 主機名
頁面數據請求渲染
封裝工具類
export function request(url,method,data={}){
return new Promise((resolve, reject) => {
$.ajax({
url,
method,
data,
success(res) {
resolve(res)
},
error(err) {
reject(err)
}
})
})
}
抽取請求做出一個api文件
//下載jQuery沒有模塊化 需要先鏈入到對應的html文件
//導入工具類中的ajax方法
import {request} from '../util/index.js'
//導出獲取所有的todos的接口
export const getTodos = () => request('http://127.0.0.1:8888/todos','get')
//根據id查詢對應的todo
export const getTodoById = (id) =>
request(`http://127.0.0.1:8888/todos/${id}`,'get')
//導出添加todo的接口
export const addTodo = (todo) =>
request('http://127.0.0.1:8888/todos','post',todo)
//刪除todo的接口
export const deleteTodoById = (id) =>
request(`http://127.0.0.1:8888/todos/${id}`,'delete')
//修改
export const updateTodoById = (newTodo) =>
request(`http://127.0.0.1:8888/todos/${newTodo.id}`,'put',newTodo)
核心js文件
//頁面的業務處理
import {getTodos,deleteTodoById,addTodo,updateTodoById,getTodoById} from
'../api/index.js'
//獲取content的dom元素
let content = $('.content')[0]
//數據
let todos = []
//刪除方法
window.deleteById = async function(id){
await deleteTodoById(id)
//重新渲染
renderAllList()
}
//1對1修改
window.changeCompleted = function(id){
//根據id查詢對應的todo
getTodoById(id).then(async todo=>{
todo.completed = todo.completed.toString()=='true'?'false':'true'
await updateTodoById(todo)
//重新渲染
renderAllList()
})
}
//渲染內容到content的li
async function renderAllList(){
let renderTodos = []
//判斷當前是flag是幾
if(getFlag()==0){
//請求全部加給對應的todos
await getTodos().then(res=>{
todos = res
renderTodos = todos
})
}else{
switch(getFlag()){
case 1:
renderTodos =
todos.filter(item=>item.completed.toString()=='false')
break;
case 2:
renderTodos =
todos.filter(item=>item.completed.toString()=='true')
break;
}
}
//下面的是每次切換都要請求
// await getTodos().then(res=>{
// renderTodos = res
// })
// switch(getFlag()){
// case 1:
//
renderTodos =
renderTodos.filter(item=>item.completed.toString()=='false')
//
break;
// case 2:
//
renderTodos =
renderTodos.filter(item=>item.completed.toString()=='true')
//
break;
// }
//清空內容
content.innerHTML = ' '
renderTodos.forEach(({id,title,completed}) => {
//將數據渲染到ul
content.innerHTML += `
<li>
<input type="checkbox" onclick="changeCompleted(${id})"
${completed.toString()=='true'?'checked':''}>
<span class="title">${title}</span>
<span class="delete" id='${id}' onclick='deleteById(${id})'>x</span>
</li>
`
});
}
//添加操作
$('.add').click(async function(){
//獲取input框的內容
let value = $(this).prev('input').val()
//準備一個新增的對象
let todo = {
"
userId": 1,
// "id": Date.now(),//如果你要傳入id應該隨機生成 當前的我的id自增的 他會自動加1
"
title": value,
"
completed": false
}
//調用接口進行添加
await addTodo(todo)
//重新渲染
renderAllList()
})
//監聽對應的點擊
// 事件委托
// $('.content').click(function(e){
// e = e || window.event
// //判斷當前的目標對象
// if($(e.target).prop('class') == 'delete'){
//
//刪除操作
// }
// })
//判斷對應的現在顯示的是哪個一個
window.getFlag = ()=>{
return Array.from(document.querySelectorAll('.control')).findIndex(item=>{
return item.className.includes('selected')
})
}
//給所有的control添加點擊事件
$('.control').click(function(){
$(this).addClass('selected')
$(this).siblings().removeClass('selected')
//渲染
renderAllList()
})
window.onload = renderAllList
//修改每次都需要發送對應的請求 進行相關修改（及其耗費資源）
//將所有的修改保存下來 頁面關閉統一請求（一次）
//批量修改
window.onunload = function(){
}
node
概述
Node.js發布于2009年5月，由Ryan Dahl開發，是一個基于Chrome V8引擎的JavaScript運行環境，使
用了一個事件驅動、非阻塞式I/O模型， [1] 讓JavaScript 運行在服務端的開發平臺，它讓JavaScript成
為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。
node相關內容
node 命令 運行js文件的（自帶）
npm 命令包管理器（管理依賴包的）（自帶）
nvm node版本管理器（node version manage）（安裝）
npx node的快速執行工具（類似于node 快速啟動模塊）（使用npm安裝）
nrm node的npm管理工具 （管理npm的鏡像）（使用npm安裝的）
nvm
安裝
無腦化（最后會彈窗一個框里面顯示是否管理當前的node版本）
配置
在環境變量中進行編輯（如果你不配置對應的環境變量 那么在path下要直接填入對應的變量值）
測試
nvm version
nvm相關指令
nvm current #查看當前的版本
nvm list #以列表形式查看所有管理的node版本
nvm install 16
nvm use 版本號
npx（node版本5.2以上內置npx）
npm i npx -g
nrm（管理對應的鏡像地址）
npm i nrm -g
查看當前的所有鏡像
添加鏡像
nrm add taobao https://registry.npmmirror.com/
切換鏡像
nrm use taobao
npm配置淘寶源（備選方案）
npm config set registry https://registry.npmmirror.com
cnpm安裝（備選方案）
npm install cnpm -g --registry=https://registry.npm.taobao.org
node和npm命令
node運行js文件（進入node 執行的js相關指令）
node js文件名
test.js
console.log('hello wrold')
node test.js
npm指令（包管理器）
npm init 模塊初始化（產生一個package.json文件）
package.json文件是我們對應的項目相關的配置文件（json后綴一般是配置文件）
npm init
package.json （script相關的內容 可以使用npm加上對應的腳本名來運行）
{
"
name
"
:
"
code",
"
version": "1.0.0",
"
description": "very good",
"
main": "test.js",
"
scripts": {
"
test
"
:
"
echo \"Error: no test specified\" && exit 1",
"
jsonServer":"json-server -w ./todoList/mock/db.json" //自定義的腳本 npm run
腳本名
},
"
author": "jack",
"
license": "ISC"
}
模塊安裝
npm install 模塊名@版本 #簡寫為npm i
如果沒有模塊名他會自動找對應的package.json 里面的依賴（dependencies）
如果對應的加了模塊名 他會在package.json里面添加一個字段
當你運行npm i的命令會產生一個node-modules的文件夾（模塊包的代碼都在里面）
node-modules這個文件夾如果沒有你的項目是不能運行 （在上傳到git 不要上傳node-modules
文件夾）
模塊卸載
添加的包越多功能越強大
npm uninsatll 模塊名
模塊查看
npm ls # npm list
模塊版本更新
npm update
模塊的發布（添加用戶名密碼）
npm publish
模塊的用戶名密碼添加
npm adduser
配置指令
npm config set 相關設置
npm的相關修飾命令符
-
S 全稱--save #保存在上線環境
-
D 全稱--develoop #保存在開發環境
-
g 全稱--global #全局保存 （當前的電腦的用戶下）
node的常用模塊
node的模塊分類
內置模塊（node本身自帶）不需要安裝內置模塊文檔地址
http
event
fs
net
...
第三方模塊（第三方寫的）需要安裝的第三方模塊包參考文檔
mysql
mogoes
express
md5
jwt
......
node的模塊化
瀏覽器端
AMD 預加載CMD懶加載
服務器（*）
common.js(require.js)
node的global對象不是window（而是一個叫global的對象）
