精华内容
下载资源
问答
  • 前些天公司有个需求需要用到 Node 实现,完成之后...需要实现的需求在命令行输入形如node todo add/delete/list/done/edit等命令完成对待办事项的增删改查。需求很简单,目的是通过增删基本的使用增进对 Node 的了...

    前些天公司有个需求需要用到 Node 实现,完成之后觉得自己调自己接口的感觉有点意思。此外,JD 中也总说能够熟练使用 Node 是加分项,现在以一个 ToDo 小应用作为学习 Node 开发的开始。

    需要实现的需求

    在命令行输入形如node todo add/delete/list/done/edit等命令完成对待办事项的增删改查。需求很简单,目的是通过增删基本的使用增进对 Node 的了解。

    分析如何实现

    首先,我们的命令是直接输入在命令行中的,没有图形化界面。那就需要知道 Node 是如何获取命令行中参数的。

    对于如何获取参数,谷歌一下,我就知道。

    8dbde37dc34c19b4ad57a36c8773626b.png

    以下是翻译搜索结果中第二条官方文档的解释

    使用 process.argv 获取命令行中的参数。通过命令行传递参数是一个非常基本的编程任务,对于任何一个想要尝试编写命令行接口的人来说都是必要的。在 Node.js 以及和 C 相似的环境中,所有被 shell 接收的命令行参数都被传递到了一个叫 argv(即参数值的意思)的数组中。Node.js 以 process.argv 的形式把每一个运行中程序的该数组暴露出来。需要说明的是,参数数组中前两项Node命令所在的文件路径和当前执行脚本所在路径。

    获取用户要进行的操作和内容之后,由于 JS 并不具备文件操作的能力,所以需要知道 Node 是如何操纵文件,这其中包含创建并写入甚至删除。这也是持久化存储的能力,需要在关闭进程后仍然能够获取之前的操作内容。

    通过搜索Node.js write and read file就可以获得相关的解决方案了。但其实更可行的方式是直接在官方文档中直接搜索write/read这样的关键字。

    编码实现

    通过我们之前的分析,我们可以编写如下代码:

    // 获取命令行中除前面两项路径外的参数let argus = process.argv.slice(2);// 获取命令行输入的动作和内容const action = argus[0];const content = argus[1];const content1 = argus[2];

    获取到要执行的动作和参数后,就可以进一步操作了,增加删除或者编辑。这里很直接的想到可以用 switch 语句,不过 if 语句也行。可编写代码如下:

    // 使用数组来保存这些操作后的内容let taskList = []if (action === "add") {    taskList.push([content, false]);}if (action === "list") {    console.log(taskList);}if (action === "delete") {    taskList.splice(content - 1, 1);}if (action === "done") {    taskList[content - 1][1] = true;}if (action === "edit") {    taskList[content - 1][0] = content1;}// 对于 edit 和 done 的动作,这里简单处理为:完成即把该项的状态标志为true,编辑则把输入的第五个参数覆盖原来的任务内容。

    写到这里,可以发现的问题是,每次执行完命令后的任务列表内容消失了。这是因为写入数组的内容只是临时的存在内存中,程序执行完毕之后内存就销毁了。所以需要找个法子把数组的内容长久地存储起来,就好比新建记事本在里头写点东西,下次开机你还是看到里头内容一样。

    通过搜索官方文档,我们可以发现文件系统中的 readFile & writeFile API。使用很简单,最基本的是读取内容或者写入内容的路径。

    由此,可以编写如下代码

    let readContent = fs.readFileSync('F:\\code\demo\mydemo')fs.writeFileSync("F:\\Code\\Daily-code\\Demo\\todoDb", taskList);// 实际用第一行时会发现,log出来的内容是形如 `5b 5b 65 68···` 这样的编码,// 这是因为没有设定文件编码格式,就像HTTP中的`Accept-Language`请求头。// 所以需要加上第二个参数`utf-8`,或者在得到readContent后使用toString方法转为字符串。

    写到这里,似乎已经把小应用做完了。把前面说到的代码合并起来看看。

    let fs = require("fs");let argus = process.argv.slice(2);const action = argus[0];const content = argus[1];const content1 = argus[2];const dbPath = "F:\\Code\\Daily-code\\Demo\\todoDb";let readContent;let taskList = [];readContent = fs.readFileSync(dbPath, "utf-8");taskList = JSON.parse(readContent);if (action === "add") {    taskList.push([content, false]);}if (action === "list") {    console.log(taskList);}if (action === "delete") {    taskList.splice(content - 1, 1);}if (action === "done") {    taskList[content - 1][1] = true;}if (action === "edit") {    taskList[content - 1][0] = content1;}fs.writeFileSync(dbPath, JSON.stringify(taskList));

    再细想下会发现,还存在 bug。比如当一开始数据库文件不存在时,进行读取就会报错。所以需要一个机制来检查当前访问的路径是否存在,不存在则建立再写入内容。相关的 API 是fs.stat,传入一个文件路径以及回调函数。回调函数中有两个参数 err & stats。可以通过对 err 参数值的判断确认当前数据库文件是否存在。如果 err 为 null,则当前路径文件存在,可读取;如果 err.code 为ENOENT则表明传入的路径不存在(错误码都是大写)。

    不过也可以直接使用readFileAPI,前面说到前两个参数,还有第三个参数。即回调函数,和fs.stat的回调函数一样有err & data

    选择那个方法完成判断就随个人喜好了。

    一些优化

    路径不能写死 之前的路径是直接写死的绝对路径,当脚本在别处使用的时候路径就没用了,应该使用相对路径。这时可以引入 path 对象,利用其中的join方法—将当前模块的目录名(当前脚本所处目录)和数据库名连接。这样就能保证无论脚本文件在哪里,数据库文件都跟着在哪里。

    更好的展示效果 之前的任务列表展示是直接粗暴的展示数组内容,没有经过任何处理,非程序员用户对于 false 应该不懂。可以用一个for循环将列表内容挨个处理,比如完成用X标示。

    从 0 还是 1 开始 程序员都知道数组位置从 0 开始计数,但普通用户未必就知道了。所以在编辑、完成和删除的时候都有必要把 index - 1 ,这样才能保证数组中下标为 0 的那项能够获取到。

    展开全文
  • npm install express安装完我们来测试一下// app.js 运行 node app.js,打开浏览器输入http://127.0.0.1:8080回车,是不是看到Hello NodeJS啦?我们来分析下代码,主要看app.get()方法,其定义是这样子的:app....

    f44fba3268d1577d9cd0fe4b482a751b.png

    首先,我们需要安装express,很简单,就一个命令,启动终端,cd到工作目录输入如下命令

    >npm install express

    安装完我们来测试一下

    // app.js
    
    const express = require('express');
    const app = express();
    
    app.get('/', (req, res) => {
        res.send('Hello NodeJS');
    })
    
    app.listen(8080);
    

    运行 node app.js,打开浏览器输入http://127.0.0.1:8080回车,是不是看到Hello NodeJS啦?

    我们来分析下代码,主要看app.get()方法,其定义是这样子的:app.method (path, handler),method除了get之外,还有postsetputdelete等方法 。其中path是请求运行的路径,即URL中端口后面部分;handler是处理请求的方法,带有两个参数request和response。

    假如我们要处理类似请求http://127.0.0.1:8080/test1/test2/test3,get方法可以这样写

    app.get('/test1/test2/test3', (req, res) => {
        res.send('Hello NodeJS');
    })
    

    假如我们还有很多其他请求需要处理,例如:http://127.0.0.1:8080/test/test1http://127.0.0.1:8080/test/test2http://127.0.0.1:8080/test/test3。如果我们按照上面的方法把它们都写到app.js文件去,那么app.js文件必定会越来越大,不利于阅读和维护,因此我们可以写个test.js文件

    // test.js
    
    const express = require('express');
    const router = express.Router();
    
    router.get('/test1', (req, res) => {
        res.send('Get test1');
    });
    
    router.get('/test2', (req, res) => {
        res.send('Get test2');
    });
    
    router.get('/test3', (req, res) => {
        res.send('Get test3');
    });
    
    module.exports = router;
    

    然后,在app.js中添加一句 app.use('/test', test);

    // app.js
    
    const express = require('express');
    const app = express();
    const test = require('./test');
    
    app.use('/test', test);
    
    app.listen(8080);
    

    上面写的test.js其实是个路由器,所有 /test/* 请求都由test.js处理。真实项目中我们会有多个路由器,我们只需把每个路由器用 app.use() 添加到 app.js 里面即可。然而,这也存在一个问题,每增加一个新的路由器,我们都要修改 app.js 文件。如果项目是你一个人写的,或许你不会忘记增加路由器时在 app.js 文件添加 app.use(),但是如果项目是有多个人开发的,那么其他人也许就没有你那么好记性了。那么有没有一个办法增加路由器时无需修改 app.js 的方法呢?答案是肯定的。

    新建一个文件夹controllers,用来专门存放路由器,然后在app.js遍历controllers文件夹把所有路由器添加进去。没看明白直接看下面代码。

    // app.js
    
    const express = require('express');
    const fs = require('fs');
    const path = require('path');
    const app = express();
    
    let list = fs.readdirSync('./src/controllers');
    list.forEach(file => {
        let controller = path.basename(file, '.js');
        let router = require(`./controllers/${controller}`);
        app.use(`/${controller}`, router);
    });
    
    app.listen(8080);
    

    以后新加路由器就直接在controllers文件夹新建文件就行了,再也不需要修改app.js。

    看到controller这个词是否想起了大名鼎鼎的MVC框架呢?没错,这个controllers里面存放的其实也就是MVC中的控制器。绑定控制器,我们还有更简单的方法,直接使用express-controller组件,不过这个组件需要自己安装。我们直接来看下怎么用吧。

    express-controllerwww.npmjs.com
    64067ce04a5659a6b1cac770ecdbbb36.png
    // app.js
    
    const express = require('express');
    const expressControllers = require('express-controller');
    
    const app = express();
    const router = express.Router();
    
    // 路由控制
    app.use(router);
    
    // 绑定路由控制器
    expressControllers.setDirectory(__dirname + '/controllers').bind(router);
    
    // 启动服务,监听端口
    app.listen(8080);
    

    写个testController.js测试一下,注意:文件名后面一定要加上Controller,一定要大写“C”

    // testController.js
    
    module.exports = {
        
        get_index : function (req, res) {
            res.send('This is a controller.');
        },
        
        get_test : function (req, res) {
            res.send('Get test');
        },
    }
    

    MVC怎能只有controller,而没有model和view呢。即使我们做的是API服务,那也不能缺少model啊。下面我们继续看看如何添加model。

    先创建个文件夹,给它起个名字叫models吧,然后在models里面新建个user.js,随便写个测试方法。

    // user.js
    
    module.exports = {
    
        test : function() {
            return 'This is model data';
        }
    
    }
    

    然后修改我们的testController.js,如下

    // testController.js
    
    const user = require('../models/user');
    
    module.exports = {
        
        get_index : function (req, res) {
            res.send('This is a controller.');
        },
        
        get_test : function (req, res) {
            res.send(user.test());
        },
    }
    

    model其实就是一个普通的js文件。我们继续看下view。

    同样,我们新建一个views文件夹,然后新建一个文件userShow.ejs,如下

    <!doctype html>
    <html lang="zn">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="/css/amazeui.min.css">
        <script src="/js/jquery.min.js"></script>
    </head>
    <body>
        <h1>hello world</h1>
        <ul>
            <% user.forEach(function(user){%>
                <li>name : <%= user.name %>---email : <%= user.email %></li>
            <% });%>
        </ul>
    </body>
    </html>

    这里我们用到一个模板引擎EJS,

    EJS -- 嵌入式 JavaScript 模板引擎ejs.bootcss.com

    然后app.js文件需要稍作修改,如下

    // app.js
    
    const express = require('express');
    const expressControllers = require('express-controller');
    const path = require('path');
    
    const app = express();
    const router = express.Router();
    
    // 视图加载
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'ejs');
    
    // 路由控制
    app.use(router);
    
    // 绑定路由控制器
    expressControllers.setDirectory(__dirname + '/controllers').bind(router);
    
    // 启动服务,监听端口
    app.listen(8080);
    

    接着我们在controller添加个测试方法

    // testController.js
    
    const user = require('../models/user');
    
    module.exports = {
    
        get_index: function (req, res) {
            res.send('This is a controller.');
        },
    
        get_test: function (req, res) {
            res.send(user.test());
        },
    
        get_user: function (req, res) {
            user.getUser((data) => {
                res.render('userShow', data);
            })
        }
    }
    

    然后在model添加数据

    // user.js
    
    module.exports = {
        test: function () {
            return 'This is model data';
        },
    
        getUser: function (callback) {
            callback({ user: [{ name: 'a', email: 'e' }] });
        }
    }
    

    至此,简单的MVC我们已经实现了。实际项目中我们会有很多静态资源文件,诸如html、js、css和图片等,我们可以把这些文件统一放到一个文件夹public,然后在app.js中指定该文件夹路径为静态资源文件路径。此外,我们在开发过程中还经常要处理Json数据,解析body,输出日志等。

    // app.js
    
    const express = require('express');
    const expressControllers = require('express-controller');
    const path = require('path');
    const logger = require('morgan');
    const cookieParser = require('cookie-parser');
    const bodyParser = require('body-parser');
    
    const app = express();
    const router = express.Router();
    
    // 视图加载
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'ejs');
    
    //静态文件载入
    app.use(express.static(path.join(__dirname, 'public')));
    
    //传输数据json处理
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    
    // 路由控制
    app.use(router);
    
    // 绑定路由控制器
    expressControllers.setDirectory(__dirname + '/controllers').bind(router);
    
    // 启动服务,监听端口
    app.listen(8080);
    

    OK,express简单介绍就到此了,赶紧试试吧。

    Express - 基于 Node.js 平台的 web 应用开发框架www.expressjs.com.cn
    展开全文
  • 需求 √ 可以列出所有的todo项 √ 可以新增todo √ 可以编辑todo √ 可以删除todo √ 可以... 使用文档/工具 * nodejs: nodejs文档 * devdocs: 开发文档,有JS、Nodejs、Babel、Chai、Koa等等都可查 * commanderj...
    1. 需求

    √ 可以列出所有的todo项

    √ 可以新增todo

    √ 可以编辑todo

    √ 可以删除todo

    √ 可以标记todo为已完成/未完成

    2. 使用文档/工具

    * nodejs: nodejs文档

    * devdocs: 开发文档,有JS、Nodejs、Babel、Chai、Koa等等都可查

    * commanderjs : 简单的node.js命令行工具

    * inquirerjs: 常见的交互式命令行用户界面的集合

    3. 代码实现

    * github地址

    4. commander使用

    * 用program.option来定义选项

    const 

    6d3122ca36e721079d3ac55f78366578.png
    结果


    * 用program.command来定义命令

    program
      

    f18e209075a4dc1310a994ca5de678a8.png
    结果

    5. inquirerjs的使用

    * 询问操作

    const 

    3cd8a97ed84c7d9c4c42b9fd7e950e85.png
    结果

    * 输入操作

    inquirer
        

    335516f2a10bf7e55696e37f525c7d24.png
    结果

    6. 代码发布至npm

    * 修改package.json文件

    {
      

    * 在cli.js文件中加入shebang

    #!/usr/bin/env nodejs
    

    * 让cli.js变成可执行文件

    chmod +x cli.js

    * 开始发布

    yarn 

    acca1ce6e6581b3a2e0aeca2c4dbef77.png
    查看所有源

    2e288becd5985d6cf1a6708e84746f39.png
    登录npm

    3f27b9d2463e5e494c583081c8d3b16b.png
    发布成功

    7. 测试文件的读写

    * 测试工具:jest

    * 测试代码: github地址

    * 安装依赖,为package.json文件添加scripts字段

    yarn 

    * 新建目录 _test_

    * 基于__test__创建单元测试文件,这里是针对db.js文件的, 命名为db.unit.js/db.spec.js

    describe

    8. 调试Node

    * vscode: 配置launch.json文件

    - 教程

    * 命令行调试

    - 教程

    展开全文
  • 比如jsp中的list如下 latitude[30.6354, 30.6355, 30.6356],怎样在js中让数组data等于latitude
  • 展开全部List数据,从java后台传至js中接收的方法:新建bean类public class Test {private int Id;public int getId() {return Id;}public void setId(int id) {Id = id;}}2.再建返回List的java方法public List list...

    展开全部

    List数据,从java后台传至js中接收的方法:新建bean类

    public class Test {

    private int Id;

    public int getId() {

    return Id;

    }

    public void setId(int id) {

    Id = id;

    }

    }

    2.再建返回List的java方法

    public List list(){

    Test t=new Test();

    t.setId(1);

    List list = new ArrayList();

    list.add(t);

    return list;

    }

    3.配置web.xml——补加e68a843231313335323631343130323136353331333363386133导入dwr配置的代码

    dwr-invoker  org.directwebremoting.servlet.DwrServlet

    debug

    true

    dwr-invoker

    /dwr/*

    4.配置dwr.xml——creator+concert

    5.js文件中正确接收

    function callBackHello(data){

    alert(data[0].id);

    }

    function testList(){

    service.list(callBackHello);

    }

    展开全文
  • ODOO 新建按钮的js

    2019-09-18 16:51:18
    odoo.define('dingding_base.callback.manage.button', function (require) { ... //list let ListController = require('web.ListController'); //对话框 let Dialog = require('web.Dialog'...
  • 安装好Vue.js脚手架工具(vue-cli)后,根据Vue.js模板新建一个项目. 1.使用vue指令-vue list 获取官方模板,官方提供多种模板. 2.使用vue init 根据相应的模板来建立vue项目 假设根据webpack模板来新建,就是vue...
  • js页面判断List内数据是否重复

    千次阅读 2018-12-19 11:11:14
    //新建一个list存放套餐组合商品名称 var cdList = new Array(); cdList.push($(&amp;quot;#typ&amp;quot;).val()); //判断原材料是否重复添加 var nary=cdList.sort(); for(var i=0;i&amp...
  • <div><p>新建了一个测试文件 ./test/users-test.js 代码如下 <pre><code> import expect from 'expect'; import users from '../src/models/users'; describe('reducers', () => ...
  • 如上图所示,在src下新建views文件夹,在该文件夹下添加todo-list.js文件。代码如下所示: import React, { Component, Fragment } from 'react'; import '../css/style.css'; import TodoItem from '..
  • 上一篇:使用 Node.js 实现一个命令行 todo-list(1)- 基本功能上一篇文章实现了工具的基本功能,这篇文章来试着为工具添加单元测试。选择测试框架这里选择 Jest,根据官网教程安装并修改 package.json:{ 项目...
  • 上一篇:使用 Node.js 实现一个命令行 todo-list(1)- 基本功能上一篇文章实现了工具的基本功能,这篇文章来试着为工具添加单元测试。选择测试框架这里选择 Jest,根据官网教程安装并修改 package.json:{ ... ...
  • 我们需要新建一个js文件夹 比如bolglist.js文件 const router = require('koa-router')() router.prefix('/api/blog') router.get('/', function (ctx, next) { ctx.body = 'this is a users response!' }) ...
  • IDE v1.5.0更新日志[新增] 更新手机环境为1050的快应用调试器和预览版[优化] 优化了安装包结构,体积减小,安装速度提高[修复] 修复已知问题往期版本 更新日志IDE v1.4.1[新增] 新建组件[新增] 新建卡片[新增] web...
  • vue引用外部js

    2020-12-08 16:00:43
    新建一个js文件,如我的 export const list1 = [ { code: 'abc', id: 1 }, { code: 'def', id: 2 }, ]; export const list2 = []; export const list3 = []; 引用: import { list1 , list2,list3 } from '.....
  • 一、修改代码项目奔溃 修改完代码之后会发现...events.js:183 throw er; // Unhandled 'error' event ^ Error: read ECONNRESET at _errnoException (util.js:1024:11) at TCP.onread (net.js:615:25) 2.执...
  • js xlsx 的导出

    2020-01-10 11:00:12
    1.安装依赖 npm install -S file-saver xlsx ...2.项目中src下新建一个js文件夹放入两个文件Blob.js和 Export2Excel.js 3.使用 onExport:function(){ // console.log('导出EXCEL'); const list = t...
  • 基本使用在 Vue.js 中,可以通过 v-for 指令轻松实现列表渲染,在 vue_learning/basic 目录下新建 list.html,编写基于 Vue.js 实现的列表渲染代码如下:<html lang="en"><head> ...
  • 基本使用在 Vue.js 中,可以通过 v-for 指令轻松实现列表渲染,在 vue_learning/basic 目录下新建 list.html,编写基于 Vue.js 实现的列表渲染代码如下:html><htmllang="en"><head><metacharset=...
  • js给数组去重写法

    2019-10-06 18:57:49
    数组为 var list =['A','B','A']; 法一:常规做法,新建list,给list添加元素,添加前判断是否包含 var removeRepeatItem = function(list...
  • mock.js随笔

    2021-01-11 16:22:44
    在vue项目中新建一个为mock.js 代码为: `//引入 mockjs 模块 import Mock from "mockjs"; Mock.mock("myList", { "list|5": [ //对象 5是固定值 可以设置1-20 随机 //随机返回5项 { // title: "@ctitle(5,20)",...
  • 搭建Node.js开发环境

    2021-04-13 00:25:45
    2、在项目新建bin文件夹,在bin中新建www.js,并写入以下代码: const http = require('http') const PORT = 8000 const serverHandle = require('../app') const server = http.createServer(serverHandle) ...
  • Mock.js 的使用

    2019-06-11 11:46:47
    Mock.js (基于 Vue 项目中演示) 参考自 (mockjs官网) ...复制代码新建一个 mock.js 文件 import Mock from 'mockjs' export const list = Mock.mock({ 'foods|10-50': [{ 'id|+1': 1, // id++ 'name': '@cti...
  • ChartJs的实际运用

    千次阅读 2019-05-10 11:01:35
    此次demo的背景是在angularjs作为前端框架的项目中使用, 1、新建jsp(html)页面, 2、引入cdn,因为我懒得下载js,注意版本 ...%@include file="/commons/include/list.jsp"%> <script src...
  • 第一步:新建js文件将下面文件复制到文件中保存。 第二步:新建html文件将代码导入html文件中保存,最后运行就可以看到结果了,目前只有微软的ie、edge浏览器可以运行,谷歌不太支持运行结果。 .js文件 function ...
  • vue新建一个项目

    2019-12-14 09:51:57
    1.先安装好node.js 首先在node官网下载安装 检测是否安装完成: node -v npm -v 2.安装vue-cli npm install vue-cli -g vue list 查看是否安装完成 3.新建vue项目 vue init webpack “demo” ...
  • vue在js中配置全局API接口

    千次阅读 2019-01-08 16:52:28
    在src文件夹中新建util文件夹,然后在新建一个globalAPI.js文件。 在js中配置后端的接口数据 const http = 'http://127.0.0.1:8989' const globalAPI = { // 用户列表 user_list: http + '/api/all/users', ...
  • 本文介绍了VsCode新建VueJs,分享给大家,具体如下: 使用vue-cli快速构建项目 ( vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。 安装vue-cli之前,需要先安装了vue和webpack ) · node -v //(版本低...
  • # 在 assets 文件夹下新建 js 文件夹,再在js文件夹下新建 mock.js 文件 /* * 引入mockjs * */ import Mock from 'mockjs' /* * url = '/api/test/list' * data|20 = 生成20条数据 * */ Mock.mock('/api/test/li...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 287
精华内容 114
关键字:

js新建list