node入门和基础操作

最新推荐文章于 2024-07-08 18:01:35 发布

m0_74217314

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量205

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_74217314/article/details/127813127

版权

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" οnclick="changeCompleted(${id})" ${completed.toString()=='true'?'checked':''}>
            <span class="title">${title}</span>
            <span class="delete" id='${id}' οnclick='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

github地址

安装

无脑化（最后会弹窗一个框里面显示是否管理当前的node版本）

配置

在环境变量中进行编辑（如果你不配置对应的环境变量那么在path下要直接填入对应的变量值）

在path中进行配置

切换镜像

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 adduse

配置指令

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