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的对象）
