使用nuxt,express,mysql,nginx创建个人博客系列-15

266
2020-01-24 18:37
10 个月前

添加 articles_edit.html文件
目录:server/admin/views/articles_edit

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <% include header.ejs%>
    <title>articles_edit</title>
    <style>
      .imgSrc{
        width:150px;
        height:150px;
        background-position:center;
        background-repeat: no-repeat;
        background-size:contain;
        <% if(defaultForm.articles_img!=""){ %>
          background-image:url('<%= defaultForm.articles_img%>')
        <% } %>
      }
    </style>
</head>
<body>
  <% include nav.ejs%>
    <div class="container mt-3">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="row">
              <div class="col-md-12 mb-3">
                <a href="<%= module_dir%>/articles" class="btn btn-link btn-lg btn-block">返回文章列表</a>
              </div>
              <div class="col-md-12 mb-3">
                <label for="firstName">文章名称</label>
                <input type="text" class="form-control" id="firstName" value="<%= defaultForm.title%>" placeholder="请输入文章标题名称">
                <div class="invalid-feedback">
                  Valid first name is required.
                </div>
              </div>
              <div class="col-md-12 mb-3">
                  <label for="keyword">文章关键字</label>
                  <input type="text" class="form-control" id="keyword" value="<%= defaultForm.keyword%>" placeholder="请输入文章网页关键字">
                </div>
              <div class="col-md-12 mb-3">
                <label for="category">文章类型</label>
                <select class="form-control form-control-lg" id="category">
                  <%categorys.forEach((item)=>{%>
                    <option value="<%= item.id%>" <%= item.id == defaultForm.category_id ? "selected": "" %>><%=item.name%></option>
                  <%})%>
                </select>
              </div>
              <div class="col-md-12 mb-3">
                  <label for="tag">标签类型</label>
                  <select class="form-control form-control-lg" id="tag">
                    <%tags.forEach((item)=>{%>
                      <option value="<%= item.id%>" <%= item.id==defaultForm.tag_id ? "selected": "" %> ><%=item.name%></option>
                    <%})%>
                  </select>
              </div>
              <div class="col-md-12 ">
                  <div class="row">
                      <div class="col-md-6 mb-3">
                          <label for="tag">图片</label>
                          <input type="file" accept="image" name="file" class="form-control-file" id="exampleFormControlFile1">
                          <button type="button" id="delete_img" class="mt-3 btn btn-primary btn-lg btn-block">删除图片</button>
                        </div>
                      <div class="col-md-6 mb-3">
                          <label for="tag">图片</label>
                          <div class="imgSrc"></div>
                      </div>
                  </div>
              </div>
              <div class="col-md-12 mb-3">
                  <label for="md">文章说明</label>
                  <textarea id="introduction" class="form-control" style="height:100px;"  placeholder="请输入描述"><%= defaultForm.introduction%></textarea>
              </div>
              <div class="col-md-12 mb-3">
                  <label for="md">内容</label>
                    <textarea id="md" class="form-control" style="height:800px;"  placeholder="请输入Markdown代码"><%= defaultForm.content%></textarea>
              </div>
              <div class="col-md-12 mb-3">
                  <label for="html">显示的样式</label>
                  <div id="html">
                    <%- defaultForm.content_html%>
                  </div>
              </div>
              <div class="col-md-12 mb-3">
                <button type="button" name="" id="btn-submit" class="btn btn-dark btn-lg btn-block">提交</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
<script>
  var module_dir = "<%= module_dir%>";
  var id = "<%= id%>"
  var end_tag_id = "<%= defaultForm.tag_id%>";
  var end_category_id = "<%= defaultForm.category_id%>"
  var articles_img = "<%= defaultForm.articles_img%>"
</script>
<script>
  $(function () {
    $('#btn-submit').on('click', function () {
      var title = $('#firstName').val();
      var content = $('#md').val();
      var category = $('#category').val();
      var tag = $('#tag').val();
      var introduction = $('#introduction').val();
      var keyword = $('#keyword').val();
      if (title && tag && category) {
        $axios.post(`${module_dir}/articles/edit`, {
          id,
          pushForm:{
            title,
            content,
            category,
            tag,
            introduction,
            articles_img,
            keyword,
            end_category_id,
            end_tag_id
          }
        }).then(resp => {
          if (resp.status == 1) {
            end_tag_id = tag;
            end_category_id = category
            window.location = `${module_dir}/articles`
            // alert('保存成功')
          }
        })
      } else {
        alert('请输入文章名称,分类,标签')
      }
    })
   //markdown语法
    $('#md').on('input',function(){
      let val = $(this).val();
      document.getElementById('html').innerHTML = marked(val);
    })
    $('#delete_img').on('click',function(){
      articles_img = "";
      $('.imgSrc').css('background-image',`url("")`)
    })
    $('#exampleFormControlFile1').on('change',function(e){
      e = e || window.event
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      let picFile = files[0];
      let formData = new FormData();
      formData.append('file',picFile,picFile.name)
      let url = getObjectURL(picFile);
      $('.imgSrc').css('background-image',`url(${url})`)
      //上传图片
      axios({
        method:'post',
        url:`${module_dir}/upload/file`,
        data:formData,
        headers:{
          'Content-Type': 'multipart/form-data'
        }
      }).then(resp=>{
        let {data} = resp;
        if(data.status==1){
          articles_img = data.data.Location;
        }
      })
    })
    var getObjectURL = function(file) {
      var url = null;
      if (window.createObjectURL != undefined) { // basic  
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) { // mozilla(firefox)  
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome  
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }
  })
</script>
</html>

篇幅有限,上面有个/upload/file的接口我会放在下章节说。
网页效果如下所示:
articles_edit.html


上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-14
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-16