项目记录--
这里写目录标题
- ejs项目
- 公司官网管理系统 前后台完整内容发布网站
- jq开发后台项目
-
- php wordpress 安装
- hlsOA(17年项目--nw.js--js-phpstudy)
-
- 数据库
- uniapp 小程序-uview
-
- 监听页面滚动
- 如何理解通用后台
-
- 常用ui框架
- 常用框架
- 通用的插件
- 基于项目通用
ejs项目
DOM操作
---------------DOM与JQ对象转换
JQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）
--------------DOM-->JQ
var v = document.getElementById(“v”);//得到DOM对象
var $v = $(v);转成JQuery对象
--------------JQ-->DOM
var v = $("v")[0];转换为DOM对象
---------------图片放大功能,带关闭按钮;点击出现,点击关闭关闭
alertBigImg(e){
---------创建div,img,i元素
---------e.target点击元素的src属性
let popEle=document.createElement("div")
let imgWrap=document.createElement("div")
let img=document.createElement("img")
let i=document.createElement("i")
popEle.className="wrap-popup-img";
img.className="img-popup";
i.className="el-icon-close close-img-wrap";
img.src=e.target.getAttribute("src");
popEle.append(imgWrap);
imgWrap.append(img);
imgWrap.append(i);
document.body.append(popEle);
document.querySelector(".close-img-wrap").onclick=function(){
--------------remove DOM对象移除
document.querySelector(".wrap-popup-img").remove()
console.log("监听点击事件")
}
}
------------css
.wrap-popup-img{
position: fixed;
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
text-align: center;
background: rgba(0, 0, 0, 0.4);
z-index: 200;
padding-top: 50%;
>div{
position: relative;
top:-50%;
}
.img-popup{
position: relative;
}
i{
position: absolute;
top: 0;
color:#fff;
cursor: pointer;
font-size: 30px;
}
}
-------------------------获取当前页面的宽度
var winWidth = (document.querySelector("#app") as HTMLBodyElement)!.offsetWidth;
main.js >>manage.js>>
入口 main.js
-----------引入模板-------------
var render = require("./main.ejs"); // 页面总模板
var manager = require("./manage");
-----------声明模块全局变量-------------
var nodeList = null; // 存储所有id符合m-xxx的节点
var m_manager = null;
-------------事件响应声明--------------- 就像vue的methods 写一些方法 这里需要在绑定事件里面邦定先
var evtFuncs = {
}
-------------绑定事件------------------
var bindEvents = function () {
}
-------------自定义函数----------------传照片成功 失败等
var custFuncs = {
}
-------------子模块实例化---------------
var initMod = function () {
//在全局中声明
m_manager = manager(nodeList.grid, opts);
m_manager.init();
}
-------------一切从这开始--------------
var modNode = document.getElementById('platform-cnews');
loading.show(modNode);
runtime.authenticate() // 获取权限，如果触发401则会跳页
.then(custFuncs.initPageData) // 获取页面数据
.then(function () {
// 先将HTML插入body
loading.hide(modNode);
window.framesManager.showPage('platform/cnews', render({
auth: runtime.getAuthority() || {},
lang: runtime.getLanguage()
}));
// 找到所有带有id的节点，并将m-xxx-xxx转化成xxxXxx格式存储到nodeList中
nodeList = parsePage(modNode);
// 子模块实例化
initMod();
// 绑定事件
bindEvents();
}).otherwise(function (msg) {
runtime.pageRenderError(msg);
});
manage.js
---------------表格-----------------
//引入页面
var dialog = require("root/platform/cnews/createDialog");
//引入表格
var grid = require("plugin/module/grid");
//实例化表格
var initMod = function () {
m_grid = grid(nodeList.grid, option);
m_grid.init();
};
//这里开始的地方
var init = function (_data) {}
---------------暴露API------------------
//这个是引入的页面使用这个方法 m_manager.init();
that.init = init;
------事件响应声明 里 创建一个弹窗 dialog里面的是传下一个页面的参数---------
create: function () {
var m_dialog = dialog({
title: "新增模板",
btnText: "确定",
data: {
status: "1"
},
type: "add",
map: opts
});
m_dialog.show();
m_dialog.bind("submit", evtFuncs.submit);
},
绑定事件
var bindEvernts = function () {
addEvent(nodeList.create, "click", evtFuncs.create);
}
createDialog.js
opts是上个页面manage.js传的参数
module.exports = function (opts) {
引入页面 弹窗
var render = require("./create.ejs");
var dialog = require("plugin/dialog/dialog");
var config = {
title: opts.title,
boxHTML: render({
data: opts.data
}),
buttons: [{
"id": "ok",
"text": opts.btnText,
"type": "blue"
},
{
"id": "cancel",
"text": "关闭"
}
]
};
var that = dialog(config);
}
create.ejs
这个就是页面
node-name="dialogForm"
这是加了表单验证
var formVerify = require("plugin/util/formVerify");
----------------子模块实例化-------------------
var initMod = function () {
m_formVerify = formVerify(nodeList.dialogForm);
m_formVerify.init({
data: opts.data,
extraData: opts.type
});
}
formVerify: function (evt) {
var rv = evt.data;
if (!rv.yes) {
dialogManager.alert(rv.statusText);
return;
}
---------------------- fire 相当于向上manage传值 --------------------------------
// manage m_dialog.bind("submit", evtFuncs.submit);
that.fire("submit", {
result: rv.result,
type: rv.extraData
});
that.hide("ok");
},
----className—
className.add(nodeList.previewImg.parentNode, "hide");
-----sizzle ---------------------------------
获取 td 数组下面的 div 元素 集合
//头部最右侧固定
var files = sizzle('.td', nodeList.gridHeader);
each(files, function (item, idx) {
let childArr = sizzle(".text", item);
each(childArr, function (itm, id) {
var id = itm.getAttribute("data-field");
if (id == "operation") {
item.setAttribute("filed", "operation");
}
})
})
//表格冻结
setTimeout(function () {
var fileQu = document.querySelector(".m-grid").querySelector(".grid-cont").querySelector(".table").tBodies[0];
var fileTable = sizzle('td', fileQu);
each(fileTable, function (item, idx) {
let childArr = sizzle(".text", item);
each(childArr, function (itm, id) {
var id = itm.getAttribute("data-field");
if (id == "operation") {
item.setAttribute("filed", "operation");
}
})
})
}, 2000)
var $ = require("root/base/common/util/jquery-1.8.3.min.js").default
------------------------组件 each---------------------
---------------------elementUi -----tatble- 单选---------------------------------
html2canvas
绘图html页面并下载
gotoCanvas(){
document.body.style = "overflow: hidden;";
var width = this.$refs.filmWrapper&&this.$refs.filmWrapper.offsetWidth; //dom宽
var height = this.$refs.filmWrapper&&this.$refs.filmWrapper.offsetHeight; //dom高
// 解决图片模糊
var scale = 2;//放大倍数
var canvas = document.createElement('canvas');
canvas.width = width * 2;
canvas.height = height * 2;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
var context = canvas.getContext('2d');
context.scale(scale, scale);
//设置context位置，值为相对于视窗的偏移量负值，让图片复位(解决偏移的重点)
var rect = this.$refs.filmWrapper.getBoundingClientRect();//获取元素相对于视察的偏移量
context.translate(-rect.left, -rect.top);
html2canvas(this.$refs.filmWrapper, {
useCORS: true ,canvas: canvas,
}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
document.body.style = "overflow: visible;";
if (dataURL && dataURL.length > 0) {
this.isHideFilmWrapper = true;
this.imgUrl = canvas.toDataURL();
this.imgUrlAlt = "图片异常请刷新";
this.downImage()
}
});
},
downImage(){
var imgUrl=this.imgUrl;
var temName=this.datasName;
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(imgUrl.split(',')[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr]);
window.navigator.msSaveOrOpenBlob(blob, temName + '.' + 'png');
} else {
// 这里就按照chrome等新版浏览器来处理
// const a = document.createElement('a');
// a.href = imgUrl;
// a.setAttribute('download', temName);
// a.click();
this.download.downloadFile(temName,imgUrl);
}
},
公司官网管理系统 前后台完整内容发布网站
前台 主要由首页,列表页,详情页三部分组成
后台 首页 菜单管理 用户管理 新闻列表管理 招聘发布管理
菜单管理(对后台前台导航进行管理)
新闻列表管理(对新闻排序,删除,新增,编辑,等操作)
1.首页是php缓存页面,加速响应时间,提升服务性能,搜索引擎的SEO优化
2.mysqldump+crontab命令实现数据库的一键备份
3.后台的所有弹出层页面使用了第三方JS插件layer
4.计数器以及后台的弹出层,图片上传,后台所有提交功能使用了PHP+AJAX技术实现异步加载
表的设计
后台用户表cms_admin: admin_id username password lastlogintime email realname status KEY索引 username
菜单表cms_menu: menu_id name parentid m 模块 c 控制器 f方法 listorder 排序 state type
文章管理 主表 cms_news: news_id catid title username KEY索引 listorder
副表 cms_news_content: id news_id KEY(‘newsid’)根据索引主表的id来查
MVC 数据视图控制层 controller 里面login页面一个函数方法 index（）{return $this->display()}会出现View 里面Login里面index.html
ThinkPHP框架系统目录
Common:核心公共函数目录
Conf核心配置目录
Language:核心语言目录
Library:框架类目录 Think核心Think类库包目录
Mode : 框架应用模式目录
Tpl：系统模块目录
thinkphp.php框架入口文件 （文件index.php会引入 thinkphp.php 这个文件会引入各个模块的内容
地址index.php？m=home&c=index&a=add 在index控制器中找add方法
Home目录下 Controller indexdController。class 里面 写add方法 class IndexController extends Controller {
public function add（）{ echo ‘testadd’ } }
jq开发后台项目
1.//检测是否是空类型 start
function no_null(data){
if(data==null){
return ‘未知’;
}else{
return data;
}
}
2.//去除html标签start
function replaceHtml(str){
var dd=str.replace(//g,“”);
var dds=dd.replace(/ /g,“”);
return dds;
}
3.//判断是否是空对象 start
function isEmptyObject(e) {
var t;
for (t in e)
return !1;
return !0
};
4.//搜索颜色加深start
function brightenKeyWord(val,keyWord){
const Reg=new RegExp(keyword,‘i’);
if(val){
return val.replace(Reg,${keyWord});
}
}
5.//按最新时间排序
function dataOrder(data) {
var ul = $(‘.modelTextUl’);
var ux = [];
//console.log(lis.length);
//console.log(lis);
//循环提取时间，并调用排序方法进行排序
for(var i = 0; i < lis.length; i++) {
var tmp = {};
tmp.dom = lis[i];
tmp.date = new Date(data[i].replace(/-/g, “/”));
// //console.log(tmp.dom);
ux.push(tmp);
}
//数组排序，支持年的比较
ux.sort(function(a, b) {
var myData = new Date();
var year = myData.getYear();
if(a.date.getYear < year && b.date.getYear == year) {
return true;
}
return b.date - a.date;
});
// //console.log(ux);
//先移除原先顺序错乱的li内容
$(‘.modelTextUl’).empty();
//重新填充排序好的内容
for(var i = 0; i < ux.length; i++) {
// //console.log(ux[i].dom);
$(‘.modelTextUl’).append(ux[i].dom);
}
}
6//按最大下载量排序 start
function downloadOrder(data) {
var ul = $(‘.modelTextUl’);
var ux = [];
function sequence(a, b) {
return b.num - a.num;
}
//循环提取时间，并调用排序方法进行排序
for(var i = 0; i < lis.length; i++) {
var tmp = {};
tmp.dom = lis[i];
tmp.num = data[i];
ux.push(tmp);
}
ux.sort(sequence);
//先移除原先顺序错乱的li内容
$('.modelTextUl').empty();
//重新填充排序好的内容
for(var i = 0; i < ux.length; i++) {
$('.modelTextUl').append(ux[i].dom);
}
}
//按最大下载量排序 end
7 //按最大浏览量排序 start
function browseOrder(data) {
var ul = $(‘.modelTextUl’);
var ux = [];
function sequence(a, b) {
return b.num - a.num;
}
//循环提取时间，并调用排序方法进行排序
for(var i = 0; i < lis.length; i++) {
var tmp = {};
tmp.dom = lis[i];
tmp.num = data[i];
ux.push(tmp);
}
ux.sort(sequence);
console.log(ux.sort(sequence));
console.log(ux);
//先移除原先顺序错乱的li内容
$('.modelTextUl').empty();
//重新填充排序好的内容
for(var i = 0; i < ux.length; i++) {
$('.modelTextUl').append(ux[i].dom);
}
}
//按最大浏览量排序 end
8 //获取？后面的id 方法 start
function GetQueryString(name){
var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”);
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
9.//数字前面加零 start
function pad(num, n) {
var num=parseFloat(num);
var i = (num + “”).length;
while(i++ < n) num = “0” + num;
return num;
}
//数字前面加零 end
php wordpress 安装
首先下载phpstudy 下载地址http://phpstudy.php.cn/
phpstudy
1.其他选项 -->打开host
添加站点
127.0.0.1 my.wordpress.com
2.其他选项 -->打开 站点域名管理
网站域名 my.wordpress.com
网站 目录 D:\wwwroot\wordpress
新增
phpstudy就配置好了
wordpress 主题在该网站下载 https://cn.wordpress.org/download/
解压放到D:\wwwroot\wordpress该目录下
启动navicat localhost
打开后台管理系统http://my.wordpress.com/admin 的时候 会出现连接数据库
一般是 root 123456 用户名 密码输入后可以自动导入 wordpress 数据库
此时 http://my.wordpress.com http://my.wordpress.com/admin 前后台在本地都可以访问了
hlsOA(17年项目–nw.js–js-phpstudy)
//插入DOM
$(".add-datas").on("click",function(){
var htr = $(' 数据库
//添加数据
insert ="insert into hlsoa_kcgl_details("+namedata+") values("+valdata+");"; connection.query(insert,function(error, results, fields){
});
//删除数据
$(del_btn).click(function(){
layer.alert('您确定要删除此收银日志吗？', {
closeBtn: 1 // 是否显示关闭按钮
,anim: -1 //动画类型
,btn: ['确定删除','取消'] //按钮
,icon: 6 // icon
,yes:function(){
if(delStatus==0){
layer.msg("请选择您要删除的数据",{icon:7,time:1500,shade: 0.1});
}else{
try {
timeArr.map(function(time,key){
connection.query("delete from `"+data_table+"` where xsrq='"+time+"' and username='"+localStorage.username+"' and status="+status,function(error,results,fields){
if(error) layer.msg(error);
if(delStatus!=0){
layer.msg("删除成功",{icon:1,time:1500,shade: 0.1});
setTimeout(function(){
location.reload();
delStatus=0;
},300);
};
});
});
} catch(e) {
// statements
console.log(e);
};
};
}
,btn2:function(){
/*layer.msg('按钮2')*/
}
});
});
//修改数据库
$(".g-message input[type=button]").click(function(event) {
var passwordnew = $(this).prev().val();
var passwordold= $(this).prev().prev().val();
var oldpassdate="";
connection.query("select * from hlsoa_users where username='"+localStorage.username+"'and password='"+passwordold+"'",function(error, results, fields){
if(results.length>0){
if(passwordnew!=""){
connection.query("update hlsoa_users set password='"+passwordnew+"' where username='"+localStorage.username+"'",function(error, results, fields){});
layer.msg("修改成功",{icon:1,time:1500,shade: 0.1},function(){
location.href="login.html";
});
}else{
layer.msg("请输入新密码",{icon:7,time:1500,shade: 0.1})
}
// oldpassdate=results[0].password
console.log(passwordnew,passwordold,oldpassdate)
}else{
layer.msg("请确认旧密码是否正确",{icon:7,time:1500,shade: 0.1})
}
})
});
//查找数据库
$(".data-lists").on("keydown",".bind_keydown",function(event){
var event = event||window.event;
var keynum = (event.keyCode ? event.keyCode : event.which);
var spdm = $(this).html();
var obj= $(this);
if(keynum == 9||keynum==13){
connection.query("select * from `hlsoa_yxgl_ccp` where (type = 3 and `bm` ='"+spdm+"') or (type > 3 and `bm` ='"+spdm+"' and username='"+localStorage.username+"')",function(error, results, fields){
if(results.length>0){
for(var i =0;i<results.length;i++)
{
obj.css("border","1px solid #3385ff");
obj.parent("td").next().find("span").html(results[i].mc);
obj.parent("td").next().next().find("span").html('1');
obj.parent("td").next().next().next().find("span").html(results[i].dj);
obj.parent("td").next().next().next().next().find("span").html(results[i].dj);
}
}else{
if(obj.text()!=""){
layer.msg("您输入的商品编码有误",{icon:2,time:1500,shade: 0.1});
}else{
layer.msg("商品编码不能为空",{icon:7,time:1500,shade: 0.1});
};
obj.css("border","1px solid red");
obj.parent("td").next().find("span").html("");
obj.parent("td").next().next().find("span").html("");
obj.parent("td").next().next().next().find("span").html("");
obj.parent("td").next().next().next().next().find("span").html("");
return false;
}
//连表查询
connection.query("SELECT p2.fdname,xsrq,sum(xsje) as xsje from byzk_xs_pz left join byzk_users as p2 on p2.username = byzk_xs_pz.username group by xsrq", function (error, results, fields) {
if (error) throw layer.msg(error);
if(results.length > 0){
var html ="";
for(var i in datalist)
{
html +='+datalist[i].id+'" name=""> ';
html +=''+(i+1)+' ';
html +=''+datalist[i].fdname+' ';
html +=''+datalist[i].xsrq+' ';
html +=''+datalist[i].xsje+' ';
html +='10001')" href="javascript:;" title="删除"> 删除','article-add.html','10001')" href="javascript:;" title="编辑"> 编辑10001')" href="javascript:;" title="确认"> 确认 ';
$i = $i + 1;
}
$('#data_list').html(html);
}else{
}
});
uniapp 小程序-uview
监听页面滚动
uview组件链接: uview
onPageScroll(res) {
console.log(res,"页面滚动了")
if(res.scrollTop-70>0){
this.scrollTabber=true;
}else{
this.scrollTabber=false;
}
},
如何理解通用后台
vue-Element
vue3-Elementplus
Node-koa2
何为通用?
常用ui框架
Element AntD Mint Vant WeUi
常用框架
Vue React Angular Jquery
通用的插件
cookie swiper lodash UnderScore
基于项目通用
Antd-pro(基于react) Vue-Admin(基于vue2的后台解决方案) Egg (基于koa2,快速集成数据库,api接口)