npm init -y(初始化项目)

npm install express（引入express）

npx express-generator -e（自动生成模板。添加对 ejs 模板引擎的支持）

npm i --save lodash（引入lodash）

路由配置carApi.js

  1. const express=require("express");
  2. let router=express.Router();
  3. const _=require("lodash");
  4.  
  5. var cars=[];
  6. cars.push({id:201701,name:"BMW",price:190,speed:"210km/h",color:"白色"});
  7. cars.push({id:201702,name:"BYD",price:25,speed:"160km/h",color:"红色"});
  8. cars.push({id:201703,name:"Benz",price:300,speed:"215km/h",color:"蓝色"});
  9. cars.push({id:201704,name:"Honda",price:190,speed:"170km/h",color:"黑色"});
  10. cars.push({id:201705,name:"QQ",price:130,speed:"210km/h",color:"白色"});
  11.  
  12. //Get
  13. router.get("/",(req,res,next)=>{
  14.     res.json({status:"ok","data":cars});
  15. })
  16. //查找单个汽车根据名称
  17. router.get("/:name",(req,res,next)=>{
  18.     //查找编号为id的汽车
  19.     let car=_.filter(cars,{name:req.params.name})
  20.     res.json({"data":car});
  21. })
  22. //查找单个汽车根据id
  23. router.get("/edit/:id",(req,res,next)=>{
  24.     //查找编号为id的汽车
  25.     let car=_.find(cars,{id:parseInt(req.params.id)})
  26.     res.json({status:"ok","data":car});
  27. })
  28. //排序
  29. router.get("/order/orderBy",(req,res,next)=>{
  30.     let car=_.orderBy(cars,["id"],["desc"]);
  31.     console.log(car);
  32.     res.json({status:"ok","data":car});
  33. })
  34. //Post
  35. router.post("/",(req,res,next)=>{
  36.     let car=req.body;
  37.     let obj=_.last(_.sortBy(cars,["id"]));
  38.     car.id=obj.id+1;
  39.     cars.push(car);
  40.     res.json({status:"ok","data":car});
  41. })
  42.  
  43. //Put
  44. router.put("/",(req,res,next)=>{
  45.     let srcCar=req.body;
  46.     let car=_.find(cars,{id:parseInt(srcCar.id)})
  47.     car.name=srcCar.name;
  48.     car.speed=srcCar.speed;
  49.     car.price=srcCar.price;
  50.     car.color=srcCar.color;
  51.     res.json({status:"ok","data":car})
  52. })
  53.  
  54. //Delete
  55. router.delete("/:id",(req,res,next)=>{
  56.     let indnx=_.findIndex(cars,{id:parseInt(req.params.id)})
  57.     cars.splice(indnx,1)
  58.     res.json({status:"ok","data":""})
  59. })
  60.  
  61. module.exports=router;

cars.js配置ejs

  1. var express = require('express');
  2. var router = express.Router();
  3.  
  4. /* GET home page. */
  5. router.get('/', function(req, res, next) {
  6.   res.render('cars', {});
  7. });
  8.  
  9. module.exports = router;

app.js全局配置

  1. var createError = require('http-errors');
  2. var express = require('express');
  3. var path = require('path');
  4. var cookieParser = require('cookie-parser');
  5. var logger = require('morgan');
  6.  
  7. var indexRouter = require('./routes/index');
  8. var usersRouter = require('./routes/users');
  9. var carApiRouter = require('./routes/carApi');
  10. var carRouter = require('./routes/cars');
  11.  
  12. var app = express();
  13.  
  14. // view engine setup
  15. app.set('views', path.join(__dirname, 'views'));
  16. app.set('view engine', 'ejs');
  17.  
  18. app.use(logger('dev'));
  19. app.use(express.json());
  20. app.use(express.urlencoded({ extended: false }));
  21. app.use(cookieParser());
  22. app.use(express.static(path.join(__dirname, 'public')));
  23.  
  24. app.use('/index', indexRouter);
  25. app.use('/users', usersRouter);
  26. app.use('/api/cars', carApiRouter);
  27. app.use('/', carRouter);
  28.  
  29. let stus=[
  30.   {id:202201,name:"tom",age:18},
  31.   {id:202202,name:"rose",age:16},
  32.   {id:202203,name:"jack",age:20},
  33.   {id:202204,name:"lili",age:15},
  34.   {id:202205,name:"lucy",age:15}
  35. ];
  36.  
  37. app.get("/stus",(req,res,next)=>{
  38.   res.json(stus);
  39. })
  40.  
  41. // catch 404 and forward to error handler
  42. app.use(function(req, res, next) {
  43.   next(createError(404));
  44. });
  45.  
  46. // error handler
  47. app.use(function(err, req, res, next) {
  48.   // set locals, only providing error in development
  49.   res.locals.message = err.message;
  50.   res.locals.error = req.app.get('env') === 'development' ? err : {};
  51.  
  52.   // render the error page
  53.   res.status(err.status || 500);
  54.   res.render('error');
  55. });
  56.  
  57. module.exports = app;

