前后端一体化应用
这个项目介绍了一种代码开发方面的探索的演示
中后台项目中,带有Node的项目,我们总是维护两个js项目:Node项目+View项目
两者之间通过Api地址链接,新的一体化应用,通过特殊的__service__作用域,可以将两者代码写在一起。所有在__service__
内部的代码都会在服务器执行
更多
使用lix一体化开发,过去我们需要在两个项目里维护代码,现在可以前后端js代码写在一起。
__service__
内部的代码都会在服务器端执行
所有在实现方式
通过webpack插件,将源码,提取到两个项目中
准备工作
npm i node-lix
1、在webpack配置文件里添加插件(view项目)
const lix = moduleexports = entry: index: 'XXXX' output: publicPath: '/' module: rules: plugins: // 提取的服务端code文件保存到的位置 { return `/../service` } // 浏览器请求这个函数对应的http的地址 { if annotation return `/api_service//` else return `/api_service/` } // 提取的服务端code保存的文件名 { return hash + '.js' } ;
2、创建服务端代码里的this对象(node项目)
__service__包的函数的上下文都在this对象上扩展
我们在Node项目里创建一个类,用于远端调用代码代码的this对象
以midway例如:
; @ { // run sql code }
3、中间层(链接http地址和保存的code文件)(node项目)
接下来你需要根据你的项目情况,写一个中间层,保证node服务,接收http地址,可以正确的去执行保存的函数。
例如 midway 用可以这样写
;; @@ @ thisService: IThis; @ @ async : Promise<void> await super;
4、创建前端 函数(view项目)
;// 引入第二步构造的服务端this对象,可以获得完整的IDE语法提示 { return : any { // @ts-ignore if service instanceof Promise // @ts-ignore return service; else // @ts-ignore return Promise; };}const __service__ =
保存在view项目里,名称需要叫__service__.js
或者__service__.ts
如果不使用ts类型,这一步可以省略
使用
react的Demo
import React, {useState, useEffect} from 'react';
import {__service__} from "@/__service__";
export default function () {
const [data, setData] = useState([]);
return <div>
<div onClick={async () => {
const data = await __service__(function () {
return this.sql('select * from XXX');
});
setData(data)
}}>
获取数据
</div>
<div>
{
data.map(item => {
return <p>{item.name}</p>
})
}
</div>
</div>
}
vue的Demo
获取数据
注意事项
1、__service__
第一个参数是一个函数,必须使用function(){}函数表达式,不能使用箭头函数()=>{},因为es标准里箭头函数使用外部的this的对象。
2、在__service__
内的code里执行console.log是推荐的调试方法,console.log的执行,会输出到浏览器端的控制台。但是线上环境建议关闭,否则容易输出敏感内容,关闭方法可以在准备工作第三步配置,类似下面这样
const returnData = await apiFuncdefault; ifenv==='prod' // 添加执行函数捕获的console内容(注意线上环境要返回[]空数组) returnData'console' = ; ctxbody = returnData;
3、内外作用域是隔离的,不要使用作用域链获取外部的变量
async { const id = 1;// 外部作用域变量 const data = await ; }
async { const id = 1;// 外部作用域变量 const data = await ; }
其他
自定义header
// 在项目入口文件,通过初始化方法,可以指定header; lix;
钩子
afterCreateCode
每一个函数生成代码写入文件之前触发
const lix = moduleexports = entry: index: 'XXXX' output: publicPath: '/' module: rules: plugins: // 提取的服务端code文件保存到的位置 { return `/../service` } // 浏览器请求这个函数对应的http的地址 { if annotation return `/api_service//` else return `/api_service/` } // 提取的服务端code保存的文件名 { return hash + '.js' } { // fileName文件,functionName函数名称,code生成的最终code } ;