master

分支 (4)

管理

管理

master

dev

dev-惠萍

dev-荣东

foodshare-web
/
writeNote.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>写文章</title>
  <link rel="stylesheet" href="bootStrap/css/bootstrap.css">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="js/jquery-1.12.4.js"></script>
  <script src="./bootStrap/js/bootstrap.js"></script>
  <script src="./layui/layui.js"></script>
  <script src="./js/wangEditor.js"></script>
  <script src="./js/vue.js"></script>
  <link rel="stylesheet icon" href="./img/egg.svg">
  <script src="./js/util.js"></script>
  <style>
    .layui-form-label {
      width: 100px;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 导航 -->
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <!-- <a class="navbar-brand" href="#">
                <img alt="food" src="...">
              </a>                     -->
          <a class="navbar-brand" href="#">美食分享平台</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="index.html"><span id="cart" class="glyphicon glyphicon-home"></span>&nbsp网站首页</a></li>
            <li><a href="#"><span id="cart" class="glyphicon glyphicon-grain"></span>&nbsp菜谱专栏</a></li>
            <li><a href="#"><span id="cart" class="glyphicon glyphicon-send"></span>&nbsp日常分享</a></li>
            <li><a href="#"><span id="cart" class="glyphicon glyphicon-edit"></span>&nbsp写笔记</a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" v-show="user==''">登录</a></li>
            <li><a href="#" v-show="user==''">注册</a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false" v-show="user!=''">{{user.username}} <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">基本信息</a></li>
                <li><a href="#">我的笔记</a></li>
                <li><a href="#">收藏夹</a></li>
                <li><a href="#">关注用户</a></li>
              </ul>
            </li>
            <li><a href="#" v-show="user!=''">退出</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <!-- 笔记 -->
    <div class="container">
      <form class="layui-form" id="myform">
        <div class="layui-form-item">
          <label class="layui-form-label">文章标题</label>
          <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入文章标题(20字以内)"
              autocomplete="off" class="layui-input" style="width: 600px; ">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">笔记类型</label>
          <div class="layui-input-block" style="width: 600px;">
            <select name="notetype" id="notetype" lay-verify="required">
              <option value=""></option>
              <option :value="t.tid+','+t.typeName" v-for='t of typeList' :key="t.tid">{{t.typeName}}</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">笔记属性</label>
          <div class="layui-input-block">
            <input type="checkbox" name="uistop" value="1" title="置顶">
            <input type="radio" name="isyc" title="原创" value="原创" checked>
            <input type="radio" name="isyc" title="转载" value="转载">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">展示图片</label>
          <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">
              <i class="layui-icon">&#xe67c;</i>浏览图片
            </button>
            <br>
            <img id="pic" src="img/f4.jpeg" style="width:160px;height:160px; margin-top: 10px;" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">文章内容</label>
          <div class="layui-input-block">
            <div id="div1" style="width: 1000px; margin-top: 20px;">

            </div>
          </div>
        </div>


        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo" id="sub" @click="getInfo()">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>

        <!--Layui图片上传时在服务器中的名字 -->
        <input type="hidden" id="pic_name" name="pic_name" value="f4.jpeg" />
      </form>
    </div>
  </div>

  <script type="text/javascript">
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          user: '',
          typeList: '',
        }
      },
      methods: {
        //提交表单信息
        getInfo() {
          let that = this ;
          //let formData = $("#myform").serialize();

         let title=$("#myform input[name=title]").val();
         let notetype=$("#notetype option:selected").val();
         let uistop =$("#myform input[name=uistop]:checked").val()==undefined?0:1;
         let isyc=$("#myform input[name='isyc']:checked").val()
         let pic=$("#pic_name").val();
         let contentHtml = editor.txt.html();
         let contentText= editor.txt.text().substring(0,50);

          // console.log(title,notetype,uistop);

          if(title=='' || notetype=='' ){
            layuiMsg("请先填写信息");
            return;
          }

          if(contentText == ""){
            layuiMsg("请填写文章内容");
            return;
          }

          let param={
            title:title,
            notetype:notetype,
            uistop:uistop,
            isyc:isyc,
            pic:pic,
            contentHtml:contentHtml,
            contentText:contentText,
            username:that.user.username
          }
          // console.log(param);

          $.ajax({
            url:'http://localhost:8080/foodShare/api/addNote.do',
            type:'post',
            dataType:'json',
            data:param,
            success:function(res){
              if(res.code==200){
                layuiMsg("提交成功");

                //写文章成功后跳转到个人空间
                let uid=that.user.userid;
                let uname=that.user.username;
                setTimeout(() => {
                  localStorage.setItem("UID",uid);
                  localStorage.setItem("uname",uname);
                  location.href='personal.html';
                }, 2000);

                return
              }
              location.href = "login.html";
            }

          })


        }
      },
      mounted() {
        let that = this;

        $.ajax({
          url: 'http://localhost:8080/foodShare/api/noteType.do',
          dataType: 'json',
          type: 'post',
          success: function (res) {
            if (res.code == 200) {
              that.typeList = res.data
            }
            // console.log(res.data);
          }
        })

        //验证用户登录
        $.ajax({
          url: 'http://localhost:8080/foodShare/admin/checkJwt.do',
          dataType: 'json',
          type: 'post',
          beforeSend: function (xhr) {
            // 使用请求头的方式传递
            xhr.setRequestHeader("Authorization", localStorage.getItem("token"))
          },
          success: function (res) {
            if (res.code == 200) {
              that.user = res.data;
              // console.log(res.data);
              return;
            }

            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg('用户信息失效,请重新登录!');

              setTimeout(function () {
                location.href = "login.html";
              }, 3000);

            });
          }
        })

        //设置网页title
        document.title='美食笔记';
      },
    })

  </script>


  <script type="text/javascript">
    //layui
    layui.use('form', function () {
      var form = layui.form;

      //监听提交
      form.on('submit(formDemo)', function (data) {
        //layer.msg(JSON.stringify(data.field));
        //layer.msg('提交成功');
        return false;
      });
    });
  </script>

  <script type="text/javascript">
    layui.use(['jquery', 'table', 'layer', 'form', 'upload'], function () {
      //获取各模块的实例
      var $ = layui.jquery;
      var table = layui.table;
      var layer = layui.layer;
      var form = layui.form;
      var upload = layui.upload;

      //上传接口
      var uploadInst = upload.render({
        elem: '#test1',				//绑定浏览文件元素
        url: 'http://localhost:8080/foodShare/api/LayuiImg.do',		//实现上传功能的服务器端程序
        accept: 'file',				//设置允许上传的文件类型
        // bindAction : '#btn_ok', 		//绑定提交上传的按钮
        exts: 'jpg|png|jpeg',				//设置允许上传的文件后缀
        size: 10000,					//设计允许上传文件的大小，单位：KB
        field: "uploadfile",			//绑定上传控件的字段名，便于服务器获取上传文件
        auto: true,					//设置自动上传
        // bindAction: '#sub',
        done: function (res) {			//上传成功的回调
          //res参数：服务器响应回来的数据，可以封装为responseData对象
          // console.info(res) ;
          //$("#pic").prop("src","${pageContext.request.contextPath}/file/tx/"+res.data) ;
          console.log(res);
          //在图片上传成功后的回调中设置图片名隐藏域中的值
          $("#pic_name").val(res.data);
          //上传成功后，隐藏按钮，防止上传多次
          $("#btn_ok").hide();
          //  layer.msg('上传成功');
        },
        error: function () {			//上传失败的回调
          //请求异常回调
          layer.msg('图片上传失败');
        },
        choose: function (obj) {		//选择文件后的回调
          obj.preview(function (index, file, result) {
            // console.log(index); 	//得到文件索引
            // console.log(file); 	//得到文件对象
            // console.log(result); 	//得到文件base64编码，比如图片

            //显示图片
            $("#pic").prop("src", result);
          });

          //显示提交按钮
          $("#btn_ok").show();
        }
      });
    });
  </script>

  <script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')

    // 配置菜单栏，设置不需要的菜单
    editor.config.excludeMenus = [
      'emoticon',
      'video'
    ]

    editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M

    // 配置 server 接口地址
    editor.config.uploadImgServer = 'http://localhost:8080/foodShare/api/wangImg.do';

    editor.config.uploadFileName = 'attach'


    editor.create()
  </script>

</body>

</html>