cars.ejs页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>汽车管理系统</title>
  8. </head>
  9. <body>
  10. <div id="app">
  11.     <h2>汽车管理系统</h2>
  12.     <div style="text-align:center">
  13.     <input type="text" name="" id="" placeholder="请输入你要搜索的汽车" v-model="name" style="margin-bottom: 20px;width: 30%;padding: 7px 20px;border-radius: 20px;outline: none;border: 1px solid #666;">
  14.     <button @click="search">搜索</button>
  15.     <button @click="order">升序</button>
  16.     <button @click="orderBy">降序</button>
  17. </div>
  18.    <table border="1" width="100%">
  19.     <tr>
  20.         <th>编号</th>
  21.         <th>名称</th>
  22.         <th>价格</th>
  23.         <th>车速</th>
  24.         <th>颜色</th>
  25.         <th>操作</th>
  26.     </tr>
  27.     <tr v-for="(car,i) in cars" style="text-align: center;">
  28.         <td>{{car.id}}</td>
  29.         <td>{{car.name}}</td>
  30.         <td>{{car.price}}</td>
  31.         <td>{{car.speed}}</td>
  32.         <td>{{car.color}}</td>
  33.         <td>
  34.             <a href="" @click.stop.prevent="del(car,i)">删除</a>
  35.             <a href="" @click.stop.prevent="edit(car,i)">修改</a>
  36.         </td>
  37.     </tr>
  38.    </table>
  39.    <fieldset>
  40.     <legend>添加汽车</legend>
  41.     <p>
  42.         <label>
  43.             名称
  44.             <input type="text" v-model="car.name">
  45.         </label>
  46.     </p>
  47.     <p>
  48.         <label>
  49.             价格
  50.             <input type="text" v-model="car.price">
  51.         </label>
  52.     </p>
  53.     <p>
  54.         <label>
  55.             车速
  56.             <input type="text" v-model="car.speed">
  57.         </label>
  58.     </p>
  59.     <p>
  60.         <label>
  61.             颜色
  62.             <input type="text" v-model="car.color">
  63.         </label>
  64.     </p>
  65.     <p>
  66.         <button @click="save" type="button">保存</button>
  67.     </p>
  68.    </fieldset>
  69. </div>
  70. </body>
  71. <script src="javascripts/vue/vue.min.js"></script>
  72. <script src="javascripts/axios/axios.js"></script>
  73. <script>
  74.     var app=new Vue({
  75.         el:"#app",
  76.         data:{
  77.             cars:[],
  78.             car:{id:0,name:"",price:"",speed:"",color:""},
  79.             name:"",
  80.         },
  81.         methods:{
  82.             order(){
  83.                this.carInfo();
  84.             },
  85.             orderBy(){
  86.                 axios.get("http://127.0.0.1:3000/api/cars/order/orderBy")
  87.                 .then(respons=>{
  88.                     app.cars=respons.data.data;
  89.                     console.log(this.cars);
  90.                 })
  91.                 .catch(err=>{
  92.                     throw err;
  93.                 })
  94.             },
  95.             search(){
  96.                 if(this.name==""){
  97.                     this.carInfo();
  98.                 }else{
  99.                     axios.get("http://127.0.0.1:3000/api/cars/"+this.name)
  100.                 .then(respons=>{
  101.                     app.cars=[respons.data.data];
  102.                     console.log(this.cars);
  103.                 })
  104.                 .catch(err=>{
  105.                     throw err;
  106.                 })
  107.                 }
  108.  
  109.             },
  110.             carInfo(){
  111.                 axios.get("http://127.0.0.1:3000/api/cars/"+this.name)
  112.                 .then(respons=>{
  113.                     this.cars=respons.data.data;
  114.                 })
  115.                 .catch(err=>{
  116.                     throw err;
  117.                 })
  118.             },
  119.             del(car,i){
  120.                 if(confirm("你确定要删除吗？")){
  121.                     let url="http://127.0.0.1:3000/api/cars/"+car.id
  122.                         axios.delete(url)
  123.                         .then(data=>{
  124.                             if(data.data.status==="ok"){
  125.                                 alert("删除成功")
  126.                                 this.cars.splice(i,1);
  127.                             }else{
  128.                                 alert("删除失败")
  129.                             }
  130.                         })
  131.                         .catch(err=>{
  132.                             throw err;
  133.                         })
  134.                 }
  135.                 return false;
  136.             },
  137.             edit(car,i){
  138.                 let url="http://127.0.0.1:3000/api/cars/edit/"+car.id
  139.                         axios.get(url)
  140.                         .then(data=>{
  141.                            this.car=data.data.data;
  142.                         })
  143.                         .catch(err=>{
  144.                             throw err;
  145.                         })
  146.             },
  147.             save(){
  148.                 if(this.car.id){
  149.                     axios.put("http://127.0.0.1:3000/api/cars",app.car)
  150.                     .then(respons=>{
  151.                         if(respons.data.status==="ok"){
  152.                             alert("修改成功！")
  153.                             this.car.id=0;
  154.                             this.car.name="";
  155.                             this.car.price="";
  156.                             this.car.speed="";
  157.                             this.car.color="";
  158.                             this.carInfo();
  159.                         }
  160.                     })
  161.                     .catch(err=>{
  162.                         throw err;
  163.                     })
  164.                 }else{
  165.                     axios.post("http://127.0.0.1:3000/api/cars",this.car)
  166.                     .then(respons=>{
  167.                         if(respons.data.status==="ok"){
  168.                             alert("添加成功！")
  169.                             app.cars.push(respons.data.data)
  170.                             this.car.id=0;
  171.                             this.car.name="";
  172.                             this.car.price="";
  173.                             this.car.speed="";
  174.                             this.car.color="";
  175.                             this.carInfo();
  176.                         }
  177.                     })
  178.                     .catch(err=>{
  179.                         throw err;
  180.                     })
  181.                 }
  182.             }
  183.         },
  184.         created(){
  185.            this.carInfo();
  186.         },
  187.     })
  188. </script>
  189. </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车管理系统</title>
