get请求获取数据与查询（接口）（Typescript）
用Node+Typescript+Express书写get请求获取数据与查询的接口
准备JSON文件在package.json同级下建名为data的文件夹，里面建你要的xxx.json文件和汇总的xxx.ts文件
我建了posts.json,data.ts
json里是数组对象的形式
代码//posts.json,内容是随便写的，按照key，value方式就可[ { "userId": 1, "id": 1, "title": "sunt aut facere repellat ", "body": "nnostrum rerum est autem sunt rem eveniet architecto", },{ "userId": 1, "id": 2, "title": "qui est esse", ...
搭建Node+Typescript+Express环境
准备
VSCode开发工具
Postman测试端口
一个空的文件夹(名字随意取 如：node-ts-api)
环境搭建通过Code打开文件夹打开终端：快捷键Ctrl+`或沿底边拉出输入 npm init –yes 命令（两条-）
安装package.json实列化
将里面的”main”:”index.js”改为”main”:”server.ts”
输入 npm install typescript -g 命令
全局安装typescript
浏览器不识别ts文件，要将ts进行转化成js
为什么呢？比我们自己写的严谨更优化
转化命令 tsc server.ts后会出现server.js文件
输入 tsc –init 命令（两条-）
tsconfig.json(ts的配置文件)
输入 npm install express 命令
服务器依赖的模块(打包上线)
输入 npm install @types/node -g 命令
全局安装开发依赖模块
引入ts依赖内容
输入 npm install @types/express -D 命令
开发环境依赖
...
MySQL常用操作(关系数据库)
增增insertinto 表名(列，…，列)values('value’,…,’value’)db.query('insert into background value (?,?,?) ',[0, imgName, pic],function (err, data) {}）
删删deleteform 表名where 筛选条件db.query(`delete from background where id=${id} `, function (err, data) {}）
改改update 表名set 列名='value’,…,列名='value” where 筛选条件db.query(`update background set id=?,name=?, imgUrl=? where id=${upid}`,[upid, imgName, pic],function (err, data) {}）拼接方式 db.query( ...
express实现模块化
建一个xxx.ejs文件
多个页面同一样式布局
封装在这个文件里
如搜索，查询，添加按钮
可以直接body标签，也可以完整的页面代码，功能等都可生效//view/xxx.ejs项目需求命名 <div class="select"> <form action="/like" method="get"> <select> <option value="111">111</option> <option value="222">222</option> <option value="333">333</option> <option value="444">444</option> ...
express主页删除数据库数据
给对应数据
data-id=”<%= item.id %>”
data-name=”<%= item.name %>”
data-imgUrl=”<%= item.imgUrl %>”<table class="table"> <thead> <tr> <th>ID</th> <th>图片名称</th> <th>图片路径</th> <th>操作</th> </tr> </thead> <tbody> <% backgroundList.forEach(function(item){ %> <tr> <td> <%= item.id %></td> ...
express主页删除数据库数据
写删除对话框//style样式.isDelete{ display:none}//body里 <div class="dialog isDelete"></div> <div class="dialog-wrap isDelete"> <h3>确定是否删除</h3> <div class="close" id="close"> <img src="/images/home_black.png" alt=""> </div> <div class="dialog-footer"> <span class="cancel" id="cancel">取消</span> <button cl ...
express主页实现搜索功能
需要form的active&&method位置和请求方法
input需要个name属性，不然会不知道传的名字是啥<div class="main"> <div class="select"> <form action="/like" method="get"> <select> <option value="111">111</option> <option value="222">222</option> <option value="333">333</option> <option value="444">444</option> &l ...
express主页右边分页and逻辑
将获取的数据分页
backgroundList.js文件里var express = require('express')var router = express.Router()var db = require('../sql.js')/* GET home page. */router.get('/', function (req, res, next) { // 收到页数 var pageNum = req.query.page db.query('select * from background ', function (err, data) { var pager = {} // 当前页码 pager.pageCurrent = pageNum || 1 // 总的记录数 pager.maxNum = data.length // 每页显示多少条记录 pager.pageSize = 5 // 一共多少页 ...
promise.all(面试题)
面试中遇到的题，补一补
ES6对promise.all的理解以及应用场景用于将多个Promise实例，包装成一个新的Promise实例let p1 = new Promise((reslove,reject)=>{ resolve("成功01")})let p2 = new Promise((reslove,reject)=>{ // resolve("成功02") resolve("失败02")}).catch(reason => console.log(reason))let p3 = new Promise((reslove,reject)=>{ resolve("成功03") resolve("失败03")})let pAll = Promise.all([p1,p2,p3])console.log(pAll)
pAll的状态，由p1，p2，p3来决定，只有当这三个都为成功，pAll才会 ...
express主页右边路由渲染页面and向数据库添加数据
点击左边目录，路由渲染到右边
frameset和frame标签中的name属性
用于target=”name的值”切换的路由，由渲染在左边，改为name的位置，如右边//在left.ejs里<li class="menu"> <img class="img" src="/images/home_black.png" alt=""> <a href="/backgroundList" target="right">background图</a></li>
引入bootstrap样式
官网下载，只要bootstrap.min.css其他可以删掉
直接加上类名class=”table”<body> <div class="container"> <div class="main"> <div ...
