day31 node入门

最新推荐文章于 2024-07-06 16:47:02 发布

不想上班ing

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量147

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_71706639/article/details/127812472

版权

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 等服务端语言平起平坐的脚本语言。

中文文档