Joyber 发布的文章

首先nginx1.8现在目前是没有安装lua模块,所以不能使用lua脚本,当前nginx -V显示如下

./configure --prefix=/usr/local/nginx --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx/nginx.pid --lock-path=/var/lock/nginx.lock --user=nginx --group=nginx --with-http_ssl_module --with-http_flv_module --with-http_stub_status_module --with-http_gzip_static_module --http-client-body-temp-path=/var/tmp/nginx/client/ --http-proxy-temp-path=/var/tmp/nginx/proxy/ --http-fastcgi-temp-path=/var/tmp/nginx/fcgi/

步骤:
一、安装LuaJIT

wget http://luajit.org/download/LuaJIT-2.0.0.tar.gz
tar zxvf LuaJIT-2.0.0.tar.gz 
cd LuaJIT-2.0.0
make 
make install PREFIX=/usr/local/lj2

ln -s /usr/local/lj2/lib/libluajit-5.1.so.2 /lib64/

二、安装 ngx_devel_kit 模块
https://github.com/vision5/ngx_devel_kit 下载 ngx_devel_kit-0.3.2.tar.gz 版本
https://codeload.github.com/vision5/ngx_devel_kit/tar.gz/refs/tags/v0.3.2
解压目录:/root/Downloads/ngx_devel_kit-0.3.2/

cd ../

tar zxvf ngx_devel_kit-0.3.2.tar.gz 

三、下载 lua-nginx-module 模块
https://codeload.github.com/openresty/lua-nginx-module/tar.gz/refs/tags/v0.10.24
解压目录:/root/Downloads/lua-nginx-module-0.10.24

四、下载 lua-cjson
https://codeload.github.com/mpx/lua-cjson/tar.gz/refs/tags/2.1.0

make 
make install

make 的时候报错 lua.h : No such file or directory 找不到lua.h,这个文件是在lua的安装路径include下,使用了自定义安装,所以找不到,需要将c的include环境变量路径上加上lua的include目录

vim /etc/profile.d/lua.sh
#将下面的内容添加到文件保存

LUA_INCLUDE_PATH="/usr/local/lj2/include/luajit-2.0/"
## for C compiler
C_INCLUDE_PATH=$C_INCLUDE_PATH:$LUA_INCLUDE_PATH
## for Cpp compiler
CPLUS_INCLUDE_PATH=$CPLUS_INCLUDE_PATH:$LUA_INCLUDE_PATH
export C_INCLUDE_PATH
export CPLUS_INCLUDE_PATH

四:下载nginx 1.8的安装包,使用原来的参数重新编辑,并加上新的模块参数

#备份nginx配置文件
cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak


./configure --prefix=/usr/local/nginx --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx/nginx.pid --lock-path=/var/lock/nginx.lock --user=nginx --group=nginx --with-http_ssl_module --with-http_flv_module --with-http_stub_status_module --with-http_gzip_static_module --http-client-body-temp-path=/var/tmp/nginx/client/ --http-proxy-temp-path=/var/tmp/nginx/proxy/ --http-fastcgi-temp-path=/var/tmp/nginx/fcgi/  --add-module=/root/Downloads/ngx_devel_kit-0.3.2/ --add-module=/root/Downloads/lua-nginx-module-0.9.20

五:创建nginx配置文件 free_waf.conf
将宝塔的free_waf模块相关文件打包 /www/server/free_waf 目录
放到服务器相同目录中:/www/server/free_waf

cd /etc/nginx/conf.d
vim free_waf.conf

#内容如下: 


lua_shared_dict spider 20m;
lua_shared_dict free_waf 20m;
lua_shared_dict free_waf_drop_ip 10m;
lua_shared_dict free_waf_drop_sum 10m;
lua_package_path "/www/server/free_waf/?.lua";
init_by_lua_file  /www/server/free_waf/init.lua;
access_by_lua_file /www/server/free_waf/waf.lua;

nginx.conf http块中原本的 include /etc/nginx/conf.d/*.conf; 会加载我们的 free_waf.conf 配置

nginx -t 不报错即说明lua脚本正常支持了

如果报错 'cjson' 找不到的话,说明 lua-cjson 没有安装, 如果安装了重新SSH发现还是报这个错,可以手动处理一下

#报错:


#处理:
find /usr/local/ -name 'cjson*'
##返回路径
/usr/local/lj2/lib/lua/5.1/cjson.so
##设置软连接
ln -s /usr/local/lj2/lib/lua /usr/local/lib/lua

六:改造网站配置已使应用正常使用lua功能
创建日志目录:config.json中配置的路径

mkdir /www/wwwlogs/free_waf_log -p

编辑网站域名:/www/server/free_waf/domains.json
编辑站点配置:/www/server/free_waf/site.json

防火墙程序:
git@e.coding.net:tell520/tell/free_waf.git
管理配置程序:
git@e.coding.net:tell520/tell/free_waf_web.git

可能需要前置学习【TypeScript】小满TypeScript基础教程全集(完结)

TypeScripts配置文件参数讲解:
https://www.bilibili.com/video/BV1wR4y1377K?p=19

B站:小满 《 Vue3 + vite + Ts + pinia + 实战 + 源码 +electron》

23章:css里面也可以使用v-bind绑定setup中定义的变量

<script setup>
import {ref} from 'vue'
const color = ref('red')
</script>
<style>
.a {
 background: v-bind(color)
}
</style>

21章-2:animate.css 动画CSS类库
https://animate.style/

21章-3:gsap动画插件:
https://greensock.com/gsap/

24章:mitt插件可实现事件派发与订阅功能,实现兄弟节点通信

npm install mitt -S

26章:自动import
https://github.com/antfu/unplugin-auto-import

28章:自定义hooks
提到 VUEUSE库,已经做好了很多的功能
https://vueuse.org/

这个代码可以生成一个81的对象数组

Array.apply(null, {length: 81}).map((_,index)=>{return {id: index, number: (index % 9) + 1} })

千锋前端Vue3.0 + Electron快速入门视频教程,基于Vue3.0+Electron 19桌面混合开发项目实战教程
https://www.bilibili.com/video/BV1FP4115739/?p=38&spm_id_from=pageDriver&vd_source=c9b3de14b342c2afe5a988c2a9c40237

用到的一些工具:

  • 类似less\sass的CSS高级语言:stylus
  • 监听项目文件更改后重启项目命令的工具:nodemon
  • VUE3推荐的类似webpack的脚手架工具: vite2
  • VUE3推荐的state全局存储库和状态管理插件:pinia
  • VUE3推荐的路由插件:vue-router
  • electron窗口状态保持(大小、位置):electron-win-state
  • JS实用工具包:lodash
  • localStorage/sessionStorage操作插件:store2

vue3状态管理方法:

  • 使用内置的 provide、inject 方法,在父组件里定义一个依赖,在子组件里可以引用注入这个依赖,实现状态同步
  • 使用pinia状态管理插件

vue3可以在script标签中加个setup属性,就可以直接在script标签里写VUE3代码
所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中

<script setup>
    import { inject } from 'vue'
    import Child from './Child.vue'
    const {isShow} = inject('appState')
</script>
<template>
    <div>
        {{isShow}}
        <Child/>
    </div>
</template>