前端项目实战汇总

前端：layui+layuimini

一：项目结构

•  复制layuimini项目里的index.html文件到项目主目录下
• page目录用于存放自己编写的页面

二：注释掉index.html的手机菜单导航栏

 三：修改导入依赖项目的路径

 

 四：关键一步，修改菜单栏

• layuimini/api/init.json
• 删除多于的导航栏，修改为自己想要的导航栏
• 修改导航栏跳转的html文件和展示的icon

 五：前端跨域问题处理

• 下载解压nginx
• 修改/conf/目录下的nginx.conf
• 启动或关闭前端项目：命令行cd到nginx解压目录输入nginx启动，nginx -s puit关闭

 六：前端页面通过Cookles实现定时过期

• 从登录接口获取token添加过期时间写入到Cookles
• 通过js代码实现实时检测，过期则跳转登录页面重新登录

 

 

 七：前端实现访问接口

layui.use(['form'], function () {
    var form = layui.form,
        layer = layui.layer,
        $ = layui.$;
    //监听提交
    form.on('submit(saveBtn)', function (data) {
        console.log(data)
        var data1 = JSON.stringify(data.field);

        var index = layer.alert(JSON.stringify(data.field), {
            title: '最终的提交信息'
        }, function () {

            $.ajax({
   　　　　　 type: "post",
   　　　　　　dataType: "json",
  　　　　　　 url: "http://127.0.0.1:18088/layui/update",
   　　　　　　data: data1,
   　　　　　　contentType: 'application/json;charset=UTF-8',
   　　　　　　success: function (data) {
      　　　　console.log(data+'添加成功');
      　　　　layui.use(['layer', 'form'], function(){
                      var layer = layui.layer
                      ,form = layui.form;
                      layer.msg('操作成功');
                    });
   },
   　　　　　　error: function (msg) {
      　　　　console.log("接口异常：" + msg);
      　　　　layui.use(['layer', 'form'], function(){
                      var layer = layui.layer
                      ,form = layui.form;
                      layer.msg('操作失败，请检查异常！');
                    });
   }
})

            // 关闭弹出层
            layer.close(index);

            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);

        });

        return false;
    });

});