</head>
<body>
<div id="app">
    <h2>汽车管理系统</h2>
    <div style="text-align:center">
    <input type="text" name="" id="" placeholder="请输入你要搜索的汽车" v-model="name" style="margin-bottom: 20px;width: 30%;padding: 7px 20px;border-radius: 20px;outline: none;border: 1px solid #666;">
    <button @click="search">搜索</button>
    <button @click="order">升序</button>
    <button @click="orderBy">降序</button>
</div>
   <table border="1" width="100%">
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
        <th>车速</th>
        <th>颜色</th>
        <th>操作</th>
    </tr>
    <tr v-for="(car,i) in cars" style="text-align: center;">
        <td>{{car.id}}</td>
        <td>{{car.name}}</td>
        <td>{{car.price}}</td>
        <td>{{car.speed}}</td>
        <td>{{car.color}}</td>
        <td>
            <a href="" @click.stop.prevent="del(car,i)">删除</a>
            <a href="" @click.stop.prevent="edit(car,i)">修改</a>
        </td>
    </tr>
   </table>
   <fieldset>
    <legend>添加汽车</legend>
    <p>
        <label>
            名称
            <input type="text" v-model="car.name">
        </label>
    </p>
    <p>
        <label>
            价格
            <input type="text" v-model="car.price">
        </label>
    </p>
    <p>
        <label>
            车速
            <input type="text" v-model="car.speed">
        </label>
    </p>
    <p>
        <label>
            颜色
            <input type="text" v-model="car.color">
        </label>
    </p>
    <p>
        <button @click="save" type="button">保存</button>
    </p>
   </fieldset>
