2023.3.22学习日志

一.今日完成任务

1. 公司页面的增删改

2. 公司页面的图片上传和富文本

3. 会员管理，产品管理，产品种类管理，新闻管理等页面的导航栏查询功能，以及模糊查询

二.主要js代码

// 创建渲染实例

page({});

form.on('submit(sreach)', function (data) {

data = data.field;

console.log(data);

page(data);

return false;

})

function page(data) {

table.render({

elem: '#table'

, url: '/back/user/findAll' // 此处为静态模拟数据，实际使用时需换成真实接口

, page: true

, where: data

, parseData: function (res) { //res 即为原始返回的数据

console.log(res);

return {

"code": res.code, //解析接口状态

"msg": res.msg, //解析提示文本

"count": res.count, //解析数据长度

"data": res.data //解析数据列表

};

}

, cols: [[

{field: 'id', fixed: 'left', width: 76, title: 'ID', sort: true}

, {field: 'username', width: 76, title: '用户名'}

, {

field: 'email',

title: '邮箱 <i class="layui-icon layui-icon-email"></i>',

hide: 0,

width: 150,

edit: 'text'

}

, {field: 'sex', width: 76, title: '性别', sort: true}

, {field: 'phone', title: '电话'}

, {field: 'birthday', title: '生日'}

, {

field: 'enable', title: '状态', width: 98, templet: function (d) {

return d.enable == 1 ? '启用' : '禁用';

}

}

, {fixed: 'right', title: '操作', align: 'center', width: 220, minWidth: 125, toolbar: '#barDemo'}

]]

})

}

2.图片上传以及富文本

let imgHref = '';

// setWE();

// 创建富文本

// function setWE() {

const E = window.wangEditor;

const editor = new E('#content');

const editUrl = '/upload';//服务器访问地址

editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片

editor.customConfig.uploadImgServer = editUrl; // 上传图片到服务器

editor.customConfig.showLinkImg = false;// 隐藏“网络图片”tab

//配置属性名称，绑定请求的图片数据

editor.customConfig.uploadFileName = 'wangEditorUrl';

editor.customConfig.withCredentials = true;

// 将图片大小限制为 5M

editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;

editor.customConfig.uploadImgHooks = {

success: function (xhr, editor, result) {

// 图片上传并返回结果，图片插入成功之后触发

// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果

console.log(result);

},

// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置

// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）

customInsert: function (insertImg, result, editor) {

// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）

// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：

let url = result.data;

console.log(url);

insertImg(url)//回显到富文本里面

// result 必须是一个 JSON 格式字符串！！！否则报错

}

};

//富文本创建

editor.create();

//常规使用 - 普通图片上传

var uploadInst = upload.render({

elem: '#test1'

, url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。

, before: function (obj) {

//预读本地文件示例，不支持ie8

obj.preview(function (index, file, result) {

$('#demo1').attr('src', result); //图片链接（base64）

});

}

, done: function (res) {

//如果上传失败

if (res.code > 0) {

return layer.msg('上传失败');

}

console.log(res);

imgHref = res.data;

//上传成功的一些操作

//……

$('#demoText').html(''); //置空上传失败的状态

}

});