【相同的地址不同请求方式,相同请求方式不同地址】
RESful 风格 API
GET http://localhost:8080/books 获取图书
POST http://localhost:8080/books/book 添加图书
GET http://localhost:8080/books/book/:id 根据id获取图书
PUT http://localhost:8080/books/book 编辑图书
DELETE http://localhost:8080/books/book/:id 删除图书
(一)将原本ajax中的url和type全部替换
(二)id获取问题:
ctx.request.query.editid====换为==>ctx.params.id
(一)新建es.html
(二)新建路由
_.get('/es',contro.actionEs())
(三)在controller中编写路由对应方法
actionEs(){
return async function (ctx) {
await ctx.render('es',{
});
}
}
(四)编写es.js
class person {
constructor(){
}
fn(){
console.log('===>',"es module");
}
}
export default person;
(五)在es.html中获取js中的方法
<h2>hello</h2>
<!-- <script src="/js/es.js"></script> -->
<script>
import('/js/es.js').then(_=>{
console.log('_default',_.default)
let Person = _.default;
let person = new Person;
person.fn();
})
</script>
(一)安装@babel/cli、@babel/core、@babel/plugin-transform-modules-systemjs
(二)“build”: "babel ./assets/js/es.js -o ./assets/js/es_bundle.js"
(三)创建.babelrc文件
{
"plugins": ["@babel/plugin-transform-modules-systemjs"]
}
(四)es.html中
<h2>hello</h2>
<script nomodule src="https://cdn.staticfile.org/systemjs/6.8.3/system.min.js"></script>
<!-- <script src="/js/es.js"></script> -->
<script type="module">
console.log("====>",'支持 es module')
import('/js/es.js').then(_=>{
console.log('_default',_.default)
let Person = _.default;
let person = new Person;
person.fn();
})
</script>
<script nomodule>
System.import('/js/es_bundle.js').then(_=>{
console.log('_default====>','system module')
let Person = _.default;
let person = new Person;
person.fn();
})
</script>
const http = require('http');
const fs = require('fs');
const path = require('path');
let req = http.request('http:/www.taobao.com',res=>{
let result = '';
res.on('data',chunk=>{
result += chunk;
})
res.on('end',() => {
// console.log('=====>','数据接收完成');
// console.log('result ====>',result);
fs.writeFile(path.join(__dirname,'baidu.html'), result, err => {
if(err) {
console.log(' ====>','err');
return;
}
console.log(' ====>','success')
})
})
});
req.end();
const http = require('http');
let req = http.request('http://localhost:8080/books',res=>{
let result = '';
res.on('data',chunk=>{
result += chunk;
})
res.on('end',() => {
console.log('result ====>',result);
})
});
req.end();
(一)第一步 运行图书管理系统服务器
(二)第二步 在运行这个服务器
const http = require('http');
const querystring = require('querystring');
let obj={
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
}
//http://nodejs.cn/api/http.html#http_http_request_url_options_callback
let req = http.request('http://localhost:8080/books/book',obj, res=>{
let result = '';
res.on('data',chunk=>{
result += chunk;
})
res.on('end',() => {
console.log('result ====>',result);
})
});
//querystring查询字符串 不光是模块 也是术语
const postData = querystring.stringify({
'name': '你好世界',
'author': '你好世界',
'category': '你好世界',
'description': '你好世界'
});
//打印瞅瞅是啥东东
console.log('postData===>',postData)
// 将数据写入请求主体。
req.write(postData);
req.end();
const http = require('http');
let obj={
method: 'delete',
}
//http://nodejs.cn/api/http.html#http_http_request_url_options_callback
let req = http.request('http://localhost:8080/books/book/22',obj, res=>{
let result = '';
res.on('data',chunk=>{
result += chunk;
})
res.on('end',() => {
console.log('result ====>',result);
})
});
req.end();
Backend For Frontend (服务于前端的后端)
专门用于为前端业务提供数据的后端程序,这类程序的特点是不需要太强的服务器运算能力,但对程序的灵活性有较高的要求,这两个特点都正好和 nodejs 的优势相吻合,在 web 服务开发领域搭建一个 nodejs BFF 层是有很大的好处的。
对于 web 业务本身来说,nodejs 现在是最合适用来做 BFF 层的一门技术。有一个 nodejs BFF 层,能让前端有能力自由组装后台数据,这样可以减少大量的业务沟通成本,加快业务的迭代速度。同时前端工程师能自主决定前端与后台的通信方式,也让前端工程师有了更多的能力着手于 web 应用的性能优化。
const router = require('koa-simple-router')
//返回页面的
const controllers = require('./indexController');
const contro = new controllers();
//返回接口
const APIContributors = require('./APIController')
const apicontro = new APIContributors();
let controller = (app) => {
//返回页面
app.use(router(_ => {
//返回主页
_.get('/',contro.index())
_.get('/index',contro.index())
_.get('/es',contro.actionEs())
}))
//返回接口
app.use(router({
prefix: '/api' }, _ => {
//测试用
// _.get('/test',ctx =>{
// ctx.body = "hahahah"
// })
//获取图书
_.get('/books',apicontro.adminindex())
//添加图书页
// _.get('/books/book',contro.actionAddPage())
_.post('/books/book',apicontro.actionAdd())
}))
}
module.exports = controller;
let IndexBookModel = require('../models');
let indexBookModel = new IndexBookModel();
class APIContributors{
constructor(){
}
//获取图书
adminindex(){
return async function (ctx) {
let msg = await indexBookModel.getData();
//要前端渲染 将msg传给页面
ctx.body = msg;
}
}
//添加图书
actionAdd(){
return async function (ctx) {
// console.log(ctx.request.body)
try{
let msg = await indexBookModel.addData(ctx.request.body);
// console.log('msg',msg)
if(msg.code == 0){
// console.log(1)
//返回数据
ctx.body = msg;
}else{
ctx.body = '添加失败!'
}
}catch(err){
console.log('err',err)
}
}
}
}
module.exports = APIContributors;
const SafeRequest = require('../util/SafeRequest');
class IndexBookModel{
constructor(){
}
//获取数据
getData(){
let safeRequest = new SafeRequest('/books');
return safeRequest.fetch();
}
//处理图书
addData(opt){
let safeRequest = new SafeRequest('/books/book');
return safeRequest.fetch({
method: 'post',
params: opt
});
}
}
module.exports = IndexBookModel;
const config = require('../config')
const axios = require('axios');
class SafeRequest{
constructor(url){
this.baseUrl = config.baseURL,
this.url = url;
}
fetch(options){
// console.log(this.baseUrl + this.url)
let bookFetch = axios.get(this.baseUrl + this.url);
if(options){
console.log(options.params)
bookFetch = axios({
url: this.baseUrl + this.url,
method: options.method,
data: options.params
})
}
return new Promise((resolve, reject) =>{
let result = {
code:0,
message:'',
data:[]
}
bookFetch
.then(msg =>{
// console.log('msg====>',msg);
if(msg.data.code && msg.data.code == 0){
result.data = msg.data.data;
result.message = msg.data.message;
}else{
result.data = msg.data;
}
result.data = msg.data;
resolve(result);
})
.catch(err =>{
result.code = 1;
result.message = '与后台通信失败';
reject(result);
})
})
}
}
module.exports = SafeRequest;
const _ = require('lodash')
const path = require('path')
let config = {
"staticDir": path.join(__dirname, '..', 'assets'),
"templateDir": path.join(__dirname, '..', 'views')
}
if(process.env.NODE_ENV == 'development'){
let localPort = {
port: 8080,
baseURL:`http://localhost:8088`
};
_.assignIn(config, localPort)
}
if(process.env.NODE_ENV == 'production'){
let prodPort = {
port: 80
};
_.assignIn(config, prodPort)
}
module.exports = config;
axios的功能特点:
(一)在浏览器中发生XMLHttprequest请求;(二)在node.js中发生http请求;(三)基于promise API;(四)拦截请求和响应;(五)转换请求数据和响应数据;(六)自动转换JSON数据;(七)客户端支持防御XSRF;
Node学习(一)
Node学习(二)
Node学习(三)