</div>
</body>
<script src="javascripts/vue/vue.min.js"></script>
<script src="javascripts/axios/axios.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            cars:[],
            car:{id:0,name:"",price:"",speed:"",color:""},
            name:"",
        },
        methods:{
            order(){
               this.carInfo();
            },
            orderBy(){
                axios.get("http://127.0.0.1:3000/api/cars/order/orderBy")
                .then(respons=>{
                    app.cars=respons.data.data;
                    console.log(this.cars);
                })
                .catch(err=>{
                    throw err;
                })
            },
            search(){
                if(this.name==""){
                    this.carInfo();
                }else{
                    axios.get("http://127.0.0.1:3000/api/cars/"+this.name)
                .then(respons=>{
                    app.cars=[respons.data.data];
                    console.log(this.cars);
                })
                .catch(err=>{
                    throw err;
                })
                }
               
            },
            carInfo(){
                axios.get("http://127.0.0.1:3000/api/cars/"+this.name)
                .then(respons=>{
                    this.cars=respons.data.data;
                })
                .catch(err=>{
                    throw err;
                })
            },
            del(car,i){
                if(confirm("你确定要删除吗？")){
                    let url="http://127.0.0.1:3000/api/cars/"+car.id
                        axios.delete(url)
                        .then(data=>{
                            if(data.data.status==="ok"){
                                alert("删除成功")
                                this.cars.splice(i,1);
                            }else{
                                alert("删除失败")
                            }
                        })
                        .catch(err=>{
                            throw err;
                        })
                }  
                return false;
            },
            edit(car,i){
                let url="http://127.0.0.1:3000/api/cars/edit/"+car.id
                        axios.get(url)
                        .then(data=>{
                           this.car=data.data.data;
                        })
                        .catch(err=>{
                            throw err;
                        })
            },
            save(){
                if(this.car.id){
                    axios.put("http://127.0.0.1:3000/api/cars",app.car)
                    .then(respons=>{
                        if(respons.data.status==="ok"){
                            alert("修改成功！")
                            this.car.id=0;
                            this.car.name="";
                            this.car.price="";
                            this.car.speed="";
                            this.car.color="";
                            this.carInfo();
                        }
                    })
                    .catch(err=>{
                        throw err;
                    })
                }else{
                    axios.post("http://127.0.0.1:3000/api/cars",this.car)
                    .then(respons=>{
                        if(respons.data.status==="ok"){
                            alert("添加成功！")
                            app.cars.push(respons.data.data)
                            this.car.id=0;
                            this.car.name="";
                            this.car.price="";
                            this.car.speed="";
                            this.car.color="";
                            this.carInfo();
                        }
                    })
                    .catch(err=>{
                        throw err;
                    })
                }
            }
        },
        created(){
           this.carInfo();
        },
    })
</script>
</html>

