1.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文件
核心js 文件//下载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(){
}
2.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
github
地址
安装
无脑化(最后会弹窗一个框里面显示是否管理当前的
node
版本)
配置
- 在环境变量中进行编辑(如果你不配置对应的环境变量 那么在path下要直接填入对应的变量值)
- 在path中进行配置
测试
nvm versionnvm相关指令
- nvm current #查看当前的版本
- nvm list #以列表形式查看所有管理的node版本
- nvm install 16
- nvm use 版本号
npx
(
node
版本
5.2
以上内置
npx
)
- npm i npx -g
nrm
(管理对应的镜像地址)
- npm i nrm -g
查看当前的所有镜像
添加镜像
切换镜像
npm
配置淘宝源(备选方案)
cnpm
安装(备选方案)
node和npm命令
node运行js文件(进入node 执行的js相关指令)
npm指令(包管理器)
npm init
模块初始化(产生一个
package.json
文件)
- package.json文件是我们对应的项目相关的配置文件(json后缀一般是配置文件)
- package.json (script相关的内容 可以使用npm加上对应的脚本名来运行)
模块安装
- 如果没有模块名他会自动找对应的package.json 里面的依赖(dependencies)
- 如果对应的加了模块名 他会在package.json里面添加一个字段
- 当你运行npm i的命令会产生一个node-modules的文件夹(模块包的代码都在里面)
- node-modules这个文件夹如果没有你的项目是不能运行 (在上传到git 不要上传node-modules 文件夹)
模块卸载
- 添加的包越多功能越强大
模块查看
模块版本更新
模块的发布(添加用户名密码)
模块的用户名密码添加
配置指令
npm
的相关修饰命令符
3.node的常用模块
node的模块分类
内置模块(
node
本身自带)不需要安装
内置模块文档地址
- http
- event
- fs
- net
- ...
第三方模块 (第三方写的)需要安装的
第三方模块包参考文档
- mysql
- mogoes
- express
- md5
- .......
node的模块化
- 浏览器端
AMD 预加载
CMD
懒加载
- 服务器 (*)
common.js(
require.js
)
node
的
global
对象不是
window
(而是一个叫
global
的对象)