Node.js（四）json的更多相关文章

  1. Node.js 返回 JSON 数据

    Node.js 返回 JSON 数据 request.end([data[, encoding]][, callback]) var http = require('http'); const log ...

  2. Node.js返回JSON

    在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<scri ...

  3. Update Node.js Package.json

    Update the latest package while using node.js, follow the command as following. npm i -g npm-check-u ...

  4. [转]Node.JS package.json 字段全解析

    Name 必须字段. 小提示: 不要在name中包含js, node字样: 这个名字最终会是URL的一部分,命令行的参数,目录名,所以不能以点号或下划线开头: 这个名字可能在require()方法中被 ...

  5. [读书笔记]了不起的node.js(四)

    这周的学习主要是nodejs的数据库交互上,并使用jade模板一起做了一个用户验证的网站.主要是遇到了一下几个问题. 1.mongodb版本过低 npm ERR! Not compatible wit ...

  6. node.js存json数据到mysql

    众所周知,mysql是无法存储json数据的,这个刚开始笔者也是知道的,也知道JSON.stringify()这个API的,但是当我真正要这样做利用JSON.stringify()讲要转换的JSON数 ...

  7. node.js(四)path优化(路径优化)

    1.normalize函数的基本用法 normalize函数将不符合规范的路径经过格式化转换为标准路径,解析路径中的.与..外,还能去掉多余的斜杠. 如下示例: var path = require( ...

  8. Node.js连接MySQL数据库及构造JSON的正确姿势

    做一下整理,以前也很随意的引入包链接数据库,后来发现常常连接出问题,异常退出,后来使用在网上一个方法解决问题,网址由于书签丢失,抱歉不能引用了.再有就是简单的模块化下,使得目录合理点,再有就是说明一下 ...

  9. 一名全栈工程师Node.js之路－转

    Node.js 全球现状 虽然 Node.js 在国内没有盛行,但据 StackOverflow 2016 年开发者调查,其中 node.js .全栈.JavaScript 相关的技术在多个领域(包括 ...

  10. 用 Node.js 把玩一番 Alfred Workflow

    插件地址(集成Github.掘金.知乎.淘宝等搜索) 作为 Mac 上常年位居神器榜第一位的软件来说,Alfred 给我们带来的便利是不言而喻的,其中 workflow(工作流) 功不可没,在它上面可 ...

随机推荐

  1. WPF 制作 Windows 屏保

    分享如何使用WPF 制作 Windows 屏保 WPF 制作 Windows 屏保 作者:驚鏵 原文链接:https://github.com/yanjinhuagood/ScreenSaver 框架 ...

  2. LevelSequence源码分析

    前言 这篇文章主要讲的是Unreal LevelSequence RunTime的部分.即在游戏中运行Level Sequence的源码解析.(而且抛去Replicated 的Sequence,一般S ...

  3. 1. MGR简介 | 深入浅出MGR

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 1. 为什么是MGR MGR是MySQL Group Replication的缩写,即MySQL组复制. 在以往,我们一般 ...

  4. 线程本地存储 ThreadLocal

    线程本地存储 · 语雀 (yuque.com) 线程本地存储提供了线程内存储变量的能力,这些变量是线程私有的. 线程本地存储一般用在跨类.跨方法的传递一些值. 线程本地存储也是解决特定场景下线程安全问 ...

  5. pytest-fixture执行顺序

    作用域-scope 作用域越大,越先执行,session>package>module>class>function. 是否自动调用fixture 自动调用(autouse=T ...

  6. bs4爬虫的一点心得----坑

    bs4 里提取a标签里的坑啊 今天遇到了一个很坑的事情 使用bs4(全称:BeautifulSoup)提取一个网页里所有a标签里的href属性 比较坑的地方是这个网页里有的a标签里没有href属性,所 ...

  7. 初次认识 Canvas

    画布的概念 Canvas(画布)可以用于动画.游戏画面.数据可视化.图片编辑以及实时视频处理等方面.画布在 HTML5 中是通过canvas标签来表现,通过 JavaScript 提供的画布 API, ...

  8. 使用idea remote 开发体验

    本地使用idea开发最不好的一个体验就是打开稍大的工程就非常的卡,怎么调参数都没用,现在idea推出了idea remote就赶紧来体验下. 使用方式 除了idea不需要额外下载什么包,但是因为rem ...

  9. Java SE 16 新增特性

    Java SE 16 新增特性 作者:Grey 原文地址:Java SE 16 新增特性 源码 源仓库: Github:java_new_features 镜像仓库: GitCode:java_new ...

  10. 关于Redis在windows上运行及fork函数问题

    Redis在将数据库进行持久化操作时,需要fork一个进程,但是windows并不支持fork,导致在持久化操作期间,Redis必须阻塞所有的客户端直至持久化操作完成.微软的一些工程师花费时间在解决在 ...